@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/auth/Verify.jsx

@@ -1,19 +1,84 @@
 import '../styles/global.css';
+import './authFont';
 
 import React, { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import parse from 'html-react-parser';
 import validator from 'validator';
-import Reveal from '../utils/Reveal';
+import { ArrowLeft, Eye, EyeOff } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
+import AuthShell from './AuthShell';
+import { resolveAuthEndpoints } from './authEndpoints';
+import { normaliseAuthError } from './authHelpers';
 
 import styles from '../styles/Verify.module.scss';
 
-const Verify = ({ logo }) => {
+/**
+ * Set a new password — the second half of the reset journey, reached from the
+ * link in the reset email (`/verify/:code`).
+ *
+ * Redesigned in 6.7.0 onto the same two-pane frame as the rest of the journey.
+ * The one behavioural change that came with it: the password rules are now
+ * stated up front and tick themselves off as the user types, instead of
+ * arriving as a five-line `<br />`-separated toast after a rejected submit. The
+ * rules themselves are unchanged — `validator.isStrongPassword`'s defaults, the
+ * same function that gates the submit.
+ */
+
+/**
+ * The checks `validator.isStrongPassword` applies at its defaults, restated so
+ * the screen can show which are already satisfied. This list is display only:
+ * the submit is still gated by validator itself, so the two can never disagree
+ * about whether a password is acceptable.
+ */
+const PASSWORD_RULES = [
+    { label: 'At least 8 characters', test: (v) => v.length >= 8 },
+    { label: 'One uppercase letter', test: (v) => /[A-Z]/.test(v) },
+    { label: 'One lowercase letter', test: (v) => /[a-z]/.test(v) },
+    { label: 'One number', test: (v) => /\d/.test(v) },
+    { label: 'One symbol', test: (v) => /[^A-Za-z0-9]/.test(v) },
+];
+
+const DEFAULT_COPY = {
+    title: 'Reset your password',
+    subtitle: 'Choose a new password for your account.',
+    passwordLabel: 'Password',
+    repeatLabel: 'Re-type Password',
+    submit: 'Set New Password',
+    submitting: 'Saving…',
+    back: 'Back to Login',
+    success:
+        'You have successfully set a new password, please use your new password to login into the system.',
+    /** Client-side validation. */
+    required: 'Please type in your new password.',
+    mismatch: 'The password does not match, please re-type the password.',
+    weak: 'That password does not meet all of the requirements listed below.',
+    failed: 'Could not set a new password, please try again.',
+};
+
+const Verify = ({
+    logo,
+    loginBg,
+    config = {},
+    /** Merged over the 6.6.3 literals — see authEndpoints.js. */
+    endpoints,
+    /** Merged over DEFAULT_COPY above. */
+    copy: copyOverrides,
+    /** Set false to hide the live rules checklist. */
+    showRules = true,
+    rules = PASSWORD_RULES,
+    loginPath = '/login',
+}) => {
     const navigate = useNavigate();
     const { code } = useParams();
+
+    const urls = resolveAuthEndpoints(endpoints);
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
+    const branding = config.branding || {};
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
     const [formData, setFormData] = useState({
         password: '',
         passwordRepeat: '',
@@ -26,150 +91,196 @@ const Verify = ({ logo }) => {
 
     const handleInputChange = (e) => {
         const { name, value } = e.target;
-        setFormData((prevFormData) => ({
-            ...prevFormData,
+
+        setFormData((prev) => ({
+            ...prev,
             [name]: value,
             passwordClass: '',
             passwordRepeatClass: '',
         }));
     };
 
+    /** Returns an error string, or '' when the pair is acceptable. */
     const validatePassword = () => {
-        let _error = '';
-
         if (password === '') {
-            _error = 'Please type in your new password.';
-            setFormData((prevFormData) => ({
-                ...prevFormData,
+            setFormData((prev) => ({ ...prev, passwordClass: 'inputError' }));
+
+            return copy.required;
+        }
+
+        if (password !== passwordRepeat) {
+            setFormData((prev) => ({
+                ...prev,
                 passwordClass: 'inputError',
+                passwordRepeatClass: 'inputError',
             }));
-        } else {
-            if (password !== passwordRepeat) {
-                _error =
-                    'The password does not match, please re-type the password.';
-                setFormData((prevFormData) => ({
-                    ...prevFormData,
-                    passwordClass: 'inputError',
-                    passwordRepeatClass: 'inputError',
-                }));
-            } else {
-                if (!validator.isStrongPassword(password)) {
-                    _error =
-                        'Your password is too weak it must contain the following:<br />- Must contain at least 8 characters.<br />- Must contain at least one uppercase letter.<br />- Must contain at least one lowercase letter.<br />- Must contain at least one number.<br />- Must contain at least one symbol.<br />';
-                }
-            }
+
+            return copy.mismatch;
+        }
+
+        if (!validator.isStrongPassword(password)) {
+            setFormData((prev) => ({ ...prev, passwordClass: 'inputError' }));
+
+            return copy.weak;
         }
 
-        return _error;
+        return '';
     };
 
     const handleSubmit = (e) => {
-        if (e) {
-            e.preventDefault();
-            const errorMsg = validatePassword();
-
-            if (errorMsg === '') {
-                CustomFetch(
-                    '/password/reset',
-                    'POST',
-                    {
-                        code: code,
-                        password: password,
-                        password_confirmation: passwordRepeat,
-                    },
-                    function (result) {
-                        if (result.error === '') {
-                            toast.success(
-                                'You have successfully set a new password, please use your new password to login into the system.'
-                            );
+        if (!e) {
+            return;
+        }
 
-                            navigate('/login');
-                        } else {
-                            toast.error(result.error);
-                        }
-                    }
-                );
-            } else {
-                toast.error(<div>{parse(errorMsg)}</div>);
-            }
+        e.preventDefault();
+
+        // The button is disabled too; this also covers Enter in the field.
+        if (isLoading) {
+            return;
+        }
+
+        const errorMsg = validatePassword();
+
+        if (errorMsg !== '') {
+            toast.error(errorMsg);
+
+            return;
         }
+
+        setIsLoading(true);
+
+        CustomFetch(
+            urls.passwordReset,
+            'POST',
+            {
+                code: code,
+                password: password,
+                password_confirmation: passwordRepeat,
+            },
+            (result) => {
+                // Cleared only on failure: on success this screen navigates
+                // away, and a button that returns to "Set New Password" first
+                // invites a second submit against a spent reset code.
+                const failure =
+                    (result && typeof result === 'object' && result.error) ||
+                    '';
+
+                if (failure) {
+                    setIsLoading(false);
+                    toast.error(normaliseAuthError(failure, copy.failed));
+
+                    return;
+                }
+
+                toast.success(copy.success);
+                navigate(loginPath);
+            },
+            (error) => {
+                setIsLoading(false);
+                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',
-                                    }}
-                                >
-                                    Reset your password
-                                </h2>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="password"
-                                            name="password"
-                                            value={password}
-                                            onChange={handleInputChange}
-                                            tabIndex="1"
-                                            className={passwordClass}
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Password
-                                        </span>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="password"
-                                            name="passwordRepeat"
-                                            value={passwordRepeat}
-                                            onChange={handleInputChange}
-                                            tabIndex="2"
-                                            className={passwordRepeatClass}
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Re-type Password
-                                        </span>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                >
-                                    <button
-                                        className={styles.btn}
-                                        type="submit"
-                                        tabIndex="3"
-                                    >
-                                        Set New Password
-                                    </button>
-                                </div>
-                            </div>
-                        </Reveal>
-                    </form>
+        <AuthShell
+            styles={styles}
+            logo={logo}
+            loginBg={loginBg}
+            branding={branding}
+            title={copy.title}
+            subtitle={copy.subtitle}
+            footer={branding.footer}
+        >
+            <form onSubmit={handleSubmit} className={styles.form}>
+                <div className={styles.field}>
+                    <input
+                        id="verify-password"
+                        type={showPassword ? 'text' : 'password'}
+                        name="password"
+                        value={password}
+                        onChange={handleInputChange}
+                        tabIndex="1"
+                        className={passwordClass}
+                        autoComplete="new-password"
+                        placeholder=" "
+                        autoFocus
+                        disabled={isLoading}
+                    />
+                    <label htmlFor="verify-password">
+                        {copy.passwordLabel}
+                    </label>
+                    {/* Typing a password blind, twice, is where most failed
+                        resets come from. */}
+                    <button
+                        type="button"
+                        className={styles.reveal}
+                        onClick={() => setShowPassword((on) => !on)}
+                        aria-label={
+                            showPassword ? 'Hide password' : 'Show password'
+                        }
+                        tabIndex="-1"
+                    >
+                        {showPassword ? (
+                            <EyeOff size={18} strokeWidth={1.9} />
+                        ) : (
+                            <Eye size={18} strokeWidth={1.9} />
+                        )}
+                    </button>
                 </div>
-            </div>
-        </div>
+
+                <div className={styles.field}>
+                    <input
+                        id="verify-password-repeat"
+                        type={showPassword ? 'text' : 'password'}
+                        name="passwordRepeat"
+                        value={passwordRepeat}
+                        onChange={handleInputChange}
+                        tabIndex="2"
+                        className={passwordRepeatClass}
+                        autoComplete="new-password"
+                        placeholder=" "
+                        disabled={isLoading}
+                    />
+                    <label htmlFor="verify-password-repeat">
+                        {copy.repeatLabel}
+                    </label>
+                </div>
+
+                {showRules ? (
+                    <ul className={styles.rules}>
+                        {rules.map((rule) => {
+                            const met = rule.test(password);
+
+                            return (
+                                <li
+                                    key={rule.label}
+                                    className={met ? styles.ruleMet : undefined}
+                                >
+                                    {rule.label}
+                                </li>
+                            );
+                        })}
+                    </ul>
+                ) : null}
+
+                <button
+                    className={styles.submit}
+                    type="submit"
+                    disabled={isLoading}
+                    tabIndex="3"
+                >
+                    {isLoading ? copy.submitting : copy.submit}
+                </button>
+            </form>
+
+            <Link to={loginPath} className={styles.back}>
+                <ArrowLeft size={15} strokeWidth={2} />
+                {copy.back}
+            </Link>
+        </AuthShell>
     );
 };
 
 export default Verify;
+export { PASSWORD_RULES };

package/src/components/auth/authEndpoints.js

@@ -0,0 +1,105 @@
+/**
+ * Auth endpoint table.
+ *
+ * Every URL the auth screens talk to used to be a string literal inside the
+ * component that used it, which made the whole journey unusable by any app
+ * whose backend does not mount Laravel's routes at exactly those paths. They
+ * are collected here instead, and every screen takes an `endpoints` prop that
+ * is merged over these defaults.
+ *
+ * The defaults ARE the 6.6.3 literals, so an app that passes nothing keeps the
+ * behaviour it already has.
+ *
+ * Pure module (no React, no DOM) so it can be unit-tested with `node --test`.
+ */
+
+/** The paths the library used before they were configurable. */
+export const DEFAULT_AUTH_ENDPOINTS = {
+    /** Login.jsx — POST {email, password, remember, location}. */
+    authenticate: '/login/authenticate',
+    /** TwoFactorAuth.jsx — POST {code, previous_url, remember}. */
+    twoFactorChallenge: '/login/two-factor-challenge',
+    /** TwoFactorAuth.jsx (mode="code") — POST {} to re-send the SMS code. */
+    twoFactorResend: '/login/two-factor-resend',
+    /** Login.jsx — the azure SSO button navigates here. */
+    azureSso: '/auth/azure',
+    /** GenericAuth.jsx — GET, polled to decide whether a session exists. */
+    profile: '/ajax/user/profile',
+    /** Reset.jsx — POST {email}. */
+    passwordForgot: '/password/forgot',
+    /** Verify.jsx — POST {code, password, password_confirmation}. */
+    passwordReset: '/password/reset',
+};
+
+/**
+ * Merge a partial `endpoints` prop over the defaults.
+ *
+ * Nullish and empty-string entries are dropped rather than applied: passing
+ * `{authenticate: undefined}` must not blank the default and leave a component
+ * POSTing to ''. Unknown keys are carried through, so a consumer can park its
+ * own paths on the same object.
+ */
+export const resolveAuthEndpoints = (overrides) => {
+    const resolved = { ...DEFAULT_AUTH_ENDPOINTS };
+
+    if (!overrides || typeof overrides !== 'object') {
+        return resolved;
+    }
+
+    Object.keys(overrides).forEach((key) => {
+        const value = overrides[key];
+
+        if (value === null || value === undefined || value === '') {
+            return;
+        }
+
+        resolved[key] = value;
+    });
+
+    return resolved;
+};
+
+/** The client-portal route paths, as they were hardcoded before 6.7.0. */
+export const DEFAULT_CLIENT_PATHS = {
+    /** Route segment the client routes are nested under in GenericAuth. */
+    base: 'client',
+    login: '/client/login',
+    verify: '/client/verify',
+    portal: '/client/portal',
+};
+
+/**
+ * Merge a partial `paths` prop over the client defaults, the same way
+ * `resolveAuthEndpoints` does. When only `base` is given the three absolute
+ * paths are derived from it, so `{base: 'portal'}` yields the whole
+ * `/portal/*` family without restating each one.
+ */
+export const resolveClientPaths = (overrides) => {
+    if (!overrides || typeof overrides !== 'object') {
+        return { ...DEFAULT_CLIENT_PATHS };
+    }
+
+    const base =
+        typeof overrides.base === 'string' && overrides.base !== ''
+            ? overrides.base.replace(/^\/+|\/+$/g, '')
+            : DEFAULT_CLIENT_PATHS.base;
+
+    const derived = {
+        base,
+        login: `/${base}/login`,
+        verify: `/${base}/verify`,
+        portal: `/${base}/portal`,
+    };
+
+    Object.keys(overrides).forEach((key) => {
+        const value = overrides[key];
+
+        if (key === 'base' || value === null || value === undefined || value === '') {
+            return;
+        }
+
+        derived[key] = value;
+    });
+
+    return derived;
+};

package/src/components/auth/authFont.js

@@ -0,0 +1,23 @@
+/**
+ * The auth journey's typeface.
+ *
+ * Login.module.scss has asked for 'Barlow' since the screen was redesigned, but
+ * nothing in this library ever loaded it — @fontsource/barlow was a dependency
+ * that no file imported, so every consumer fell through to system-ui and the
+ * screen only looked right in the one app that happened to load Barlow itself.
+ *
+ * Importing it from a module of its own means each auth screen adds the font
+ * with one line, and an app that never renders an auth screen never pays for
+ * the four @font-face declarations.
+ *
+ * The weights are exactly the ones the auth styles use: 300 (.brandSub), 400
+ * (body), 600 (labels, buttons) and 700 (.brandLine, .title). An app that
+ * prefers its own face sets `--auth-font-family` and the CSS never asks for
+ * Barlow at all — the files are still fetched by the browser only if a rule
+ * actually uses the family.
+ */
+
+import '@fontsource/barlow/300.css';
+import '@fontsource/barlow/400.css';
+import '@fontsource/barlow/600.css';
+import '@fontsource/barlow/700.css';