Web: Files: EditLinkPanel: replaced PasswordInput with SimulatePassword

packages/client/src/components/SimulatePassword/index.js

@@ -60,8 +60,9 @@ const SimulatePassword = memo(
     isDisabled = false,
     hasError = false,
     forwardedRef,
+    inputValue,
   }) => {
-    const [password, setPassword] = useState("");
+    const [password, setPassword] = useState(inputValue ?? "");
     const [caretPosition, setCaretPosition] = useState();
     const [inputType, setInputType] = useState("password");
 
@@ -143,6 +144,10 @@ const SimulatePassword = memo(
       isDisabled && inputType !== "password" && setInputType("password");
     }, [isDisabled]);
 
+    useEffect(() => {
+      setPassword(inputValue);
+    }, [inputValue]);
+
     return (
       <StyledBody
         className="conversation-password-wrapper"

packages/client/src/components/panels/EditLinkPanel/PasswordAccessBlock.js

@@ -24,15 +24,15 @@
 // 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
 
-import React, { useRef } from "react";
 import ToggleBlock from "./ToggleBlock";
-import { PasswordInput } from "@docspace/shared/components/password-input";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import { Link } from "@docspace/shared/components/link";
 import RefreshReactSvgUrl from "PUBLIC_DIR/images/refresh.react.svg?url";
 import { FieldContainer } from "@docspace/shared/components/field-container";
 import copy from "copy-to-clipboard";
 import { toastr } from "@docspace/shared/components/toast";
+import SimulatePassword from "../../../components/SimulatePassword";
+import { getNewPassword } from "@docspace/shared/utils";
 
 const PasswordAccessBlock = (props) => {
   const {
@@ -45,14 +45,12 @@ const PasswordAccessBlock = (props) => {
     setIsPasswordValid,
   } = props;
 
-  const passwordInputRef = useRef(null);
-
   const onGeneratePasswordClick = () => {
-    passwordInputRef.current.onGeneratePassword();
+    const password = getNewPassword();
+    setPasswordValue(password);
   };
 
   const onCleanClick = () => {
-    passwordInputRef.current.setState((s) => ({ ...s, value: "" })); //TODO: PasswordInput bug
     setPasswordValue("");
   };
 
@@ -64,8 +62,8 @@ const PasswordAccessBlock = (props) => {
     }
   };
 
-  const onChangePassword = (e) => {
-    setPasswordValue(e.target.value);
+  const onChangePassword = (password) => {
+    setPasswordValue(password);
     setIsPasswordValid(true);
   };
 
@@ -80,18 +78,13 @@ const PasswordAccessBlock = (props) => {
               errorMessage={t("Common:RequiredField")}
               className="edit-link_password-block"
             >
-              <PasswordInput
-                // scale //doesn't work
-                // tabIndex={3}
-                // simpleView
-                // passwordSettings={{ minLength: 0 }}
+              <SimulatePassword
                 className="edit-link_password-input"
-                ref={passwordInputRef}
-                simpleView
                 isDisabled={isLoading}
                 hasError={!isPasswordValid}
                 inputValue={passwordValue}
                 onChange={onChangePassword}
+                inputMaxWidth="100%"
               />
             </FieldContainer>
 

packages/shared/utils/index.ts

@@ -183,3 +183,66 @@ export const getLastColumn = (tableStorageName: string) => {
 
   return null;
 };
+
+export const getNewPassword = (
+  settings: {
+    minLength?: number;
+    upperCase?: boolean;
+    digits?: boolean;
+    specSymbols?: boolean;
+    digitsRegexStr?: string;
+    upperCaseRegexStr?: string;
+    specSymbolsRegexStr?: string;
+    allowedCharactersRegexStr?: string;
+  },
+  generatorSpecial: string = "!@#$%^&*",
+) => {
+  const passwordSettings = settings ?? {
+    minLength: 8,
+    upperCase: false,
+    digits: false,
+    specSymbols: false,
+    digitsRegexStr: "(?=.*\\d)",
+    upperCaseRegexStr: "(?=.*[A-Z])",
+    specSymbolsRegexStr: "(?=.*[\\x21-\\x2F\\x3A-\\x40\\x5B-\\x60\\x7B-\\x7E])",
+  };
+
+  const length = passwordSettings?.minLength || 0;
+  const string = "abcdefghijklmnopqrstuvwxyz";
+  const numeric = "0123456789";
+  const special = generatorSpecial || "";
+
+  let password = "";
+  let character = "";
+
+  while (password.length < length) {
+    const a = Math.ceil(string.length * Math.random() * Math.random());
+    const b = Math.ceil(numeric.length * Math.random() * Math.random());
+    const c = Math.ceil(special.length * Math.random() * Math.random());
+
+    let hold = string.charAt(a);
+
+    if (passwordSettings?.upperCase) {
+      hold = password.length % 2 === 0 ? hold.toUpperCase() : hold;
+    }
+
+    character += hold;
+
+    if (passwordSettings?.digits) {
+      character += numeric.charAt(b);
+    }
+
+    if (passwordSettings?.specSymbols) {
+      character += special.charAt(c);
+    }
+
+    password = character;
+  }
+
+  password = password
+    .split("")
+    .sort(() => 0.5 - Math.random())
+    .join("");
+
+  return password.substring(0, length);
+};