87 lines
3.5 KiB
JavaScript
87 lines
3.5 KiB
JavaScript
import { useDisclosure } from '@mantine/hooks';
|
|
import { IconAt } from '@tabler/icons-react';
|
|
import { Paper, Text, TextInput, PasswordInput, Button, rem} from "@mantine/core";
|
|
import {useState} from 'react';
|
|
import {http} from "../middleware/axiosConfig";
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {useForm} from 'react-hook-form'
|
|
|
|
|
|
const Login = () => {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const {register, handleSubmit, } = useForm({
|
|
defaultValue: {
|
|
email: '',
|
|
password: ''
|
|
}
|
|
})
|
|
|
|
const {formState: { errors }} = useForm();
|
|
|
|
const [loginError, setloginError] = useState(false);
|
|
|
|
const onLogin = async (e) => {
|
|
try {
|
|
setloginError(false);
|
|
await http.get("/sanctum/csrf-cookie");
|
|
const res = await http.post("/api/login", e);
|
|
if (res.status === 200){
|
|
navigate("/lists");
|
|
}
|
|
}
|
|
catch (error) {
|
|
if (error.response.status === 401) {
|
|
setloginError(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
|
|
const [visible, { toggle }] = useDisclosure(false);
|
|
|
|
return (
|
|
<div>
|
|
<Paper shadow="md" radius="md" p="xl" withBorder>
|
|
<Text size="xl" fw={900} variant="gradient"
|
|
gradient={{ from: 'red', to: 'rgba(227, 0, 0, 1)', deg: 227 }}>WELCOME ADMIN!</Text>
|
|
<Text size="sm">Please login to access the Admin Account Management Site</Text>
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
|
|
<TextInput
|
|
style={{ width: '400px', marginBottom: '10px', marginTop: '15px' }}
|
|
label="Email"
|
|
leftSection={icon}
|
|
{...register('email')}
|
|
placeholder="Enter your work email address"
|
|
error={errors.email ? "Please enter a valid email" : null}
|
|
/></div>
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
|
|
<PasswordInput
|
|
style={{ width: '400px', marginBottom: '10px' }}
|
|
label="Password"
|
|
placeholder="Enter your Password"
|
|
{...register('password')}
|
|
visible={visible}
|
|
onVisibilityChange={toggle}
|
|
error={
|
|
errors.password
|
|
? "Please enter a valid password"
|
|
: null
|
|
}
|
|
/></div>
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
|
|
<Button variant="filled" color="lime" style={{ margin: 25 }} onClick={e => handleSubmit(onLogin)()}>Log In
|
|
</Button>
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
|
|
{loginError && (
|
|
<Text fw={500} fs="italic" c="red">
|
|
Login failed! Please verify your credentials and try again.
|
|
</Text>)}</div>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login; |