59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import { Box, Button, Divider, Group, Paper, PasswordInput, Stack, Text, TextInput } from '@mantine/core';
|
|
import { useForm, zodResolver } from '@mantine/form';
|
|
import { upperFirst } from '@mantine/hooks';
|
|
import { z } from 'zod';
|
|
import { login } from '../apis/auth';
|
|
import { useNavigate } from 'react-router';
|
|
import Links from '../system/links';
|
|
|
|
const loginSchema = z.object({
|
|
username: z.string().min(3, 'Username must be at least 3 characters'),
|
|
password: z.string().min(6, 'Password must be at least 6 characters'),
|
|
});
|
|
|
|
export default function Login() {
|
|
const navigate = useNavigate();
|
|
|
|
const form = useForm({
|
|
validate: zodResolver(loginSchema),
|
|
initialValues: {
|
|
username: '',
|
|
password: '',
|
|
},
|
|
});
|
|
|
|
const handleSubmit = async (values: typeof form.values) => {
|
|
const credential = await login(values);
|
|
|
|
if (credential && credential.data) {
|
|
navigate(Links.DASHBOARD);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box className="w-screen h-screen flex items-center justify-center">
|
|
<Paper w={400} radius="md" p="xl" withBorder>
|
|
<Text size="xl" className="text-center" fw={500}>
|
|
Login to Bid System
|
|
</Text>
|
|
|
|
<Divider label="" labelPosition="center" my="lg" />
|
|
|
|
<form onSubmit={form.onSubmit(handleSubmit)}>
|
|
<Stack>
|
|
<TextInput label="Username" placeholder="Your username" {...form.getInputProps('username')} radius="md" />
|
|
|
|
<PasswordInput label="Password" placeholder="Your password" {...form.getInputProps('password')} radius="md" />
|
|
</Stack>
|
|
|
|
<Group justify="space-between" mt="xl">
|
|
<Button fullWidth type="submit" radius="xl">
|
|
{upperFirst('Login')}
|
|
</Button>
|
|
</Group>
|
|
</form>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|