1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import {
Column,
Form,
FormButtons,
FormField,
FormSubmitButton,
Heading,
Icon,
PasswordField,
TextField,
} from '@umami/react-zen';
import { useRouter } from 'next/navigation';
import { useMessages, useUpdateQuery } from '@/components/hooks';
import { Logo } from '@/components/svg';
import { setClientAuthToken } from '@/lib/client';
import { setUser } from '@/store/app';
export function LoginForm() {
const { formatMessage, labels, getErrorMessage } = useMessages();
const router = useRouter();
const { mutateAsync, error } = useUpdateQuery('/auth/login');
const handleSubmit = async (data: any) => {
await mutateAsync(data, {
onSuccess: async ({ token, user }) => {
setClientAuthToken(token);
setUser(user);
router.push('/');
},
});
};
return (
<Column justifyContent="center" alignItems="center" gap="6">
<Icon size="lg">
<Logo />
</Icon>
<Heading>umami</Heading>
<Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
<FormField
label={formatMessage(labels.username)}
data-test="input-username"
name="username"
rules={{ required: formatMessage(labels.required) }}
>
<TextField autoComplete="username" />
</FormField>
<FormField
label={formatMessage(labels.password)}
data-test="input-password"
name="password"
rules={{ required: formatMessage(labels.required) }}
>
<PasswordField autoComplete="current-password" />
</FormField>
<FormButtons>
<FormSubmitButton
data-test="button-submit"
variant="primary"
style={{ flex: 1 }}
isDisabled={false}
>
{formatMessage(labels.login)}
</FormSubmitButton>
</FormButtons>
</Form>
</Column>
);
}
|