umami/components/forms/LoginForm.js

112 lines
3.0 KiB
JavaScript
Raw Normal View History

2020-07-24 04:56:55 +02:00
import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-07 07:03:02 +02:00
import { Formik, Form, Field } from 'formik';
2022-08-29 05:20:54 +02:00
import { setItem } from 'next-basics';
2020-10-01 07:34:16 +02:00
import { useRouter } from 'next/router';
2020-08-12 07:24:41 +02:00
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
FormError,
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import Icon from 'components/common/Icon';
2022-02-23 08:52:31 +01:00
import useApi from 'hooks/useApi';
import { AUTH_TOKEN } from 'lib/constants';
import { setUser } from 'store/app';
import Logo from 'assets/logo.svg';
import styles from './LoginForm.module.css';
2020-07-24 04:56:55 +02:00
const validate = ({ username, password }) => {
const errors = {};
if (!username) {
2020-09-08 05:41:58 +02:00
errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
2020-07-24 04:56:55 +02:00
}
if (!password) {
2020-09-08 05:41:58 +02:00
errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
2020-07-24 04:56:55 +02:00
}
return errors;
};
2020-08-07 11:27:12 +02:00
export default function LoginForm() {
2022-02-23 08:52:31 +01:00
const { post } = useApi();
2020-10-01 07:34:16 +02:00
const router = useRouter();
2020-07-24 04:56:55 +02:00
const [message, setMessage] = useState();
const handleSubmit = async ({ username, password }) => {
2022-02-23 08:52:31 +01:00
const { ok, status, data } = await post('/auth/login', {
2020-10-01 07:34:16 +02:00
username,
password,
});
2020-07-24 04:56:55 +02:00
2020-10-01 00:14:44 +02:00
if (ok) {
setItem(AUTH_TOKEN, data.token);
setUser(data.user);
2022-02-27 00:53:45 +01:00
await router.push('/');
return null;
2020-07-24 04:56:55 +02:00
} else {
2020-09-08 05:41:58 +02:00
setMessage(
2020-10-01 00:14:44 +02:00
status === 401 ? (
2020-09-08 05:41:58 +02:00
<FormattedMessage
id="message.incorrect-username-password"
defaultMessage="Incorrect username/password."
/>
) : (
2020-10-01 00:14:44 +02:00
data
2020-09-08 05:41:58 +02:00
),
);
2020-07-24 04:56:55 +02:00
}
};
return (
2020-08-12 07:24:41 +02:00
<FormLayout className={styles.login}>
2020-08-07 07:03:02 +02:00
<Formik
initialValues={{
username: '',
password: '',
}}
validate={validate}
onSubmit={handleSubmit}
>
{() => (
<Form>
2020-11-10 06:01:53 +01:00
<div className={styles.header}>
<Icon icon={<Logo />} size="xlarge" className={styles.icon} />
<h1 className="center">umami</h1>
</div>
2020-08-07 07:03:02 +02:00
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" />
</label>
<div>
<Field name="username" type="text" />
<FormError name="username" />
</div>
2020-08-07 07:03:02 +02:00
</FormRow>
<FormRow>
2020-09-06 02:27:01 +02:00
<label htmlFor="password">
<FormattedMessage id="label.password" defaultMessage="Password" />
</label>
<div>
<Field name="password" type="password" />
<FormError name="password" />
</div>
2020-08-07 07:03:02 +02:00
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.login" defaultMessage="Login" />
2020-08-07 09:24:01 +02:00
</Button>
2020-08-07 07:03:02 +02:00
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>
)}
</Formik>
</FormLayout>
2020-07-24 04:56:55 +02:00
);
}