Add SaaS frontend code (#5879)

# Description of Changes Adds the code for the SaaS frontend as proprietary code to the OSS repo. This version of the code is adapted from 22/1/2026, which was the last SaaS version based on the 'V2' design. This will move us closer to being able to have the OSS products understand whether the user has a SaaS account, and provide the correct UI in those cases.
2026-07-16 19:33:11 +02:00 · 2026-03-11 11:53:54 +00:00
parent 8bc37bf5ae
commit fa8c52b2be
114 changed files with 12408 additions and 99 deletions
@@ -0,0 +1,88 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import LoginRightCarousel from '@app/components/shared/LoginRightCarousel';
+import buildLoginSlides from '@app/components/shared/loginSlides';
+import styles from '@app/routes/authShared/AuthLayout.module.css';
+import { useLogoVariant } from '@app/hooks/useLogoVariant';
+import { useIsOverflowing } from '@app/hooks/useIsOverflowing';
+import Footer from '@app/components/shared/Footer';
+
+interface AuthLayoutProps {
+  children: React.ReactNode
+  isEmailFormExpanded?: boolean
+}
+
+export default function AuthLayout({ children, isEmailFormExpanded = false }: AuthLayoutProps) {
+  const { t } = useTranslation();
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const leftPanelRef = useRef<HTMLDivElement | null>(null);
+  const [hideRightPanel, setHideRightPanel] = useState(false);
+  const logoVariant = useLogoVariant();
+  const imageSlides = useMemo(() => buildLoginSlides(logoVariant, t), [logoVariant, t]);
+  const isOverflowing = useIsOverflowing(leftPanelRef);
+
+  // Use either overflow detection or email form expansion to determine scrollable state
+  const shouldBeScrollable = isOverflowing || isEmailFormExpanded;
+
+  // Force light mode on auth pages
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    const previousColorScheme = htmlElement.getAttribute('data-mantine-color-scheme');
+
+    // Set light mode
+    htmlElement.setAttribute('data-mantine-color-scheme', 'light');
+
+    // Cleanup: restore previous theme when leaving auth pages
+    return () => {
+      if (previousColorScheme) {
+        htmlElement.setAttribute('data-mantine-color-scheme', previousColorScheme);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const update = () => {
+      // Use viewport to avoid hysteresis when the card is already in single-column mode
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const cardWidthIfTwoCols = Math.min(1180, viewportWidth * 0.96); // matches min(73.75rem, 96vw)
+      const columnWidth = cardWidthIfTwoCols / 2;
+      const tooNarrow = columnWidth < 470;
+      const tooShort = viewportHeight < 740;
+      setHideRightPanel(tooNarrow || tooShort);
+    };
+    update();
+    window.addEventListener('resize', update);
+    window.addEventListener('orientationchange', update);
+    return () => {
+      window.removeEventListener('resize', update);
+      window.removeEventListener('orientationchange', update);
+    };
+  }, []);
+
+  return (
+    <div className={styles.authContainer}>
+      <div className={styles.authMain}>
+        <div
+          ref={cardRef}
+          className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ''}`}
+        >
+          <div
+            ref={leftPanelRef}
+            className={`${styles.authLeftPanel} ${shouldBeScrollable ? styles.authLeftPanelScrollable : styles.authLeftPanelCentered}`}
+          >
+            <div className={styles.authContent}>
+              {children}
+            </div>
+          </div>
+          {!hideRightPanel && (
+            <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />
+          )}
+        </div>
+      </div>
+      <div style={{ width: '100vw', marginTop: 'auto', marginLeft: '-1.5rem', marginRight: '-1.5rem' }}>
+        <Footer forceLightMode={true} analyticsEnabled />
+      </div>
+    </div>
+  )
+}