From a6aef66d1eea1433db134ba37e439bc5be32ead1 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Tue, 9 Jun 2026 13:27:09 +0000
Subject: [PATCH] Add demo account picker to login

---
 frontend/src/pages/login.tsx | 164 +++++++++++++++++++++++------------
 1 file changed, 107 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index dc1465a..db3c1f4 100644
--- a/frontend/src/pages/login.tsx
+++ b/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,69 +204,98 @@ export default function Login() {
                 enableReinitialize
                 onSubmit={(values) => handleSubmit(values)}
               >
-                <Form className='space-y-5'>
-                  <label className='block'>
-                    <span className='mb-2 block text-sm font-semibold'>
-                      Email
-                    </span>
-                    <Field
-                      name='email'
-                      type='email'
-                      className={`w-full rounded-2xl border px-4 py-3 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
-                    />
-                  </label>
-
-                  <label className='block'>
-                    <span className='mb-2 block text-sm font-semibold'>
-                      Password
-                    </span>
-                    <div className='relative'>
-                      <Field
-                        name='password'
-                        type={showPassword ? 'text' : 'password'}
-                        className={`w-full rounded-2xl border px-4 py-3 pr-12 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
-                      />
-                      <button
-                        type='button'
-                        className='absolute right-4 top-1/2 -translate-y-1/2 text-[#72798a] transition hover:text-[#19192d]'
-                        onClick={() => setShowPassword(!showPassword)}
-                        aria-label={
-                          showPassword ? 'Hide password' : 'Show password'
-                        }
-                      >
-                        <BaseIcon
-                          size={20}
-                          path={showPassword ? mdiEyeOff : mdiEye}
-                        />
-                      </button>
+                {({ 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>
 
-                  <div className='flex items-center justify-between gap-4 text-sm'>
-                    <label className='flex items-center gap-2'>
+                    <label className='block'>
+                      <span className='mb-2 block text-sm font-semibold'>
+                        Email
+                      </span>
                       <Field
-                        type='checkbox'
-                        name='remember'
-                        className='h-4 w-4 rounded border-[#19192d]/20 text-[#35b7a5]'
+                        name='email'
+                        type='email'
+                        className={`w-full rounded-2xl border px-4 py-3 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
                       />
-                      <span className={ui.muted}>Remember me</span>
                     </label>
-                    <Link
-                      href='/forgot'
-                      className='font-semibold text-[#248b7e] hover:underline'
-                    >
-                      Forgot password?
-                    </Link>
-                  </div>
 
-                  <button
-                    type='submit'
-                    disabled={isFetching}
-                    className={`w-full rounded-full px-6 py-4 font-semibold disabled:cursor-not-allowed disabled:opacity-60 ${ui.button}`}
-                  >
-                    {isFetching ? 'Opening...' : 'Login'}
-                  </button>
-                </Form>
+                    <label className='block'>
+                      <span className='mb-2 block text-sm font-semibold'>
+                        Password
+                      </span>
+                      <div className='relative'>
+                        <Field
+                          name='password'
+                          type={showPassword ? 'text' : 'password'}
+                          className={`w-full rounded-2xl border px-4 py-3 pr-12 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
+                        />
+                        <button
+                          type='button'
+                          className='absolute right-4 top-1/2 -translate-y-1/2 text-[#72798a] transition hover:text-[#19192d]'
+                          onClick={() => setShowPassword(!showPassword)}
+                          aria-label={
+                            showPassword ? 'Hide password' : 'Show password'
+                          }
+                        >
+                          <BaseIcon
+                            size={20}
+                            path={showPassword ? mdiEyeOff : mdiEye}
+                          />
+                        </button>
+                      </div>
+                    </label>
+
+                    <div className='flex items-center justify-between gap-4 text-sm'>
+                      <label className='flex items-center gap-2'>
+                        <Field
+                          type='checkbox'
+                          name='remember'
+                          className='h-4 w-4 rounded border-[#19192d]/20 text-[#35b7a5]'
+                        />
+                        <span className={ui.muted}>Remember me</span>
+                      </label>
+                      <Link
+                        href='/forgot'
+                        className='font-semibold text-[#248b7e] hover:underline'
+                      >
+                        Forgot password?
+                      </Link>
+                    </div>
+
+                    <button
+                      type='submit'
+                      disabled={isFetching}
+                      className={`w-full rounded-full px-6 py-4 font-semibold disabled:cursor-not-allowed disabled:opacity-60 ${ui.button}`}
+                    >
+                      {isFetching ? 'Opening...' : 'Login'}
+                    </button>
+                  </Form>
+                )}
               </Formik>
 
               <p className={`mt-6 text-center text-sm ${ui.muted}`}>