Merge branch 'feature/virtual-rooms-1.2' of github.com:ONLYOFFICE/AppServer into feature/trusted-mail

web/ASC.Web.Client/public/locales/en/Settings.json

@@ -117,6 +117,7 @@
   "ServiceUrl": "Service Url",
   "StudioTimeLanguageSettings": "Language and Time Zone Settings",
   "SuccessfullySaveGreetingSettingsMessage": "Welcome Page settings have been successfully saved",
+  "SuccessfullySavePortalNameMessage": "Portal has been renamed successfully",
   "SuccessfullySaveSettingsMessage": "Settings have been successfully updated",
   "TeamTemplate": "Team template",
   "TeamTemplateSettingsDescription": "Team Template is a customizable way to name the organization (or group), its members and their activities. Drop down the Template list to choose one of the available presets or enter the names yourselves selecting the custom option from the list.",

web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js

@@ -1,12 +1,28 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Loader from "@appserver/components/loader";
+import toastr from "@appserver/components/toast/toastr";
 import HelpButton from "@appserver/components/help-button";
 import FieldContainer from "@appserver/components/field-container";
 import TextInput from "@appserver/components/text-input";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
 import { inject, observer } from "mobx-react";
+import { combineUrl } from "@appserver/common/utils";
+import { AppServerConfig } from "@appserver/common/constants";
+import config from "../../../../../../../package.json";
+import history from "@appserver/common/history";
+import { isMobileOnly } from "react-device-detect";
+import Text from "@appserver/components/text";
+import Link from "@appserver/components/link";
+import { isSmallTablet } from "@appserver/components/utils/device";
+import checkScrollSettingsBlock from "../utils";
+import {
+  StyledSettingsComponent,
+  StyledScrollbar,
+  StyledArrowRightIcon,
+} from "./StyledSettings";
+import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 
 const StyledComponent = styled.div`
   .settings-block {
@@ -20,51 +36,229 @@ const StyledComponent = styled.div`
   .combo-button-label {
     max-width: 100%;
   }
