%PDF-
%PDF-
Mini Shell
Mini Shell
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));
Zerion Mini Shell 1.0