93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import { ToastContainer, toast } from 'react-toastify';
|
|
import Head from 'next/head';
|
|
import BaseButton from '../components/BaseButton';
|
|
import CardBox from '../components/CardBox';
|
|
import SectionFullScreen from '../components/SectionFullScreen';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import FormField from '../components/FormField';
|
|
import BaseDivider from '../components/BaseDivider';
|
|
import BaseButtons from '../components/BaseButtons';
|
|
import { useRouter } from 'next/router';
|
|
import { getPageTitle } from '../config';
|
|
|
|
import axios from "axios";
|
|
|
|
export default function Register() {
|
|
const [loading, setLoading] = React.useState(false);
|
|
const router = useRouter();
|
|
const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
|
|
|
|
|
|
const handleSubmit = async (value) => {
|
|
setLoading(true)
|
|
try {
|
|
|
|
const { data: response } = await axios.post('/auth/signup',value);
|
|
await router.push('/login')
|
|
setLoading(false)
|
|
notify('success', 'Please check your email for verification link')
|
|
} catch (error) {
|
|
setLoading(false)
|
|
console.log('error: ', error)
|
|
notify('error', 'Something was wrong. Try again')
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Login')}</title>
|
|
</Head>
|
|
|
|
<SectionFullScreen bg='violet'>
|
|
<CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
|
|
<Formik
|
|
initialValues={{
|
|
email: '',
|
|
password: '',
|
|
confirm: ''
|
|
}}
|
|
onSubmit={(values) => handleSubmit(values)}
|
|
>
|
|
<Form>
|
|
|
|
<FormField label='Email' help='Please enter your email'>
|
|
<Field type='email' name='email' />
|
|
</FormField>
|
|
<FormField label='Password' help='Please enter your password'>
|
|
<Field type='password' name='password' />
|
|
</FormField>
|
|
<FormField label='Confirm Password' help='Please confirm your password'>
|
|
<Field type='password' name='confirm' />
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<BaseButtons>
|
|
<BaseButton
|
|
type='submit'
|
|
label={loading ? 'Loading...' : 'Register' }
|
|
color='info'
|
|
/>
|
|
<BaseButton
|
|
href={'/login'}
|
|
label={'Login'}
|
|
color='info'
|
|
/>
|
|
</BaseButtons>
|
|
</Form>
|
|
</Formik>
|
|
</CardBox>
|
|
</SectionFullScreen>
|
|
<ToastContainer />
|
|
</>
|
|
);
|
|
}
|
|
|
|
Register.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|