%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/components/ForgotPassword/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/components/ForgotPassword/SendPhoneForm.js |
import React, { useState } from "react"; import { arrayOf, bool, func, instanceOf, oneOfType, string, object, } from "prop-types"; import { Trans, useTranslation } from "react-i18next"; import { Field, reduxForm } from "redux-form"; import { Grid } from "@material-ui/core"; import { withStyles } from "@material-ui/core/styles"; import { Box, Button, HelpText, RenderField, styles, Title, } from "common/components"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import MessageBox, { TYPES as MESSAGE_BOX_TYPES } from "common/components/MessageBox"; import { LOGIN_METHODS } from "../SignIn"; const required = (value) => ((value || value > 0) ? undefined : "Required"); const getErrorMessage = ({ lockExpireDate, otpSentMsg, recoveryType, t, validationErrors, lastResetAttemptMethod, }) => { let notification = null; if ( validationErrors && otpSentMsg !== null && (otpSentMsg.indexOf("emailorsmsmissing") !== -1 || (otpSentMsg === "accountLocked" && lockExpireDate === null) || (otpSentMsg === "try-again")) ) { if (otpSentMsg === "accountLocked") { notification = t("sweet-alert.low-attempts"); } else if (otpSentMsg === "try-again") { notification = t("sweet-alert.try-again"); } else { notification = recoveryType === "sms" ? t("resetPassword.error.missingPhone") : t("resetPassword.error.missingEmail"); } return ( <MessageBox type={MESSAGE_BOX_TYPES.ERROR} extraSpaceAfter={4}> {`${notification} `} </MessageBox> ); } if ( validationErrors && otpSentMsg !== null && (otpSentMsg.indexOf("usernotfound") !== -1 || (otpSentMsg === "accountLocked" && lockExpireDate !== null)) ) { let notification; // eslint-disable-line if (otpSentMsg === "accountLocked") { notification = `${t("sweet-alert.account-blocked")} ${new Date(lockExpireDate).toLocaleString([navigator.language, "sv"])}`; } else { notification = lastResetAttemptMethod === LOGIN_METHODS.phone ? t("resetPassword.phoneNotFound") : `${t("resetPassword.usernameNotFound")} ${t("auth.login.wrongUsernameOrPassword.p2")}`; } return ( <MessageBox type={MESSAGE_BOX_TYPES.ERROR} extraSpaceAfter={4}>{notification}</MessageBox> ); } if ( validationErrors && otpSentMsg !== null && otpSentMsg === "wrongusrername" ) { const notification1 = `${t("error.enter-username")}`; const notification2 = <Trans i18nKey="helpSignin" />; return ( <MessageBox type={MESSAGE_BOX_TYPES.ERROR} extraSpaceAfter={4}> {notification1} <p /> {notification2} </MessageBox> ); } return null; }; function SendPhoneForm({ classes, countryCode, countryData, getOtpToken, handleSubmit, lockExpireDate, otpSentMsg, recoveryType, selectCode, selectedCode, resetReduxForm, setRecoveryType, validationErrors, resetValidationErrors, }) { const [t] = useTranslation(); const [resetMethod, setResetMethod] = useState(LOGIN_METHODS.phone); const [lastResetAttemptMethod, setLastResetAttemptMethod] = useState(LOGIN_METHODS.phone); const usernameFieldType = resetMethod === LOGIN_METHODS.phone ? "tel" : "text"; const isAURealm = countryCode === "AU"; const errorMessage = getErrorMessage({ countryCode, countryData, lockExpireDate, otpSentMsg, recoveryType, t, validationErrors, lastResetAttemptMethod, }); const handleSubmitEmail = (values) => { setRecoveryType("email"); getOtpToken(values, "email", resetMethod); setLastResetAttemptMethod(resetMethod); }; const handleSubmitSms = (values) => { setRecoveryType("sms"); getOtpToken(values, "sms", resetMethod); setLastResetAttemptMethod(resetMethod); }; const onLoginMethodChange = (value) => { if (!value) return; setResetMethod(value); resetReduxForm("sendPhoneForm"); }; const showResetPasswordOptions = ( <> {!isAURealm && ( <Grid item xs={6}> <Button onClick={handleSubmit(handleSubmitSms)} primary fullWidth > {t("send-code")} </Button> </Grid> )} <Grid item xs={!isAURealm ? 6 : 12}> <Button onClick={handleSubmit(handleSubmitEmail)} primary fullWidth > {t("send-email")} </Button> </Grid> </> ); return ( <form name="sendPhoneForm" onSubmit={(event) => event.preventDefault()} > <Box component="header"> <Title classes={classes.titleSmall}>{t("resetPassword.title")}</Title> <HelpText>{t("resetPassword.description")}</HelpText> </Box> <p className={classes.bold}> {t("resetPassword.resetWith")} : </p> <ToggleButtonGroup classes={{ root: classes.buttonGroup, }} exclusive value={resetMethod} onChange={(_, value) => onLoginMethodChange(value)} > <ToggleButton classes={{ root: classes.button, selected: classes.buttonSelected, }} value={LOGIN_METHODS.phone} > {t("signInUsernameRegflow")} </ToggleButton> <ToggleButton classes={{ root: classes.button, selected: classes.buttonSelected, }} value={LOGIN_METHODS.username} aria-label={t("signUpTabBusiness")} > {t("username")} </ToggleButton> </ToggleButtonGroup> {errorMessage} <Box extraSpaceAfter> <Field type={usernameFieldType} placeholder={resetMethod === LOGIN_METHODS.phone ? t("signInUsernameRegflow") : t("username")} defaultCountry={countryCode} name="recoveryPhoneNumber" id="phonenumberRecovery" className="form-control sign-in-modal-input" errorMsg={t("error.enter-number")} component={RenderField} validate={[required]} onFocus={resetValidationErrors} onChange={(e) => { const regexp = /^\d+$/; if (regexp.test(e.value) === false && e.value) { selectCode(""); } else if (!selectedCode) { selectCode(countryCode); } }} /> </Box> <Box> <Grid item container direction="row" spacing={1}> {showResetPasswordOptions} </Grid> </Box> </form> ); } SendPhoneForm.propTypes = { classes: object.isRequired, countryCode: string, countryData: oneOfType([ arrayOf(instanceOf(Object)), instanceOf(Object), ]), getOtpToken: func.isRequired, handleSubmit: func.isRequired, lockExpireDate: Number, otpSentMsg: string, recoveryType: string, resetValidationErrors: func.isRequired, selectCode: func.isRequired, resetReduxForm: func.isRequired, selectedCode: string, setRecoveryType: func.isRequired, validationErrors: bool, }; SendPhoneForm.defaultProps = { validationErrors: false, otpSentMsg: null, countryData: [], countryCode: "", selectedCode: "", recoveryType: "", lockExpireDate: 0, }; export default reduxForm({ form: "sendPhoneForm" })(withStyles(styles)(SendPhoneForm));