add feature senha

andifes-isf · Oct 15, 2024 · 82f52a3 · 82f52a3
1 parent 42f992c
commit 82f52a3
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/public/images/eye_close.svg b/public/images/eye_close.svg
diff --git a/public/images/eye_open.svg b/public/images/eye_open.svg
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
@@ -1,8 +1,12 @@
 import { Helmet } from "react-helmet";
-import { Button, Checkbox, Image, InputLeftElement, InputGroup, Input, Flex, Box, Text } from "@chakra-ui/react";
+import { Button, Checkbox, Image, InputLeftElement, InputGroup, Input, Flex, Box, Text, InputRightElement } from "@chakra-ui/react";
+import { useState } from "react";
 import React from "react";
 
 export default function LoginPage() {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handlePasswordVisibility = () => setShowPassword(!showPassword);
   return (
     <>
       <Helmet>
@@ -23,19 +27,21 @@ export default function LoginPage() {
         <Image
           src="images/img_logo_idioma_sem.png"
           alt="Logoidiomasem"
-          h={{ md: "300px", base: "250px" }}
-          mb={{ md: "-50px", base: "-30px" }}
+          h={{ md: "350px", base: "250px" }}
+          mb={{ md: "-110px", base: "-30px" }}
           zIndex={1}
         />
         <Flex
           direction="column"
           alignItems="center"
+          justifyContent="center"
           bg="white"
           p={{ md: "40px", base: "20px" }}
           borderRadius="10px"
           boxShadow="md"
           w={{ md: "400px", base: "90%" }}
           zIndex={0}
+          h={{ md: "500px", base: "auto" }}
         >
           <InputGroup mb="20px">
             <InputLeftElement>
@@ -47,7 +53,20 @@ export default function LoginPage() {
             <InputLeftElement>
               <Image src="images/img_firrlock.svg" alt="Fi-rr-lock" h="24px" w="24px" />
             </InputLeftElement>
-            <Input placeholder="Senha" type="password" />
+            <Input
+              placeholder="Senha"
+              type={showPassword ? "text" : "password"}
+            />
+            <InputRightElement width="4.5rem">
+              <Button h="1.75rem" size="sm" variant="ghost" onClick={handlePasswordVisibility}>
+                <Image 
+                  src={showPassword ? "images/eye_open.svg" : "images/eye_close.svg"}
+                  alt={showPassword ? "Ocultar senha" : "Mostrar senha"}
+                  h="24px"
+                  w="24px"
+                />
+              </Button>
+            </InputRightElement>
           </InputGroup>
           <Checkbox mb="20px">Lembrar login</Checkbox>
           <Button colorScheme="blue" w="100%" mb="20px">Entrar</Button>