Add demo account picker to login

frontend/src/pages/login.tsx

@@ -39,6 +39,27 @@ type LoginValues = {
   remember: boolean;
 };
 
+const demoAccounts = [
+  {
+    label: 'Admin',
+    description: 'Full workspace access',
+    email: 'admin@flatlogic.com',
+    password: 'f76d928f',
+  },
+  {
+    label: 'Coach',
+    description: 'Coach workspace access',
+    email: 'john@doe.com',
+    password: '2226f6026f52',
+  },
+  {
+    label: 'Client',
+    description: 'Client portal access',
+    email: 'client@hello.com',
+    password: '2226f6026f52',
+  },
+];
+
 function Nav() {
   return (
     <header className='sticky top-3 z-50 px-5 pt-5'>
@@ -183,7 +204,35 @@ export default function Login() {
                 enableReinitialize
                 onSubmit={(values) => handleSubmit(values)}
               >
+                {({ setValues }) => (
                   <Form className='space-y-5'>
+                    <div>
+                      <p className='mb-3 text-sm font-semibold'>Sign in as</p>
+                      <div className='grid gap-2 sm:grid-cols-3'>
+                        {demoAccounts.map((account) => (
+                          <button
+                            key={account.email}
+                            type='button'
+                            className='rounded-2xl border border-[#19192d]/10 bg-[#fbf8f1] px-3 py-3 text-left transition hover:border-[#35b7a5] hover:bg-[#f3fbf8]'
+                            onClick={() =>
+                              setValues({
+                                email: account.email,
+                                password: account.password,
+                                remember: true,
+                              })
+                            }
+                          >
+                            <span className='block text-sm font-semibold text-[#19192d]'>
+                              {account.label}
+                            </span>
+                            <span className='mt-1 block text-xs leading-5 text-[#72798a]'>
+                              {account.description}
+                            </span>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
                     <label className='block'>
                       <span className='mb-2 block text-sm font-semibold'>
                         Email
@@ -246,6 +295,7 @@ export default function Login() {
                       {isFetching ? 'Opening...' : 'Login'}
                     </button>
                   </Form>
+                )}
               </Formik>
 
               <p className={`mt-6 text-center text-sm ${ui.muted}`}>