Commit

pwa/src/components/Login.tsx

@@ -4,28 +4,41 @@ import { useAuth } from '../hooks/useAuth'
 import './Login.css'
 
 function Login() {
-  const [isLogin, setIsLogin] = useState(true)
-  const [username, setUsername] = useState('')
+  const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
-  const { login, register } = useAuth()
+  const { login } = useAuth()
   const navigate = useNavigate()
 
+  const validateEmail = (email: string) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return re.test(email)
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
+
+    // Validation
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address')
+      return
+    }
+
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters')
+      return
+    }
+
     setLoading(true)
 
     try {
-      if (isLogin) {
-        await login(username, password)
-      } else {
-        await register(username, password)
-      }
-      navigate('/game')
+      await login(email, password)
+      // Navigate to character selection after successful login
+      navigate('/characters')
     } catch (err: any) {
-      setError(err.response?.data?.detail || 'Authentication failed')
+      setError(err.response?.data?.detail || 'Login failed')
     } finally {
       setLoading(false)
     }
@@ -34,23 +47,24 @@ function Login() {
   return (
     <div className="login-container">
       <div className="login-card">
-        <h1>Echoes of the Ash</h1>
-        <p className="login-subtitle">A Post-Apocalyptic Survival RPG</p>
-        
+        <h1>Welcome Back</h1>
+        <p className="login-subtitle">Login to continue your journey</p>
+
         <form onSubmit={handleSubmit}>
           <div className="form-group">
-            <label htmlFor="username">Username</label>
+            <label htmlFor="email">Email Address</label>
             <input
-              type="text"
-              id="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="your.email@example.com"
               required
               disabled={loading}
-              autoComplete="username"
+              autoComplete="email"
             />
           </div>
-          
+
           <div className="form-group">
             <label htmlFor="password">Password</label>
             <input
@@ -58,16 +72,17 @@ function Login() {
               id="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
+              placeholder="Your password"
               required
               disabled={loading}
-              autoComplete={isLogin ? 'current-password' : 'new-password'}
+              autoComplete="current-password"
             />
           </div>
 
           {error && <div className="error">{error}</div>}
 
           <button type="submit" className="button-primary" disabled={loading}>
-            {loading ? 'Please wait...' : isLogin ? 'Login' : 'Register'}
+            {loading ? 'Logging in...' : 'Login'}
           </button>
         </form>
 
@@ -75,10 +90,21 @@ function Login() {
           <button
             type="button"
             className="button-link"
-            onClick={() => setIsLogin(!isLogin)}
+            onClick={() => navigate('/register')}
             disabled={loading}
           >
-            {isLogin ? "Don't have an account? Register" : 'Already have an account? Login'}
+            Don't have an account? Register
+          </button>
+        </div>
+
+        <div className="login-toggle">
+          <button
+            type="button"
+            className="button-link"
+            onClick={() => navigate('/')}
+            disabled={loading}
+          >
+            ← Back to Home
           </button>
         </div>
       </div>