Login: added typing

packages/login/index.d.ts

@@ -71,7 +71,7 @@ declare global {
     provider: string;
     url: string;
   }
-  type ProvidersType = IProvider[];
+  type ProvidersType = IProvider[] | undefined;
 
   interface ICapabilities {
     ldapEnabled: boolean;
@@ -111,7 +111,7 @@ declare global {
     match?: MatchType;
     currentColorScheme?: ITheme;
     isAuth?: boolean;
-    logoUrls?: any;
+    logoUrls: ILogoUrl[];
     error?: IError;
   }
 
@@ -154,4 +154,26 @@ declare global {
     code?: string;
     quality?: number;
   }
-}
+
+  interface IUserTheme {
+    [key: string]: string;
+    isBase: boolean;
+  }
+
+  type TLogoPath = {
+    light: string;
+    dark?: string;
+  }
+
+  type TLogoSize = {
+    width: number;
+    height: number;
+    isEmpty: boolean;
+  }
+
+  interface ILogoUrl {
+    name: string;
+    path: TLogoPath;
+    size: TLogoSize;
+  }
+}

packages/login/src/client/App.tsx

@@ -10,7 +10,10 @@ import { wrongPortalNameUrl } from "@docspace/common/constants";
 
 interface ILoginProps extends IInitialState {
   isDesktopEditor?: boolean;
+  theme: IUserTheme;
+  setTheme: (theme: IUserTheme) => void;
 }
+
 const App: React.FC<ILoginProps> = (props) => {
   const loginStore = initLoginStore(props?.currentColorScheme || {});
 

packages/login/src/client/components/ClientApp.tsx

@@ -16,6 +16,8 @@ interface IClientApp extends IInitialState {
   initialLanguage: string;
   initialI18nStoreASC: any;
   isDesktopEditor: boolean;
+  theme: IUserTheme;
+  setTheme: (theme: IUserTheme) => void;
 }
 
 const ThemeProviderWrapper = inject(({ auth }) => {

packages/login/src/client/components/CodeLogin.tsx

@@ -15,6 +15,12 @@ import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 import LoginContainer from "@docspace/common/components/LoginContainer";
 import { useThemeDetector } from "@docspace/common/utils/useThemeDetector";
 
+interface ILoginProps extends IInitialState {
+  isDesktopEditor?: boolean;
+  theme: IUserTheme;
+  setTheme: (theme: IUserTheme) => void;
+}
+
 interface IBarProp {
   t: TFuncType;
   expired: boolean;
@@ -33,7 +39,7 @@ const Bar: React.FC<IBarProp> = (props) => {
   );
 };
 
-const Form: React.FC = ({ theme, setTheme, logoUrls }) => {
+const Form: React.FC<ILoginProps> = ({ theme, setTheme, logoUrls }) => {
   const { t } = useTranslation("Login");
   const [invalidCode, setInvalidCode] = useState(false);
   const [expiredCode, setExpiredCode] = useState(false);
@@ -71,10 +77,12 @@ const Form: React.FC = ({ theme, setTheme, logoUrls }) => {
     setInvalidCode(false);
   };
 
-  const logo = Object.values(logoUrls)[1];
-  const logoUrl = !theme?.isBase
-    ? getLogoFromPath(logo?.path?.dark)
-    : getLogoFromPath(logo?.path?.light);
+  const logo = logoUrls && Object.values(logoUrls)[1];
+  const logoUrl = !logo
+    ? undefined
+    : !theme?.isBase
+    ? getLogoFromPath(logo.path.dark)
+    : getLogoFromPath(logo.path.light);
 
   return (
     <LoginContainer id="code-page" theme={theme}>

packages/login/src/client/components/Login.tsx

@@ -27,12 +27,15 @@ import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 import { getLogoFromPath } from "@docspace/common/utils";
 import { useThemeDetector } from "@docspace/common/utils/useThemeDetector";
 import { TenantStatus } from "@docspace/common/constants";
+
 interface ILoginProps extends IInitialState {
   isDesktopEditor?: boolean;
+  theme: IUserTheme;
+  setTheme: (theme: IUserTheme) => void;
 }
+
 const Login: React.FC<ILoginProps> = ({
   portalSettings,
-  buildInfo,
   providers,
   capabilities,
   isDesktopEditor,
@@ -58,8 +61,8 @@ const Login: React.FC<ILoginProps> = ({
     enableAdmMess: false,
   };
 
-  const ssoLabel = capabilities?.ssoLabel;
-  const ssoUrl = capabilities?.ssoUrl;
+  const ssoLabel = capabilities?.ssoLabel || "";
+  const ssoUrl = capabilities?.ssoUrl || "";
   const { t } = useTranslation(["Login", "Common"]);
   const mounted = useMounted();
   const systemTheme = typeof window !== "undefined" && useThemeDetector();
@@ -82,6 +85,7 @@ const Login: React.FC<ILoginProps> = ({
     if (ssoUrl) return true;
     else return false;
   };
+
   const ssoButton = () => {
     const onClick = () => (window.location.href = ssoUrl);
     return (

packages/login/src/client/components/sub-components/SimpleNav.tsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { hugeMobile } from "@docspace/components/utils/device";
 import { getLogoFromPath } from "@docspace/common/utils";
-import { Dark } from "@docspace/components/themes";
 
 const StyledNav = styled.div`
   display: none;
@@ -22,7 +21,11 @@ const StyledNav = styled.div`
   }
 `;
 
-const SimpleNav = ({ theme, logoUrls }) => {
+interface ISimpleNav extends IInitialState {
+  theme: IUserTheme;
+}
+
+const SimpleNav = ({ theme, logoUrls }: ISimpleNav) => {
   const logo = logoUrls && Object.values(logoUrls)[0];
 
   const logoUrl = !logo