@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/auth/ImpersonateGate.jsx

@@ -0,0 +1,254 @@
+import '../styles/global.css';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import CustomFetch from '../Fetch';
+import { normaliseAuthError, syncCsrfFromResponse } from './authHelpers';
+
+import styles from '../styles/ImpersonateGate.module.scss';
+
+/**
+ * Impersonation hand-off — "open the client's portal as them".
+ *
+ * A staff member follows a one-use link, this exchanges its token for a
+ * session, and the browser lands in the portal. It is a curtain, not a screen:
+ * the only two things a user ever sees are a spinner and, if the token is not
+ * accepted, one card explaining why.
+ *
+ * Framework-agnostic on purpose. It does not read the URL, it does not write
+ * cookies and it does not know what a router is:
+ *   - the consumer extracts the token from wherever it lives and passes it in
+ *   - `onAuthenticated(user, token)` is where the consumer stores its session
+ *     however it likes (the Next.js portal writes two cookies there)
+ *   - `onNavigate(path)` is how it moves, falling back to a full page load
+ * That is what lets the same component serve a Next.js app and a React Router
+ * SPA without either importing the other's navigation.
+ *
+ * SECURITY: neither the token nor the URL is ever logged, at any level, in any
+ * branch. The token is a bearer credential for someone else's account and a
+ * console-capturing monitoring tool would ship it off the machine. The portal
+ * page this was ported from logged around it carefully; that care is kept, and
+ * the diagnostic lines it did have are gone.
+ */
+
+const DEFAULT_COPY = {
+    loading: 'Logging in as client...',
+    errorTitle: 'Authentication Error',
+    loginAction: 'Go to Login',
+    /** Shown when the consumer passed no token at all. */
+    missingToken: 'No token provided',
+    /** Shown when the server declines without saying why. */
+    failed: 'This link is no longer valid. Please ask for a new one.',
+};
+
+const ImpersonateGate = ({
+    /** The impersonation token, extracted from the URL by the consumer. */
+    token,
+    /** POST target that exchanges the token for a session. */
+    validateUrl = '/api/validateImpersonationToken',
+    /**
+     * Request body builder. The default is what the portal sends; a backend
+     * expecting a different shape passes its own.
+     */
+    buildBody = (value) => ({ token: value, minimal_response: true }),
+    /**
+     * Called with `(user, token)` on success, before the redirect. This is
+     * where the consumer persists its own session — cookies, storage, context.
+     * May return a promise; the settle delay starts once it resolves.
+     */
+    onAuthenticated,
+    /**
+     * Milliseconds to wait after `onAuthenticated` before navigating. The
+     * portal waits 500ms so a `Set-Cookie` written by the callback is visible
+     * to the next request; that is the default here.
+     */
+    settleDelay = 500,
+    /** Where a successful hand-off lands. */
+    redirectPath = '/portal/dashboard',
+    /** Where the error card's button goes. */
+    loginPath = '/portal',
+    /**
+     * How to move. Given a path. When absent, a full page load is used — which
+     * is usually what a session hand-off wants anyway.
+     */
+    onNavigate,
+    /** Merged over DEFAULT_COPY. */
+    copy: copyOverrides,
+    /** Replace the spinner with something of the consumer's own. */
+    spinner,
+    /** Notified with the normalised message when validation fails. */
+    onError,
+}) => {
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
+
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Timers are cleared on unmount so no setState fires against an unmounted
+    // tree, and so a navigation is not attempted after the user left.
+    const timers = useRef([]);
+
+    const go = (path) => {
+        if (typeof onNavigate === 'function') {
+            onNavigate(path);
+
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            window.location.href = path;
+        }
+    };
+
+    useEffect(
+        () => () => {
+            timers.current.forEach((timer) => clearTimeout(timer));
+            timers.current = [];
+        },
+        []
+    );
+
+    useEffect(() => {
+        let cancelled = false;
+
+        if (!token) {
+            setError(copy.missingToken);
+            setIsLoading(false);
+
+            return () => {
+                cancelled = true;
+            };
+        }
+
+        const fail = (message) => {
+            if (cancelled) {
+                return;
+            }
+
+            setError(message);
+            setIsLoading(false);
+
+            if (typeof onError === 'function') {
+                onError(message);
+            }
+        };
+
+        const succeed = async (result) => {
+            if (cancelled) {
+                return;
+            }
+
+            // Same class of hand-off as the sign-in screens: the app continues
+            // without a reload, so a token issued with this response has to
+            // reach the meta tag before `onAuthenticated` hands control to a
+            // consumer that will start making requests. Inert for a
+            // bearer-token backend, which sends no csrf_token.
+            syncCsrfFromResponse(result);
+
+            try {
+                if (typeof onAuthenticated === 'function') {
+                    // Awaited: a consumer that writes its session
+                    // asynchronously must have finished before the delay — and
+                    // therefore the navigation — begins.
+                    await onAuthenticated(result?.user, token);
+                }
+            } catch (callbackError) {
+                fail(normaliseAuthError(callbackError, copy.failed));
+
+                return;
+            }
+
+            if (cancelled) {
+                return;
+            }
+
+            const timer = setTimeout(() => {
+                go(redirectPath);
+            }, Math.max(0, Number(settleDelay) || 0));
+
+            timers.current.push(timer);
+        };
+
+        try {
+            const request = CustomFetch(
+                validateUrl,
+                'POST',
+                buildBody(token),
+                (result) => {
+                    const failure =
+                        (result &&
+                            typeof result === 'object' &&
+                            result.error) ||
+                        '';
+
+                    if (failure) {
+                        fail(normaliseAuthError(failure, copy.failed));
+
+                        return;
+                    }
+
+                    succeed(result);
+                },
+                (requestError) => {
+                    fail(normaliseAuthError(requestError, copy.failed));
+                }
+            );
+
+            // The callbacks above own every outcome; this only stops an
+            // unhandled rejection reaching the console (where it would print
+            // the request URL — which carries nothing secret here, but the
+            // habit is what keeps it that way).
+            if (request && typeof request.catch === 'function') {
+                request.catch(() => {});
+            }
+        } catch (thrown) {
+            fail(normaliseAuthError(thrown, copy.failed));
+        }
+
+        return () => {
+            cancelled = true;
+        };
+        // `token` is the whole input; re-running on a changed callback identity
+        // would re-POST a one-use token.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [token, validateUrl]);
+
+    if (isLoading) {
+        return (
+            <div className={styles.loading}>
+                <div className={styles.card} role="status" aria-live="polite">
+                    <h1 className={styles.title}>{copy.loading}</h1>
+                    {spinner === undefined ? (
+                        <div className={styles.spinner} />
+                    ) : (
+                        spinner
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className={styles.error}>
+                <div className={styles.card} role="alert">
+                    <h1 className={styles.title}>{copy.errorTitle}</h1>
+                    <p className={styles.message}>{error}</p>
+                    <button
+                        type="button"
+                        onClick={() => go(loginPath)}
+                        className={styles.button}
+                    >
+                        {copy.loginAction}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    // Validated and waiting on the redirect — the page is about to be replaced,
+    // so there is nothing worth painting.
+    return null;
+};
+
+export default ImpersonateGate;

package/src/components/auth/Login.jsx

@@ -1,4 +1,6 @@
 import '../styles/global.css';
+// Barlow is what Login.module.scss asks for; nothing loaded it before 6.7.0.
+import './authFont';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -6,9 +8,34 @@ import { toast } from 'react-toastify';
 import { Eye, EyeOff } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
+import AuthLoading from './AuthLoading';
+import AuthBrandPanel from './AuthBrandPanel';
+import { resolveAuthEndpoints } from './authEndpoints';
+import { syncCsrfFromResponse } from './authHelpers';
 
 import styles from '../styles/Login.module.scss';
 
+/**
+ * Copy, defaulting to the strings this screen has always rendered. Added in
+ * 6.8.1 only because the pending states needed labels of their own; every
+ * default here is what was previously hardcoded.
+ */
+const DEFAULT_COPY = {
+    title: 'Sign in',
+    sso: 'Sign in with Microsoft',
+    ssoRedirecting: 'Redirecting…',
+    altToggle: 'Sign in with email instead',
+    divider: 'or sign in with email',
+    emailLabel: 'Email',
+    passwordLabel: 'Password',
+    remember: 'Remember me',
+    forgot: 'Forgot password?',
+    submit: 'Sign in with email',
+    submitting: 'Signing in…',
+    /** Caption on the full-screen curtain while the browser is leaving. */
+    leaving: 'Signing you in…',
+};
+
 const Login = ({
     logo,
     loginBg,
@@ -16,16 +43,36 @@ const Login = ({
     setSystemAuth,
     setUserProfile,
     config = {},
+    /** Merged over DEFAULT_COPY above. */
+    copy: copyOverrides,
+    // Every URL this screen talks to, merged over the 6.6.3 literals. See
+    // authEndpoints.js — passing nothing keeps `/login/authenticate` and
+    // `/auth/azure` exactly as they were.
+    endpoints,
+    // Where a 2FA challenge sends the user. Only the path changes; the state
+    // handed over (userData / previousUrl / remember) is the same contract
+    // TwoFactorAuth has always read.
+    twoFactorPath = '/2fa',
+    resetPath = '/reset',
 }) => {
     const location = useLocation();
     const navigate = useNavigate();
+    const urls = resolveAuthEndpoints(endpoints);
 
     // Brand copy comes from the consuming project — this library is shared
     // across every VISNS CRM, so nothing project-specific may be hardcoded
     // here. Absent entries simply don't render (except the sign-in hint,
     // which falls back to a generic line).
     const branding = config.branding || {};
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
     const [isLoading, setIsLoading] = useState(false);
+    // Raised for a transition that ends in the browser unloading — the SSO
+    // redirect, and a `previous` URL after sign-in. Never lowered: there is
+    // nothing to come back to.
+    const [isLeaving, setIsLeaving] = useState(false);
+    // Any request in flight, or the page on its way out. Every control on the
+    // screen keys off this, so a second submit is impossible during either.
+    const isBusy = isLoading || isLeaving;
     const [showPassword, setShowPassword] = useState(false);
 
     // Collapsed behind a button, since Microsoft is how nearly everyone signs
@@ -69,9 +116,21 @@ const Login = ({
                         <button
                             type="button"
                             className={styles.sso}
+                            // The redirect to the identity provider can take a
+                            // moment to begin, and this used to give no sign it
+                            // had been pressed at all — so it got pressed
+                            // again. The curtain goes up and the button goes
+                            // inert for the whole of it.
+                            disabled={isBusy}
                             onClick={(e) => {
                                 e.preventDefault();
-                                window.location.href = '/auth/azure';
+
+                                if (isBusy) {
+                                    return;
+                                }
+
+                                setIsLeaving(true);
+                                window.location.href = urls.azureSso;
                             }}
                         >
                             {/* The Microsoft mark keeps its own light tile.
@@ -85,7 +144,9 @@ const Login = ({
                                     alt=""
                                 />
                             </span>
-                            Sign in with Microsoft
+                            {isLeaving
+                                ? copy.ssoRedirecting
+                                : copy.sso}
                         </button>
                     );
                     break;
@@ -116,7 +177,7 @@ const Login = ({
             toast.info('Logging in...', { autoClose: 2000 });
 
             CustomFetch(
-                '/login/authenticate',
+                urls.authenticate,
                 'POST',
                 {
                     ...auth,
@@ -126,14 +187,49 @@ const Login = ({
                             : '',
                 },
                 (result) => {
-                    setIsLoading(false);
+                    // Cleared per-branch, not up front: on every success path
+                    // this screen is on its way somewhere, and dropping the
+                    // button back to "Sign in with email" first left a gap
+                    // where the form looked ready for a second attempt.
                     if (result.error === '') {
+                        // Before anything else on the success path, and
+                        // before either branch: a token issued with this
+                        // response has to be in the meta tag by the time the
+                        // next request is built, and both branches lead
+                        // somewhere that makes requests. Inert when the
+                        // backend does not send one.
+                        syncCsrfFromResponse(result);
+
                         // Check if 2FA is required
                         if (result.requires_two_factor) {
-                            // Redirect to 2FA page with user data and remember flag
-                            navigate('/2fa', {
+                            // `challenge: true` is the marker, NOT the user
+                            // payload. The packages' code driver deliberately
+                            // answers a challenge with `user: null` — the
+                            // account is identified by a code sent out of
+                            // band, so echoing the record would hand an
+                            // unauthenticated caller a user lookup. Keying the
+                            // 2FA screen's mount guard off `userData` meant
+                            // that null bounced every SMS sign-in straight
+                            // back here: the code arrived, the screen to type
+                            // it into never appeared.
+                            //
+                            // TOTP still sends the user and the screen still
+                            // receives it, so nothing changes there.
+                            // Stays pending: the route change is instant, but
+                            // the 2FA screen mounts over this one and a button
+                            // that has snapped back to idle in between reads
+                            // as "nothing happened".
+                            navigate(twoFactorPath, {
                                 state: {
-                                    userData: result.user,
+                                    challenge: true,
+                                    userData: result.user ?? null,
+                                    // Not currently sent by the packages'
+                                    // AuthController on either driver; read
+                                    // anyway so a backend that grows one needs
+                                    // no change here. Absent, the 2FA screen
+                                    // simply omits its destination chip.
+                                    maskedContact:
+                                        result.masked_contact ?? '',
                                     previousUrl:
                                         location.state?.previousUrl || '',
                                     remember: auth.remember,
@@ -144,6 +240,11 @@ const Login = ({
                             setUserProfile(result.user);
 
                             if (result.previous && result.previous !== '') {
+                                // A real navigation to wherever the user was
+                                // headed before. The curtain covers it until
+                                // the browser unloads, so the form is never
+                                // left on screen looking operable.
+                                setIsLeaving(true);
                                 window.location.href = result.previous;
                             } else {
                                 // GenericAuth owns the transition from here:
@@ -155,6 +256,7 @@ const Login = ({
                             }
                         }
                     } else {
+                        setIsLoading(false);
                         setSystemAuth(false);
                         setAuthClass((prevState) => ({
                             ...prevState,
@@ -189,31 +291,18 @@ const Login = ({
     };
 
     return (
+        <>
+        {isLeaving ? <AuthLoading label={copy.leaving} /> : null}
         <div className={styles.auth}>
-            {/* The company's own work, not decoration. It is the reason the
-                rest of this system exists, so it carries the brand side and
-                the form is left to be a form. */}
-            <aside
-                className={styles.brand}
-                style={
-                    loginBg ? { backgroundImage: `url(${loginBg})` } : undefined
-                }
-                aria-hidden="true"
-            >
-                {(branding.eyebrow || branding.name || branding.tagline) && (
-                    <div className={styles.brandInk}>
-                        {branding.eyebrow && (
-                            <p className={styles.eyebrow}>{branding.eyebrow}</p>
-                        )}
-                        {branding.name && (
-                            <p className={styles.brandLine}>{branding.name}</p>
-                        )}
-                        {branding.tagline && (
-                            <p className={styles.brandSub}>{branding.tagline}</p>
-                        )}
-                    </div>
-                )}
-            </aside>
+            {/* The company's own work, not decoration. It is the reason
+                the rest of this system exists, so it carries the brand side
+                and the form is left to be a form. Shared markup — see
+                AuthBrandPanel. */}
+            <AuthBrandPanel
+                styles={styles}
+                loginBg={loginBg}
+                branding={branding}
+            />
 
             <main className={styles.panel}>
                 <div className={styles.panelInner}>
@@ -223,7 +312,7 @@ const Login = ({
                         className={styles.logo}
                     />
 
-                    <h1 className={styles.title}>Sign in</h1>
+                    <h1 className={styles.title}>{copy.title}</h1>
                     <p className={styles.subtitle}>
                         {branding.signInHint ||
                             (ssoAvailable
@@ -243,13 +332,13 @@ const Login = ({
                             aria-expanded="false"
                             aria-controls="email-signin"
                         >
-                            Sign in with email instead
+                            {copy.altToggle}
                         </button>
                     )}
 
                     {showEmail && ssoAvailable && (
                         <div className={styles.divider}>
-                            <span>or sign in with email</span>
+                            <span>{copy.divider}</span>
                         </div>
                     )}
 
@@ -275,8 +364,9 @@ const Login = ({
                                   className={authClass.username}
                                   autoComplete="username"
                                   placeholder=" "
+                                  disabled={isBusy}
                               />
-                              <label htmlFor="login-email">Email</label>
+                              <label htmlFor="login-email">{copy.emailLabel}</label>
                           </div>
 
                           <div className={styles.field}>
@@ -290,8 +380,9 @@ const Login = ({
                                   className={authClass.password}
                                   autoComplete="current-password"
                                   placeholder=" "
+                                  disabled={isBusy}
                               />
-                              <label htmlFor="login-password">Password</label>
+                              <label htmlFor="login-password">{copy.passwordLabel}</label>
                               {/* Typing a password blind on a phone in the sun is
                                   where most failed sign-ins come from. */}
                               <button
@@ -320,13 +411,14 @@ const Login = ({
                                       name="remember"
                                       checked={auth.remember}
                                       onChange={handleChange}
+                                      disabled={isBusy}
                                   />
-                                  Remember me
+                                  {copy.remember}
                               </label>
 
                               {config.passwordReset !== false && (
-                                  <Link to="/reset" className={styles.link}>
-                                      Forgot password?
+                                  <Link to={resetPath} className={styles.link}>
+                                      {copy.forgot}
                                   </Link>
                               )}
                           </div>
@@ -334,9 +426,9 @@ const Login = ({
                           <button
                               className={styles.submit}
                               type="submit"
-                              disabled={isLoading}
+                              disabled={isBusy}
                           >
-                              {isLoading ? 'Signing in…' : 'Sign in with email'}
+                              {isBusy ? copy.submitting : copy.submit}
                           </button>
                       </form>
                       </div>
@@ -348,6 +440,7 @@ const Login = ({
                 </div>
             </main>
         </div>
+        </>
     );
 };
 

package/src/components/auth/LogoutScreen.jsx

@@ -0,0 +1,112 @@
+import '../styles/global.css';
+
+import React, { useEffect, useRef } from 'react';
+import { LogOut } from 'lucide-react';
+
+import styles from '../styles/LogoutScreen.module.scss';
+
+/**
+ * Sign out — the confirmation shown while a session is being torn down.
+ *
+ * Ported from the Next.js portal's /portal/logout page, which held the screen
+ * for 1.5s and then hard-navigated. The reason for the delay is worth keeping:
+ * signing out is the one action where "did that work?" matters and where an
+ * instant redirect leaves no evidence that it did.
+ *
+ * Callback-driven and framework-agnostic. This component clears nothing itself
+ * — a library has no business deciding which of an app's cookies and storage
+ * keys constitute its session. The consumer clears them in `onLogout`, which
+ * runs once on mount, and moves the browser in `onComplete`.
+ */
+
+const DEFAULT_COPY = {
+    title: 'Logging out...',
+    message: 'Please wait while we log you out.',
+};
+
+const LogoutScreen = ({
+    /**
+     * Runs once on mount, before the delay: clear cookies, storage, caches,
+     * whatever this app's session is made of. May return a promise; it is not
+     * awaited, since the 1.5s delay is generous cover for local teardown.
+     */
+    onLogout,
+    /**
+     * Runs after `delay` ms. Given no `redirectPath`, this is the only thing
+     * that moves the browser — a consumer with a router navigates here.
+     */
+    onComplete,
+    /** Full page load performed after the delay when `onComplete` is absent. */
+    redirectPath,
+    /** How long the confirmation is held. */
+    delay = 1500,
+    /** Merged over DEFAULT_COPY. */
+    copy: copyOverrides,
+    /** Replace the sign-out glyph. */
+    icon,
+    /** Set false to drop the spinner. */
+    showSpinner = true,
+}) => {
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
+
+    // Strict mode mounts effects twice in development; the teardown must not
+    // run twice, since a consumer may be revoking a token on the server.
+    const started = useRef(false);
+
+    useEffect(() => {
+        if (started.current) {
+            return undefined;
+        }
+
+        started.current = true;
+
+        try {
+            if (typeof onLogout === 'function') {
+                const result = onLogout();
+
+                if (result && typeof result.catch === 'function') {
+                    result.catch(() => {});
+                }
+            }
+        } catch (error) {
+            // A failed local teardown must not strand the user on this screen;
+            // the redirect below still runs.
+        }
+
+        const timer = setTimeout(() => {
+            if (typeof onComplete === 'function') {
+                onComplete();
+
+                return;
+            }
+
+            if (redirectPath && typeof window !== 'undefined') {
+                // A hard navigation, not a route change: the point is to leave
+                // no in-memory state behind.
+                window.location.href = redirectPath;
+            }
+        }, Math.max(0, Number(delay) || 0));
+
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <div className={styles.page}>
+            <div className={styles.card} role="status" aria-live="polite">
+                <div className={styles.icon}>
+                    {icon === undefined ? (
+                        <LogOut size={32} strokeWidth={2} />
+                    ) : (
+                        icon
+                    )}
+                </div>
+                <h2 className={styles.title}>{copy.title}</h2>
+                <p className={styles.message}>{copy.message}</p>
+                {showSpinner ? <div className={styles.spinner} /> : null}
+            </div>
+        </div>
+    );
+};
+
+export default LogoutScreen;