🎨 Palette: Improved login accessibility and error handling

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-22 - [Accessible Login Error Handling]
+**Learning:** Replacing browser `alert()` with inline UI error messages significantly improves UX by not blocking the UI thread. To ensure accessibility, use `aria-invalid`, `aria-describedby`, and `role="alert"`.
+**Action:** When syncing external error props to local state, use a tracker variable (e.g., `prevExternalError`) to allow the error to be cleared locally and then re-triggered even if the parent passes the same error string again.

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+pnpm-lock.yaml
+preview.log
 
 # Editor directories and files
 .vscode/*

App.tsx

@@ -23,6 +23,7 @@ const App: React.FC = () => {
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [currentView, setCurrentView] = useState<View>('chat');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [loginError, setLoginError] = useState<string>('');
 
   const [documents, setDocuments] = useState<Document[]>(() => {
     const saved = localStorage.getItem(STORAGE_KEY);
@@ -96,12 +97,13 @@ const App: React.FC = () => {
   }, [personas]);
 
   const handleLogin = (email: string) => {
+    setLoginError('');
     // If we have users loaded (from NC or Init), check them
     const user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
     if (user) {
       setCurrentUser(user);
     } else {
-      alert("Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden.");
+      setLoginError("Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden.");
     }
   };
 
@@ -256,7 +258,7 @@ const App: React.FC = () => {
             Synchronisiere mit Nextcloud...
           </div>
         )}
-        <LoginView onLogin={handleLogin} />
+        <LoginView onLogin={handleLogin} error={loginError} />
       </>
     );
   }

components/LoginView.tsx

@@ -10,13 +10,20 @@ interface LoginViewProps {
 const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError }) => {
   const [email, setEmail] = useState('');
   const [error, setError] = useState(externalError || '');
+  const [prevExternalError, setPrevExternalError] = useState(externalError);
+
+  if (externalError !== prevExternalError) {
+    setError(externalError || '');
+    setPrevExternalError(externalError);
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!email) {
       setError('Bitte gib deine Wohnpro E-Mail Adresse ein.');
       return;
     }
+    setPrevExternalError(undefined); // Reset to ensure the next error sync triggers
     onLogin(email);
   };
 
@@ -25,7 +32,7 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
       <div className="w-full max-w-sm text-center">
         <div className="mb-12">
           <div className="w-16 h-16 bg-black rounded-3xl mx-auto flex items-center justify-center mb-6 shadow-xl shadow-black/10">
-            <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <svg aria-hidden="true" className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
               <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
               <polyline points="9 22 9 12 15 12 15 22" />
             </svg>
@@ -35,15 +42,19 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="relative group">
+          <div className="relative group text-left">
+            <label htmlFor="email-input" className="sr-only">E-Mail Adresse</label>
             <input
+              id="email-input"
               type="email"
               value={email}
               onChange={(e) => { setEmail(e.target.value); setError(''); }}
               placeholder="Wohnpro E-Mail Adresse"
+              aria-invalid={!!error}
+              aria-describedby={error ? "login-error" : undefined}
               className={`w-full bg-gray-50 border ${error ? 'border-red-200' : 'border-gray-100'} rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-black/5 transition-all text-lg placeholder:text-gray-300`}
             />
-            {error && <p className="mt-2 text-sm text-red-500 text-left px-2">{error}</p>}
+            {error && <p id="login-error" className="mt-2 text-sm text-red-500 px-2" role="alert">{error}</p>}
           </div>
 
           <button