Web: Added changing the language without reloading the page.

packages/client/src/HOCs/withCultureNames.tsx

@@ -1,19 +1,18 @@
 import { observer, inject } from "mobx-react";
 import React, { useEffect, useMemo } from "react";
-import { withTranslation, I18nextProviderProps } from "react-i18next";
+import { withTranslation } from "react-i18next";
 
 import { getCookie, setCookie } from "@docspace/shared/utils/cookie";
 import { Loader, LoaderTypes } from "@docspace/shared/components/loader";
 import { COOKIE_EXPIRATION_YEAR, LANGUAGE } from "@docspace/shared/constants";
 import { mapCulturesToArray } from "@docspace/shared/utils/common";
-
-type I18n = I18nextProviderProps["i18n"];
+import i18n from "../i18n";
 
 interface ComponentWithCultureNamesProps {
   tReady: boolean;
   cultures: string[];
+  isAuthenticated: boolean;
   getPortalCultures: () => Promise<void>;
-  i18n: I18n;
 }
 
 interface WrappedComponentProps extends ComponentWithCultureNamesProps {
@@ -35,8 +34,7 @@ export default function withCultureNames<
     props: Omit<T, keyof WrappedComponentProps> &
       ComponentWithCultureNamesProps,
   ) => {
-    const { tReady, cultures, i18n, getPortalCultures, isAuthenticated } =
-      props;
+    const { tReady, cultures, getPortalCultures, isAuthenticated } = props;
 
     useEffect(() => {
       if (cultures.length > 0) return;
@@ -47,7 +45,7 @@ export default function withCultureNames<
 
     const cultureNames = useMemo(
       () => mapCulturesToArray(cultures, isAuthenticated, i18n),
-      [cultures, i18n],
+      [cultures, isAuthenticated],
     );
     const url = new URL(window.location.href);
     const culture = url.searchParams.get("culture");
@@ -56,17 +54,19 @@ export default function withCultureNames<
       (item) => item.key === currentCultureName,
     );
 
-    const onLanguageSelect = (e) => {
+    const onLanguageSelect = (e: KeyboardEvent) => {
+      i18n.changeLanguage(e.key);
+
       setCookie(LANGUAGE, e.key, {
         "max-age": COOKIE_EXPIRATION_YEAR,
       });
 
       if (culture) {
-        location.href = url.replace(`culture=${culture}`, `culture=${e.key}`);
-        return;
+        window.location.href = url.replace(
+          `culture=${culture}`,
+          `culture=${e.key}`,
+        );
       }
-
-      location.reload();
     };
 
     return cultures.length > 0 && tReady ? (

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -184,7 +184,7 @@ const CreateUserForm = (props) => {
       window.location.href = combineUrl(
         window.DocSpaceConfig?.proxy?.url,
         "/login",
-        `?culture=${currentCultureName}&loginData=${loginData}`,
+        `?loginData=${loginData}`,
       );
     } catch (err) {
       console.error(err);

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

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import {} from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
-import { useLocation, useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 import { LoginFormWrapper, LoginContent } from "./StyledLogin";
 import { Text } from "@docspace/shared/components/text";
@@ -13,7 +13,7 @@ import {
   mapCulturesToArray,
 } from "@docspace/shared/utils/common";
 import { Link } from "@docspace/shared/components/link";
-import { checkIsSSR, getCookie } from "@docspace/shared/utils";
+import { checkIsSSR } from "@docspace/shared/utils";
 import {
   COOKIE_EXPIRATION_YEAR,
   LANGUAGE,
@@ -68,15 +68,11 @@ const Login: React.FC<ILoginProps> = ({
   const isRestoringPortal =
     portalSettings?.tenantStatus === TenantStatus.PortalRestore;
 
-  let [searchParams] = useSearchParams();
-
   const cultureNames = useMemo(
     () => mapCulturesToArray(cultures, false),
     [cultures]
   );
 
-  const culture = searchParams.get("culture");
-
   useEffect(() => {
     if (search) {
       const firstIndex = search.indexOf("loginData=");
@@ -103,13 +99,11 @@ const Login: React.FC<ILoginProps> = ({
       window.history.replaceState({}, document.title, window.location.pathname);
     }
 
-    const cultureName = culture ?? getCookie(LANGUAGE);
-    setCurrantCultureName(cultureName);
-
     isRestoringPortal && window.location.replace("/preparation-portal");
   }, []);
 
-  const [currentCultureName, setCurrantCultureName] = useState("en-GB");
+  const { t, i18n } = useTranslation(["Login", "Common"]);
+
   const [isLoading, setIsLoading] = useState(false);
   const [recoverDialogVisible, setRecoverDialogVisible] = useState(false);
   const [invitationLinkData, setInvitationLinkData] = useState({
@@ -132,29 +126,25 @@ const Login: React.FC<ILoginProps> = ({
     cookieSettingsEnabled: false,
   };
 
+  const currentCultureName = i18n.language;
+
   const selectedCultureObj = cultureNames.find(
     (item) => item.key === currentCultureName
   );
 
-  const onLanguageSelect = (e) => {
-    setCookie(LANGUAGE, e.key, {
+  const onLanguageSelect = (e: KeyboardEvent) => {
+    const culture = e.key;
+
+    i18n.changeLanguage(culture);
+
+    setCookie(LANGUAGE, culture, {
       "max-age": COOKIE_EXPIRATION_YEAR,
     });
-
-    if (culture) {
-      window.location.href = window.location.href.replace(
-        `culture=${culture}`,
-        `culture=${e.key}`
-      );
-      return;
-    }
-
-    window.location.reload();
   };
 
   const ssoLabel = capabilities?.ssoLabel || "";
   const ssoUrl = capabilities?.ssoUrl || "";
-  const { t } = useTranslation(["Login", "Common"]);
+
   const mounted = useMounted();
 
   useIsomorphicLayoutEffect(() => {

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

@@ -68,7 +68,7 @@ const LoginForm: React.FC<ILoginFormProps> = ({
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { t, ready } = useTranslation(["Login", "Common"]);
+  const { t, ready, i18n } = useTranslation(["Login", "Common"]);
 
   const { message, confirmedEmail, authError } = match || {
     message: "",
@@ -194,7 +194,9 @@ const LoginForm: React.FC<ILoginFormProps> = ({
     isDesktop && checkPwd();
     const session = !isChecked;
 
-    login(user, hash, session, captchaToken)
+    const currentCulture = i18n.language;
+
+    login(user, hash, session, captchaToken, currentCulture)
       .then((res: string | object) => {
         const isConfirm = typeof res === "string" && res.includes("confirm");
         const redirectPath = sessionStorage.getItem("referenceUrl");

packages/shared/api/user/index.js

@@ -1,11 +1,18 @@
 import { request, setWithCredentialsStatus } from "../client";
 
-export function login(userName, passwordHash, session, recaptchaResponse) {
+export function login(
+  userName,
+  passwordHash,
+  session,
+  recaptchaResponse,
+  culture,
+) {
   const data = {
     userName,
     passwordHash,
     session,
     recaptchaResponse,
+    culture,
   };
 
   return request({

packages/shared/utils/loginUtils.ts

@@ -7,6 +7,7 @@ export async function login(
   hash: string,
   session = true,
   captchaToken: string = "",
+  currentCultureName: string = "",
 ): Promise<string | object> {
   try {
     const response = (await api.user.login(
@@ -14,6 +15,7 @@ export async function login(
       hash,
       session,
       captchaToken,
+      currentCultureName,
     )) as {
       token?: string;
       tfa?: string;