You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
5.1 KiB
144 lines
5.1 KiB
import React, { useState } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import Button from '../Common/Button';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import * as Yup from 'yup';
|
|
import axios from 'axios';
|
|
|
|
const messages = defineMessages({
|
|
email: 'Email Address',
|
|
password: 'Password',
|
|
validationemailrequired: 'Not a valid email address',
|
|
validationpasswordrequired: 'Password required',
|
|
loginerror: 'Something went wrong when trying to sign in',
|
|
loggingin: 'Logging in...',
|
|
login: 'Login',
|
|
goback: 'Go back',
|
|
});
|
|
|
|
interface LocalLoginProps {
|
|
goBack: () => void;
|
|
revalidate: () => void;
|
|
}
|
|
|
|
const LocalLogin: React.FC<LocalLoginProps> = ({ goBack, revalidate }) => {
|
|
const intl = useIntl();
|
|
const [loginError, setLoginError] = useState<string | null>(null);
|
|
|
|
const LoginSchema = Yup.object().shape({
|
|
email: Yup.string()
|
|
.email()
|
|
.required(intl.formatMessage(messages.validationemailrequired)),
|
|
password: Yup.string().required(
|
|
intl.formatMessage(messages.validationpasswordrequired)
|
|
),
|
|
});
|
|
|
|
return (
|
|
<Formik
|
|
initialValues={{
|
|
email: '',
|
|
password: '',
|
|
}}
|
|
validationSchema={LoginSchema}
|
|
onSubmit={async (values) => {
|
|
try {
|
|
await axios.post('/api/v1/auth/local', {
|
|
email: values.email,
|
|
password: values.password,
|
|
});
|
|
} catch (e) {
|
|
setLoginError(intl.formatMessage(messages.loginerror));
|
|
} finally {
|
|
revalidate();
|
|
}
|
|
}}
|
|
>
|
|
{({ errors, touched, isSubmitting, isValid }) => {
|
|
return (
|
|
<>
|
|
<Form>
|
|
<div className="sm:border-t sm:border-gray-800">
|
|
<label
|
|
htmlFor="email"
|
|
className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
|
|
>
|
|
{intl.formatMessage(messages.email)}
|
|
</label>
|
|
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
|
|
<div className="flex max-w-lg rounded-md shadow-sm">
|
|
<Field
|
|
id="email"
|
|
name="email"
|
|
type="text"
|
|
placeholder="name@example.com"
|
|
className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
|
/>
|
|
</div>
|
|
{errors.email && touched.email && (
|
|
<div className="mt-2 text-red-500">{errors.email}</div>
|
|
)}
|
|
</div>
|
|
<label
|
|
htmlFor="password"
|
|
className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
|
|
>
|
|
{intl.formatMessage(messages.password)}
|
|
</label>
|
|
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
|
|
<div className="flex max-w-lg rounded-md shadow-sm">
|
|
<Field
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
placeholder={intl.formatMessage(messages.password)}
|
|
className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
|
|
/>
|
|
</div>
|
|
{errors.password && touched.password && (
|
|
<div className="mt-2 text-red-500">{errors.password}</div>
|
|
)}
|
|
</div>
|
|
{loginError && (
|
|
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
|
|
<div className="mt-2 text-red-500">{loginError}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="pt-5 mt-8 border-t border-gray-700">
|
|
<div className="flex justify-end">
|
|
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
|
<Button
|
|
buttonType="ghost"
|
|
type="reset"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
goBack();
|
|
}}
|
|
>
|
|
{intl.formatMessage(messages.goback)}
|
|
</Button>
|
|
</span>
|
|
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
|
<Button
|
|
buttonType="primary"
|
|
type="submit"
|
|
disabled={isSubmitting || !isValid}
|
|
>
|
|
{isSubmitting
|
|
? intl.formatMessage(messages.loggingin)
|
|
: intl.formatMessage(messages.login)}
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</>
|
|
);
|
|
}}
|
|
</Formik>
|
|
);
|
|
};
|
|
|
|
export default LocalLogin;
|