Changed login screen to ask for username and password instead of displaying staff name

screens.jsx

@@ -1,20 +1,19 @@
 // Screens for Dashy
 
 function LoginScreen({ onLogin, dbUsers = [], workspace }) {
-  const [pickedId, setPickedId] = React.useState('rod');
+  const [username, setUsername] = React.useState('');
   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 (!username) { setError('Enter your username'); return; }
     if (!password) { setError('Enter your password'); return; }
     setError(''); setBusy(true);
     try {
-      await onLogin(pickedId, password);
+      await onLogin(username, password);
     } catch (e) {
-      setError('Incorrect password');
+      setError('Incorrect username or password');
     } finally {
       setBusy(false);
     }
@@ -27,43 +26,39 @@ function LoginScreen({ onLogin, dbUsers = [], workspace }) {
           <BrandMark />
           <span className="login__wordmark">Dashy</span>
         </div>
-        <h1 className="login__title">Pick up where you left off.</h1>
-        <p className="login__sub">Sign in to your team workspace · <span className="mono">{workspace ? workspace.name : 'loading…'}</span></p>
+        <h1 className="login__title">Sign in to Dashy</h1>
+        <p className="login__sub">Enter your details to access the <span className="mono">{workspace ? workspace.name : 'loading…'}</span> workspace</p>
 
-        <div className="login__users">
-          {dbUsers.map(u => (
-            <button
-              key={u.id}
-              className={"login__user" + (pickedId === u.id ? " is-picked" : "")}
-              onClick={() => setPickedId(u.id)}
-            >
-              <Avatar user={u} size={40} />
-              <div className="login__user-meta">
-                <span className="login__user-name">{u.name}</span>
-                <span className="login__user-role">{u.role}</span>
-              </div>
-              {pickedId === u.id && <span className="login__user-tick"><Icon.Check /></span>}
-            </button>
-          ))}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', marginTop: '1rem' }}>
+          <label className="field">
+            <span className="field__label">Username</span>
+            <input
+              className="field__input"
+              value={username}
+              onChange={e => setUsername(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') submit(); }}
+              placeholder="Username"
+              autoFocus
+            />
+          </label>
+
+          <label className="field">
+            <span className="field__label">Password</span>
+            <input
+              className="field__input"
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') submit(); }}
+              placeholder="••••••••"
+            />
+          </label>
         </div>
 
-        <label className="field">
-          <span className="field__label">Password</span>
-          <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>
+        {error && <div className="mono" style={{ color: 'var(--prio-high-dot)', marginTop: '0.25rem', fontSize: '12px' }}>{error}</div>}
 
-        {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}</>}
+        <button className="btn btn--primary btn--full" style={{ marginTop: '0.5rem' }} onClick={submit} disabled={busy}>
+          {busy ? 'Signing in…' : 'Sign in'}
           <Icon.Arrow />
         </button>