sidney
/
microtecflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add password show/hide eye toggle and remove admin quick login option from portal login
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 1m17s Details

This commit is contained in:
Sidney Gomes 2026-07-23 10:58:38 -03:00
parent a66391e925
commit 8a5427402f
1 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/App.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { import {
Play, Shield, User, GraduationCap, ArrowRight, Lock, Mail, Play, Shield, User, GraduationCap, ArrowRight, Lock, Mail,
Plus, CheckCircle, ChevronRight, HelpCircle, Film, Laptop Plus, CheckCircle, ChevronRight, HelpCircle, Film, Laptop, Eye, EyeOff
} from 'lucide-react'; } from 'lucide-react';
import Navbar from './components/Navbar'; import Navbar from './components/Navbar';
import HeroBanner from './components/HeroBanner'; import HeroBanner from './components/HeroBanner';
@ -32,6 +32,8 @@ export default function App() {
const [isRegister, setIsRegister] = useState(false); const [isRegister, setIsRegister] = useState(false);
const [loginEmail, setLoginEmail] = useState(''); const [loginEmail, setLoginEmail] = useState('');
const [loginPassword, setLoginPassword] = useState(''); const [loginPassword, setLoginPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [showRegPassword, setShowRegPassword] = useState(false);
const [regName, setRegName] = useState(''); const [regName, setRegName] = useState('');
const [regEmail, setRegEmail] = useState(''); const [regEmail, setRegEmail] = useState('');
const [regPassword, setRegPassword] = useState(''); const [regPassword, setRegPassword] = useState('');
@ -394,14 +396,23 @@ export default function App() {
<div className="space-y-1"> <div className="space-y-1">
<label className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">Crie uma Senha</label> <label className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">Crie uma Senha</label>
<input <div className="relative">
type="password" <input
required type={showRegPassword ? "text" : "password"}
value={regPassword} required
onChange={(e) => setRegPassword(e.target.value)} value={regPassword}
placeholder="Mínimo 6 caracteres" onChange={(e) => setRegPassword(e.target.value)}
className="w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none" 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> </div>
<button <button
@ -447,13 +458,20 @@ export default function App() {
<div className="relative"> <div className="relative">
<Lock className="absolute left-3 top-3 w-4 h-4 text-zinc-500" /> <Lock className="absolute left-3 top-3 w-4 h-4 text-zinc-500" />
<input <input
type="password" type={showPassword ? "text" : "password"}
required required
value={loginPassword} value={loginPassword}
onChange={(e) => setLoginPassword(e.target.value)} onChange={(e) => setLoginPassword(e.target.value)}
placeholder="Digite sua senha" 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>
</div> </div>
@ -480,21 +498,14 @@ export default function App() {
{/* QUICK PRESETS FOR SANDBOX DEMO */} {/* QUICK PRESETS FOR SANDBOX DEMO */}
<div className="border-t border-white/10 pt-4 space-y-3"> <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> <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 <button
type="button" type="button"
onClick={() => quickFill('aluno@microtecflix.com', 'aluno123')} 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 Logar como Aluno
</button> </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>
</div> </div>
</form> </form>