76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import {
|
|
Form,
|
|
FormRow,
|
|
FormInput,
|
|
FormButtons,
|
|
TextField,
|
|
PasswordField,
|
|
SubmitButton,
|
|
Icon,
|
|
} from 'react-basics';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useApi, useMessages } from '@/components/hooks';
|
|
import { setUser } from '@/store/app';
|
|
import { setClientAuthToken } from '@/lib/client';
|
|
import Logo from '@/assets/logo.svg';
|
|
import styles from './LoginForm.module.css';
|
|
|
|
export function LoginForm() {
|
|
const { formatMessage, labels } = useMessages();
|
|
const router = useRouter();
|
|
const { post, useMutation } = useApi();
|
|
const { mutate, error, isPending } = useMutation({
|
|
mutationFn: (data: any) => post('/auth/login', data),
|
|
});
|
|
|
|
const handleSubmit = async (data: any) => {
|
|
mutate(data, {
|
|
onSuccess: async ({ token, user }) => {
|
|
setClientAuthToken(token);
|
|
setUser(user);
|
|
|
|
router.push('/dashboard');
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={styles.login}>
|
|
<Icon className={styles.icon} size="xl">
|
|
<Logo />
|
|
</Icon>
|
|
<div className={styles.title}>umami</div>
|
|
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
|
|
<FormRow label={formatMessage(labels.username)}>
|
|
<FormInput
|
|
data-test="input-username"
|
|
name="username"
|
|
rules={{ required: formatMessage(labels.required) }}
|
|
>
|
|
<TextField autoComplete="off" />
|
|
</FormInput>
|
|
</FormRow>
|
|
<FormRow label={formatMessage(labels.password)}>
|
|
<FormInput
|
|
data-test="input-password"
|
|
name="password"
|
|
rules={{ required: formatMessage(labels.required) }}
|
|
>
|
|
<PasswordField />
|
|
</FormInput>
|
|
</FormRow>
|
|
<FormButtons>
|
|
<SubmitButton
|
|
data-test="button-submit"
|
|
className={styles.button}
|
|
variant="primary"
|
|
disabled={isPending}
|
|
>
|
|
{formatMessage(labels.login)}
|
|
</SubmitButton>
|
|
</FormButtons>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|