feat(login): add password visibility toggle and confirm password field

src/pages/login/Login.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import React, { useState } from 'react';
 import { 
   Box, 
   Button, 
@@ -14,13 +15,20 @@ import {
   CardContent,
   Alert,
   Tabs,
-  Tab
+  Tab,
+  InputAdornment,
+  IconButton,
 } from '@mui/material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import LanguageSwitcher from '../../components/LanguageSwitcher';
 import { useLoginPage } from '../../hooks/login-hooks';
 
 const Login = () => {
   const { t } = useTranslation();
+  const [showLoginPassword, setShowLoginPassword] = useState(false);
+  const [showRegisterPassword, setShowRegisterPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const {
     // 表单状态
     tabValue,
@@ -110,13 +118,27 @@ const Login = () => {
                 <TextField
                   fullWidth
                   id="login-password"
-                  type="password"
+                  type={showLoginPassword ? 'text' : 'password'}
                   placeholder={t('login.passwordPlaceholder')}
                   autoComplete="current-password"
                   {...loginForm.register('password', loginValidation.password)}
                   error={!!loginForm.formState.errors.password}
                   helperText={loginForm.formState.errors.password?.message}
                   sx={{ mb: 2 }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label={showLoginPassword ? 'Hide password' : 'Show password'}
+                          onClick={() => setShowLoginPassword((v) => !v)}
+                          onMouseDown={(e) => e.preventDefault()}
+                          edge="end"
+                        >
+                          {showLoginPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
                 />
 
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
@@ -175,13 +197,53 @@ const Login = () => {
                 <TextField
                   fullWidth
                   id="register-password"
-                  type="password"
+                  type={showRegisterPassword ? 'text' : 'password'}
                   placeholder={t('login.passwordPlaceholder')}
                   autoComplete="new-password"
                   {...registerForm.register('password', registerValidation.password)}
                   error={!!registerForm.formState.errors.password}
                   helperText={registerForm.formState.errors.password?.message}
                   sx={{ mb: 2 }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label={showRegisterPassword ? 'Hide password' : 'Show password'}
+                          onClick={() => setShowRegisterPassword((v) => !v)}
+                          onMouseDown={(e) => e.preventDefault()}
+                          edge="end"
+                        >
+                          {showRegisterPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+
+                <TextField
+                  fullWidth
+                  id="register-confirm-password"
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  placeholder={t('confirmPassword')}
+                  autoComplete="new-password"
+                  {...registerForm.register('confirmPassword', registerValidation.confirmPassword)}
+                  error={!!registerForm.formState.errors.confirmPassword}
+                  helperText={registerForm.formState.errors.confirmPassword?.message}
+                  sx={{ mb: 2 }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
+                          onClick={() => setShowConfirmPassword((v) => !v)}
+                          onMouseDown={(e) => e.preventDefault()}
+                          edge="end"
+                        >
+                          {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
                 />
 
                 <Button