woms 3.0

src/pages/LoginPage.jsx

@@ -5,10 +5,12 @@ import { useAuth } from '../context/AuthContext'
 export default function LoginPage() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [name, setName] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [isRegistering, setIsRegistering] = useState(false)
   
-  const { login } = useAuth()
+  const { login, register } = useAuth()
   const navigate = useNavigate()
 
   const handleSubmit = async (e) => {
@@ -16,15 +18,36 @@ export default function LoginPage() {
     setError('')
     setLoading(true)
 
-    const result = await login(email, password)
-    
-    if (result.success) {
-      navigate('/tickets')
-    } else {
-      setError(result.error || 'Login failed')
+    try {
+      const result = isRegistering 
+        ? await register(email, password, name || email.split('@')[0])
+        : await login(email, password)
+      
+      if (result.success) {
+        navigate('/tickets')
+      } else {
+        // Bessere Fehlermeldungen
+        let errorMessage = result.error || 'Login fehlgeschlagen'
+        
+        if (errorMessage.includes('Invalid credentials') || errorMessage.includes('401')) {
+          errorMessage = 'Ungültige Email oder Passwort. Bitte überprüfe deine Eingaben.'
+        } else if (errorMessage.includes('User already exists')) {
+          errorMessage = 'Ein Benutzer mit dieser Email existiert bereits. Bitte logge dich ein.'
+          setIsRegistering(false)
+        } else if (errorMessage.includes('User with the same email already exists')) {
+          errorMessage = 'Diese Email ist bereits registriert. Bitte logge dich ein.'
+          setIsRegistering(false)
+        } else if (errorMessage.includes('Email/Password') || errorMessage.includes('auth')) {
+          errorMessage = 'Email/Password Authentifizierung ist möglicherweise nicht aktiviert. Bitte überprüfe deine Appwrite-Konfiguration.'
+        }
+        
+        setError(errorMessage)
+      }
+    } catch (err) {
+      setError('Ein unerwarteter Fehler ist aufgetreten: ' + (err.message || 'Unbekannter Fehler'))
+    } finally {
+      setLoading(false)
     }
-    
-    setLoading(false)
   }
 
   return (
@@ -37,7 +60,7 @@ export default function LoginPage() {
     }}>
       <div className="card" style={{ width: '400px' }}>
         <div className="card-header text-center">
-          <h2>NetWEB Systems WOMS 2.0</h2>
+          <h2>Webklar WOMS 2.0</h2>
         </div>
         <div className="card-body">
           <form onSubmit={handleSubmit}>
@@ -47,6 +70,19 @@ export default function LoginPage() {
               </div>
             )}
             
+            {isRegistering && (
+              <div className="form-group">
+                <label className="form-label">Name (optional)</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Dein Name"
+                />
+              </div>
+            )}
+
             <div className="form-group">
               <label className="form-label">Email</label>
               <input
@@ -55,6 +91,7 @@ export default function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
+                placeholder="deine@email.com"
               />
             </div>
 
@@ -66,16 +103,42 @@ export default function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
+                placeholder="••••••••"
+                minLength={8}
               />
             </div>
 
             <button 
               type="submit" 
               className="btn btn-green"
-              style={{ width: '100%' }}
+              style={{ width: '100%', marginBottom: '10px' }}
               disabled={loading}
             >
-              {loading ? 'Logging in...' : 'Login'}
+              {loading 
+                ? (isRegistering ? 'Registrierung läuft...' : 'Login läuft...') 
+                : (isRegistering ? 'Registrieren' : 'Login')
+              }
+            </button>
+
+            <button
+              type="button"
+              className="btn"
+              style={{ 
+                width: '100%', 
+                background: 'transparent',
+                border: '1px solid #ccc',
+                color: '#333'
+              }}
+              onClick={() => {
+                setIsRegistering(!isRegistering)
+                setError('')
+              }}
+              disabled={loading}
+            >
+              {isRegistering 
+                ? 'Bereits registriert? Hier einloggen' 
+                : 'Noch kein Account? Hier registrieren'
+              }
             </button>
           </form>
         </div>