Finish authentication flow for 2FA

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import OpenInputField from '@/components/forms/OpenInputField';
 import { Link } from 'react-router-dom';
 import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
 import { connect } from 'react-redux';
-import { ReduxState } from '@/redux/types';
 import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
 import { httpErrorToHuman } from '@/api/http';
 

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps, StaticContext } from 'react-router';
 import { connect } from 'react-redux';
 import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
 import NetworkErrorMessage from '@/components/NetworkErrorMessage';
+import MessageBox from '@/components/MessageBox';
+import { Link } from 'react-router-dom';
+import loginCheckpoint from '@/api/auth/loginCheckpoint';
+import { httpErrorToHuman } from '@/api/http';
 
 type State = Readonly<{
     isLoading: boolean;
@@ -10,12 +14,46 @@ type State = Readonly<{
     code: string;
 }>;
 
-class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps, State> {
+class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps<{}, StaticContext, { token: string }>, State> {
     state: State = {
         code: '',
         isLoading: false,
     };
 
+    componentDidMount () {
+        const { state } = this.props.location;
+        if (!state || !state.token) {
+            this.props.history.replace('/login');
+        }
+    }
+
+    onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.value.length > 6) {
+            e.target.value = e.target.value.substring(0, 6);
+            return e.preventDefault();
+        }
+
+        this.setState({ code: e.target.value });
+    };
+
+    submit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        this.setState({ isLoading: true }, () => {
+            loginCheckpoint(this.props.location.state.token, this.state.code)
+                .then(response => {
+                    if (response.complete) {
+                        // @ts-ignore
+                        window.location = response.intended || '/';
+                    }
+                })
+                .catch(error => {
+                    console.error(error);
+                    this.setState({ errorMessage: httpErrorToHuman(error), isLoading: false });
+                });
+        });
+    };
+
     render () {
         return (
             <React.Fragment>
@@ -23,12 +61,20 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps,
                     Device Checkpoint
                 </h2>
                 <NetworkErrorMessage message={this.state.errorMessage}/>
-                <form className={'login-box'} onSubmit={() => null}>
-                    <p className={'text-sm text-neutral-700'}>
-                        This account is protected with two-factor authentication. Please provide an authentication
-                        code from your device in order to continue.
-                    </p>
-                    <div className={'flex mt-6'}>
+                <form className={'login-box'} onSubmit={this.submit}>
+                    <MessageBox type={'warning'}>
+                        This account is protected with two-factor authentication. A valid authentication token must
+                        be provided in order to continue.
+                    </MessageBox>
+                    <div className={'mt-6'}>
+                        <label htmlFor={'authentication_code'}>Authentication Code</label>
+                        <input
+                            id={'authentication_code'}
+                            type={'number'}
+                            autoFocus={true}
+                            className={'input'}
+                            onChange={this.onChangeHandler}
+                        />
                     </div>
                     <div className={'mt-6'}>
                         <button
@@ -43,6 +89,14 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps,
                             }
                         </button>
                     </div>
+                    <div className={'mt-6 text-center'}>
+                        <Link
+                            to={'/login'}
+                            className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                        >
+                            Return to Login
+                        </Link>
+                    </div>
                 </form>
             </React.Fragment>
         );

resources/scripts/components/auth/LoginContainer.tsx

@@ -12,8 +12,6 @@ type State = Readonly<{
 }>;
 
 export default class LoginContainer extends React.PureComponent<RouteComponentProps, State> {
-    username = React.createRef<HTMLInputElement>();
-
     state: State = {
         isLoading: false,
     };
@@ -33,7 +31,7 @@ export default class LoginContainer extends React.PureComponent<RouteComponentPr
                     }
 
                     this.props.history.replace('/login/checkpoint', {
-                        token: response.token,
+                        token: response.confirmationToken,
                     });
                 })
                 .catch(error => this.setState({

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -95,9 +95,9 @@ class ResetPasswordContainer extends React.PureComponent<Props, State> {
                     <label>Email</label>
                     <input value={this.state.email || ''} disabled={true}/>
                     <div className={'mt-6'}>
-                        <label htmlFor={'new-password'}>New Password</label>
+                        <label htmlFor={'new_password'}>New Password</label>
                         <input
-                            id={'new-password'}
+                            id={'new_password'}
                             type={'password'}
                             required={true}
                             onChange={this.onPasswordChange}
@@ -107,9 +107,9 @@ class ResetPasswordContainer extends React.PureComponent<Props, State> {
                         </p>
                     </div>
                     <div className={'mt-6'}>
-                        <label htmlFor={'new-password-confirm'}>Confirm New Password</label>
+                        <label htmlFor={'new_password_confirm'}>Confirm New Password</label>
                         <input
-                            id={'new-password-confirm'}
+                            id={'new_password_confirm'}
                             type={'password'}
                             required={true}
                             onChange={this.onPasswordConfirmChange}