azpsen/tailfin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update login page appearance

Browse Source
This commit is contained in:
april 2024-01-03 11:06:06 -06:00
parent 6137dde7df
commit 8e03e3dccf
1 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/app/routes/login/route.tsx
View File

@ -1,8 +1,11 @@
import { useAuth } from "@/util/auth";
import {
Box,
Button,
Center,
Container,
Fieldset,
Group,
Image,
PasswordInput,
Stack,
TextInput,
@ -21,31 +24,38 @@ export default function Login() {
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>
<Container h="75%">
<Stack gap="md" h="100%" justify="center" align="stretch">
<Center>
<Image src="/logo.png" w="100px" />
</Center>
<Title order={2} style={{ textAlign: "center" }}>
Tailfin
</Title>
<Center>
<Fieldset legend="Log In" w="350px">
<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>
</Fieldset>
</Center>
</Stack>
</Container>
);
}