Fixed password settings so that changed passwords actually work and I can actually change the passwords

screens.jsx

@@ -2,6 +2,24 @@
 
 function LoginScreen({ onLogin }) {
   const [pickedId, setPickedId] = React.useState('rod');
+  const [password, setPassword] = React.useState('');
+  const [error, setError] = React.useState('');
+  const [busy, setBusy] = React.useState(false);
+
+  React.useEffect(() => { setPassword(''); setError(''); }, [pickedId]);
+
+  const submit = async () => {
+    if (!password) { setError('Enter your password'); return; }
+    setError(''); setBusy(true);
+    try {
+      await onLogin(pickedId, password);
+    } catch (e) {
+      setError('Incorrect password');
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <div className="login">
       <div className="login__card">
@@ -31,11 +49,21 @@ function LoginScreen({ onLogin }) {
 
         <label className="field">
           <span className="field__label">Password</span>
-          <input className="field__input" type="password" defaultValue="••••••••••" />
+          <input
+            className="field__input"
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') submit(); }}
+            placeholder="Enter password"
+            autoFocus
+          />
         </label>
 
-        <button className="btn btn--primary btn--full" onClick={() => onLogin(pickedId)}>
-          Sign in as {findUser(pickedId).name}
+        {error && <div className="mono" style={{ color: 'var(--prio-high-dot)', marginTop: '0.25rem' }}>{error}</div>}
+
+        <button className="btn btn--primary btn--full" onClick={submit} disabled={busy}>
+          {busy ? 'Signing in…' : <>Sign in as {findUser(pickedId).name}</>}
           <Icon.Arrow />
         </button>
 
@@ -654,7 +682,7 @@ function FilterChip({ on, onClick, children }) {
   );
 }
 
-function SettingsScreen({ user, dbUsers, isAdmin, onClose, onSave, onLogout, onSwitchUser, onCreateUser, onDeleteUser, onUpdateUserRole }) {
+function SettingsScreen({ user, dbUsers, isAdmin, onClose, onSave, onLogout, onSwitchUser, onCreateUser, onDeleteUser, onUpdateUserRole, onChangePassword }) {
   const [name, setName] = React.useState(user.name);
   const [role, setRole] = React.useState(user.role);
   const [photo, setPhoto] = React.useState(user.photo || null);
@@ -662,8 +690,27 @@ function SettingsScreen({ user, dbUsers, isAdmin, onClose, onSave, onLogout, onS
   const [pwOld, setPwOld] = React.useState('');
   const [pwNew, setPwNew] = React.useState('');
   const [pwConfirm, setPwConfirm] = React.useState('');
+  const [pwSaved, setPwSaved] = React.useState(false);
+  const [pwError, setPwError] = React.useState('');
+  const [pwBusy, setPwBusy] = React.useState(false);
   const [saved, setSaved] = React.useState(false);
 
+  const submitPasswordChange = async () => {
+    setPwError('');
+    if (pwNew !== pwConfirm) { setPwError('New passwords do not match'); return; }
+    setPwBusy(true);
+    try {
+      await onChangePassword(pwOld, pwNew);
+      setPwOld(''); setPwNew(''); setPwConfirm('');
+      setPwSaved(true);
+      setTimeout(() => setPwSaved(false), 2000);
+    } catch (e) {
+      setPwError(e.message || 'Failed to update password');
+    } finally {
+      setPwBusy(false);
+    }
+  };
+
   React.useEffect(() => {
     setName(user.name); setRole(user.role); setPhoto(user.photo || null);
   }, [user.id]);
@@ -783,9 +830,12 @@ function SettingsScreen({ user, dbUsers, isAdmin, onClose, onSave, onLogout, onS
                 </div>
               </div>
 
+              {pwError && <div className="settings__pw-error mono" style={{ color: 'var(--prio-high-dot)', marginTop: '0.5rem' }}>{pwError}</div>}
+
               <div className="settings__save-row">
-                <button className="btn btn--ghost" onClick={() => { setPwOld(''); setPwNew(''); setPwConfirm(''); }}>Cancel</button>
-                <button className="btn btn--primary" disabled={!pwOld || !pwNew || pwNew !== pwConfirm}>Update password</button>
+                {pwSaved && <span className="settings__saved mono"><Icon.Check /> Password updated</span>}
+                <button className="btn btn--ghost" onClick={() => { setPwOld(''); setPwNew(''); setPwConfirm(''); setPwError(''); }}>Cancel</button>
+                <button className="btn btn--primary" disabled={!pwOld || !pwNew || pwNew !== pwConfirm || pwBusy} onClick={submitPasswordChange}>{pwBusy ? 'Updating…' : 'Update password'}</button>
               </div>
 
               <div className="settings__divider" />