import React, { useEffect } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { Formik, Form, Field } from 'formik'; import { mdiAccount, mdiAsterisk, mdiShieldCheck, mdiArrowLeft } from '@mdi/js'; import BaseButton from '../components/BaseButton'; import CardBox from '../components/CardBox'; import SectionFullScreen from '../components/SectionFullScreen'; import LayoutGuest from '../layouts/Guest'; import FormField from '../components/FormField'; import BaseIcon from '../components/BaseIcon'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; import { loginUser, resetAction, findMe } from '../stores/authSlice'; import { getPageTitle } from '../config'; const validate = (values: any) => { const errors: any = {}; if (!values.email) { errors.email = 'Required'; } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { errors.email = 'Invalid email address'; } if (!values.password) { errors.password = 'Required'; } return errors; }; export default function LoginPage() { const router = useRouter(); const dispatch = useAppDispatch(); const { isFetching, token } = useAppSelector((state) => state.auth); const { action, businessId } = router.query; const isClaiming = action === 'claim'; const title = 'Crafted Network' useEffect(() => { if (token) { dispatch(findMe()); // If claiming, redirect back to business details after login if (isClaiming && businessId) { router.push(`/public/businesses-details?id=${businessId}`); } else { router.push('/dashboard'); } } }, [token, dispatch, isClaiming, businessId, router]); useEffect(() => { dispatch(resetAction()); }, [dispatch]); const handleSubmit = async (values: any) => { const { email, password } = values; const rest = { email, password }; await dispatch(loginUser(rest)); }; return ( {getPageTitle('Login')} | {title}

{/* Left Side: Visual/Branding */}

The Crafted Network

Join the world's most trusted network for verified professional services.

{/* Right Side: Login Form */}

{/* Back Button */} Back to Home

Welcome Back

{isClaiming ? (

Verify Ownership

Please login or create an account to verify ownership and take control of your business profile.

) : (

)}

{({ errors, touched }) => (

New to the Network?

Create Professional Account

); } LoginPage.getLayout = function getLayout(page: ReactElement) { return page; };