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 { useAuth } from "@/util/auth";
import { import {
Box,
Button, Button,
Center,
Container,
Fieldset,
Group, Group,
Image,
PasswordInput, PasswordInput,
Stack, Stack,
TextInput, TextInput,
@ -21,31 +24,38 @@ export default function Login() {
const { signin } = useAuth(); const { signin } = useAuth();
return ( return (
<Stack gap="md" h="100%" justify="center" align="stretch"> <Container h="75%">
<Title order={2} style={{ textAlign: "center" }}> <Stack gap="md" h="100%" justify="center" align="stretch">
Login <Center>
</Title> <Image src="/logo.png" w="100px" />
<Box maw={340} mx="auto"> </Center>
<form <Title order={2} style={{ textAlign: "center" }}>
onSubmit={form.onSubmit((values) => { Tailfin
signin(values); </Title>
})} <Center>
> <Fieldset legend="Log In" w="350px">
<TextInput <form
label="Username" onSubmit={form.onSubmit((values) => {
{...form.getInputProps("username")} signin(values);
mt="md" })}
/> >
<PasswordInput <TextInput
label="Password" label="Username"
{...form.getInputProps("password")} {...form.getInputProps("username")}
mt="md" mt="md"
/> />
<Group justify="center" mt="xl"> <PasswordInput
<Button type="submit">Log In</Button> label="Password"
</Group> {...form.getInputProps("password")}
</form> mt="md"
</Box> />
</Stack> <Group justify="center" mt="xl">
<Button type="submit">Log In</Button>
</Group>
</form>
</Fieldset>
</Center>
</Stack>
</Container>
); );
} }