admin/40234-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add demo account picker to login

Browse Source
This commit is contained in:
Flatlogic Bot 2026-06-09 13:27:09 +00:00
parent 2505abb42d
commit a6aef66d1e
1 changed files with 107 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
frontend/src/pages/login.tsx
View File

@ -39,6 +39,27 @@ type LoginValues = {
remember: boolean; 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() { function Nav() {
return ( return (
<header className='sticky top-3 z-50 px-5 pt-5'> <header className='sticky top-3 z-50 px-5 pt-5'>
@ -183,69 +204,98 @@ export default function Login() {
enableReinitialize enableReinitialize
onSubmit={(values) => handleSubmit(values)} onSubmit={(values) => handleSubmit(values)}
> >
<Form className='space-y-5'> {({ setValues }) => (
<label className='block'> <Form className='space-y-5'>
<span className='mb-2 block text-sm font-semibold'> <div>
Email <p className='mb-3 text-sm font-semibold'>Sign in as</p>
</span> <div className='grid gap-2 sm:grid-cols-3'>
<Field {demoAccounts.map((account) => (
name='email' <button
type='email' key={account.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}`} type='button'
/> className='rounded-2xl border border-[#19192d]/10 bg-[#fbf8f1] px-3 py-3 text-left transition hover:border-[#35b7a5] hover:bg-[#f3fbf8]'
</label> onClick={() =>
setValues({
<label className='block'> email: account.email,
<span className='mb-2 block text-sm font-semibold'> password: account.password,
Password remember: true,
</span> })
<div className='relative'> }
<Field >
name='password' <span className='block text-sm font-semibold text-[#19192d]'>
type={showPassword ? 'text' : 'password'} {account.label}
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}`} </span>
/> <span className='mt-1 block text-xs leading-5 text-[#72798a]'>
<button {account.description}
type='button' </span>
className='absolute right-4 top-1/2 -translate-y-1/2 text-[#72798a] transition hover:text-[#19192d]' </button>
onClick={() => setShowPassword(!showPassword)} ))}
aria-label={ </div>
showPassword ? 'Hide password' : 'Show password'
}
>
<BaseIcon
size={20}
path={showPassword ? mdiEyeOff : mdiEye}
/>
</button>
</div> </div>
</label>
<div className='flex items-center justify-between gap-4 text-sm'> <label className='block'>
<label className='flex items-center gap-2'> <span className='mb-2 block text-sm font-semibold'>
Email
</span>
<Field <Field
type='checkbox' name='email'
name='remember' type='email'
className='h-4 w-4 rounded border-[#19192d]/20 text-[#35b7a5]' 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> </label>
<Link
href='/forgot'
className='font-semibold text-[#248b7e] hover:underline'
>
Forgot password?
</Link>
</div>
<button <label className='block'>
type='submit' <span className='mb-2 block text-sm font-semibold'>
disabled={isFetching} Password
className={`w-full rounded-full px-6 py-4 font-semibold disabled:cursor-not-allowed disabled:opacity-60 ${ui.button}`} </span>
> <div className='relative'>
{isFetching ? 'Opening...' : 'Login'} <Field
</button> name='password'
</Form> 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> </Formik>
<p className={`mt-6 text-center text-sm ${ui.muted}`}> <p className={`mt-6 text-center text-sm ${ui.muted}`}>