169 lines
4.7 KiB
JavaScript
169 lines
4.7 KiB
JavaScript
import { Box, Button, TextField } from '@mui/material';
|
|
import Head from 'next/head';
|
|
|
|
import { ChevronLeftOutlined } from '@mui/icons-material';
|
|
import LoginIcon from '@mui/icons-material/Login';
|
|
import { useFormik } from 'formik';
|
|
import { useRouter } from 'next/dist/client/router';
|
|
import React from 'react';
|
|
import is_development_plant from 'utils/is_development_plant';
|
|
import * as yup from 'yup';
|
|
|
|
let default_init_values = {
|
|
username: '',
|
|
passwod: '',
|
|
};
|
|
|
|
if (is_development_plant) {
|
|
console.log('development plant');
|
|
|
|
default_init_values = {
|
|
username: 'admi',
|
|
password: 'nimda',
|
|
};
|
|
}
|
|
|
|
const validationSchema = yup.object({
|
|
username: yup
|
|
.string('Enter your username')
|
|
.min(5, 'Username should be of minimum 5 characters length')
|
|
.required('Username is required'),
|
|
password: yup
|
|
.string('Enter your password')
|
|
.min(5, 'Password should be of minimum 5 characters length')
|
|
.required('Password is required'),
|
|
});
|
|
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
const [changing_page, setChangingPage] = React.useState(false);
|
|
|
|
const formik = useFormik({
|
|
initialValues: default_init_values,
|
|
validationSchema,
|
|
onSubmit: values => {
|
|
fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(values),
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
router.push('/AdminHome');
|
|
} else {
|
|
alert(data.message);
|
|
formik.resetForm();
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
alert('server error');
|
|
});
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>admin login page</title>
|
|
<meta name='description' content='Generated by create next app' />
|
|
<link rel='icon' href='/favicon.ico' />
|
|
</Head>
|
|
|
|
<Box
|
|
sx={{
|
|
height: '90vh',
|
|
//
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: '1rem',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
//
|
|
width: '100%',
|
|
padding: '0 2rem',
|
|
}}
|
|
>
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<Box
|
|
sx={{
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
fontSize: '1.2rem',
|
|
marginTop: '2rem',
|
|
marginBottom: '2rem',
|
|
}}
|
|
>
|
|
Admin Login Page
|
|
</Box>
|
|
<TextField
|
|
fullWidth
|
|
variant='standard'
|
|
id='username'
|
|
name='username'
|
|
value={formik.values.username}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.username && Boolean(formik.errors.username)}
|
|
helperText={formik.touched.username && formik.errors.username}
|
|
label='Username'
|
|
inputProps={{ sx: { textAlign: 'center' } }}
|
|
/>
|
|
<TextField
|
|
fullWidth
|
|
variant='standard'
|
|
id='password'
|
|
name='password'
|
|
value={formik.values.password}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.password && Boolean(formik.errors.password)}
|
|
helperText={formik.touched.password && formik.errors.password}
|
|
type='password'
|
|
label='Password'
|
|
inputProps={{ sx: { textAlign: 'center' } }}
|
|
/>
|
|
|
|
<Box
|
|
style={{
|
|
paddingTop: '3rem',
|
|
display: 'flex',
|
|
justifyContent: 'space-around',
|
|
}}
|
|
>
|
|
<Button
|
|
disabled={changing_page || formik.isSubmitting}
|
|
variant='outlined'
|
|
startIcon={<ChevronLeftOutlined />}
|
|
onClick={() => {
|
|
setChangingPage(true);
|
|
router.push('/');
|
|
}}
|
|
>
|
|
Back
|
|
</Button>
|
|
<Button
|
|
variant='contained'
|
|
type='submit'
|
|
startIcon={<LoginIcon />}
|
|
disabled={!(formik.isValid && formik.dirty && !formik.isSubmitting) || changing_page}
|
|
>
|
|
Login
|
|
</Button>
|
|
</Box>
|
|
</form>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|