{getPageTitle('Login')}

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 { 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 { useRouter } from 'next/router'; 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"; 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 [showPassword, setShowPassword] = useState(false); const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector( (state) => state.auth, ); const [initialValues, setInitialValues] = React.useState({ email:'admin@flatlogic.com', password: '11636c83', remember: true }) const title = 'Power Suite Executive Directory' // 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) } }, [errorMessage]) // Show notification if there is one useEffect(() => { if (notifyState?.showNotification) { notify('success', notifyState?.textNotification) dispatch(resetAction()); } }, [notifyState?.showNotification]) 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 ?? '', })); }; return (

{title}

Use{' '} setLogin(e.target)}>admin@flatlogic.com{' / '} 11636c83{' / '} to login as Admin

Use setLogin(e.target)}>client@hello.com{' / '} 3b35b2d53d37{' / '} to login as User

handleSubmit(values)} >

Forgot password?

Don’t have an account yet?{' '} New Account

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