From 81499374b60f47cba6878a401c886911a636b8cb Mon Sep 17 00:00:00 2001
From: Artur Oliveira <artur.oliveira@hittelco.com>
Date: Tue, 16 Dec 2025 09:30:35 -0300
Subject: [PATCH] =?UTF-8?q?feat(login):=20implementar=20altern=C3=A2ncia?=
 =?UTF-8?q?=20de=20visibilidade=20de=20senha=20-=20Implementa=20funcionali?=
 =?UTF-8?q?dade=20de=20mostrar/esconder=20senha=20na=20p=C3=A1gina=20de=20?=
 =?UTF-8?q?login=20-=20Integra=20=C3=ADcones=20Eye=20e=20EyeOff=20para=20o?=
 =?UTF-8?q?=20controle=20de=20visibilidade=20-=20Adiciona=20anima=C3=A7?=
 =?UTF-8?q?=C3=A3o=20'fade-up'=20=C3=A0=20p=C3=A1gina=20de=20login=20-=20D?=
 =?UTF-8?q?efine=20novas=20classes=20de=20estilo=20para=20o=20campo=20de?=
 =?UTF-8?q?=20senha=20e=20bot=C3=A3o=20de=20toggle=20-=20Configura=20a=20r?=
 =?UTF-8?q?egra=20'@typescript-eslint/semi'=20no=20ESLint=20-=20Adiciona?=
 =?UTF-8?q?=20keyframes=20e=20anima=C3=A7=C3=A3o=20'fade-up'=20ao=20Tailwi?=
 =?UTF-8?q?nd=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontned/eslint.config.js    |  1 +
 frontned/src/pages/Login.tsx | 22 +++++++++++++++++++---
 frontned/tailwind.config.js  |  9 +++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/frontned/eslint.config.js b/frontned/eslint.config.js
index c0418b7..c1c335f 100644
--- a/frontned/eslint.config.js
+++ b/frontned/eslint.config.js
@@ -25,6 +25,7 @@ export default defineConfig([
       'react/jsx-indent': ['error', 4],
       'react/jsx-indent-props': ['error', 4],
       'semi': ['error', 'always'],
+      '@typescript-eslint/semi': ['error', 'always'],
     },
   },
 ])
diff --git a/frontned/src/pages/Login.tsx b/frontned/src/pages/Login.tsx
index aca4b36..ab557fb 100644
--- a/frontned/src/pages/Login.tsx
+++ b/frontned/src/pages/Login.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 import { Layout } from "../components/Layout";
 import type { LoginProps } from "../types/Login";
+import { Eye, EyeOff } from "lucide-icons-react";
 
 export const Login = () => {
     const [form, setForm] = useState<LoginProps>({
         email: "",
         password: ""
     });
+    const [showPassword, setShowPassword] = useState<boolean>(false);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setForm({
@@ -15,6 +17,10 @@ export const Login = () => {
         });
     };
 
+    const handleShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
     useEffect(() => {
         console.log(form);
     }, [form]);
@@ -35,10 +41,10 @@ export const Login = () => {
                             className={Styles.input} 
                             onChange={handleChange}/>
                     </div>
-                    <div>
+                    <div className={Styles.inputWrapper}>
                         <label htmlFor="password" className={Styles.label}>Password:</label>
                         <input
-                            type="password"
+                            type={showPassword ? "text" : "password"}
                             id="password"
                             name="password"
                             placeholder="********"
@@ -46,6 +52,14 @@ export const Login = () => {
                             className={Styles.input}
                             onChange={handleChange}
                         />
+                        <button
+                            type="button"
+                            aria-label={showPassword ? "Hide password" : "Show password"}
+                            className={Styles.iconButton}
+                            onClick={handleShowPassword}
+                        >
+                            {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
+                        </button>
                     </div>
                     <button type="submit" className={Styles.button}>Login</button>
                 </form>
@@ -55,10 +69,12 @@ export const Login = () => {
 };
 
 const Styles = {
-    layout: "h-screen flex flex-col gap-4 justify-center",
+    layout: "h-screen flex flex-col gap-4 justify-center animate-fade-up",
     logo: "w-36 h-36 mx-auto mb-4",
     card: "w-96 p-8 shadow-lg rounded-lg border border-cardBorder bg-card",
     label: "block mb-2 text-md font-medium text-text",
+    inputWrapper: "relative",
     input: "bg-gray-50 border border-cardBorder text-text text-md rounded-lg outline-none block w-full p-2.5",
+    iconButton: "absolute right-3 top-1/2 text-text p-1 focus:outline-none",
     button: "w-full bg-accent p-2 rounded-md mt-4 text-white font-bold text-lg hover:bg-hover transition duration-150",
 };
\ No newline at end of file
diff --git a/frontned/tailwind.config.js b/frontned/tailwind.config.js
index 4d2eb44..6808447 100644
--- a/frontned/tailwind.config.js
+++ b/frontned/tailwind.config.js
@@ -15,6 +15,15 @@ export default {
         hover: '#D04A0F',
         accent: '#E95A1B',
       },
+      keyframes: {
+        'fade-up': {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        'fade-up': 'fade-up 300ms ease-out forwards',
+      },
     },
   },
   plugins: [],