Restyle login page for coaching workspace
This commit is contained in:
Flatlogic Bot
parent
259c536be5
commit
3340615e1f
@ -1,273 +1,281 @@
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import BaseIcon from "../components/BaseIcon";
|
||||
import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import Link from 'next/link';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import FormField from '../components/FormField';
|
||||
import FormCheckRadio from '../components/FormCheckRadio';
|
||||
import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
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';
|
||||
import Link from 'next/link';
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
|
||||
|
||||
const ui = {
|
||||
page: 'bg-[#fffdf9] text-[#19192d]',
|
||||
banner:
|
||||
'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
|
||||
navShell:
|
||||
'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
|
||||
ink: 'text-[#19192d]',
|
||||
muted: 'text-[#72798a]',
|
||||
accent: 'text-[#35b7a5]',
|
||||
gold: 'text-[#b17a1e]',
|
||||
border: 'border-[#19192d]/10',
|
||||
surface: 'bg-white',
|
||||
softSurface: 'bg-[#fbf8f1]',
|
||||
darkPanel: 'bg-[#19192d] text-white',
|
||||
button:
|
||||
'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
|
||||
card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
|
||||
overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]',
|
||||
heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
|
||||
};
|
||||
|
||||
type LoginValues = {
|
||||
email: string;
|
||||
password: string;
|
||||
remember: boolean;
|
||||
};
|
||||
|
||||
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-xl bg-[#f3fbf8] 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='/client-portal/'>Coachee</Link>
|
||||
<Link href='/#pricing'>Pricing</Link>
|
||||
<Link href='/#trust'>Trust</Link>
|
||||
</nav>
|
||||
<Link
|
||||
href='/register/'
|
||||
className={`rounded-full px-5 py-2.5 text-sm font-semibold ${ui.button}`}
|
||||
>
|
||||
Join waitlist
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const router = useRouter();
|
||||
const dispatch = useAppDispatch();
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
||||
const notify = (type, msg) => toast(msg, { type });
|
||||
const [ illustrationImage, setIllustrationImage ] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('video');
|
||||
const [contentPosition, setContentPosition] = useState('left');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
|
||||
(state) => state.auth,
|
||||
);
|
||||
const [initialValues, setInitialValues] = React.useState({ email:'admin@flatlogic.com',
|
||||
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 })
|
||||
remember: true,
|
||||
};
|
||||
|
||||
const title = 'Coaching SaaS Workspace'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect( () => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage()
|
||||
const video = await getPexelsVideo()
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
// Fetch user data
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
dispatch(findMe());
|
||||
}
|
||||
}, [token, dispatch]);
|
||||
// Redirect to dashboard if user is logged in
|
||||
|
||||
useEffect(() => {
|
||||
if (currentUser?.id) {
|
||||
router.push('/dashboard');
|
||||
}
|
||||
}, [currentUser?.id, router]);
|
||||
// Show error message if there is one
|
||||
|
||||
useEffect(() => {
|
||||
if (errorMessage){
|
||||
notify('error', errorMessage)
|
||||
if (errorMessage) {
|
||||
toast(errorMessage, { type: 'error' });
|
||||
}
|
||||
}, [errorMessage]);
|
||||
|
||||
}, [errorMessage])
|
||||
// Show notification if there is one
|
||||
useEffect(() => {
|
||||
if (notifyState?.showNotification) {
|
||||
notify('success', notifyState?.textNotification)
|
||||
dispatch(resetAction());
|
||||
}
|
||||
}, [notifyState?.showNotification])
|
||||
if (notifyState?.showNotification) {
|
||||
toast(notifyState?.textNotification, { type: 'success' });
|
||||
dispatch(resetAction());
|
||||
}
|
||||
}, [notifyState?.showNotification, notifyState?.textNotification, dispatch]);
|
||||
|
||||
const togglePasswordVisibility = () => {
|
||||
setShowPassword(!showPassword);
|
||||
};
|
||||
|
||||
const handleSubmit = async (value) => {
|
||||
const {remember, ...rest} = value
|
||||
await dispatch(loginUser(rest));
|
||||
};
|
||||
|
||||
const setLogin = (target: HTMLElement) => {
|
||||
setInitialValues(prev => ({
|
||||
...prev,
|
||||
email : target.innerText.trim(),
|
||||
password: target.dataset.password ?? '',
|
||||
}));
|
||||
};
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
|
||||
style={{
|
||||
backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}>
|
||||
<div className="flex justify-center w-full bg-blue-300/20">
|
||||
<a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
|
||||
by {image?.photographer} on Pexels</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const videoBlock = (video) => {
|
||||
if (video?.video_files?.length > 0) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||
<video
|
||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
>
|
||||
<source src={video.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={video.user.url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
};
|
||||
async function handleSubmit(values: LoginValues) {
|
||||
const { remember, ...credentials } = values;
|
||||
await dispatch(loginUser(credentials));
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={contentPosition === 'background' ? {
|
||||
backgroundImage: `${
|
||||
illustrationImage
|
||||
? `url(${illustrationImage.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
} : {}}>
|
||||
<Head>
|
||||
<title>{getPageTitle('Login')}</title>
|
||||
</Head>
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle('Login')}</title>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
|
||||
{contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
|
||||
{contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
|
||||
<CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
|
||||
|
||||
<h2 className="text-4xl font-semibold my-4">{title}</h2>
|
||||
|
||||
<div className='flex flex-row text-gray-500 justify-between'>
|
||||
<div>
|
||||
|
||||
<p className='mb-2'>Use{' '}
|
||||
<code className={`cursor-pointer ${textColor} `}
|
||||
data-password="f76d928f"
|
||||
onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
|
||||
<code className={`${textColor}`}>f76d928f</code>{' / '}
|
||||
to login as Admin</p>
|
||||
<p>Use <code
|
||||
className={`cursor-pointer ${textColor} `}
|
||||
data-password="2226f6026f52"
|
||||
onClick={(e) => setLogin(e.target)}>client@hello.com</code>{' / '}
|
||||
<code className={`${textColor}`}>2226f6026f52</code>{' / '}
|
||||
to login as User</p>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w='w-16'
|
||||
h='h-16'
|
||||
size={48}
|
||||
path={mdiInformation}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
enableReinitialize
|
||||
onSubmit={(values) => handleSubmit(values)}
|
||||
>
|
||||
<Form>
|
||||
<FormField
|
||||
label='Login'
|
||||
help='Please enter your login'>
|
||||
<Field name='email' />
|
||||
</FormField>
|
||||
<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>
|
||||
|
||||
<div className='relative'>
|
||||
<FormField
|
||||
label='Password'
|
||||
help='Please enter your password'>
|
||||
<Field name='password' type={showPassword ? 'text' : 'password'} />
|
||||
</FormField>
|
||||
<div
|
||||
className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
|
||||
onClick={togglePasswordVisibility}
|
||||
>
|
||||
<BaseIcon
|
||||
className='text-gray-500 hover:text-gray-700'
|
||||
size={20}
|
||||
path={showPassword ? mdiEyeOff : mdiEye}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Nav />
|
||||
|
||||
<div className={'flex justify-between'}>
|
||||
<FormCheckRadio type='checkbox' label='Remember'>
|
||||
<Field type='checkbox' name='remember' />
|
||||
</FormCheckRadio>
|
||||
<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>
|
||||
|
||||
<Link className={`${textColor} text-blue-600`} href={'/forgot'}>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
className={'w-full'}
|
||||
type='submit'
|
||||
label={isFetching ? 'Loading...' : 'Login'}
|
||||
color='info'
|
||||
disabled={isFetching}
|
||||
/>
|
||||
</BaseButtons>
|
||||
<br />
|
||||
<p className={'text-center'}>
|
||||
Don’t have an account yet?{' '}
|
||||
<Link className={`${textColor}`} href={'/register'}>
|
||||
New Account
|
||||
</Link>
|
||||
</p>
|
||||
</Form>
|
||||
</Formik>
|
||||
</CardBox>
|
||||
<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>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
<ToastContainer />
|
||||
</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)}
|
||||
>
|
||||
<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>
|
||||
</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}`}>
|
||||
Don't have an account yet?{' '}
|
||||
<Link
|
||||
href='/register'
|
||||
className='font-semibold text-[#248b7e] 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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user