Login(nextjs): refactoring

packages/login-next/src/app/layout.tsx

@@ -47,20 +47,21 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const baseUrl = getBaseUrl();
   const isAuth = await checkIsAuthenticated();
 
-  if (isAuth) redirect("/");
+  if (isAuth) redirect(`${baseUrl}`);
 
   const [settings, colorTheme] = await Promise.all([
     getSettings(),
     getColorTheme(),
   ]);
 
-  if (settings === "access-restricted") redirect(`${getBaseUrl()}/${settings}`);
+  if (settings === "access-restricted") redirect(`${baseUrl}/${settings}`);
 
   if (settings === "portal-not-found") {
     const config = await (
-      await fetch(`${getBaseUrl()}/static/scripts/config.json`)
+      await fetch(`${baseUrl}/static/scripts/config.json`)
     ).json();
     const hdrs = headers();
     const host = hdrs.get("host");
@@ -76,11 +77,11 @@ export default async function RootLayout({
   }
 
   if (settings?.tenantStatus === TenantStatus.PortalRestore) {
-    redirect(`${getBaseUrl()}/preparation-portal`);
+    redirect(`${baseUrl}/preparation-portal`);
   }
 
   if (settings?.tenantStatus === TenantStatus.PortalDeactivate) {
-    redirect(`${getBaseUrl()}/unavailable`);
+    redirect(`${baseUrl}/unavailable`);
   }
 
   return (

packages/login-next/src/app/page.tsx

@@ -26,26 +26,21 @@
 
 "use server";
 import { redirect } from "next/navigation";
+import { headers } from "next/headers";
 
-import { TenantStatus } from "@docspace/shared/enums";
 import { getBaseUrl } from "@docspace/shared/utils/next-ssr-helper";
+import { getBgPattern } from "@docspace/shared/utils/common";
 
 import Login from "@/components/Login";
+import { LoginFormWrapper } from "@/components/Login/Login.styled";
 import {
   getSettings,
-  getVersionBuild,
-  getColorTheme,
   getThirdPartyProviders,
   getCapabilities,
   getSSO,
   checkIsAuthenticated,
+  getColorTheme,
 } from "@/utils/actions";
-import {
-  TCapabilities,
-  TGetSsoSettings,
-  TThirdPartyProvider,
-} from "@docspace/shared/api/settings/types";
-import { headers } from "next/headers";
 
 async function Page({
   searchParams,
@@ -54,12 +49,14 @@ async function Page({
 }) {
   const isAuth = await checkIsAuthenticated();
 
-  const [settings, thirdParty, capabilities, ssoSettings] = await Promise.all([
-    getSettings(),
-    getThirdPartyProviders(),
-    getCapabilities(),
-    getSSO(),
-  ]);
+  const [settings, thirdParty, capabilities, ssoSettings, colorTheme] =
+    await Promise.all([
+      getSettings(),
+      getThirdPartyProviders(),
+      getCapabilities(),
+      getSSO(),
+      getColorTheme(),
+    ]);
 
   if (settings === "access-restricted") redirect(`${getBaseUrl()}/${settings}`);
 
@@ -91,15 +88,20 @@ async function Page({
     redirect(`${getBaseUrl()}/wizard`);
   }
 
+  const bgPattern = getBgPattern(colorTheme?.selected);
+
   return (
-    <Login
-      searchParams={searchParams}
-      capabilities={capabilities}
-      settings={settings}
-      thirdPartyProvider={thirdParty}
-      ssoSettings={ssoSettings}
-      isAuthenticated={isAuth}
-    />
+    <LoginFormWrapper id="login-page" bgPattern={bgPattern}>
+      <div className="bg-cover" />
+      <Login
+        searchParams={searchParams}
+        capabilities={capabilities}
+        settings={settings}
+        thirdPartyProvider={thirdParty}
+        ssoSettings={ssoSettings}
+        isAuthenticated={isAuth}
+      />
+    </LoginFormWrapper>
   );
 }
 

packages/login-next/src/components/Login/Login.styled.ts

@@ -24,6 +24,8 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+"use client";
+
 import styled, { css } from "styled-components";
 
 import { Base } from "@docspace/shared/themes";

packages/login-next/src/components/Login/index.tsx

@@ -38,7 +38,6 @@ import {
   getLogoUrl,
   getOAuthToken,
 } from "@docspace/shared/utils/common";
-
 import RecoverAccessModalDialog from "@docspace/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
@@ -54,10 +53,9 @@ import useRecoverDialog from "@/hooks/useRecoverDialog";
 
 import GreetingContainer from "../GreetingContainer";
 import Register from "../Register";
+import LoginForm from "../LoginForm";
 
 import { LoginContent, LoginFormWrapper } from "./Login.styled";
-import { checkIsSSR, isDesktop } from "@docspace/shared/utils";
-import LoginForm from "../LoginForm";
 
 const Login = ({
   searchParams,
@@ -179,8 +177,6 @@ const Login = ({
     [],
   );
 
-  const bgPattern = getBgPattern(theme.currentColorScheme?.id);
-
   const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme?.isBase);
 
   const ssoProps = ssoExists()
@@ -194,8 +190,7 @@ const Login = ({
   const isRegisterContainerVisible = settings?.enabledJoin;
 
   return (
-    <LoginFormWrapper id="login-page" bgPattern={bgPattern}>
-      <div className="bg-cover" />
+    <>
       <Scrollbar id="customScrollBar">
         <LoginContent>
           <ColorTheme
@@ -275,7 +270,7 @@ const Login = ({
           id="recover-access-modal"
         />
       )}
-    </LoginFormWrapper>
+    </>
   );
 };
 

packages/login-next/src/hooks/useTheme.ts

@@ -34,8 +34,6 @@ import { TGetColorTheme, TSettings } from "@docspace/shared/api/settings/types";
 
 import useI18N from "./useI18N";
 
-const SYSTEM_THEME = getSystemTheme();
-
 export interface UseThemeProps {
   colorTheme?: TGetColorTheme;
   settings?: TSettings;
@@ -68,6 +66,7 @@ const useTheme = ({ colorTheme, settings }: UseThemeProps) => {
   }, [colorTheme]);
 
   const getUserTheme = React.useCallback(() => {
+    const SYSTEM_THEME = getSystemTheme();
     const interfaceDirection = i18n?.dir ? i18n.dir() : "ltr";
     if (SYSTEM_THEME === ThemeKeys.BaseStr) {
       setTheme({
@@ -106,6 +105,16 @@ const useTheme = ({ colorTheme, settings }: UseThemeProps) => {
     getUserTheme();
   }, [currentColorTheme, getUserTheme]);
 
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    mediaQuery.addEventListener("change", getUserTheme);
+
+    return () => {
+      mediaQuery.removeEventListener("change", getUserTheme);
+    };
+  }, [getUserTheme]);
+
   return { theme, currentColorTheme };
 };