@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/auth/Reset.jsx

@@ -1,109 +1,166 @@
 import '../styles/global.css';
+import './authFont';
 
 import React, { useState } from 'react';
-import Reveal from '../utils/Reveal';
+import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import parse from 'html-react-parser';
-import { User } from 'lucide-react';
+import { ArrowLeft, MailCheck } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
+import AuthShell from './AuthShell';
+import { resolveAuthEndpoints } from './authEndpoints';
+import { normaliseAuthError } from './authHelpers';
 
 import styles from '../styles/Reset.module.scss';
 
-const Reset = ({ logo }) => {
+/**
+ * Forgot password — the first half of the reset journey.
+ *
+ * Redesigned in 6.7.0 onto the same two-pane frame as the login screen it is
+ * reached from; the pre-6.1 centred card it used to render had its own greys,
+ * its own button and its own idea of what a form field looks like.
+ *
+ * The request itself is unchanged: POST {passwordForgot} with `{email}`, and a
+ * `{error: ''}` body means the mail is on its way.
+ */
+
+const DEFAULT_COPY = {
+    title: 'Forgot your password?',
+    subtitle:
+        'Enter the email address on your account and we will send you a link to set a new password.',
+    fieldLabel: 'Email',
+    submit: 'Send Reset Link',
+    submitting: 'Sending…',
+    /** Replaces the form once the request is in. */
+    sent: 'If that address is on an account, a reset link is on its way. Follow the instructions in the email to set a new password.',
+    back: 'Back to Login',
+    /** Client-side validation. */
+    required: 'Please type in your email address.',
+    failed: 'Could not request a password reset, please try again.',
+};
+
+const Reset = ({
+    logo,
+    loginBg,
+    config = {},
+    /** Merged over the 6.6.3 literals — see authEndpoints.js. */
+    endpoints,
+    /** Merged over DEFAULT_COPY above. */
+    copy: copyOverrides,
+    loginPath = '/login',
+}) => {
+    const urls = resolveAuthEndpoints(endpoints);
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
+    const branding = config.branding || {};
+
     const [email, setEmail] = useState('');
     const [emailClass, setEmailClass] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSent, setIsSent] = useState(false);
 
     const handleSubmit = (e) => {
         e.preventDefault();
 
-        if (email === '') {
-            const error = 'Please type in your email address.';
+        // The button is disabled too; this also covers Enter in the field.
+        if (isLoading) {
+            return;
+        }
+
+        if (email.trim() === '') {
             setEmailClass('inputError');
-            toast.error(<div>{parse(error)}</div>);
+            toast.error(copy.required);
+
             return;
         }
 
+        setIsLoading(true);
+
         CustomFetch(
-            '/password/forgot',
+            urls.passwordForgot,
             'POST',
             { email: email },
-            function (result) {
-                if (result.error === '') {
-                    setEmail('');
-                    toast.success(
-                        'You have successfully requested to reset your password, an email will be sent shortly. Please follow the instruction on the email.'
-                    );
-                } else {
-                    toast.error(result.error);
+            (result) => {
+                setIsLoading(false);
+
+                const failure =
+                    (result && typeof result === 'object' && result.error) ||
+                    '';
+
+                if (failure) {
+                    setEmailClass('inputError');
+                    toast.error(normaliseAuthError(failure, copy.failed));
+
+                    return;
                 }
+
+                setEmail('');
+                // The form is replaced rather than re-offered: a second submit
+                // while the first mail is still in flight only produces a
+                // second link, and invalidates the first.
+                setIsSent(true);
+                toast.success(copy.sent);
+            },
+            (error) => {
+                setIsLoading(false);
+                setEmailClass('inputError');
+                toast.error(normaliseAuthError(error, copy.failed));
             }
         );
     };
 
     return (
-        <div className={styles.lcontainer}>
-            <div className={styles.lwrap}>
-                <div className={styles.logincontainer}>
-                    <form onSubmit={handleSubmit}>
-                        <Reveal effect="fadeInUp">
-                            <div className={styles.login}>
-                                <img
-                                    src={logo}
-                                    alt="CRM"
-                                    className={styles.loginlogo}
-                                />
-                                <h2
-                                    style={{
-                                        textAlign: 'center',
-                                        marginBottom: '1.5rem',
-                                        color: '#111827',
-                                        fontWeight: '600',
-                                        fontSize: '1.5rem',
-                                    }}
-                                >
-                                    Forgot your password?
-                                </h2>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="email"
-                                            name="email"
-                                            value={email}
-                                            onChange={(e) => {
-                                                setEmail(e.target.value);
-                                                setEmailClass('');
-                                            }}
-                                            tabIndex="1"
-                                            className={emailClass}
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Email
-                                        </span>
-                                        <small>
-                                            <User strokeWidth={2} size={18} />
-                                        </small>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                >
-                                    <button
-                                        className={styles.btn}
-                                        type="submit"
-                                        tabIndex="2"
-                                    >
-                                        Send Reset Link
-                                    </button>
-                                </div>
-                            </div>
-                        </Reveal>
-                    </form>
+        <AuthShell
+            styles={styles}
+            logo={logo}
+            loginBg={loginBg}
+            branding={branding}
+            title={copy.title}
+            subtitle={isSent ? null : copy.subtitle}
+            footer={branding.footer}
+        >
+            {isSent ? (
+                <div className={styles.sent}>
+                    <MailCheck size={18} strokeWidth={2} />
+                    <p>{copy.sent}</p>
                 </div>
-            </div>
-        </div>
+            ) : (
+                <form onSubmit={handleSubmit} className={styles.form}>
+                    <div className={styles.field}>
+                        <input
+                            id="reset-email"
+                            type="email"
+                            name="email"
+                            value={email}
+                            onChange={(e) => {
+                                setEmail(e.target.value);
+                                setEmailClass('');
+                            }}
+                            tabIndex="1"
+                            className={emailClass}
+                            autoComplete="username"
+                            placeholder=" "
+                            autoFocus
+                            disabled={isLoading}
+                        />
+                        <label htmlFor="reset-email">{copy.fieldLabel}</label>
+                    </div>
+
+                    <button
+                        className={styles.submit}
+                        type="submit"
+                        disabled={isLoading}
+                        tabIndex="2"
+                    >
+                        {isLoading ? copy.submitting : copy.submit}
+                    </button>
+                </form>
+            )}
+
+            <Link to={loginPath} className={styles.back}>
+                <ArrowLeft size={15} strokeWidth={2} />
+                {copy.back}
+            </Link>
+        </AuthShell>
     );
 };