From 8a5427402f06dde1768be86be189acd54b0d4d4a Mon Sep 17 00:00:00 2001
From: Sidney Gomes <sidney.gomes1989@gmail.com>
Date: Thu, 23 Jul 2026 10:58:38 -0300
Subject: [PATCH] feat: add password show/hide eye toggle and remove admin
 quick login option from portal login

---
 src/App.tsx | 51 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8d3bc16..4f94887 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { 
   Play, Shield, User, GraduationCap, ArrowRight, Lock, Mail, 
-  Plus, CheckCircle, ChevronRight, HelpCircle, Film, Laptop 
+  Plus, CheckCircle, ChevronRight, HelpCircle, Film, Laptop, Eye, EyeOff
 } from 'lucide-react';
 import Navbar from './components/Navbar';
 import HeroBanner from './components/HeroBanner';
@@ -32,6 +32,8 @@ export default function App() {
   const [isRegister, setIsRegister] = useState(false);
   const [loginEmail, setLoginEmail] = useState('');
   const [loginPassword, setLoginPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showRegPassword, setShowRegPassword] = useState(false);
   const [regName, setRegName] = useState('');
   const [regEmail, setRegEmail] = useState('');
   const [regPassword, setRegPassword] = useState('');
@@ -394,14 +396,23 @@ export default function App() {
 
                 <div className="space-y-1">
                   <label className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">Crie uma Senha</label>
-                  <input
-                    type="password"
-                    required
-                    value={regPassword}
-                    onChange={(e) => setRegPassword(e.target.value)}
-                    placeholder="Mínimo 6 caracteres"
-                    className="w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none"
-                  />
+                  <div className="relative">
+                    <input
+                      type={showRegPassword ? "text" : "password"}
+                      required
+                      value={regPassword}
+                      onChange={(e) => setRegPassword(e.target.value)}
+                      placeholder="Mínimo 6 caracteres"
+                      className="w-full glass-input rounded-lg p-3 pr-10 text-xs text-white focus:outline-none"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowRegPassword(!showRegPassword)}
+                      className="absolute right-3 top-2.5 text-zinc-500 hover:text-white transition-colors"
+                    >
+                      {showRegPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
                 </div>
 
                 <button
@@ -447,13 +458,20 @@ export default function App() {
                   <div className="relative">
                     <Lock className="absolute left-3 top-3 w-4 h-4 text-zinc-500" />
                     <input
-                      type="password"
+                      type={showPassword ? "text" : "password"}
                       required
                       value={loginPassword}
                       onChange={(e) => setLoginPassword(e.target.value)}
                       placeholder="Digite sua senha"
-                      className="w-full glass-input rounded-lg p-3 pl-10 text-xs text-white focus:outline-none"
+                      className="w-full glass-input rounded-lg p-3 pl-10 pr-10 text-xs text-white focus:outline-none"
                     />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-3 text-zinc-500 hover:text-white transition-colors animate-fade-in"
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
                   </div>
                 </div>
 
@@ -480,21 +498,14 @@ export default function App() {
                 {/* QUICK PRESETS FOR SANDBOX DEMO */}
                 <div className="border-t border-white/10 pt-4 space-y-3">
                   <p className="text-center text-[10px] text-zinc-500 font-bold uppercase tracking-wider">Acesso de Teste Rápido (Iframe Sandbox)</p>
-                  <div className="grid grid-cols-2 gap-2">
+                  <div className="flex justify-center">
                     <button
                       type="button"
                       onClick={() => quickFill('aluno@microtecflix.com', 'aluno123')}
-                      className="glass-btn-secondary text-zinc-300 font-semibold p-2 rounded text-[10px] transition-colors"
+                      className="w-full glass-btn-secondary text-zinc-300 font-semibold p-2.5 rounded text-[10px] transition-colors text-center"
                     >
                       Logar como Aluno
                     </button>
-                    <button
-                      type="button"
-                      onClick={() => quickFill('sidney.gomes1989@gmail.com', 'admin123')}
-                      className="glass-btn-secondary text-zinc-300 font-semibold p-2 rounded text-[10px] transition-colors"
-                    >
-                      Logar como Admin
-                    </button>
                   </div>
                 </div>
               </form>