Add support for password reset links

resources/scripts/components/FlashMessageRender.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import MessageBox from '@/components/MessageBox';
 
 type Props = Readonly<{
+    spacerClass?: string;
     flashes: FlashMessage[];
 }>;
 
@@ -16,18 +17,17 @@ class FlashMessageRender extends React.PureComponent<Props> {
         return (
             <React.Fragment>
                 {
-                    this.props.flashes.map(flash => (
-                        <MessageBox
-                            key={flash.id || flash.type + flash.message}
-                            type={flash.type}
-                            title={flash.title}
-                        >
-                            {flash.message}
-                        </MessageBox>
+                    this.props.flashes.map((flash, index) => (
+                        <React.Fragment key={flash.id || flash.type + flash.message}>
+                            {index > 0 && <div className={this.props.spacerClass || 'mt-2'}></div>}
+                            <MessageBox type={flash.type} title={flash.title}>
+                                {flash.message}
+                            </MessageBox>
+                        </React.Fragment>
                     ))
                 }
             </React.Fragment>
-        )
+        );
     }
 }
 

resources/scripts/components/NetworkErrorMessage.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MessageBox from '@/components/MessageBox';
+
+export default ({ message }: { message: string | undefined | null }) => (
+    !message ?
+        null
+        :
+        <div className={'mb-4'}>
+            <MessageBox type={'error'} title={'Error'}>
+                {message}
+            </MessageBox>
+        </div>
+);

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);

resources/scripts/components/forms/OpenInputField.tsx

@@ -4,13 +4,18 @@ import classNames from 'classnames';
 type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     label: string;
     description?: string;
+    value?: string;
 };
 
-export default React.forwardRef<HTMLInputElement, Props>(({ className, description, onChange, label, ...props }, ref) => {
-    const [ value, setValue ] = React.useState('');
+export default React.forwardRef<HTMLInputElement, Props>(({ className, description, onChange, label, value, ...props }, ref) => {
+    const [ stateValue, setStateValue ] = React.useState(value);
+
+    if (value !== stateValue) {
+        setStateValue(value);
+    }
 
     const classes = classNames('input open-label', {
-        'has-content': value && value.length > 0,
+        'has-content': stateValue && stateValue.length > 0,
     });
 
     return (
@@ -19,16 +24,17 @@ export default React.forwardRef<HTMLInputElement, Props>(({ className, descripti
                 ref={ref}
                 className={classes}
                 onChange={e => {
-                    setValue(e.target.value);
+                    setStateValue(e.target.value);
                     if (onChange) {
                         onChange(e);
                     }
                 }}
+                value={typeof value !== 'undefined' ? (stateValue || '') : undefined}
                 {...props}
             />
             <label htmlFor={props.id}>{label}</label>
             {description &&
-            <p className={'text-xs text-neutral-500'}>
+            <p className={'mt-2 text-xs text-neutral-500'}>
                 {description}
             </p>
             }