feat: In login internationalizing the error message, changing the sho…

…w and hide button. In buttonEf changing the parameters received.
Arquisoft · Mar 3, 2024 · e433266 · e433266
1 parent 6584587
commit e433266
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/webapp/public/locales/en/translation.json b/webapp/public/locales/en/translation.json
@@ -16,5 +16,8 @@
         "username": "Username",
         "password": "Password",
         "email": "Email"
+    },
+    "error": {
+        "login": "An ERROR occurred during login"
     }
 }
diff --git a/webapp/public/locales/es/translation.json b/webapp/public/locales/es/translation.json
@@ -15,5 +15,8 @@
         "username": "Nombre de usuario",
         "password": "Contraseña",
         "email": "Correo electrónico"
+    },
+    "error": {
+        "login": "Ocurrió un ERROR en el login"
     }
 }
diff --git a/webapp/src/components/ButtonEf.jsx b/webapp/src/components/ButtonEf.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Button } from "@chakra-ui/react";
 import '../styles/AppView.css';
 
-const ButtonEf = ({ text, onClick }) => {
+const ButtonEf = ({ variant, colorScheme, text, onClick }) => {
     return (
-      <Button type="submit" variant="solid" colorScheme="blue" margin={"10px"} className={"custom-button effect1"} onClick={onClick}>{text}</Button>
+      <Button type="submit" variant={variant} colorScheme={colorScheme} margin={"10px"} className={"custom-button effect1"} onClick={onClick}>{text}</Button>
     );
 };
 export default ButtonEf;
diff --git a/webapp/src/pages/Login.jsx b/webapp/src/pages/Login.jsx
@@ -1,5 +1,6 @@
 import { Center } from "@chakra-ui/layout";
-import { Heading, Input, Button, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, Text } from "@chakra-ui/react";
+import { Heading, Input, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, Text, IconButton } from "@chakra-ui/react";
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
 import axios, { HttpStatusCode } from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -42,7 +43,7 @@ export default function Login() {
                     <Center bgColor={"#FFA98A"} margin={"1vh 0vw"} padding={"1vh 0vw"} 
                         color={"#FF0500"} border={"0.1875em solid #FF0500"}
                         borderRadius={"0.75em"} maxW={"100%"} minW={"30%"}>
-                            <Text>Error</Text>
+                            <Text>{t("error.login")}</Text>
                     </Center> 
                 }
                 <Box minW={{md: "400px"}}>
@@ -57,14 +58,12 @@ export default function Login() {
                             <InputGroup>
                                 <InputLeftElement children={<ChakraFaLock color="gray.300" />}/>
                                 <Input type={showPassword ? "text" : "password"}  placeholder={t("session.password")}/>
-                                <InputRightElement width="4.5rem">
-                                    <Button h="1.75rem" size="sm" onClick={changeShowP}>{
-                                        showPassword ? "Hide" : "Show"
-                                    }</Button>
+                                <InputRightElement>
+                                    <IconButton h="1.75rem" size="sm" onClick={changeShowP} aria-label='Shows or hides the password' icon={showPassword ? <ViewOffIcon/> : <ViewIcon/>}/>
                                 </InputRightElement>
                             </InputGroup>
                         </FormControl>
-                        <ButtonEf text="Login" onClick={sendLogin}/>
+                        <ButtonEf variant={"solid"} colorScheme={"blue"} text="Login" onClick={sendLogin}/>
                     </Stack>
                 </Box>
             </Stack>