@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/auth/AuthLoading.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+/**
+ * The please-wait curtain.
+ *
+ * Shown while the profile check is in flight, and — since 6.8.1 — for the
+ * whole of any transition that ends in the browser unloading the page.
+ * Rendering null through either of those leaves a blank white screen, or worse,
+ * a screen that still looks interactive while nothing on it will respond.
+ *
+ * Lived inside GenericAuth until the auth screens needed it too. Extracted
+ * verbatim rather than reimplemented, so the curtain a screen raises for itself
+ * and the one GenericAuth raises over it are the same object: when both are up
+ * at once — which is exactly what happens on a successful 2FA hand-off — there
+ * is nothing to see between them.
+ *
+ * Self-contained on purpose: a SMIL animation, no stylesheet dependency, and
+ * the consuming app's design tokens with neutral fallbacks. It has to be able
+ * to render when the page it covers has not finished loading its CSS.
+ */
+const AuthLoading = ({ label }) => (
+    <div
+        role="status"
+        aria-label="Loading"
+        aria-live="polite"
+        style={{
+            position: 'fixed',
+            inset: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--bg-color, #f4f4f5)',
+            // Above every app surface — this is a curtain, not a page.
+            zIndex: 2000,
+        }}
+    >
+        <svg width="42" height="42" viewBox="0 0 42 42" fill="none">
+            <circle
+                cx="21"
+                cy="21"
+                r="18"
+                stroke="var(--border-color, #dfe3eb)"
+                strokeWidth="4"
+            />
+            <path
+                d="M39 21a18 18 0 0 0-18-18"
+                stroke="var(--primary-color, #52525b)"
+                strokeWidth="4"
+                strokeLinecap="round"
+            >
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 21 21"
+                    to="360 21 21"
+                    dur="0.9s"
+                    repeatCount="indefinite"
+                />
+            </path>
+        </svg>
+        {label ? (
+            <p
+                style={{
+                    margin: 0,
+                    fontFamily: 'var(--font-family, inherit)',
+                    fontSize: 'var(--font-size-md, 0.9375rem)',
+                    color: 'var(--paragraph-color, #52525b)',
+                }}
+            >
+                {label}
+            </p>
+        ) : null}
+    </div>
+);
+
+export default AuthLoading;

package/src/components/auth/AuthShell.jsx

@@ -0,0 +1,59 @@
+/**
+ * The two-pane frame every staff auth screen sits in.
+ *
+ * Login.jsx keeps its own copy of this markup — it is the screen the design was
+ * drawn for and it has an SSO disclosure the others do not — but TwoFactorAuth,
+ * Reset and Verify all render the same frame around different contents, so it
+ * lives here rather than three times over.
+ *
+ * The styles come from the caller: each screen owns its own CSS module (they
+ * all `@include auth-shell` from styles/_authShell.scss, so the class names are
+ * identical) and passes it in as `styles`. That keeps the module scoping intact
+ * while the markup stays in one place.
+ */
+
+import React from 'react';
+
+import AuthBrandPanel from './AuthBrandPanel';
+
+const AuthShell = ({
+    styles,
+    logo,
+    loginBg,
+    branding = {},
+    title,
+    subtitle,
+    children,
+    footer,
+}) => (
+    <div className={styles.auth}>
+        <AuthBrandPanel
+            styles={styles}
+            loginBg={loginBg}
+            branding={branding}
+        />
+
+        <main className={styles.panel}>
+            <div className={styles.panelInner}>
+                {logo ? (
+                    <img
+                        src={logo}
+                        alt={branding.name || 'Logo'}
+                        className={styles.logo}
+                    />
+                ) : null}
+
+                {title ? <h1 className={styles.title}>{title}</h1> : null}
+                {subtitle ? (
+                    <p className={styles.subtitle}>{subtitle}</p>
+                ) : null}
+
+                {children}
+
+                {footer ? <p className={styles.foot}>{footer}</p> : null}
+            </div>
+        </main>
+    </div>
+);
+
+export default AuthShell;

