120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
import {
|
|
Alert,
|
|
Button,
|
|
Card,
|
|
Checkbox,
|
|
Paper,
|
|
PasswordInput,
|
|
Text,
|
|
TextInput,
|
|
Title,
|
|
} from '@pikku/mantine/core';
|
|
import { useForm } from 'react-hook-form';
|
|
import { useI18n } from '@/context/i18n-provider';
|
|
import classes from './LoginComponent.module.css';
|
|
|
|
export type LoginFormData = {
|
|
email: string;
|
|
password: string;
|
|
rememberMe: boolean;
|
|
};
|
|
|
|
export interface LoginComponentProps {
|
|
namespace: 'backoffice' | 'company';
|
|
mutation: {
|
|
mutateAsync: (data: { email: string; password: string }) => Promise<any>;
|
|
isPending: boolean;
|
|
error: Error | null;
|
|
};
|
|
}
|
|
|
|
export function LoginComponent({ namespace, mutation }: LoginComponentProps) {
|
|
const t = useI18n();
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<LoginFormData>({
|
|
defaultValues: {
|
|
email: '',
|
|
password: '',
|
|
rememberMe: false,
|
|
},
|
|
});
|
|
|
|
const onSubmit = async (data: LoginFormData) => {
|
|
await mutation.mutateAsync({
|
|
email: data.email,
|
|
password: data.password,
|
|
})
|
|
};
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
<Paper w='100%' maw={450} p='xl' withBorder>
|
|
<Title order={1} mb='lg'>
|
|
{t(`login.${namespace}.title` as any)}
|
|
</Title>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
{mutation.error && (
|
|
<Alert color="red" title={t('login.error.title')} mb="md">
|
|
<Text size="sm">
|
|
{t('login.error.message')}
|
|
</Text>
|
|
</Alert>
|
|
)}
|
|
|
|
<TextInput
|
|
type="email"
|
|
label={t('login.emaillabel')}
|
|
placeholder={t('login.emailplaceholder')}
|
|
size="md"
|
|
radius="md"
|
|
{...register('email', {
|
|
required: t('login.validation.emailrequired'),
|
|
pattern: {
|
|
value: /^\S+@\S+$/,
|
|
message: t('login.validation.emailinvalid'),
|
|
},
|
|
})}
|
|
error={errors.email?.message}
|
|
/>
|
|
<PasswordInput
|
|
type="password"
|
|
label={t('login.passwordlabel')}
|
|
placeholder={t('login.passwordplaceholder')}
|
|
mt="md"
|
|
size="md"
|
|
radius="md"
|
|
{...register('password', {
|
|
required: t('login.validation.passwordrequired'),
|
|
minLength: {
|
|
value: 6,
|
|
message: t('login.validation.passwordminlength'),
|
|
},
|
|
})}
|
|
error={errors.password?.message}
|
|
/>
|
|
<Checkbox
|
|
label={t('login.rememberme')}
|
|
mt="xl"
|
|
size="md"
|
|
{...register('rememberMe')}
|
|
/>
|
|
<Button
|
|
fullWidth
|
|
mt="xl"
|
|
size="md"
|
|
radius="md"
|
|
type="submit"
|
|
loading={mutation.isPending}
|
|
>
|
|
{t('login.loginbutton')}
|
|
</Button>
|
|
</form>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
}
|