Add support for password reset links

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -58,9 +58,12 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
 
     render () {
         return (
-            <React.Fragment>
+            <div>
+                <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+                    Request Password Reset
+                </h2>
                 <form className={'login-box'} onSubmit={this.handleSubmission}>
-                    <div className={'-mx-3'}>
+                    <div className={'mt-3'}>
                         <OpenInputField
                             ref={this.emailField}
                             id={'email'}
@@ -93,18 +96,14 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
                         </Link>
                     </div>
                 </form>
-            </React.Fragment>
+            </div>
         );
     }
 }
 
-const mapStateToProps = (state: ReduxState) => ({
-    flashes: state.flashes,
-});
-
 const mapDispatchToProps = {
     pushFlashMessage,
     clearAllFlashMessages,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordContainer);
+export default connect(null, mapDispatchToProps)(ForgotPasswordContainer);

resources/scripts/components/auth/LoginContainer.tsx

@@ -3,7 +3,7 @@ import OpenInputField from '@/components/forms/OpenInputField';
 import { Link } from 'react-router-dom';
 import login from '@/api/auth/login';
 import { httpErrorToHuman } from '@/api/http';
-import MessageBox from '@/components/MessageBox';
+import NetworkErrorMessage from '@/components/NetworkErrorMessage';
 
 type State = Readonly<{
     errorMessage?: string;
@@ -52,15 +52,12 @@ export default class LoginContainer extends React.PureComponent<{}, State> {
     render () {
         return (
             <React.Fragment>
-                {this.state.errorMessage &&
-                <div className={'mb-4'}>
-                    <MessageBox type={'error'} title={'Error'}>
-                        {this.state.errorMessage}
-                    </MessageBox>
-                </div>
-                }
+                <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+                    Login to Continue
+                </h2>
+                <NetworkErrorMessage message={this.state.errorMessage}/>
                 <form className={'login-box'} onSubmit={this.submit}>
-                    <div className={'-mx-3'}>
+                    <div className={'mt-3'}>
                         <OpenInputField
                             autoFocus={true}
                             label={'Username or Email'}
@@ -71,7 +68,7 @@ export default class LoginContainer extends React.PureComponent<{}, State> {
                             disabled={this.state.isLoading}
                         />
                     </div>
-                    <div className={'-mx-3 mt-6'}>
+                    <div className={'mt-6'}>
                         <OpenInputField
                             label={'Password'}
                             type={'password'}
@@ -96,7 +93,7 @@ export default class LoginContainer extends React.PureComponent<{}, State> {
                     </div>
                     <div className={'mt-6 text-center'}>
                         <Link
-                            to={'/forgot-password'}
+                            to={'/password'}
                             className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
                         >
                             Forgot password?

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import OpenInputField from '@/components/forms/OpenInputField';
+import { RouteComponentProps } from 'react-router';
+import { parse } from 'query-string';
+import { Link } from 'react-router-dom';
+import NetworkErrorMessage from '@/components/NetworkErrorMessage';
+import performPasswordReset from '@/api/auth/performPasswordReset';
+import { httpErrorToHuman } from '@/api/http';
+import { connect } from 'react-redux';
+import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
+
+type State = Readonly<{
+    email?: string;
+    password?: string;
+    passwordConfirm?: string;
+    isLoading: boolean;
+    errorMessage?: string;
+}>;
+
+type Props = Readonly<RouteComponentProps<{ token: string }> & {
+    pushFlashMessage: typeof pushFlashMessage;
+    clearAllFlashMessages: typeof clearAllFlashMessages;
+}>;
+
+class ResetPasswordContainer extends React.PureComponent<Props, State> {
+    state: State = {
+        isLoading: false,
+    };
+
+    componentDidMount () {
+        const parsed = parse(this.props.location.search);
+
+        this.setState({ email: parsed.email as string || undefined });
+    }
+
+    canSubmit () {
+        if (!this.state.password || !this.state.email) {
+            return false;
+        }
+
+        return this.state.password.length >= 8 && this.state.password === this.state.passwordConfirm;
+    }
+
+    onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
+        password: e.target.value,
+    });
+
+    onPasswordConfirmChange = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
+        passwordConfirm: e.target.value,
+    });
+
+    onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        const { password, passwordConfirm, email } = this.state;
+        if (!password || !email || !passwordConfirm) {
+            return;
+        }
+
+        this.props.clearAllFlashMessages();
+        this.setState({ isLoading: true }, () => {
+            performPasswordReset(email, {
+                token: this.props.match.params.token,
+                password: password,
+                passwordConfirmation: passwordConfirm,
+            })
+                .then(response => {
+                    if (response.redirectTo) {
+                        // @ts-ignore
+                        window.location = response.redirectTo;
+                        return;
+                    }
+
+                    this.props.pushFlashMessage({
+                        type: 'success',
+                        message: 'Your password has been reset, please login to continue.',
+                    });
+                    this.props.history.push('/login');
+                })
+                .catch(error => {
+                    console.error(error);
+                    this.setState({ errorMessage: httpErrorToHuman(error) });
+                })
+                .then(() => this.setState({ isLoading: false }));
+        });
+    };
+
+    render () {
+        return (
+            <div>
+                <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+                    Reset Password
+                </h2>
+                <NetworkErrorMessage message={this.state.errorMessage}/>
+                <form className={'login-box'} onSubmit={this.onSubmit}>
+                    <div className={'mt-3'}>
+                        <OpenInputField
+                            label={'Email'}
+                            value={this.state.email || ''}
+                            disabled
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <OpenInputField
+                            autoFocus={true}
+                            label={'New Password'}
+                            description={'Passwords must be at least 8 characters in length.'}
+                            type={'password'}
+                            required={true}
+                            id={'password'}
+                            onChange={this.onPasswordChange}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <OpenInputField
+                            label={'Confirm New Password'}
+                            type={'password'}
+                            required={true}
+                            id={'password-confirm'}
+                            onChange={this.onPasswordConfirmChange}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <button
+                            type={'submit'}
+                            className={'btn btn-primary btn-jumbo'}
+                            disabled={this.state.isLoading || !this.canSubmit()}
+                        >
+                            {this.state.isLoading ?
+                                <span className={'spinner white'}>&nbsp;</span>
+                                :
+                                'Reset Password'
+                            }
+                        </button>
+                    </div>
+                    <div className={'mt-6 text-center'}>
+                        <Link
+                            to={'/login'}
+                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                        >
+                            Return to Login
+                        </Link>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+const mapDispatchToProps = {
+    pushFlashMessage,
+    clearAllFlashMessages,
+};
+
+export default connect(null, mapDispatchToProps)(ResetPasswordContainer);