%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/ForgotPassword/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/ForgotPassword/SendTokenForm.js |
import React, { useState } from "react"; import PropTypes from "prop-types"; import { Field, reduxForm } from "redux-form"; import { useTranslation } from "react-i18next"; import { Grid, } from "@material-ui/core"; import { withStyles } from "@material-ui/core/styles"; import { Box, Button, HelpText, RenderField, styles, Title, } from "common/components"; import MessageBox, { TYPES as MESSAGE_BOX_TYPES } from "common/components/MessageBox"; const required = (value) => ((value?.length > 0) ? undefined : "Required"); const length = (value) => ((value?.length === 4) ? undefined : { type: "Length", length: 4 }); const normalizeOtp = (val) => { if (!val) { return val; } const onlyNums = val.replace(/[^\d]/g, ""); if (onlyNums.length > 4) { return `${onlyNums.slice(0, 4)}`; } return onlyNums; }; const isPhoneNumber = (value) => value === "+" || !Number.isNaN(value); function CodeForm({ sendOtpToken, handleSubmit, submitFailed, phone, // phone can also refer to username starting with ba- or customer- token, validationErrors, resendPhone, confirmPhoneSent, otpSentMsg, recoveryType, remainingAttempts, classes, }) { const [value, setValue] = useState(""); const [t] = useTranslation(); let helpText1; let helpText2; let wrongCodeText = t("sweet-alert.invalid-sms-token"); if (recoveryType === "email") { helpText1 = t("resetPassword.verificationCode.recoveryViaEmail.p1").replace("$phone", phone); helpText2 = t("resetPassword.verificationCode.recoveryViaEmail.p2"); wrongCodeText = t("sweet-alert.invalid-email-token"); } else if (recoveryType === "sms") { if (isPhoneNumber(phone?.[0])) { helpText1 = t("resetPassword.verificationCode.recoveryViaSMS.phoneLogIn.p1").replace("$phone", phone); } else { helpText1 = t("resetPassword.verificationCode.recoveryViaSMS.usernameLogIn.p1").replace("$phone", phone); } helpText2 = t("resetPassword.verificationCode.recoveryViaSMS.p2"); } if (submitFailed === false) { wrongCodeText += ` ${t( "sweet-alert.remaining-attempts", )} ${remainingAttempts}.`; } return ( <form name="sendTokenForm" onSubmit={handleSubmit(() => sendOtpToken(phone, token))} > <Box extraSpaceAfter component="header"> <Title>{t("resetPassword.enterVerificationCode")}</Title> <HelpText>{helpText1}</HelpText> <HelpText>{helpText2}</HelpText> </Box> {validationErrors && ( <MessageBox type={MESSAGE_BOX_TYPES.ERROR} extraSpaceAfter={4}> {wrongCodeText} </MessageBox> )} {(confirmPhoneSent && ( <MessageBox type={MESSAGE_BOX_TYPES.INFO} extraSpaceAfter={3}> {otpSentMsg} </MessageBox> ))} <Box> <Field name="otp" component={RenderField} placeholder={t("resetPassword.verificationCodePlaceholder")} type="text" value={value} onChange={(e) => setValue(e.target.value)} validate={[required, length]} normalize={normalizeOtp} /> </Box> <Box extraSpaceAfter> <Grid container direction="row" spacing={2}> <Grid item xs={12} container justify="flex-start"> <a onClick={() => resendPhone(phone, recoveryType)} className={classes.link} > {t("resetPassword.resendCode")} </a> </Grid> </Grid> </Box> <Box> <Grid container direction="row" spacing={2}> <Grid item xs={12}> <Button type="submit" primary fullWidth > {t("resetPassword.verifyCode")} </Button> </Grid> </Grid> </Box> <Box extraSpaceBefore> <Grid container direction="row" spacing={2}> <Grid item xs={12} container justify="center"> <a className={classes.link} href="/" > {"< "} {t("auth.login.backToLogin")} </a> </Grid> </Grid> </Box> </form> ); } CodeForm.propTypes = { classes: PropTypes.object.isRequired, sendOtpToken: PropTypes.func.isRequired, handleSubmit: PropTypes.func.isRequired, submitFailed: PropTypes.bool, phone: PropTypes.string, token: PropTypes.string, validationErrors: PropTypes.bool, resendPhone: PropTypes.func.isRequired, confirmPhoneSent: PropTypes.bool, otpSentMsg: PropTypes.string, recoveryType: PropTypes.string, remainingAttempts: PropTypes.number, }; CodeForm.defaultProps = { submitFailed: false, phone: "", token: "", validationErrors: false, confirmPhoneSent: false, otpSentMsg: "", recoveryType: "", remainingAttempts: 0, }; export default reduxForm({ form: "sendTokenForm" })(withStyles(styles)(CodeForm));