%PDF-
%PDF-
Mini Shell
Mini Shell
import React, { useEffect, useState } from "react";
import {
arrayOf, bool, func, object, oneOfType, string,
} from "prop-types";
import { Trans, useTranslation } from "react-i18next";
import { Field, reduxForm } from "redux-form";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { withStyles } from "@material-ui/core/styles";
import styles from "common/components/styles";
import RenderField from "common/components/renderField";
import MIXPANEL_ACTIONS from "constants/mixpanel_actions";
import { bffErrors } from "constants/bff_messages";
import { normalizeUserName } from "utils/normalize";
import { trackMixpanelActions } from "utils";
import { Password } from "common/components/Password";
import { Box, Button, LoadingIndicator } from "common/components";
import Title from "common/components/Title.jsx";
import HelpText from "common/components/HelpText";
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 { minLength, required } from "utils/fieldValidations";
import theme from "common/components/theme";
import { getRealmFromCookie } from "utils/countries";
const minLength3 = minLength(3);
const minLength6 = minLength(6);
export const LOGIN_METHODS = {
phone: "phone",
username: "username",
};
function SignIn({
classes,
login,
countryCode,
handleSubmit,
selectedCode,
countryConstant,
countryData,
pending,
isUnauthorized,
unauthorizedReason,
clearUnauthorized,
resetReduxForm,
initLoginMethod,
}) {
const [loginMethod, setLoginMethod] = useState(initLoginMethod || LOGIN_METHODS.phone);
const [lastLoginAttemptMethod, setLastLoginAttemptMethod] = useState(LOGIN_METHODS.phone);
useEffect(() => {
trackMixpanelActions(MIXPANEL_ACTIONS.PAGE_VIEWED, {
category: "Selfservice",
channel: "DesktopWeb",
eventType: "view",
label: "Sign In",
});
}, []);
const [t] = useTranslation();
const tooltip = (
<Tooltip id="tooltip" className="signin-tooltip">
<Trans i18nKey="helpSignin" />
</Tooltip>
);
const urlForgotPassword = "/auth/forgot-password";
const urlSignup = "/auth/sign-up/business";
const usernameFieldType = loginMethod === LOGIN_METHODS.phone ? "tel" : "text";
const getLoginFailedMessage = () => {
if (lastLoginAttemptMethod === LOGIN_METHODS.phone) {
if (unauthorizedReason === bffErrors.USER_CLOSED) {
return t("resetPassword.phoneNotFound");
}
if (unauthorizedReason === bffErrors.USER_NOT_AUTHENTICATED) {
return t("auth.login.wrongPhoneOrPassword");
}
if (unauthorizedReason === bffErrors.ACCOUNT_TEMPORARILY_DISABLED) {
return t("errors.maxLoginAttemptsReached");
}
}
if (lastLoginAttemptMethod === LOGIN_METHODS.username) {
if (unauthorizedReason === bffErrors.USER_CLOSED) {
return t("resetPassword.usernameNotFound");
}
if (unauthorizedReason === bffErrors.USER_NOT_AUTHENTICATED) {
return `${t("auth.login.wrongUsernameOrPassword.p1")}
${t("auth.login.wrongUsernameOrPassword.p2")}`;
}
if (unauthorizedReason === bffErrors.ACCOUNT_TEMPORARILY_DISABLED) {
return t("errors.maxLoginAttemptsReached");
}
}
return null;
};
const onLoginMethodChange = (value) => {
if (!value) return;
setLoginMethod(value);
resetReduxForm("signinform");
};
const urlDashboard = getRealmFromCookie() === "AU" ? "https://dashboard.easypark.com.au/" : "https://dashboard.easypark.net/";
return (
<div className={classes.narrowedForm}>
<LoadingIndicator
loading={pending}
/>
<form
onSubmit={handleSubmit((values) => {
trackMixpanelActions(MIXPANEL_ACTIONS.SIGN_IN, {
category: "Selfservice",
channel: "DesktopWeb",
eventType: "signIn",
label: MIXPANEL_ACTIONS.SIGN_IN,
});
values.phoneCode = selectedCode !== null
? countryData[selectedCode].code
: countryData[countryCode].code;
values.countryConstant = selectedCode !== null ? selectedCode : countryConstant;
values.phoneNumber = normalizeUserName(
values.user || "",
countryData[countryCode].code,
);
login(values);
setLastLoginAttemptMethod(loginMethod);
})}
id="signinform"
name="signup_form"
>
<Box after={0}>
<Title>{t("auth.login.title")}</Title>
<HelpText>{t("auth.login.titleMessage")}</HelpText>
</Box>
<p className={classes.bold}>
{t("auth.login.logInWith")}
:
</p>
<ToggleButtonGroup
classes={{
root: classes.buttonGroup,
}}
exclusive
value={loginMethod}
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>
{isUnauthorized && (
<MessageBox type={MESSAGE_BOX_TYPES.ERROR} extraSpaceAfter={4}>
<pre style={{ whiteSpace: "pre-line", margin: 0, fontFamily: theme.typography.fontFamily }}>{getLoginFailedMessage()}</pre>
</MessageBox>
)}
<Box>
<Field
type={usernameFieldType}
name="user"
autoComplete="username"
id="userName"
errorMsg={t("error.enter-number")}
validate={loginMethod === LOGIN_METHODS.phone
? [
required, minLength6,
] : [required, minLength3]}
defaultCountry={countryCode}
component={RenderField}
onFocus={clearUnauthorized}
placeholder={loginMethod === LOGIN_METHODS.phone ? t("signInUsernameRegflow") : t("username")}
/>
<OverlayTrigger placement="right" overlay={tooltip}>
<i className="fontello-icon icon-help-circled pointer paswordImage text-bigger-2x" />
</OverlayTrigger>
</Box>
<Box>
<Password>
<Field
name="password"
autoComplete="current-password"
placeholder={t("password")}
id="password"
errorMsg={t("error.enter-password")}
component={RenderField}
validate={[required, minLength3]}
errorClass=""
size="large"
onFocus={clearUnauthorized}
/>
</Password>
</Box>
<Box>
<div style={{ textAlign: "left" }}>
<a className={classes.link} href={urlForgotPassword}>
{t("auth.login.cantLogIn")}
</a>
</div>
</Box>
<Box extraSpaceAfter>
<Button
id="buttonLogin"
primary
type="submit"
fullWidth
>
{t("auth.login.login-button")}
</Button>
</Box>
<Box extraSpaceBefore>
<a href={urlSignup} className={classes.link}>
{t("auth.login.registerWithEasyPark")}
</a>
</Box>
<Box>
<a
href={urlDashboard}
className={classes.link}
>
{t("auth.login.parkingOperatorLogIn")}
</a>
</Box>
</form>
</div>
);
}
SignIn.propTypes = {
resetReduxForm: func.isRequired,
classes: object.isRequired,
clearUnauthorized: func.isRequired,
countryCode: string,
countryConstant: string,
countryData: oneOfType([arrayOf(object), object]),
handleSubmit: func.isRequired,
isUnauthorized: bool.isRequired,
unauthorizedReason: string.isRequired,
login: func.isRequired,
pending: bool,
selectedCode: string,
initLoginMethod: string,
};
SignIn.defaultProps = {
countryCode: "",
countryConstant: "",
countryData: {},
pending: false,
selectedCode: "",
initLoginMethod: LOGIN_METHODS.phone,
};
export default reduxForm({ form: "signinform" })(withStyles(styles)(SignIn));
Zerion Mini Shell 1.0