liuyu/nofx
1
0
Fork 0
mirror of https://github.com/NoFxAiOS/nofx.git synced 2026-07-13 15:57:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add password strength validation and toggle visibility in registration and reset password forms (#773)

Browse Source 
Co-authored-by: tinkle-community <tinklefund@gmail.com>
This commit is contained in:
Ember
2025-11-09 00:36:28 +08:00
committed by GitHub
parent 90d09e63e5
commit 4667c3bf00
8 changed files with 251 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/components/LoginPage.tsx
View File

@@ -3,6 +3,8 @@ import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../contexts/LanguageContext'
import { t } from '../i18n/translations'
import HeaderBar from './landing/HeaderBar'
import { Eye, EyeOff } from 'lucide-react'
import { Input } from './ui/input'
export function LoginPage() {
const { language } = useLanguage()
@@ -10,6 +12,7 @@ export function LoginPage() {
const [step, setStep] = useState<'login' | 'otp'>('login')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const [otpCode, setOtpCode] = useState('')
const [userID, setUserID] = useState('')
const [error, setError] = useState('')
@@ -172,16 +175,10 @@ export function LoginPage() {
>
{t('email', language)}
</label>
<input
<Input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 py-2 rounded"
style={{
background: 'var(--brand-black)',
border: '1px solid var(--panel-border)',
color: 'var(--brand-light-gray)',
}}
placeholder={t('emailPlaceholder', language)}
required
/>
@@ -194,19 +191,26 @@ export function LoginPage() {
>
{t('password', language)}
</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2 rounded"
style={{
background: 'var(--brand-black)',
border: '1px solid var(--panel-border)',
color: 'var(--brand-light-gray)',
}}
placeholder={t('passwordPlaceholder', language)}
required
/>
<div className="relative">
<Input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="pr-10"
placeholder={t('passwordPlaceholder', language)}
required
/>
<button
type="button"
aria-label={showPassword ? '隐藏密码' : '显示密码'}
onMouseDown={(e) => e.preventDefault()}
onClick={() => setShowPassword((v) => !v)}
className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
style={{ color: 'var(--text-secondary)' }}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
<div className="text-right mt-2">
<button
type="button"