+
+  .error {
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 14px;
+    color: #f21c0e;
+  }
 `;
 
-const PortalRenaming = ({ t, theme, sectionWidth }) => {
+const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
   // TODO: Change false
   const [isLoadedData, setIsLoadedData] = useState(true);
-  const [portalName, setPortalName] = useState();
+  const [isLoadingPortalNameSave, setIsLoadingPortalNameSave] = useState(false);
 
+  const portalNameFromSessionStorage = getFromSessionStorage("portalName");
+  const portalNameDefaultFromSessionStorage = getFromSessionStorage(
+    "portalNameDefault"
+  );
+
+  const errorValueFromSessionStorage = getFromSessionStorage("errorValue");
+
+  const [portalName, setPortalName] = useState(portalNameFromSessionStorage);
+  const [portalNameDefault, setPortalNameDefault] = useState(
+    portalNameDefaultFromSessionStorage || portalName
+  );
+
+  const [showReminder, setShowReminder] = useState(false);
+  const [hasScroll, setHasScroll] = useState(false);
+  const [errorValue, setErrorValue] = useState(errorValueFromSessionStorage);
+
+  //TODO: Add translation
+  const accountNameError = "Account name is empty";
+  const lengthNameError =
+    "The account name must be between 6 and 50 characters long";
+
+  useEffect(() => {
+    const checkScroll = checkScrollSettingsBlock();
+
+    window.addEventListener("resize", checkInnerWidth);
+    window.addEventListener("resize", checkScroll);
+
+    const scrollPortalName = checkScroll();
+
+    if (scrollPortalName !== hasScroll) {
+      setHasScroll(scrollPortalName);
+    }
+
+    return () =>
+      window.removeEventListener(
+        "resize",
+        checkInnerWidth,
+        checkScrollSettingsBlock
+      );
+  }, []);
+
+  //TODO: Need a method to get the portal name
   const onSavePortalRename = () => {
-    // setPortalRename("waw");
+    setIsLoadingPortalNameSave(true);
+
+    setPortalRename(portalName)
+      .then(() => toastr.success(t("SuccessfullySavePortalNameMessage")))
+      .catch((error) => {
+        //TODO: Add translation
+        setErrorValue("Incorrect account name");
+        saveToSessionStorage("errorValue", "Incorrect account name");
+      })
+      .finally(() => setIsLoadingPortalNameSave(false));
+
+    setShowReminder(false);
+    setPortalName(portalName);
+    setPortalNameDefault(portalName);
+
+    saveToSessionStorage("portalName", portalName);
+    saveToSessionStorage("portalNameDefault", portalName);
   };
 
+  const onCancelPortalName = () => {
+    const portalNameFromSessionStorage = getFromSessionStorage("portalName");
+
+    if (
+      portalNameFromSessionStorage &&
+      !settingIsEqualInitialValue("portalName", portalNameFromSessionStorage)
+    ) {
+      setPortalName(portalNameDefault);
+      saveToSessionStorage("portalName", "");
+    }
+  };
+
+  const onValidateInput = (value) => {
+    switch (true) {
+      case value === "":
+        setErrorValue(accountNameError);
+        saveToSessionStorage("errorValue", accountNameError);
+        break;
+      case value.length < 6 || value.length > 50:
+        setErrorValue(lengthNameError);
+        saveToSessionStorage("errorValue", lengthNameError);
+        break;
+      default:
+        setErrorValue("");
+    }
+  };
+
+  const settingIsEqualInitialValue = (value) => {
+    const defaultValue = JSON.stringify(portalNameDefault);
+    const currentValue = JSON.stringify(value);
+    return defaultValue === currentValue;
+  };
+
+  const onChangePortalName = (e) => {
+    const value = e.target.value;
+
+    onValidateInput(value);
+
+    setPortalName(value);
+
+    if (settingIsEqualInitialValue("portalName", value)) {
+      saveToSessionStorage("portalName", "");
+      saveToSessionStorage("portalNameDefault", "");
+    } else {
+      saveToSessionStorage("portalName", value);
+      setShowReminder(true);
+    }
+  };
+
+  const checkInnerWidth = () => {
+    if (!isSmallTablet()) {
+      history.push(
+        combineUrl(
+          AppServerConfig.proxyURL,
+          config.homepage,
+          "/settings/common/customization"
+        )
+      );
+      return true;
+    }
+  };
+
+  // TODO: Move to a file
+  const onClickLink = (e) => {
+    e.preventDefault();
+    history.push(e.target.pathname);
+  };
+
+  const isMobileViewPortalRenaming = (
+    <div className="category-item-wrapper">
+      <div className="category-item-heading">
+        <Link
+          truncate={true}
+          className="inherit-title-link header"
+          onClick={onClickLink}
+          href={combineUrl(
+            AppServerConfig.proxyURL,
+            "/settings/common/customization/portal-renaming"
+          )}
+        >
+          Portal Renaming
+          {/* {t("CustomTitlesWelcome")} */}
+        </Link>
+        <StyledArrowRightIcon size="small" color="#333333" />
+      </div>
+      <Text className="category-item-description">
+        {/* {t("CustomTitlesSettingsDescription")} */}
+        Here you can change your portal address.
+      </Text>
+    </div>
+  );
+
+  const hasError = errorValue === null ? false : true;
+
+  const settingsBlock = (
+    <div className="settings-block">
+      <FieldContainer
+        id="fieldContainerWelcomePage"
+        className="field-container-width"
+        labelText={`${t("New portal name")}:`}
+        isVertical={true}
+      >
+        <TextInput
+          scale={true}
+          value={portalName}
+          onChange={onChangePortalName}
+          // isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore}
+          placeholder={`${t("room")}`}
+          hasError={hasError}
+        />
+        <div className="error">{errorValue}</div>
+      </FieldContainer>
+    </div>
+  );
+
   return !isLoadedData ? (
     <Loader className="pageLoader" type="rombs" size="40px" />
+  ) : isMobileView ? (
+    isMobileViewPortalRenaming
   ) : (
     <>
-      <StyledComponent>
+      <StyledComponent hasScroll={hasScroll} className="category-item-wrapper">
-        <div className="category-item-heading">
+        {checkInnerWidth() && !isMobileView && (
-          <div className="category-item-title">{t("Portal Renaming")}</div>
+          <div className="category-item-heading">
-          <HelpButton
+            <div className="category-item-title">{t("Portal Renaming")}</div>
-            iconName="static/images/combined.shape.svg"
+            <HelpButton
-            size={12}
+              iconName="static/images/combined.shape.svg"
-            // tooltipContent={tooltipCustomTitlesTooltip}
+              size={12}
-          />
+              // tooltipContent={tooltipCustomTitlesTooltip}
-        </div>
-        <div className="settings-block">
-          <FieldContainer
-            id="fieldContainerWelcomePage"
-            className="field-container-width"
-            labelText={`${t("New portal name")}:`}
-            isVertical={true}
-          >
-            <TextInput
-              scale={true}
-              // value={greetingTitle}
-              // onChange={onChangePortalName}
-              // isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore}
-              placeholder={`${t("room")}`}
             />
-          </FieldContainer>
+          </div>
-        </div>
+        )}
+        {(isMobileOnly && isSmallTablet()) || isSmallTablet() ? (
+          <StyledScrollbar stype="smallBlack">{settingsBlock}</StyledScrollbar>
+        ) : (
+          <> {settingsBlock}</>
+        )}
         <SaveCancelButtons
+          className="save-cancel-buttons"
           onSaveClick={onSavePortalRename}
+          onCancelClick={onCancelPortalName}
           saveButtonLabel={t("Common:SaveButton")}
           cancelButtonLabel={t("Common:CancelButton")}
+          showReminder={showReminder}
+          reminderTest={t("YouHaveUnsavedChanges")}
           displaySettings={true}
+          // hasScroll={hasScroll}
         />
       </StyledComponent>
     </>

web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/welcome-page-settings.js

@@ -236,7 +236,7 @@ class WelcomePageSettings extends React.Component {
     const tooltipCustomTitlesTooltip = <CustomTitlesTooltip t={t} />;
 
     // TODO: Move to a file
-    const isMobileViewLanguageTimeSettings = (
+    const isMobileViewWelcomePageSettings = (
       <div className="category-item-wrapper">
         <div className="category-item-heading">
           <Link
@@ -281,7 +281,7 @@ class WelcomePageSettings extends React.Component {
     return !isLoadedData ? (
       <Loader className="pageLoader" type="rombs" size="40px" />
     ) : isMobileView ? (
-      isMobileViewLanguageTimeSettings
+      isMobileViewWelcomePageSettings
     ) : (
       <StyledSettingsComponent
         hasScroll={hasScroll}

web/ASC.Web.Client/src/components/pages/Settings/index.js

@@ -26,6 +26,9 @@ const LanguageAndTimeZoneSettings = lazy(() =>
 const WelcomePageSettings = lazy(() =>
   import("./categories/common/settingsCustomization/welcome-page-settings")
 );
+const PortalRenaming = lazy(() =>
+  import("./categories/common/settingsCustomization/portal-renaming")
+);
 const TeamTemplate = lazy(() => import("./categories/common/team-template"));
 const ThirdPartyServices = lazy(() =>
   import("./categories/integration/thirdPartyServicesSettings")
@@ -67,6 +70,10 @@ const WELCOME_PAGE_SETTINGS_URL = combineUrl(
   PROXY_BASE_URL,
   "/common/customization/welcome-page-settings"
 );
+const PORTAL_RENAMING = combineUrl(
+  PROXY_BASE_URL,
+  "/common/customization/portal-renaming"
+);
 const TEAM_TEMPLATE_URL = combineUrl(
   PROXY_BASE_URL,
   "/common/customization/team-template"
@@ -116,6 +123,7 @@ const Settings = () => {
             path={WELCOME_PAGE_SETTINGS_URL}
             component={WelcomePageSettings}
           />
+          <Route exact path={PORTAL_RENAMING} component={PortalRenaming} />
           <Route exact path={WHITELABEL_URL} component={WhiteLabel} />
           <Route exact path={TEAM_TEMPLATE_URL} component={TeamTemplate} />