Commit 060f545a authored by BangNSK's avatar BangNSK

fix: add password visibility toggle to login

parent a9857517
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../context/auth'; import { useAuth } from '../context/auth';
import { Database, Lock, Mail, Loader2 } from 'lucide-react'; import { Database, Mail, Loader2 } from 'lucide-react';
import { api } from '../services/api'; import { api } from '../services/api';
import { PasswordInput } from '../components/PasswordInput';
export const Login: React.FC = () => { export const Login: React.FC = () => {
const { login } = useAuth(); const { login } = useAuth();
...@@ -137,25 +138,16 @@ export const Login: React.FC = () => { ...@@ -137,25 +138,16 @@ export const Login: React.FC = () => {
</div> </div>
<div> <div>
<label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1"> <PasswordInput
Mật khẩu id="password"
</label> name="password"
<div className="relative"> label="Mật khẩu"
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400"> autoComplete="current-password"
<Lock className="h-5 w-5" /> required
</div> value={password}
<input onChange={(e) => setPassword(e.target.value)}
id="password" placeholder="••••••••"
name="password" />
type="password"
autoComplete="current-password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="block w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-3 text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
placeholder="••••••••"
/>
</div>
<div className="mt-2 text-right"> <div className="mt-2 text-right">
<Link to="/forgot-password" className="text-sm font-medium text-indigo-600 hover:text-indigo-500"> <Link to="/forgot-password" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
Quên mật khẩu? Quên mật khẩu?
......
...@@ -24,6 +24,7 @@ test('login puts forgot-password below the password field and localizes invalid ...@@ -24,6 +24,7 @@ test('login puts forgot-password below the password field and localizes invalid
test('all requested password forms expose visibility controls', () => { test('all requested password forms expose visibility controls', () => {
for (const file of [ for (const file of [
'pages/Login.tsx',
'pages/Register.tsx', 'pages/Register.tsx',
'pages/Profile.tsx', 'pages/Profile.tsx',
'pages/ResetPassword.tsx', 'pages/ResetPassword.tsx',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment