tailfin/web/app/routes/login/route.tsx
2024-01-03 10:01:15 -06:00

52 lines
1.1 KiB
TypeScript

import { useAuth } from "@/util/auth";
import {
Box,
Button,
Group,
PasswordInput,
Stack,
TextInput,
Title,
} from "@mantine/core";
import { useForm } from "@mantine/form";
export default function Login() {
const form = useForm({
initialValues: {
username: "",
password: "",
},
});
const { signin } = useAuth();
return (
<Stack gap="md" h="100%" justify="center" align="stretch">
<Title order={2} style={{ textAlign: "center" }}>
Login
</Title>
<Box maw={340} mx="auto">
<form
onSubmit={form.onSubmit((values) => {
signin(values);
})}
>
<TextInput
label="Username"
{...form.getInputProps("username")}
mt="md"
/>
<PasswordInput
label="Password"
{...form.getInputProps("password")}
mt="md"
/>
<Group justify="center" mt="xl">
<Button type="submit">Log In</Button>
</Group>
</form>
</Box>
</Stack>
);
}