rede5/saveinmed
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(marketplace): add password visibility toggle with eye icon on login page

Browse source
This commit is contained in:
Tiago Yamamoto 2025-12-22 15:10:29 -03:00
parent 9e0601179e
commit 940e6561f4
1 changed files with 34 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
marketplace/src/pages/Login.tsx
View file

@ -4,10 +4,25 @@ import { useAuth, UserRole } from '../context/AuthContext'
import { authService } from '../services/auth' import { authService } from '../services/auth'
import { decodeJwtPayload } from '../utils/jwt' import { decodeJwtPayload } from '../utils/jwt'
// Eye icon components for password visibility toggle
const EyeIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
)
const EyeSlashIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
</svg>
)
export function LoginPage() { export function LoginPage() {
const { login } = useAuth() const { login } = useAuth()
const [username, setUsername] = useState('') const [username, setUsername] = useState('')
const [password, setPassword] = useState('') const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const [errorMessage, setErrorMessage] = useState<string | null>(null) const [errorMessage, setErrorMessage] = useState<string | null>(null)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
@ -107,15 +122,25 @@ export function LoginPage() {
<label className="text-sm font-medium text-gray-700" htmlFor="password"> <label className="text-sm font-medium text-gray-700" htmlFor="password">
Senha Senha
</label> </label>
<input <div className="relative">
id="password" <input
name="password" id="password"
type="password" name="password"
autoComplete="current-password" type={showPassword ? "text" : "password"}
className="w-full rounded border border-gray-200 px-3 py-2" autoComplete="current-password"
value={password} className="w-full rounded border border-gray-200 px-3 py-2 pr-10"
onChange={(e) => setPassword(e.target.value)} value={password}
/> onChange={(e) => setPassword(e.target.value)}
/>
<button
type="button"
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
onClick={() => setShowPassword(!showPassword)}
aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
>
{showPassword ? <EyeSlashIcon /> : <EyeIcon />}
</button>
</div>
</div> </div>
<button <button
type="submit" type="submit"