From f9e15c066befc7fcb4822f30f604354f2c93cac0 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 2 Sep 2025 20:44:36 +0000
Subject: [PATCH] Update background and add password visibility

Updated the background of the authentication page to a modern design without the previous grid effect. Added a password visibility toggle (eye icon) to the password and confirm password fields in the registration form.
---
 src/components/auth/RegisterFormFields.tsx | 69 ++++++++++++++++------
 src/pages/Auth.tsx                         | 16 ++---
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/src/components/auth/RegisterFormFields.tsx b/src/components/auth/RegisterFormFields.tsx
index f6ce716..fdb9d1f 100644
--- a/src/components/auth/RegisterFormFields.tsx
+++ b/src/components/auth/RegisterFormFields.tsx
@@ -1,6 +1,8 @@
 
+import { useState } from 'react';
 import { Input } from "@/components/ui/input";
 import { Label } from '@/components/ui/label';
+import { Eye, EyeOff } from 'lucide-react';
 
 interface RegisterFormFieldsProps {
   nome: string;
@@ -33,6 +35,9 @@ const RegisterFormFields = ({
   setConfirmaSenha,
   isLoading
 }: RegisterFormFieldsProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
   return (
     <>
       <div className="space-y-2">
@@ -82,27 +87,55 @@ const RegisterFormFields = ({
       </div>
       <div className="space-y-2">
         <Label htmlFor="senha">Senha</Label>
-        <Input
-          id="senha"
-          placeholder="Senha"
-          type="password"
-          value={senha}
-          onChange={(e) => setSenha(e.target.value)}
-          disabled={isLoading}
-          required
-        />
+        <div className="relative">
+          <Input
+            id="senha"
+            placeholder="Senha"
+            type={showPassword ? "text" : "password"}
+            value={senha}
+            onChange={(e) => setSenha(e.target.value)}
+            disabled={isLoading}
+            required
+            className="pr-10"
+          />
+          <button
+            type="button"
+            className="absolute inset-y-0 right-0 pr-3 flex items-center"
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            {showPassword ? (
+              <EyeOff className="h-4 w-4 text-gray-400" />
+            ) : (
+              <Eye className="h-4 w-4 text-gray-400" />
+            )}
+          </button>
+        </div>
       </div>
       <div className="space-y-2">
         <Label htmlFor="confirma-senha">Confirme a senha</Label>
-        <Input
-          id="confirma-senha"
-          placeholder="Confirme a senha"
-          type="password"
-          value={confirmaSenha}
-          onChange={(e) => setConfirmaSenha(e.target.value)}
-          disabled={isLoading}
-          required
-        />
+        <div className="relative">
+          <Input
+            id="confirma-senha"
+            placeholder="Confirme a senha"
+            type={showConfirmPassword ? "text" : "password"}
+            value={confirmaSenha}
+            onChange={(e) => setConfirmaSenha(e.target.value)}
+            disabled={isLoading}
+            required
+            className="pr-10"
+          />
+          <button
+            type="button"
+            className="absolute inset-y-0 right-0 pr-3 flex items-center"
+            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+          >
+            {showConfirmPassword ? (
+              <EyeOff className="h-4 w-4 text-gray-400" />
+            ) : (
+              <Eye className="h-4 w-4 text-gray-400" />
+            )}
+          </button>
+        </div>
       </div>
     </>
   );
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
index d30160b..5604194 100644
--- a/src/pages/Auth.tsx
+++ b/src/pages/Auth.tsx
@@ -3,7 +3,6 @@ import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Boxes } from "@/components/ui/background-boxes";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import LoginForm from '@/components/auth/LoginForm';
@@ -49,12 +48,10 @@ const Auth = () => {
 
   if (showForgotPassword) {
     return (
-      <div className="min-h-screen relative w-full overflow-hidden bg-gradient-primary flex items-center justify-center px-4">
-        <div className="absolute inset-0 w-full h-full bg-background z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
-        <Boxes />
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center px-4">
         
         <Link to="/" className="absolute top-4 left-4 z-30">
-          <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary-foreground/10">
+          <Button variant="ghost" size="sm" className="text-primary hover:bg-primary/10">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Voltar
           </Button>
@@ -68,20 +65,17 @@ const Auth = () => {
   }
 
   return (
-    <div className="min-h-screen relative w-full overflow-hidden bg-gradient-primary flex items-center justify-center px-4">
-      <div className="absolute inset-0 w-full h-full bg-background z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
-      
-      <Boxes />
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center px-4">
       
       {/* Botão para voltar à landing page */}
       <Link to="/" className="absolute top-4 left-4 z-30">
-        <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary-foreground/10">
+        <Button variant="ghost" size="sm" className="text-primary hover:bg-primary/10">
           <ArrowLeft className="h-4 w-4 mr-2" />
           Voltar
         </Button>
       </Link>
       
-      <Card className="w-full max-w-md relative z-20 glass-card">
+      <Card className="w-full max-w-md glass-card bg-white/95 backdrop-blur-sm border-white/20 shadow-xl">
         <CardHeader className="space-y-1 text-center">
           <div className="flex items-center justify-center space-x-2 mb-4">
             <img