Merge pull request #288 from ONLYOFFICE/feature/portal-name-validation

Feature/portal name validation

packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js

@@ -20,6 +20,7 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
 import { DeviceType } from "@docspace/shared/enums";
+import { validatePortalName } from "@docspace/shared/utils/common";
 
 const toggleStyle = {
   position: "static",
@@ -60,6 +61,7 @@ const DNSSettings = (props) => {
     isDefaultDNS,
     dnsSettingsUrl,
     currentDeviceType,
+    domainValidator,
   } = props;
   const [hasScroll, setHasScroll] = useState(false);
   const isLoadedSetting = isLoaded && tReady;
@@ -67,13 +69,14 @@ const DNSSettings = (props) => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState();
   const [isError, setIsError] = useState(false);
+  const [errorText, setErrorText] = useState("");
 
   useEffect(() => {
     setDocumentTitle(t("DNSSettings"));
 
     if (!isLoaded)
       initSettings(isMobileView ? "dns-settings" : "general").then(() =>
-        setIsLoaded(true)
+        setIsLoaded(true),
       );
 
     const checkScroll = checkScrollSettingsBlock();
@@ -101,26 +104,34 @@ const DNSSettings = (props) => {
     try {
       if (!dnsName?.trim()) {
         setIsError(true);
-        return;
       }
 
       timerId = setTimeout(() => {
         setIsLoading(true);
       }, [200]);
 
-      await saveDNSSettings();
-      toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
+      const isValidPortalName = validatePortalName(
+        dnsName || "",
+        domainValidator,
+        setErrorText,
+        t,
+      );
+
+      if (isValidPortalName) {
+        await saveDNSSettings();
+        toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
+      } else {
+        setIsError(true);
+      }
     } catch (e) {
+      setIsError(true);
       toastr.error(e);
     }
 
     clearTimeout(timerId);
     timerId = null;
     setIsLoading(false);
-
-    setIsError(false);
   };
-
   const onClickToggle = (e) => {
     const checked = e.currentTarget.checked;
     setIsEnableDNS(checked);
@@ -128,6 +139,8 @@ const DNSSettings = (props) => {
 
   const onChangeTextInput = (e) => {
     const { value } = e.target;
+    isError && setIsError(false);
+    errorText && setErrorText("");
     setDNSName(value);
   };
   const checkInnerWidth = useCallback(() => {
@@ -136,7 +149,7 @@ const DNSSettings = (props) => {
 
       const currentUrl = window.location.href.replace(
         window.location.origin,
-        ""
+        "",
       );
 
       const newUrl = "/portal-settings/customization/general";
@@ -168,6 +181,11 @@ const DNSSettings = (props) => {
             onChange={onChangeTextInput}
             hasError={isError}
           />
+          <div style={{ marginTop: "5px" }}>
+            <Text fontSize="12px" fontWeight="400" color="#F24724">
+              {errorText}
+            </Text>
+          </div>
         </>
       ) : (
         <>
@@ -260,6 +278,7 @@ export default inject(({ settingsStore, common, currentQuotaStore }) => {
     standalone,
     dnsSettingsUrl,
     currentDeviceType,
+    domainValidator,
   } = settingsStore;
   const {
     isLoaded,
@@ -294,5 +313,6 @@ export default inject(({ settingsStore, common, currentQuotaStore }) => {
     saveDNSSettings,
     dnsSettingsUrl,
     currentDeviceType,
+    domainValidator,
   };
 })(withLoading(withTranslation(["Settings", "Common"])(observer(DNSSettings))));

packages/management/src/categories/spaces/sub-components/ConfigurationSection.tsx

@@ -5,11 +5,11 @@ import { TextInput } from "@docspace/shared/components/text-input";
 import { Text } from "@docspace/shared/components/text";
 import { ConfigurationWrapper } from "../StyledSpaces";
 import { useStore } from "SRC_DIR/store";
-import { parseDomain, validatePortalName } from "SRC_DIR/utils";
+import { parseDomain } from "SRC_DIR/utils";
 import { isMobile } from "react-device-detect";
 import { toastr } from "@docspace/shared/components/toast";
-
 import { TranslationType } from "SRC_DIR/types/spaces";
+import { validatePortalName } from "@docspace/shared/utils/common";
 
 type TConfigurationSection = {
   t: TranslationType;

packages/management/src/categories/spaces/sub-components/dialogs/CreatePortalDialog/index.tsx

@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { TextInput } from "@docspace/shared/components/text-input";
 import { Checkbox } from "@docspace/shared/components/checkbox";
 import { useStore } from "SRC_DIR/store";
-import { validatePortalName } from "SRC_DIR/utils";
+import { validatePortalName } from "@docspace/shared/utils/common";
 
 const StyledModal = styled(ModalDialogContainer)`
   #modal-dialog {

packages/management/src/utils/index.ts

@@ -101,30 +101,3 @@ export const parseDomain = (
 
   return parsedDomain.isValid();
 };
-
-export const validatePortalName = (
-  value: string,
-  nameValidator,
-  setError: Function,
-  t: TranslationType
-) => {
-  const validName = new RegExp(nameValidator.regex);
-  switch (true) {
-    case value === "":
-      return setError(t("Settings:PortalNameEmpty"));
-    case value.length < nameValidator.minLength ||
-      value.length > nameValidator.maxLength:
-      return setError(
-        t("Settings:PortalNameLength", {
-          minLength: nameValidator.minLength,
-          maxLength: nameValidator.maxLength,
-        })
-      );
-    case !validName.test(value):
-      return setError(t("Settings:PortalNameIncorrect"));
-
-    default:
-      setError(null);
-  }
-  return validName.test(value);
-};

packages/shared/utils/common.ts

@@ -112,6 +112,33 @@ export const getUserTypeLabel = (
   }
 };
 
+export const validatePortalName = (
+  value: string,
+  nameValidator: { minLength: number; maxLength: number; regex: RegExp },
+  setError: Function,
+  t: (key: string) => string,
+) => {
+  const validName = new RegExp(nameValidator.regex);
+  switch (true) {
+    case value === "":
+      return setError(t("Settings:PortalNameEmpty"));
+    case value.length < nameValidator.minLength ||
+      value.length > nameValidator.maxLength:
+      return setError(
+        t("Settings:PortalNameLength", {
+          minLength: nameValidator.minLength,
+          maxLength: nameValidator.maxLength,
+        }),
+      );
+    case !validName.test(value):
+      return setError(t("Settings:PortalNameIncorrect"));
+
+    default:
+      setError(null);
+  }
+  return validName.test(value);
+};
+
 export const getShowText = () => {
   const showArticle = localStorage.getItem("showArticle");