Web: Files: EditLinkPanel: replaced PasswordInput with SimulatePassword
This commit is contained in:
parent
91323ffb1f
commit
024e5de12b
@ -60,8 +60,9 @@ const SimulatePassword = memo(
|
|||||||
isDisabled = false,
|
isDisabled = false,
|
||||||
hasError = false,
|
hasError = false,
|
||||||
forwardedRef,
|
forwardedRef,
|
||||||
|
inputValue,
|
||||||
}) => {
|
}) => {
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState(inputValue ?? "");
|
||||||
const [caretPosition, setCaretPosition] = useState();
|
const [caretPosition, setCaretPosition] = useState();
|
||||||
const [inputType, setInputType] = useState("password");
|
const [inputType, setInputType] = useState("password");
|
||||||
|
|
||||||
@ -143,6 +144,10 @@ const SimulatePassword = memo(
|
|||||||
isDisabled && inputType !== "password" && setInputType("password");
|
isDisabled && inputType !== "password" && setInputType("password");
|
||||||
}, [isDisabled]);
|
}, [isDisabled]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setPassword(inputValue);
|
||||||
|
}, [inputValue]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledBody
|
<StyledBody
|
||||||
className="conversation-password-wrapper"
|
className="conversation-password-wrapper"
|
||||||
|
@ -24,15 +24,15 @@
|
|||||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
// 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
|
// 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 ToggleBlock from "./ToggleBlock";
|
||||||
import { PasswordInput } from "@docspace/shared/components/password-input";
|
|
||||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||||
import { Link } from "@docspace/shared/components/link";
|
import { Link } from "@docspace/shared/components/link";
|
||||||
import RefreshReactSvgUrl from "PUBLIC_DIR/images/refresh.react.svg?url";
|
import RefreshReactSvgUrl from "PUBLIC_DIR/images/refresh.react.svg?url";
|
||||||
import { FieldContainer } from "@docspace/shared/components/field-container";
|
import { FieldContainer } from "@docspace/shared/components/field-container";
|
||||||
import copy from "copy-to-clipboard";
|
import copy from "copy-to-clipboard";
|
||||||
import { toastr } from "@docspace/shared/components/toast";
|
import { toastr } from "@docspace/shared/components/toast";
|
||||||
|
import SimulatePassword from "../../../components/SimulatePassword";
|
||||||
|
import { getNewPassword } from "@docspace/shared/utils";
|
||||||
|
|
||||||
const PasswordAccessBlock = (props) => {
|
const PasswordAccessBlock = (props) => {
|
||||||
const {
|
const {
|
||||||
@ -45,14 +45,12 @@ const PasswordAccessBlock = (props) => {
|
|||||||
setIsPasswordValid,
|
setIsPasswordValid,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const passwordInputRef = useRef(null);
|
|
||||||
|
|
||||||
const onGeneratePasswordClick = () => {
|
const onGeneratePasswordClick = () => {
|
||||||
passwordInputRef.current.onGeneratePassword();
|
const password = getNewPassword();
|
||||||
|
setPasswordValue(password);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCleanClick = () => {
|
const onCleanClick = () => {
|
||||||
passwordInputRef.current.setState((s) => ({ ...s, value: "" })); //TODO: PasswordInput bug
|
|
||||||
setPasswordValue("");
|
setPasswordValue("");
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -64,8 +62,8 @@ const PasswordAccessBlock = (props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onChangePassword = (e) => {
|
const onChangePassword = (password) => {
|
||||||
setPasswordValue(e.target.value);
|
setPasswordValue(password);
|
||||||
setIsPasswordValid(true);
|
setIsPasswordValid(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -80,18 +78,13 @@ const PasswordAccessBlock = (props) => {
|
|||||||
errorMessage={t("Common:RequiredField")}
|
errorMessage={t("Common:RequiredField")}
|
||||||
className="edit-link_password-block"
|
className="edit-link_password-block"
|
||||||
>
|
>
|
||||||
<PasswordInput
|
<SimulatePassword
|
||||||
// scale //doesn't work
|
|
||||||
// tabIndex={3}
|
|
||||||
// simpleView
|
|
||||||
// passwordSettings={{ minLength: 0 }}
|
|
||||||
className="edit-link_password-input"
|
className="edit-link_password-input"
|
||||||
ref={passwordInputRef}
|
|
||||||
simpleView
|
|
||||||
isDisabled={isLoading}
|
isDisabled={isLoading}
|
||||||
hasError={!isPasswordValid}
|
hasError={!isPasswordValid}
|
||||||
inputValue={passwordValue}
|
inputValue={passwordValue}
|
||||||
onChange={onChangePassword}
|
onChange={onChangePassword}
|
||||||
|
inputMaxWidth="100%"
|
||||||
/>
|
/>
|
||||||
</FieldContainer>
|
</FieldContainer>
|
||||||
|
|
||||||
|
@ -183,3 +183,66 @@ export const getLastColumn = (tableStorageName: string) => {
|
|||||||
|
|
||||||
return null;
|
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);
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user