Untitled
unknown
plain_text
a month ago
7.9 kB
5
Indexable
Never
import { useEffect, useState } from "react"; import "./PasswordSetupScreen.scss"; import { useTranslation } from "react-i18next"; import { LockedInPasswordInput } from "../../../../design/inputfields/inputFields"; import { LockedInPasswordBtn, LockedInPasswordCancelBtn, } from "../../../../design/buttons/Buttons"; import { useDispatch, useSelector } from "react-redux"; import { HIDE_LOCKEDIN_SCREEN, LOCK_MODULES_SCREEN, } from "../../../../redux/constant/lockedInConstant"; import { validateLockedInPassword } from "../../../../utilities/helper"; import { updateLockedIn } from "../../../../redux/action/lockedInAction"; // import MuiSnackBar from "../../../../design/snackbar/MuiSnackBar"; const PasswordSetupScreen = () => { const { t } = useTranslation(); const dispatch = useDispatch(); const [show, setShow] = useState(false); const [showReenterPassword, setShowReenterPassword] = useState(false); const [showOldPassword, setShowOldPassword] = useState(false); const [oldPassword, setOldPassword] = useState(""); const [password, setPassword] = useState(""); const [reEnterPassword, setReEnterPassword] = useState(""); const [showPasswordError, setShowPasswordError] = useState(false); const [showReenterPasswordError, setShowReenterPasswordError] = useState(false); const [showOldPasswordError, setShowOldPasswordError] = useState(false); const [showPasswordErrorText, setShowPasswordErrorText] = useState(""); const [showReenterPasswordErrorText, setShowReenterPasswordErrorText] = useState(""); const [showOldPasswordErrorText, setShowOldPasswordErrorText] = useState(""); const { passwordMatch, attemptsRemain} = useSelector((state) => state.lockedIn); const [isDisabled, setIsDisabled] = useState(true); const showPassword = () => { setShow(!show); }; // const [snackbar, setSnackBar] = useState({ // open: false, // message: "", // success: null, // }); const showReenterPasswordFunc = () => { setShowReenterPassword(!showReenterPassword); }; const showOldPasswordFunc = () => { setShowOldPassword(!showOldPassword); }; const closedPasswordSetupScreen = () => { dispatch({ type: LOCK_MODULES_SCREEN, }); dispatch({ type: HIDE_LOCKEDIN_SCREEN, }); }; useEffect(() => { if (passwordMatch === false) { setShowOldPasswordError(true); setShowOldPasswordErrorText(`Incorrect old password, ${attemptsRemain} more tries left`); } }, [passwordMatch,attemptsRemain]); // useEffect(() => { // if (forgotLockedInPinScreen === true && passwordMatch === true) { // // Reset error messages // setIsDisabled(false); // setShowPasswordErrorText(""); // setShowReenterPasswordErrorText(""); // setShowOldPasswordErrorText(""); // setShowReenterPasswordError(false); // setShowPasswordError(false); // setShowOldPasswordError(false); // } // else if (forgotLockedInPinScreen === true && passwordMatch === false) { // setIsDisabled(true); // setShowOldPasswordError(true); // setShowOldPasswordErrorText("`Incorrect old password, ${attemptsRemain} more tries left`"); // } // }, [passwordMatch,attemptsRemain]); const setUpLockedInPassword = () => { // Validate old password // if (oldPassword !== "123456789") { // console.log(oldPassword) // // console.log(storedOldPassword) // setShowOldPasswordError(true); // setShowOldPasswordErrorText("Old password is incorrect"); // return; // } // Validate new password if (password === "") { setShowPasswordError(true); setShowPasswordErrorText("Please enter the password"); return; } // Validate re-entered password if (reEnterPassword === "") { setShowReenterPasswordError(true); setShowReenterPasswordErrorText("Please re-enter the password"); return; } // Check if new password and re-entered password match if (password !== reEnterPassword) { setShowReenterPasswordError(true); setShowReenterPasswordErrorText("Pin mismatched"); return; } dispatch(updateLockedIn(oldPassword, password)); // Successful password setup actions // window.alert("Password setup successfully"); // dispatch({ // type: SUCCESSFULLY_SETUP_SCREEN, // }); // dispatch({ // type: HIDE_LOCKEDIN_SCREEN, // }); }; useEffect(() => { // if (passwordMatch === true) { // setShowPasswordErrorText(""); // } // else if (passwordMatch === false) { // setShowOldPasswordError(true); // setShowOldPasswordErrorText(`Incorrect old password, ${attemptsRemain} more tries left`); // } // Validate new password input if (password !== "" && !validateLockedInPassword(password)) { setIsDisabled(true); setShowPasswordError(true); setShowPasswordErrorText(t("passwordValidationWarning")); } else { setIsDisabled(true); setShowPasswordError(false); setShowPasswordErrorText(""); } // Validate re-enter password input if (reEnterPassword !== "" && password !== reEnterPassword) { setIsDisabled(true); setShowReenterPasswordError(true); setShowReenterPasswordErrorText("Pin mismatched"); } else { setIsDisabled(false); setShowReenterPasswordError(false); setShowReenterPasswordErrorText(""); } }, [password, reEnterPassword,setIsDisabled, t]); return ( <main className="password_setup_main"> {/* <MuiSnackBar open={snackbar.open} message={snackbar.message} success={snackbar.success} onClose={() => setSnackBar({ message: "", success: true, open: false })} /> */} <h2>{t("oldLockedInPasswordBtnText")}</h2> {/* Old Password Input */} <LockedInPasswordInput placeholder={t("oldLockedInPasswordInputText")} togglePasswordVisibility={showOldPassword} showPassword={showOldPasswordFunc} onChange={(e) => setOldPassword(e.target.value)} showError={showOldPasswordError} showErrorMessage={showOldPasswordErrorText} /> <div className="divider" /> <h2>{t("setupnewLockedInPasswordBtnText")}</h2> {/* New Password Input */} <LockedInPasswordInput placeholder={t("lockedInpasswordInput")} togglePasswordVisibility={show} showPassword={showPassword} onChange={(e) => setPassword(e.target.value)} showError={showPasswordError} showErrorMessage={showPasswordErrorText} /> <div className="divider" /> {/* Re-enter Password Input */} <LockedInPasswordInput placeholder={t("reEnterLockedInpasswordInput")} togglePasswordVisibility={showReenterPassword} showPassword={showReenterPasswordFunc} onChange={(e) => setReEnterPassword(e.target.value)} showError={showReenterPasswordError} showErrorMessage={showReenterPasswordErrorText} /> <div className="divider" /> <div className="password_setup_text"> <p className="label-02-bold">{t("enterStringPassword")}</p> <p className="label-02-medium">{t("passwordStrength")}</p> </div> <LockedInPasswordBtn text={t("MAPINBtnText")} isDisabled={isDisabled} // Ensure button is not disabled onClicked={setUpLockedInPassword} /> <div className="divider" /> <LockedInPasswordCancelBtn text={t("cancelBtnText")} onClicked={closedPasswordSetupScreen} /> </main> ); }; export default PasswordSetupScreen;
Leave a Comment