343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import { mdiEye, mdiEyeOff } from '@mdi/js';
|
|
import { toast, ToastContainer } from 'react-toastify';
|
|
import { useRouter } from 'next/router';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
import { findMe, loginUser, resetAction } from '../stores/authSlice';
|
|
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
|
|
|
const ui = {
|
|
page: 'bg-[#fffdf9] text-[#19192d]',
|
|
banner: 'bg-[#19192d] text-white',
|
|
navShell: 'rounded-none bg-white ring-1 ring-[#19192d]/5',
|
|
ink: 'text-[#19192d]',
|
|
muted: 'text-[#72798a]',
|
|
accent: 'text-[#35b7a5]',
|
|
gold: 'text-[#35b7a5]',
|
|
border: 'border-[#19192d]/10',
|
|
surface: 'bg-white',
|
|
softSurface: 'bg-[#fffdf9]',
|
|
darkPanel: 'bg-[#19192d] text-white',
|
|
button: 'bg-[#35b7a5] text-white transition hover:brightness-105',
|
|
card: 'rounded-none border border-[#19192d]/10 bg-white ',
|
|
overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#35b7a5]',
|
|
heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
|
|
};
|
|
|
|
type LoginValues = {
|
|
email: string;
|
|
password: string;
|
|
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'>
|
|
<div
|
|
className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
|
|
>
|
|
<Link
|
|
href='/'
|
|
className='flex items-center gap-3 text-lg font-semibold tracking-tight'
|
|
>
|
|
<span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
|
|
C
|
|
</span>
|
|
<span className='sr-only'>Coaching SaaS Workspace</span>
|
|
</Link>
|
|
<nav
|
|
className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
|
|
>
|
|
<Link href='/how-it-works/'>How it works</Link>
|
|
<Link href='/about/'>About</Link>
|
|
<Link href='/services/'>Services</Link>
|
|
</nav>
|
|
<Link
|
|
href='/intake/'
|
|
className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}
|
|
>
|
|
Start assessment
|
|
</Link>
|
|
</div>
|
|
<nav
|
|
className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
|
|
>
|
|
<Link href='/how-it-works/'>How it works</Link>
|
|
<Link href='/about/'>About</Link>
|
|
<Link href='/services/'>Services</Link>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default function Login() {
|
|
const router = useRouter();
|
|
const dispatch = useAppDispatch();
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const {
|
|
currentUser,
|
|
isFetching,
|
|
errorMessage,
|
|
token,
|
|
notify: notifyState,
|
|
} = useAppSelector((state) => state.auth);
|
|
|
|
const initialValues: LoginValues = {
|
|
email: 'admin@flatlogic.com',
|
|
password: 'f76d928f',
|
|
remember: true,
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (token) {
|
|
dispatch(findMe());
|
|
}
|
|
}, [token, dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (currentUser?.id) {
|
|
if (currentUser?.app_role?.name === 'Client') {
|
|
router.push('/client-portal');
|
|
return;
|
|
}
|
|
|
|
router.push('/dashboard');
|
|
}
|
|
}, [currentUser?.id, currentUser?.app_role?.name, router]);
|
|
|
|
useEffect(() => {
|
|
if (errorMessage) {
|
|
toast(errorMessage, { type: 'error' });
|
|
}
|
|
}, [errorMessage]);
|
|
|
|
useEffect(() => {
|
|
if (notifyState?.showNotification) {
|
|
toast(notifyState?.textNotification, { type: 'success' });
|
|
dispatch(resetAction());
|
|
}
|
|
}, [notifyState?.showNotification, notifyState?.textNotification, dispatch]);
|
|
|
|
async function handleSubmit(values: LoginValues) {
|
|
const { remember, ...credentials } = values;
|
|
await dispatch(loginUser(credentials));
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Login')}</title>
|
|
</Head>
|
|
|
|
<main className={`min-h-screen ${ui.page}`}>
|
|
<div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
|
|
<p className='text-xs font-bold uppercase tracking-[0.34em]'>
|
|
Still human
|
|
</p>
|
|
<p className='mt-2 text-xl font-medium md:text-2xl'>
|
|
AI is not a coach. Keep the real relationship at the center.
|
|
</p>
|
|
</div>
|
|
|
|
<Nav />
|
|
|
|
<section className='mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 pb-20 pt-14 lg:grid-cols-[0.95fr_1.05fr] lg:px-8'>
|
|
<div>
|
|
<p className={ui.overline}>Welcome back</p>
|
|
<h1
|
|
className={`${ui.heading} mt-5 text-5xl leading-tight md:text-6xl`}
|
|
>
|
|
Return to your coaching workspace.
|
|
</h1>
|
|
<p className={`mt-6 max-w-2xl text-lg leading-8 ${ui.muted}`}>
|
|
Review session memory, prepare for the next call, and keep client
|
|
commitments moving between sessions.
|
|
</p>
|
|
|
|
<div className='mt-10 grid gap-4 sm:grid-cols-3'>
|
|
{[
|
|
['Session memory', 'Summaries, themes, and commitments.'],
|
|
['Prep briefs', 'Context before the next conversation.'],
|
|
['Client portal', 'Approved notes and resources.'],
|
|
].map(([title, copy]) => (
|
|
<div key={title} className={`p-5 ${ui.card}`}>
|
|
<h2 className='font-semibold'>{title}</h2>
|
|
<p className={`mt-2 text-sm leading-6 ${ui.muted}`}>{copy}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mx-auto w-full max-w-md'>
|
|
<div className={`${ui.card} p-6 md:p-8`}>
|
|
<div className='mb-8'>
|
|
<p className={`${ui.overline} text-xs`}>Sign in</p>
|
|
<h2 className='mt-3 text-3xl font-semibold'>
|
|
Open your workspace
|
|
</h2>
|
|
<p className={`mt-2 ${ui.muted}`}>
|
|
Use your workspace credentials to continue.
|
|
</p>
|
|
</div>
|
|
|
|
<Formik
|
|
initialValues={initialValues}
|
|
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-none border border-[#19192d]/10 bg-[#fffdf9] px-3 py-3 text-left transition hover:border-[#35b7a5] hover:bg-[#fffdf9]'
|
|
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
|
|
</span>
|
|
<Field
|
|
name='email'
|
|
type='email'
|
|
className={`w-full rounded-none 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-none 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-[#35b7a5] hover:underline'
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
|
|
<button
|
|
type='submit'
|
|
disabled={isFetching}
|
|
className={`w-full rounded-none 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}`}>
|
|
Don't have an account yet?{' '}
|
|
<Link
|
|
href='/register'
|
|
className='font-semibold text-[#35b7a5] hover:underline'
|
|
>
|
|
Create one
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className={`border-t px-5 py-10 ${ui.border}`}>
|
|
<div
|
|
className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}
|
|
>
|
|
<p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
|
|
<div className='flex gap-5'>
|
|
<Link href='/privacy-policy/'>Privacy Policy</Link>
|
|
<Link href='/terms-of-use/'>Terms of Use</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<ToastContainer />
|
|
</>
|
|
);
|
|
}
|
|
|
|
Login.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|