129 lines
4.5 KiB
TypeScript
129 lines
4.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Link, RouteComponentProps } from 'react-router-dom';
|
|
import loginCheckpoint from '@/api/auth/loginCheckpoint';
|
|
import { httpErrorToHuman } from '@/api/http';
|
|
import LoginFormContainer from '@/components/auth/LoginFormContainer';
|
|
import { ActionCreator } from 'easy-peasy';
|
|
import { StaticContext } from 'react-router';
|
|
import Spinner from '@/components/elements/Spinner';
|
|
import { useFormikContext, withFormik } from 'formik';
|
|
import { object, string } from 'yup';
|
|
import useFlash from '@/plugins/useFlash';
|
|
import { FlashStore } from '@/state/flashes';
|
|
import Field from '@/components/elements/Field';
|
|
|
|
interface Values {
|
|
code: string;
|
|
recoveryCode: '',
|
|
}
|
|
|
|
type OwnProps = RouteComponentProps<{}, StaticContext, { token?: string }>
|
|
|
|
type Props = OwnProps & {
|
|
addError: ActionCreator<FlashStore['addError']['payload']>;
|
|
clearFlashes: ActionCreator<FlashStore['clearFlashes']['payload']>;
|
|
}
|
|
|
|
const LoginCheckpointContainer = () => {
|
|
const { isSubmitting, setFieldValue } = useFormikContext<Values>();
|
|
const [ isMissingDevice, setIsMissingDevice ] = useState(false);
|
|
|
|
return (
|
|
<LoginFormContainer
|
|
title={'Device Checkpoint'}
|
|
className={'w-full flex'}
|
|
>
|
|
<div className={'mt-6'}>
|
|
<Field
|
|
light={true}
|
|
name={isMissingDevice ? 'recoveryCode' : 'code'}
|
|
title={isMissingDevice ? 'Recovery Code' : 'Authentication Code'}
|
|
description={
|
|
isMissingDevice
|
|
? 'Enter one of the recovery codes generated when you setup 2-Factor authentication on this account in order to continue.'
|
|
: 'Enter the two-factor token generated by your device.'
|
|
}
|
|
type={isMissingDevice ? 'text' : 'number'}
|
|
autoFocus={true}
|
|
/>
|
|
</div>
|
|
<div className={'mt-6'}>
|
|
<button
|
|
type={'submit'}
|
|
className={'btn btn-primary btn-jumbo'}
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ?
|
|
<Spinner size={'tiny'} className={'mx-auto'}/>
|
|
:
|
|
'Continue'
|
|
}
|
|
</button>
|
|
</div>
|
|
<div className={'mt-6 text-center'}>
|
|
<span
|
|
onClick={() => {
|
|
setFieldValue('code', '');
|
|
setFieldValue('recoveryCode', '');
|
|
setIsMissingDevice(s => !s);
|
|
}}
|
|
className={'cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
|
>
|
|
{!isMissingDevice ? 'I\'ve Lost My Device' : 'I Have My Device'}
|
|
</span>
|
|
</div>
|
|
<div className={'mt-6 text-center'}>
|
|
<Link
|
|
to={'/auth/login'}
|
|
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
|
>
|
|
Return to Login
|
|
</Link>
|
|
</div>
|
|
</LoginFormContainer>
|
|
);
|
|
};
|
|
|
|
const EnhancedForm = withFormik<Props, Values>({
|
|
handleSubmit: ({ code, recoveryCode }, { setSubmitting, props: { addError, clearFlashes, location } }) => {
|
|
clearFlashes();
|
|
loginCheckpoint(location.state?.token || '', code, recoveryCode)
|
|
.then(response => {
|
|
if (response.complete) {
|
|
// @ts-ignore
|
|
window.location = response.intended || '/';
|
|
return;
|
|
}
|
|
|
|
setSubmitting(false);
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
setSubmitting(false);
|
|
addError({ message: httpErrorToHuman(error) });
|
|
});
|
|
},
|
|
|
|
mapPropsToValues: () => ({
|
|
code: '',
|
|
recoveryCode: '',
|
|
}),
|
|
})(LoginCheckpointContainer);
|
|
|
|
export default ({ history, location, ...props }: OwnProps) => {
|
|
const { addError, clearFlashes } = useFlash();
|
|
|
|
if (!location.state?.token) {
|
|
history.replace('/auth/login');
|
|
|
|
return null;
|
|
}
|
|
|
|
return <EnhancedForm
|
|
addError={addError}
|
|
clearFlashes={clearFlashes}
|
|
history={history}
|
|
location={location}
|
|
{...props}
|
|
/>;
|
|
};
|