@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/generic/GenericAuth.jsx

@@ -21,66 +21,34 @@ import Verify from '../auth/Verify';
 import TwoFactorAuth from '../auth/TwoFactorAuth';
 import ClientLogin from '../auth/ClientLogin';
 import ClientOTPVerify from '../auth/ClientOTPVerify';
-
-// Shown while the profile check is in flight. Rendering null there leaves a
-// blank white page between the sign-in redirect and the first authenticated
-// paint. Self-contained: SMIL animation, no stylesheet dependency, and the
-// consuming app's design tokens with neutral fallbacks.
-const AuthLoading = ({ label }) => (
-    <div
-        role="status"
-        aria-label="Loading"
-        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>
-);
+import {
+    resolveAuthEndpoints,
+    resolveClientPaths,
+} from '../auth/authEndpoints';
+// The please-wait curtain. Lives in auth/ now because the auth screens raise
+// the same one for the transitions they own; identical object, so a screen's
+// curtain and this one are indistinguishable when both are up.
+import AuthLoading from '../auth/AuthLoading';
+
+/**
+ * Path segments that mean "an auth screen that hands off to the app".
+ *
+ * Reaching one of these with a live session is the sign-in transition, and it
+ * ends with this component navigating to '/'. `2fa` joined `login` in 6.8.1:
+ * TwoFactorAuth used to finish by hard-reloading the browser, so it never
+ * needed this file to move it, and that reload was exactly the unannounced
+ * blank screen the curtain exists to prevent.
+ */
+const AUTH_HANDOFF_SEGMENTS = ['login', '2fa'];
+
+/**
+ * The live pathname, not the router hook's — this is read after a screen has
+ * already navigated, and a hook value captured in a closure would still hold
+ * the old one.
+ */
+const onAuthHandoffScreen = () =>
+    typeof window !== 'undefined' &&
+    AUTH_HANDOFF_SEGMENTS.includes(window.location.pathname.split('/')[1]);
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
@@ -129,9 +97,25 @@ const GenericAuth = ({
     clientPortalConfig = null, // Configuration for client portal with component and URLs
     config = {}, // Configuration object for auth features
     density = 'default', // 'default' | 'large' — app-wide display density
+    // Every URL the auth journey talks to, merged over the 6.6.3 literals.
+    // Threaded from here into each screen so one object configures the lot.
+    // See auth/authEndpoints.js for the keys and their defaults.
+    endpoints,
+    // The authenticated shell. Defaults to GenericMain, which is what every
+    // 6.6.x consumer gets; an app with its own chrome can pass its own
+    // component here and still keep this file's route table, ProtectedRoute
+    // and please-wait curtain. Receives exactly the props GenericMain does.
+    mainComponent = GenericMain,
+    // Extra props handed to whatever `mainComponent` is, for a custom shell
+    // that needs something GenericMain does not take.
+    mainComponentProps = {},
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
+    const urls = resolveAuthEndpoints(endpoints);
+    // Route paths for the client half. `/client/*` unless a consumer says
+    // otherwise — the Next.js portal mounts the same screens at `/portal/*`.
+    const clientPaths = resolveClientPaths(clientPortalConfig?.paths);
     const [userProfile, setUserProfile] = useState({});
     const [clientProfile, setClientProfile] = useState({});
     const [isLoading, setIsLoading] = useState(true);
@@ -162,19 +146,16 @@ const GenericAuth = ({
     const updateAuthStatus = async () => {
         // The loading curtain covers two moments and stays down for neither
         // more nor less: the first profile check of a page load (no usable
-        // profile yet), and the sign-in transition (still on the login
-        // screen) — the user asked for "everything behind a please-wait
-        // screen, then the dashboard", not a settled page interrupted by a
-        // background re-check.
-        if (
-            !userProfile.id ||
-            window.location.pathname.split('/')[1] === 'login'
-        ) {
+        // profile yet), and the sign-in transition (still on an auth screen)
+        // — the user asked for "everything behind a please-wait screen, then
+        // the dashboard", not a settled page interrupted by a background
+        // re-check.
+        if (!userProfile.id || onAuthHandoffScreen()) {
             setIsLoading(true);
         }
 
         try {
-            const { data } = await CustomFetch('/ajax/user/profile', 'GET');
+            const { data } = await CustomFetch(urls.profile, 'GET');
 
             if (data && data.id) {
                 setUserProfile(data);
@@ -183,11 +164,11 @@ const GenericAuth = ({
             setIsLoading(false);
 
             // The live pathname, not the router hook's: this resolves after
-            // Login has already navigated, and the closure still holds
+            // the screen has already navigated, and the closure still holds
             // '/login' from the render that created the effect — firing a
             // second navigate('/') over the settled dashboard, whose route
             // re-render is the sub-second flicker after sign-in.
-            if (window.location.pathname.split('/')[1] === 'login') {
+            if (onAuthHandoffScreen()) {
                 navigate('/', { replace: true });
             }
         } catch (error) {
@@ -235,28 +216,21 @@ const GenericAuth = ({
             }
             setIsClientLoading(false);
 
-            // Get login and verify URLs from config
-            const loginPath = '/client/login';
-            const verifyPath = '/client/verify';
-
             // If on client login page but already authenticated, redirect to portal
             if (
                 isClientAuthenticated &&
-                (location.pathname === loginPath ||
-                    location.pathname === verifyPath)
+                (location.pathname === clientPaths.login ||
+                    location.pathname === clientPaths.verify)
             ) {
-                navigate('/client/portal', { replace: true });
+                navigate(clientPaths.portal, { replace: true });
             }
         } catch (error) {
             setIsClientLoading(false);
             setIsClientAuthenticated(false);
 
-            // Get login path
-            const loginPath = '/client/login';
-
             // Only redirect if currently on a client portal page
-            if (location.pathname.startsWith('/client/portal')) {
-                navigate(loginPath, {
+            if (location.pathname.startsWith(clientPaths.portal)) {
+                navigate(clientPaths.login, {
                     state: { previousUrl: location.pathname },
                 });
             }
@@ -288,6 +262,7 @@ const GenericAuth = ({
                             setIsAuthenticated={setIsAuthenticated}
                             setUserProfile={setUserProfile}
                             config={config}
+                            endpoints={endpoints}
                         />
                     }
                 />
@@ -299,6 +274,8 @@ const GenericAuth = ({
                             loginBg={loginBg}
                             logo={logo}
                             setIsAuthenticated={setIsAuthenticated}
+                            config={config}
+                            endpoints={endpoints}
                         />
                     }
                 />
@@ -309,6 +286,8 @@ const GenericAuth = ({
                             loginBg={loginBg}
                             logo={logo}
                             setIsAuthenticated={setIsAuthenticated}
+                            config={config}
+                            endpoints={endpoints}
                         />
                     }
                 />
@@ -320,12 +299,15 @@ const GenericAuth = ({
                             logo={logo}
                             setIsAuthenticated={setIsAuthenticated}
                             setUserProfile={setUserProfile}
+                            config={config}
+                            endpoints={endpoints}
+                            mode={config.twoFactorMode}
                         />
                     }
                 />
                 {/* Client Portal Routes and Protected Routes */}
                 {clientPortalConfig && (
-                    <Route path="client">
+                    <Route path={clientPaths.base}>
                         {/* Client Auth Routes */}
                         <Route
                             path="login"
@@ -338,6 +320,8 @@ const GenericAuth = ({
                                     }
                                     setUserProfile={setClientProfile}
                                     urls={clientPortalConfig.urls}
+                                    paths={clientPaths}
+                                    options={clientPortalConfig.login}
                                 />
                             }
                         />
@@ -352,6 +336,8 @@ const GenericAuth = ({
                                     }
                                     setUserProfile={setClientProfile}
                                     urls={clientPortalConfig.urls}
+                                    paths={clientPaths}
+                                    options={clientPortalConfig.verify}
                                 />
                             }
                         />
@@ -363,6 +349,7 @@ const GenericAuth = ({
                                     <ClientProtectedRoute
                                         clientUser={clientProfile}
                                         loading={isClientLoading}
+                                        redirectPath={clientPaths.login}
                                     />
                                 }
                             >
@@ -401,7 +388,8 @@ const GenericAuth = ({
                     <Route
                         path="/*"
                         element={
-                            <GenericMain
+                            <MainShell
+                                component={mainComponent}
                                 layout={layout}
                                 logo={headerLogo}
                                 navigation={navigation}
@@ -412,6 +400,7 @@ const GenericAuth = ({
                                 userProfile={userProfile}
                                 enforce2FA={enforce2FA}
                                 density={density}
+                                {...mainComponentProps}
                             />
                         }
                     />
@@ -430,13 +419,43 @@ const GenericAuth = ({
                 theme="dark"
                 transition={Flip}
             />
-            <Tooltip id="system-tooltip" />
+            {/* react-tooltip sets no z-index of its own; the header is
+                position: fixed with a z-index, so a tooltip for a header chip
+                would otherwise paint underneath it. */}
+            <Tooltip id="system-tooltip" style={{ zIndex: 10050 }} />
         </>
     );
 };
 
+/**
+ * The authenticated shell, whichever one the app chose.
+ *
+ * `component` is normally GenericMain. A consumer that keeps its own chrome
+ * passes its own component and still gets the route table, ProtectedRoute and
+ * the please-wait curtain from this file. An already-created element is
+ * accepted too and cloned with the shell props, so `mainComponent={<MyApp
+ * theme="dark" />}` works as well as `mainComponent={MyApp}`.
+ */
+const MainShell = ({ component, ...props }) => {
+    const Component = component || GenericMain;
+
+    if (React.isValidElement(Component)) {
+        return React.cloneElement(Component, props);
+    }
+
+    return <Component {...props} />;
+};
+
 const LoginComponent = React.memo(
-    ({ loginBg, logo, providers, setIsAuthenticated, setUserProfile, config }) => (
+    ({
+        loginBg,
+        logo,
+        providers,
+        setIsAuthenticated,
+        setUserProfile,
+        config,
+        endpoints,
+    }) => (
         <Login
             loginBg={loginBg}
             logo={logo}
@@ -444,49 +463,97 @@ const LoginComponent = React.memo(
             setSystemAuth={setIsAuthenticated}
             setUserProfile={setUserProfile}
             config={config}
+            endpoints={endpoints}
         />
     )
 );
 
-const ResetComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
-    <Reset loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
-));
+const ResetComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, config, endpoints }) => (
+        <Reset
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            config={config}
+            endpoints={endpoints}
+        />
+    )
+);
 
-const VerifyComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
-    <Verify loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
-));
+const VerifyComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, config, endpoints }) => (
+        <Verify
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            config={config}
+            endpoints={endpoints}
+        />
+    )
+);
 
 const TwoFactorAuthComponent = React.memo(
-    ({ loginBg, logo, setIsAuthenticated, setUserProfile }) => (
+    ({
+        loginBg,
+        logo,
+        setIsAuthenticated,
+        setUserProfile,
+        config,
+        endpoints,
+        mode,
+    }) => (
         <TwoFactorAuth
             loginBg={loginBg}
             logo={logo}
             setSystemAuth={setIsAuthenticated}
             setUserProfile={setUserProfile}
+            config={config}
+            endpoints={endpoints}
+            {...(mode ? { mode } : {})}
         />
     )
 );
 
 const ClientLoginComponent = React.memo(
-    ({ loginBg, logo, setIsAuthenticated, setUserProfile, urls }) => (
+    ({
+        loginBg,
+        logo,
+        setIsAuthenticated,
+        setUserProfile,
+        urls,
+        paths,
+        options,
+    }) => (
         <ClientLogin
             loginBg={loginBg}
             logo={logo}
             setSystemAuth={setIsAuthenticated}
             setUserProfile={setUserProfile}
             urls={urls}
+            paths={paths}
+            {...(options || {})}
         />
     )
 );
 
 const ClientOTPVerifyComponent = React.memo(
-    ({ loginBg, logo, setIsAuthenticated, setUserProfile, urls }) => (
+    ({
+        loginBg,
+        logo,
+        setIsAuthenticated,
+        setUserProfile,
+        urls,
+        paths,
+        options,
+    }) => (
         <ClientOTPVerify
             loginBg={loginBg}
             logo={logo}
             setSystemAuth={setIsAuthenticated}
             setUserProfile={setUserProfile}
             urls={urls}
+            paths={paths}
+            {...(options || {})}
         />
     )
 );