Add demo account picker to login
This commit is contained in:
Flatlogic Bot
parent
2505abb42d
commit
a6aef66d1e
@ -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}`}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user