package/src/components/auth/ClientAuth.jsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+
+import ClientLogin from './ClientLogin';
+import ClientOTPVerify from './ClientOTPVerify';
+
+/**
+ * Both client sign-in steps on one page.
+ *
+ * ClientLogin and ClientOTPVerify were written as two routes with a router
+ * navigation between them. That is one shape a sign-in can take; the other is
+ * a single page that swaps its own contents, which is what the Next.js portal
+ * does and what an App Router page can actually host. This composes the two
+ * screens into that shape by holding the challenge in state instead of in
+ * router state.
+ *
+ * It needs no router, so it mounts cleanly under Next.js, and it is the whole
+ * of the "zero adapter code" story: a consumer supplies endpoints, a protocol
+ * name and an `onAuthenticated`, and writes nothing that knows a request body
+ * from a response field.
+ *
+ *   <ClientAuth
+ *       layout="split"
+ *       loginBg="/images/office.jpg"
+ *       branding={{ name: 'Client Portal', tagline: '…' }}
+ *       protocol="contact"
+ *       urls={{ login: '/api/auth/request-otp', verify: '/api/auth/login-otp' }}
+ *       usernameDomain="virtualportal.com.au"
+ *       showContactHint
+ *       showDevOtp
+ *       showMaskedContact
+ *       showContactField
+ *       resendCooldown={0}
+ *       onAuthenticated={(user, token) => {
+ *           setCookie('portal_token', token, { maxAge: 28800 });
+ *           setUserData(user);
+ *           router.push('/portal/dashboard');
+ *       }}
+ *   />
+ *
+ * Props are forwarded to whichever step owns them; `loginProps` and
+ * `verifyProps` are escape hatches for anything that has to differ between the
+ * two. The shared ones (logo, urls, protocol, …) are passed to both.
+ */
+
+const ClientAuth = ({
+    /** Shared. */
+    logo,
+    /**
+     * 'card' (default) renders exactly what every consumer rendered before
+     * 6.8.3: a box centred in the space the host page gives it. 'split' is the
+     * staff sign-in's two-pane language — brand on one side, task on the other
+     * — sized to fill its PARENT rather than the viewport, so the consumer
+     * keeps its own header and footer and hands this the space between.
+     */
+    layout = 'card',
+    /** Split layout: the brand panel's photograph. Ignored by 'card'. */
+    loginBg,
+    /**
+     * Split layout: {eyebrow, name, tagline, footer}, rendered in the same
+     * type hierarchy as the staff Login's brand panel. Ignored by 'card'.
+     */
+    branding,
+    urls,
+    paths,
+    protocol,
+    contactField,
+    usernameDomain = null,
+    showDevOtp = false,
+    onError,
+
+    /** Step one. */
+    showContactHint = false,
+    contactHints,
+    loginCopy,
+    loginLabels,
+
+    /** Step two. */
+    resendCooldown = 60,
+    showMaskedContact = false,
+    showContactField = false,
+    minimalResponse = true,
+    verifyCopy,
+    verifyLabels,
+
+    /** Called with `(user, token, rawResponse)` on a successful verification. */
+    onAuthenticated,
+
+    /** Notified with the challenge each time a code is sent. */
+    onCodeSent,
+
+    /** Extra props for either step, merged last. */
+    loginProps = {},
+    verifyProps = {},
+}) => {
+    const [challenge, setChallenge] = useState(null);
+    // What the user typed, kept across the back link so returning to step one
+    // does not blank the field.
+    const [contact, setContact] = useState('');
+
+    if (challenge) {
+        return (
+            <ClientOTPVerify
+                logo={logo}
+                layout={layout}
+                loginBg={loginBg}
+                branding={branding}
+                urls={urls}
+                paths={paths}
+                protocol={protocol}
+                contactField={contactField}
+                challenge={challenge}
+                copy={verifyCopy}
+                labels={verifyLabels}
+                resendCooldown={resendCooldown}
+                showMaskedContact={showMaskedContact}
+                showContactField={showContactField}
+                showDevOtp={showDevOtp}
+                minimalResponse={minimalResponse}
+                onAuthenticated={onAuthenticated}
+                onError={onError}
+                // The back link clears the challenge rather than navigating.
+                // Passing it is also what stops the verify screen redirecting
+                // when it decides it has nothing to answer.
+                onBack={() => setChallenge(null)}
+                {...verifyProps}
+            />
+        );
+    }
+
+    return (
+        <ClientLogin
+            logo={logo}
+            layout={layout}
+            loginBg={loginBg}
+            branding={branding}
+            urls={urls}
+            paths={paths}
+            protocol={protocol}
+            contactField={contactField}
+            usernameDomain={usernameDomain}
+            showContactHint={showContactHint}
+            contactHints={contactHints}
+            showDevOtp={showDevOtp}
+            copy={loginCopy}
+            labels={loginLabels}
+            initialContact={contact}
+            onError={onError}
+            onChallengeIssued={(issued) => {
+                setContact(issued.rawContact || '');
+                setChallenge(issued);
+
+                if (typeof onCodeSent === 'function') {
+                    onCodeSent(issued);
+                }
+            }}
+            {...loginProps}
+        />
+    );
+};
+
+export default ClientAuth;

package/src/components/auth/ClientAuthFrame.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import AuthBrandPanel from './AuthBrandPanel';
+
+/**
+ * The frame around a client sign-in step.
+ *
+ * Both steps render the same children — logo, title, subtitle, form — and the
+ * only thing `layout` changes is what sits around them. Keeping that choice
+ * here means neither ClientLogin nor ClientOTPVerify has to know there are two
+ * layouts, and the form markup stays untouched by the design work.
+ *
+ *   `card`  (default) — the original: a box centred in whatever vertical space
+ *                       the host page happens to give it. Byte-identical to
+ *                       what every consumer rendered before 6.8.3.
+ *   `split` — the staff sign-in's language: the brand on one side, the task on
+ *             the other. A SECTION rather than a screen, sized by its parent —
+ *             the consumer keeps its own header and footer and hands this the
+ *             space between, which is why there is no `100vh` in its styles.
+ */
+const ClientAuthFrame = ({
+    layout = 'card',
+    styles,
+    loginBg,
+    branding = {},
+    children,
+}) => {
+    if (layout === 'split') {
+        return (
+            <section className={styles.split}>
+                <AuthBrandPanel
+                    styles={styles}
+                    loginBg={loginBg}
+                    branding={branding}
+                />
+
+                <div className={styles.splitPane}>
+                    <div className={styles.splitCard}>
+                        {children}
+
+                        {branding.footer ? (
+                            <p className={styles.splitFoot}>
+                                {branding.footer}
+                            </p>
+                        ) : null}
+                    </div>
+                </div>
+            </section>
+        );
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.loginBox}>{children}</div>
+        </div>
+    );
+};
+
+export default ClientAuthFrame;