Update

pwa/src/components/Login.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { useAuth } from '../hooks/useAuth'
+import { GameButton } from './common/GameButton'
 import './Login.css'
 
 function Login() {
@@ -10,6 +12,7 @@ function Login() {
   const [loading, setLoading] = useState(false)
   const { login } = useAuth()
   const navigate = useNavigate()
+  const { t } = useTranslation()
 
   const validateEmail = (email: string) => {
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
@@ -22,12 +25,12 @@ function Login() {
 
     // Validation
     if (!validateEmail(email)) {
-      setError('Please enter a valid email address')
+      setError(t('auth.errors.invalidEmail'))
       return
     }
 
     if (password.length < 6) {
-      setError('Password must be at least 6 characters')
+      setError(t('auth.errors.passwordLength'))
       return
     }
 
@@ -38,7 +41,7 @@ function Login() {
       // Navigate to character selection after successful login
       navigate('/characters')
     } catch (err: any) {
-      setError(err.response?.data?.detail || 'Login failed')
+      setError(err.response?.data?.detail || t('auth.errors.loginFailed'))
     } finally {
       setLoading(false)
     }
@@ -46,19 +49,20 @@ function Login() {
 
   return (
     <div className="login-container">
-      <div className="login-card">
-        <h1>Welcome Back</h1>
-        <p className="login-subtitle">Login to continue your journey</p>
+      <div className="login-card game-panel">
+        <h1 className="auth-title">{t('auth.loginTitle')}</h1>
+        <p className="login-subtitle">{t('auth.loginSubtitle')}</p>
 
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className="auth-form">
           <div className="form-group">
-            <label htmlFor="email">Email Address</label>
+            <label htmlFor="email">{t('auth.email')}</label>
             <input
               type="email"
               id="email"
+              className="game-input"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              placeholder="your.email@example.com"
+              placeholder={t('auth.emailPlaceholder')}
               required
               disabled={loading}
               autoComplete="email"
@@ -66,47 +70,45 @@ function Login() {
           </div>
 
           <div className="form-group">
-            <label htmlFor="password">Password</label>
+            <label htmlFor="password">{t('auth.password')}</label>
             <input
               type="password"
               id="password"
+              className="game-input"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              placeholder="Your password"
+              placeholder={t('auth.passwordPlaceholderLogin')}
               required
               disabled={loading}
               autoComplete="current-password"
             />
           </div>
 
-          {error && <div className="error">{error}</div>}
+          {error && <div className="error-message">{error}</div>}
 
-          <button type="submit" className="button-primary" disabled={loading}>
-            {loading ? 'Logging in...' : 'Login'}
-          </button>
+          <GameButton
+            variant="primary"
+            size="lg"
+            className="auth-submit"
+            disabled={loading}
+            onClick={() => { }} // Form will handle it via submit
+          >
+            {loading ? t('auth.loggingIn') : t('auth.login')}
+          </GameButton>
         </form>
 
         <div className="login-toggle">
-          <button
-            type="button"
-            className="button-link"
+          <GameButton
+            variant="secondary"
+            size="sm"
             onClick={() => navigate('/register')}
             disabled={loading}
           >
-            Don't have an account? Register
-          </button>
+            {t('auth.registerLink')}
+          </GameButton>
         </div>
 
-        <div className="login-toggle">
-          <button
-            type="button"
-            className="button-link"
-            onClick={() => navigate('/')}
-            disabled={loading}
-          >
-            ← Back to Home
-          </button>
-        </div>
+
       </div>
     </div>
   )