%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/pages/migration/steps/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/pages/migration/steps/SetPasswordStep.js |
import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import { TextField } from "@material-ui/core"; import { Password } from "common/components"; import { setNewPassword } from "actions/api_actions"; import { resetMigration, migrationError } from "../actions"; import { isDoneSelector, errorSelector } from "../selectors"; const minPasswordLength = 10; export function SetPasswordStep({ classes, handlePrevious, handleNext }) { const [t] = useTranslation(); const dispatch = useDispatch(); const isDone = useSelector(isDoneSelector); const error = useSelector(errorSelector); const [password, setPassword] = useState(""); const referenceId = new URLSearchParams(window.location.search).get("referenceId"); const onPasswordChange = ({ target: { value } }) => { dispatch(resetMigration); setPassword(value); }; const onBackClick = () => { dispatch(resetMigration); handlePrevious(); }; const handleSubmit = (event) => { event.preventDefault(); if (password.length < minPasswordLength) { dispatch(migrationError); return null; } return dispatch(setNewPassword(password, referenceId)); }; useEffect(() => { if (isDone) { handleNext(); } }, [handleNext, isDone]); return ( <form onSubmit={handleSubmit} className={classes.wrapper} > <h2 className={classes.heading2}> {t("migration.setPassword.title")} </h2> <p className={`${classes.paragraph} ${classes.centerText}`}>{t("migration.setPassword.description")}</p> <div className={classes.setPasswordForm}> <Password> <TextField fullWidth id="password" label={t("migration.setPassword.newPassword")} variant="outlined" onChange={onPasswordChange} error={error} value={password} size="small" /> </Password> </div> <div className={classes.requirementsWrapper}> <p className={classes.smallParagraph}> {t("migration.setPassword.passwordMust")} : </p> <ul className={classes.lightGrayText}> <li className={classes.smallParagraph}>{t("migration.setPassword.requirement1")}</li> </ul> </div> <div className={classes.bottomWrapper}> <button type="submit" className={classes.button}>{t("migration.setPassword.confirm")}</button> <div className={`${classes.link} ${classes.backLink}`} onClick={onBackClick} > < {" "} {t("migration.setPassword.back")} </div> </div> </form> ); } SetPasswordStep.propTypes = { classes: PropTypes.object.isRequired, handlePrevious: PropTypes.func.isRequired, handleNext: PropTypes.func.isRequired, };