refactor register page
This commit is contained in:
Alex Holliday committed
1 parent
3ade8b5bd4
commit
bcea3a5e66
5 files changed
+347
-865
No files matched your search
@@ -1,413 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useDispatch } from "react-redux";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import { StepOne } from "./StepOne";
|
||||
import { StepTwo } from "./StepTwo";
|
||||
import { StepThree } from "./StepThree";
|
||||
import { networkService } from "../../../main";
|
||||
import { newOrChangedCredentials } from "../../../Validation/validation";
|
||||
import { createToast } from "../../../Utils/toastUtils";
|
||||
import { register } from "../../../Features/Auth/authSlice";
|
||||
import Background from "../../../assets/Images/background-grid.svg?react";
|
||||
import Logo from "../../../assets/icons/checkmate-icon.svg?react";
|
||||
import Mail from "../../../assets/icons/mail.svg?react";
|
||||
import "../index.css";
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
/**
|
||||
* Displays the initial landing page.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.isSuperAdmin - Whether the user is creating and admin account
|
||||
* @param {Function} props.onContinue - Callback function to handle "Continue with Email" button click.
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const LandingPage = ({ isSuperAdmin, onSignup }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">
|
||||
{isSuperAdmin
|
||||
? t("auth.registration.heading.superAdmin")
|
||||
: t("auth.registration.heading.user")}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{isSuperAdmin
|
||||
? t("auth.registration.description.superAdmin")
|
||||
: t("auth.registration.description.user")}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box width="100%">
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
onClick={onSignup}
|
||||
sx={{
|
||||
width: "100%",
|
||||
"& svg": {
|
||||
mr: theme.spacing(4),
|
||||
"& path": {
|
||||
stroke: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
},
|
||||
"&:focus-visible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Mail />
|
||||
{isSuperAdmin
|
||||
? t("auth.registration.gettingStartedButton.superAdmin")
|
||||
: t("auth.registration.gettingStartedButton.user")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box maxWidth={400}>
|
||||
<Typography className="tos-p">
|
||||
<Trans
|
||||
i18nKey="auth.registration.termsAndPolicies"
|
||||
components={{
|
||||
a1: (
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
"https://bluewavelabs.ca/terms-of-service-open-source",
|
||||
"_blank",
|
||||
"noreferrer"
|
||||
);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
a2: (
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
"https://bluewavelabs.ca/privacy-policy-open-source",
|
||||
"_blank",
|
||||
"noreferrer"
|
||||
);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
LandingPage.propTypes = {
|
||||
isSuperAdmin: PropTypes.bool,
|
||||
onSignup: PropTypes.func,
|
||||
};
|
||||
|
||||
const Register = ({ isSuperAdmin }) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { token } = useParams();
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
// TODO If possible, change the IDs of these fields to match the backend
|
||||
const idMap = {
|
||||
"register-firstname-input": "firstName",
|
||||
"register-lastname-input": "lastName",
|
||||
"register-email-input": "email",
|
||||
"register-password-input": "password",
|
||||
"register-confirm-input": "confirm",
|
||||
};
|
||||
|
||||
const [form, setForm] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirm: "",
|
||||
role: [],
|
||||
teamId: "",
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchInvite = async () => {
|
||||
if (token !== undefined) {
|
||||
try {
|
||||
const res = await networkService.verifyInvitationToken(token);
|
||||
const invite = res.data.data;
|
||||
const { email } = invite;
|
||||
setForm({ ...form, email });
|
||||
} catch (error) {
|
||||
navigate("/register", { replace: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchInvite();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Validates the form data against the validation schema.
|
||||
*
|
||||
* @param {Object} data - The form data to validate.
|
||||
* @param {Object} [options] - Optional settings for validation.
|
||||
* @returns {Object | undefined} - Returns the validation error object if there are validation errors; otherwise, `undefined`.
|
||||
*/
|
||||
const validateForm = (data, options = {}) => {
|
||||
const { error } = newOrChangedCredentials.validate(data, {
|
||||
abortEarly: false,
|
||||
...options,
|
||||
});
|
||||
return error;
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles validation errors by setting the state with error messages and displaying a toast notification.
|
||||
*
|
||||
* @param {Object} error - The validation error object returned from the validation schema.
|
||||
*/
|
||||
const handleError = (error) => {
|
||||
const newErrors = {};
|
||||
error.details.forEach((err) => {
|
||||
newErrors[err.path[0]] = err.message;
|
||||
});
|
||||
setErrors(newErrors);
|
||||
// Localization keys are in validation.js
|
||||
createToast({ body: t(error.details[0].message || "auth.common.errors.validation") });
|
||||
};
|
||||
|
||||
const handleStepOne = async (e) => {
|
||||
e.preventDefault();
|
||||
let error = validateForm({
|
||||
firstName: form.firstName,
|
||||
lastName: form.lastName,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
handleError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const handleStepTwo = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
let error;
|
||||
error = validateForm({ email: form.email });
|
||||
if (error) {
|
||||
handleError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
setStep(3);
|
||||
};
|
||||
|
||||
// Final step
|
||||
// Attempts account registration
|
||||
const handleStepThree = async (e) => {
|
||||
e.preventDefault();
|
||||
const { password, confirm } = e.target.elements;
|
||||
let registerForm = {
|
||||
...form,
|
||||
password: password.value,
|
||||
confirm: confirm.value,
|
||||
role: isSuperAdmin ? ["superadmin"] : form.role,
|
||||
inviteToken: token ? token : "", // Add the token to the request for verification
|
||||
};
|
||||
let error = validateForm(registerForm, {
|
||||
context: { password: registerForm.password },
|
||||
});
|
||||
if (error) {
|
||||
handleError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
delete registerForm.confirm;
|
||||
const action = await dispatch(register(registerForm));
|
||||
if (action.payload.success) {
|
||||
const authToken = action.payload.data;
|
||||
navigate("/uptime");
|
||||
createToast({
|
||||
body: t("auth.registration.toasts.success"),
|
||||
});
|
||||
} else {
|
||||
if (action.payload) {
|
||||
createToast({
|
||||
body: action.payload.msg,
|
||||
});
|
||||
} else {
|
||||
createToast({
|
||||
body: t("common.toasts.unknownError"),
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
const { value, id } = event.target;
|
||||
const name = idMap[id];
|
||||
const lowerCasedValue =
|
||||
name === idMap["register-email-input"] ? value?.toLowerCase() || value : value;
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
[name]: lowerCasedValue,
|
||||
}));
|
||||
|
||||
const { error } = newOrChangedCredentials.validate(
|
||||
{ [name]: lowerCasedValue },
|
||||
{ abortEarly: false, context: { password: form.password } }
|
||||
);
|
||||
|
||||
setErrors((prev) => {
|
||||
const prevErrors = { ...prev };
|
||||
if (error) prevErrors[name] = error.details[0].message;
|
||||
else delete prevErrors[name];
|
||||
return prevErrors;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
className="register-page auth"
|
||||
overflow="hidden"
|
||||
sx={{
|
||||
"& h1": {
|
||||
color: theme.palette.primary.contrastText,
|
||||
fontWeight: 600,
|
||||
fontSize: 28,
|
||||
},
|
||||
/* TODO set fontsize from theme */
|
||||
"& p": { fontSize: 14, color: theme.palette.primary.contrastTextSecondary },
|
||||
"& span": { fontSize: "inherit" },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="background-pattern-svg"
|
||||
sx={{
|
||||
"& svg g g:last-of-type path": {
|
||||
stroke: theme.palette.primary.lowContrast,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Background style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
px={theme.spacing(12)}
|
||||
gap={theme.spacing(4)}
|
||||
>
|
||||
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
|
||||
<Typography sx={{ userSelect: "none" }}>{t("common.appName")}</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
width="100%"
|
||||
maxWidth={600}
|
||||
flex={1}
|
||||
justifyContent="center"
|
||||
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
|
||||
pb={theme.spacing(20)}
|
||||
mx="auto"
|
||||
sx={{
|
||||
"& > .MuiStack-root": {
|
||||
border: 1,
|
||||
borderRadius: theme.spacing(5),
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
padding: {
|
||||
xs: theme.spacing(12),
|
||||
sm: theme.spacing(20),
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{step === 0 ? (
|
||||
<LandingPage
|
||||
isSuperAdmin={isSuperAdmin}
|
||||
onSignup={() => setStep(1)}
|
||||
/>
|
||||
) : step === 1 ? (
|
||||
<StepOne
|
||||
isSuperAdmin={isSuperAdmin}
|
||||
form={form}
|
||||
errors={errors}
|
||||
onSubmit={handleStepOne}
|
||||
onChange={handleChange}
|
||||
onBack={() => setStep(0)}
|
||||
/>
|
||||
) : step === 2 ? (
|
||||
<StepTwo
|
||||
isSuperAdmin={isSuperAdmin}
|
||||
form={form}
|
||||
errors={errors}
|
||||
onSubmit={handleStepTwo}
|
||||
onChange={handleChange}
|
||||
onBack={() => setStep(1)}
|
||||
/>
|
||||
) : step === 3 ? (
|
||||
<StepThree
|
||||
isSuperAdmin={isSuperAdmin}
|
||||
/* form={form}
|
||||
errors={errors} */
|
||||
onSubmit={handleStepThree}
|
||||
/* onChange={handleChange} */
|
||||
onBack={() => setStep(2)}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Stack>
|
||||
<Box
|
||||
textAlign="center"
|
||||
p={theme.spacing(12)}
|
||||
>
|
||||
<Typography display="inline-block">
|
||||
<Trans
|
||||
i18nKey="auth.registration.links.login"
|
||||
components={{
|
||||
a: (
|
||||
<Typography
|
||||
component="span"
|
||||
ml={theme.spacing(2)}
|
||||
onClick={() => {
|
||||
navigate("/login");
|
||||
}}
|
||||
sx={{ userSelect: "none", color: theme.palette.accent.main }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
Register.propTypes = {
|
||||
isSuperAdmin: PropTypes.bool,
|
||||
};
|
||||
export default Register;
|
||||
@@ -1,142 +0,0 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
|
||||
import TextInput from "../../../../Components/Inputs/TextInput";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
StepOne.propTypes = {
|
||||
isSuperAdmin: PropTypes.bool,
|
||||
form: PropTypes.object,
|
||||
errors: PropTypes.object,
|
||||
onSubmit: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onBack: PropTypes.func,
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the first step of the sign up process.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.isSuperAdmin - Whether the user is creating and admin account
|
||||
* @param {Object} props.form - Form state object.
|
||||
* @param {Object} props.errors - Object containing form validation errors.
|
||||
* @param {Function} props.onSubmit - Callback function to handle form submission.
|
||||
* @param {Function} props.onChange - Callback function to handle form input changes.
|
||||
* @param {Function} props.onBack - Callback function to handle "Back" button click.
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
|
||||
function StepOne({ isSuperAdmin, form, errors, onSubmit, onChange, onBack }) {
|
||||
const theme = useTheme();
|
||||
const inputRef = useRef(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* TODO this stack should be a component */}
|
||||
<Stack
|
||||
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
|
||||
textAlign="center"
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">
|
||||
{isSuperAdmin
|
||||
? t("auth.registration.heading.superAdmin")
|
||||
: t("auth.registration.heading.user")}
|
||||
</Typography>
|
||||
<Typography>{t("auth.registration.subheadings.stepOne")}</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
textAlign="left"
|
||||
component="form"
|
||||
noValidate
|
||||
spellCheck={false}
|
||||
onSubmit={onSubmit}
|
||||
display="grid"
|
||||
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
|
||||
>
|
||||
<Box
|
||||
display="grid"
|
||||
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
||||
>
|
||||
<TextInput
|
||||
id="register-firstname-input"
|
||||
label={t("auth.common.inputs.firstName.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.firstName.placeholder")}
|
||||
autoComplete="given-name"
|
||||
value={form.firstName}
|
||||
onChange={onChange}
|
||||
error={errors.firstName ? true : false}
|
||||
helperText={t(errors.firstName)} // Localization keys are in validation.js
|
||||
ref={inputRef}
|
||||
/>
|
||||
<TextInput
|
||||
id="register-lastname-input"
|
||||
label={t("auth.common.inputs.lastName.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.lastName.placeholder")}
|
||||
autoComplete="family-name"
|
||||
value={form.lastName}
|
||||
onChange={onChange}
|
||||
error={errors.lastName ? true : false}
|
||||
helperText={t(errors.lastName)} // Localization keys are in validation.js
|
||||
/>
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
{/* TODO buttons should be a component should be a component */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
px: theme.spacing(5),
|
||||
"& svg.MuiSvgIcon-root": {
|
||||
mr: theme.spacing(3),
|
||||
},
|
||||
|
||||
"&:focus-visible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ArrowBackRoundedIcon />
|
||||
{t("auth.common.navigation.back")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
type="submit"
|
||||
disabled={(errors.firstName || errors.lastName) && true}
|
||||
sx={{
|
||||
width: "30%",
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
boxShadow: `none`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t("auth.common.navigation.continue")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { StepOne };
|
||||
@@ -1,185 +0,0 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
|
||||
import TextInput from "../../../../Components/Inputs/TextInput";
|
||||
import Check from "../../../../Components/Check/Check";
|
||||
import { useValidatePassword } from "../../hooks/useValidatePassword";
|
||||
import { useTranslation } from "react-i18next";
|
||||
StepThree.propTypes = {
|
||||
isSuperAdmin: PropTypes.bool,
|
||||
onSubmit: PropTypes.func,
|
||||
onBack: PropTypes.func,
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the third step of the sign up process.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.isSuperAdmin - Whether the user is creating and admin account
|
||||
* @param {Function} props.onSubmit - Callback function to handle form submission.
|
||||
* @param {Function} props.onBack - Callback function to handle "Back" button click.
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
function StepThree({ isSuperAdmin, onSubmit, onBack }) {
|
||||
const theme = useTheme();
|
||||
const inputRef = useRef(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { handleChange, feedbacks, form, errors } = useValidatePassword();
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
||||
textAlign="center"
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">
|
||||
{isSuperAdmin
|
||||
? t("auth.registration.heading.superAdmin")
|
||||
: t("auth.registration.heading.user")}
|
||||
</Typography>
|
||||
<Typography>{t("auth.registration.subheadings.stepThree")}</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
spellCheck={false}
|
||||
onSubmit={onSubmit}
|
||||
textAlign="left"
|
||||
display="grid"
|
||||
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
|
||||
sx={{
|
||||
"& .input-error": {
|
||||
display: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
display="grid"
|
||||
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
||||
>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="register-password-input"
|
||||
name="password"
|
||||
label={t("auth.common.inputs.password.label")}
|
||||
isRequired={true}
|
||||
placeholder="••••••••••"
|
||||
autoComplete="current-password"
|
||||
value={form.password}
|
||||
onChange={handleChange}
|
||||
error={errors.password && errors.password[0] ? true : false}
|
||||
helperText={
|
||||
errors.password === "auth.common.inputs.password.errors.empty"
|
||||
? t(errors.password)
|
||||
: ""
|
||||
} // Other errors are related to required password conditions and are visualized below the input
|
||||
ref={inputRef}
|
||||
/>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="register-confirm-input"
|
||||
name="confirm"
|
||||
label={t("auth.common.inputs.passwordConfirm.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.passwordConfirm.placeholder")}
|
||||
autoComplete="current-password"
|
||||
value={form.confirm}
|
||||
onChange={handleChange}
|
||||
error={errors.confirm && errors.confirm[0] ? true : false}
|
||||
helperText={t(errors.confirm)} // Localization keys are in validation.js
|
||||
/>
|
||||
</Box>
|
||||
<Stack
|
||||
gap={theme.spacing(4)}
|
||||
mb={{ xs: theme.spacing(6), sm: theme.spacing(8) }}
|
||||
>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.length.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.length.highlighted")}
|
||||
variant={feedbacks.length}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.special.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.special.highlighted")}
|
||||
variant={feedbacks.special}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.number.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.number.highlighted")}
|
||||
variant={feedbacks.number}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.uppercase.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.uppercase.highlighted")}
|
||||
variant={feedbacks.uppercase}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.lowercase.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.lowercase.highlighted")}
|
||||
variant={feedbacks.lowercase}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.match.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.match.highlighted")}
|
||||
variant={feedbacks.confirm}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
px: theme.spacing(5),
|
||||
"& svg.MuiSvgIcon-root": {
|
||||
mr: theme.spacing(3),
|
||||
},
|
||||
":focus-visible": {
|
||||
outline: `2px solid ${theme.palette.primary.lowContrast}`,
|
||||
outlineOffset: "4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ArrowBackRoundedIcon />
|
||||
{t("auth.common.navigation.back")}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="accent"
|
||||
disabled={
|
||||
form.password.length === 0 ||
|
||||
form.confirm.length === 0 ||
|
||||
Object.keys(errors).length !== 0
|
||||
}
|
||||
sx={{
|
||||
width: "30%",
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
boxShadow: `none`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t("auth.common.navigation.continue")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { StepThree };
|
||||
@@ -1,125 +0,0 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
|
||||
import TextInput from "../../../../Components/Inputs/TextInput";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
StepTwo.propTypes = {
|
||||
isSuperAdmin: PropTypes.bool,
|
||||
form: PropTypes.object,
|
||||
errors: PropTypes.object,
|
||||
onSubmit: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onBack: PropTypes.func,
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the second step of the sign up process.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.isSuperAdmin - Whether the user is creating and admin account
|
||||
* @param {Object} props.form - Form state object.
|
||||
* @param {Object} props.errors - Object containing form validation errors.
|
||||
* @param {Function} props.onSubmit - Callback function to handle form submission.
|
||||
* @param {Function} props.onChange - Callback function to handle form input changes.
|
||||
* @param {Function} props.onBack - Callback function to handle "Back" button click.
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
function StepTwo({ isSuperAdmin, form, errors, onSubmit, onChange, onBack }) {
|
||||
const theme = useTheme();
|
||||
const inputRef = useRef(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
|
||||
textAlign="center"
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">
|
||||
{isSuperAdmin
|
||||
? t("auth.registration.heading.superAdmin")
|
||||
: t("auth.registration.heading.user")}
|
||||
</Typography>
|
||||
<Typography>{t("auth.registration.subheadings.stepTwo")}</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
textAlign="left"
|
||||
noValidate
|
||||
spellCheck={false}
|
||||
onSubmit={onSubmit}
|
||||
mb={theme.spacing(5)}
|
||||
display="grid"
|
||||
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
|
||||
>
|
||||
<TextInput
|
||||
type="email"
|
||||
id="register-email-input"
|
||||
label={t("auth.common.inputs.email.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.email.placeholder")}
|
||||
autoComplete="email"
|
||||
value={form.email}
|
||||
onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
|
||||
onChange={onChange}
|
||||
error={errors.email ? true : false}
|
||||
helperText={t(errors.email)} // Localization keys are in validation.js
|
||||
ref={inputRef}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
px: theme.spacing(5),
|
||||
"& svg.MuiSvgIcon-root": {
|
||||
mr: theme.spacing(3),
|
||||
},
|
||||
"&:focus-visible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ArrowBackRoundedIcon />
|
||||
{t("auth.common.navigation.back")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={onSubmit}
|
||||
disabled={errors.email && true}
|
||||
sx={{
|
||||
width: "30%",
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
boxShadow: `none`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t("auth.common.navigation.continue")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { StepTwo };
|
||||
@@ -0,0 +1,347 @@
|
||||
// Components
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import AuthHeader from "../components/AuthHeader";
|
||||
import TextInput from "../../../Components/Inputs/TextInput";
|
||||
import Check from "../../../Components/Check/Check";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
// Utils
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { networkService } from "../../../main";
|
||||
import { newOrChangedCredentials } from "../../../Validation/validation";
|
||||
import { register } from "../../../Features/Auth/authSlice";
|
||||
import { createToast } from "../../../Utils/toastUtils";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const getFeedbackStatus = (form, errors, field, criteria) => {
|
||||
const fieldErrors = errors?.[field];
|
||||
const isFieldEmpty = form?.[field]?.length === 0;
|
||||
const hasError = fieldErrors?.includes(criteria) || fieldErrors?.includes("empty");
|
||||
const isCorrect = !isFieldEmpty && !hasError;
|
||||
|
||||
if (isCorrect) {
|
||||
return "success";
|
||||
} else if (hasError) {
|
||||
return "error";
|
||||
} else {
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
|
||||
const Register = ({ superAdminExists }) => {
|
||||
// Local state
|
||||
const [form, setForm] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirm: "",
|
||||
role: [],
|
||||
teamId: "",
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState({});
|
||||
const [feedback, setFeedback] = useState({});
|
||||
|
||||
// Hooks
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { token } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
const fetchInvite = async () => {
|
||||
if (token !== undefined) {
|
||||
try {
|
||||
const res = await networkService.verifyInvitationToken(token);
|
||||
const invite = res.data.data;
|
||||
const { email } = invite;
|
||||
setForm((prevForm) => {
|
||||
if (!prevForm.email) {
|
||||
return { ...prevForm, email };
|
||||
}
|
||||
return prevForm;
|
||||
});
|
||||
} catch (error) {
|
||||
navigate("/register", { replace: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchInvite();
|
||||
}, [form, token, navigate]);
|
||||
|
||||
// Handlers
|
||||
const onChange = (e) => {
|
||||
let { name, value } = e.target;
|
||||
if (name === "email") value = value.toLowerCase();
|
||||
const updatedForm = { ...form, [name]: value };
|
||||
|
||||
const { error } = newOrChangedCredentials.validate(
|
||||
{ [name]: value },
|
||||
{ abortEarly: false, context: { password: form.password } }
|
||||
);
|
||||
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: error?.details?.[0]?.message || "",
|
||||
}));
|
||||
|
||||
setForm(updatedForm);
|
||||
};
|
||||
|
||||
const onPasswordChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
const updatedForm = { ...form, [name]: value };
|
||||
setForm(updatedForm);
|
||||
const validateValue = { [name]: value };
|
||||
const validateOptions = { abortEarly: false, context: { password: form.password } };
|
||||
if (name === "password" && form.confirm.length > 0) {
|
||||
validateValue.confirm = form.confirm;
|
||||
validateOptions.context = { password: value };
|
||||
} else if (name === "confirm") {
|
||||
validateValue.password = form.password;
|
||||
}
|
||||
const { error } = newOrChangedCredentials.validate(validateValue, validateOptions);
|
||||
|
||||
const pwdErrors = error?.details.map((error) => ({
|
||||
path: error.path[0],
|
||||
type: error.type,
|
||||
}));
|
||||
|
||||
const errorsByPath =
|
||||
pwdErrors &&
|
||||
pwdErrors.reduce((acc, { path, type }) => {
|
||||
if (!acc[path]) {
|
||||
acc[path] = [];
|
||||
}
|
||||
acc[path].push(type);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const oldErrors = { ...errors };
|
||||
if (name === "password") {
|
||||
oldErrors.password = undefined;
|
||||
} else if (name === "confirm") {
|
||||
oldErrors.confirm = undefined;
|
||||
}
|
||||
const newErrors = { ...oldErrors, ...errorsByPath };
|
||||
|
||||
setErrors(newErrors);
|
||||
|
||||
const newFeedback = {
|
||||
length: getFeedbackStatus(updatedForm, errorsByPath, "password", "string.min"),
|
||||
special: getFeedbackStatus(updatedForm, errorsByPath, "password", "special"),
|
||||
number: getFeedbackStatus(updatedForm, errorsByPath, "password", "number"),
|
||||
uppercase: getFeedbackStatus(updatedForm, errorsByPath, "password", "uppercase"),
|
||||
lowercase: getFeedbackStatus(updatedForm, errorsByPath, "password", "lowercase"),
|
||||
confirm: getFeedbackStatus(updatedForm, errorsByPath, "confirm", "different"),
|
||||
};
|
||||
|
||||
setFeedback(newFeedback);
|
||||
};
|
||||
|
||||
const onSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const toSubmit = {
|
||||
...form,
|
||||
role: superAdminExists ? form.role : ["superadmin"],
|
||||
inviteToken: token ? token : "",
|
||||
};
|
||||
|
||||
const { error } = newOrChangedCredentials.validate(toSubmit, {
|
||||
abortEarly: false,
|
||||
context: { password: form.password },
|
||||
});
|
||||
|
||||
if (error) {
|
||||
const formErrors = {};
|
||||
for (const err of error.details) {
|
||||
formErrors[err.path[0]] = err.message;
|
||||
}
|
||||
setErrors(formErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
delete toSubmit.confirm;
|
||||
|
||||
const action = await dispatch(register(toSubmit));
|
||||
if (action.payload.success) {
|
||||
navigate("/uptime");
|
||||
createToast({
|
||||
body: t("auth.registration.toasts.success"),
|
||||
});
|
||||
} else {
|
||||
if (action.payload) {
|
||||
createToast({
|
||||
body: action.payload.msg,
|
||||
});
|
||||
} else {
|
||||
createToast({
|
||||
body: t("common.toasts.unknownError"),
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
gap={theme.spacing(10)}
|
||||
minHeight="100vh"
|
||||
>
|
||||
<AuthHeader />
|
||||
<Stack
|
||||
margin="auto"
|
||||
width="100%"
|
||||
alignItems="center"
|
||||
gap={theme.spacing(10)}
|
||||
>
|
||||
<Stack
|
||||
component="form"
|
||||
width="100%"
|
||||
maxWidth={600}
|
||||
alignSelf="center"
|
||||
justifyContent="center"
|
||||
border={1}
|
||||
borderRadius={theme.spacing(5)}
|
||||
borderColor={theme.palette.primary.lowContrast}
|
||||
backgroundColor={theme.palette.primary.main}
|
||||
padding={theme.spacing(12)}
|
||||
gap={theme.spacing(12)}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Typography variant="h1">
|
||||
{superAdminExists
|
||||
? t("auth.registration.heading.user")
|
||||
: t("auth.registration.heading.superAdmin")}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{superAdminExists
|
||||
? t("auth.registration.description.user")
|
||||
: t("auth.registration.description.superAdmin")}
|
||||
</Typography>
|
||||
<TextInput
|
||||
type="email"
|
||||
name="email"
|
||||
label={t("auth.common.inputs.email.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.email.placeholder")}
|
||||
autoComplete="email"
|
||||
value={form.email}
|
||||
onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
|
||||
onChange={onChange}
|
||||
error={errors.email ? true : false}
|
||||
helperText={errors.email ? t(errors.email) : ""} // Localization keys are in validation.js
|
||||
/>
|
||||
<TextInput
|
||||
name="firstName"
|
||||
label={t("auth.common.inputs.firstName.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.firstName.placeholder")}
|
||||
autoComplete="given-name"
|
||||
value={form.firstName}
|
||||
onChange={onChange}
|
||||
error={errors.firstName ? true : false}
|
||||
helperText={errors.firstName ? t(errors.firstName) : ""}
|
||||
/>
|
||||
<TextInput
|
||||
name="lastName"
|
||||
label={t("auth.common.inputs.lastName.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.lastName.placeholder")}
|
||||
autoComplete="family-name"
|
||||
value={form.lastName}
|
||||
onChange={onChange}
|
||||
error={errors.lastName ? true : false}
|
||||
helperText={errors.lastName ? t(errors.lastName) : ""} // Localization keys are in validation.js
|
||||
/>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="register-password-input"
|
||||
name="password"
|
||||
label={t("auth.common.inputs.password.label")}
|
||||
isRequired={true}
|
||||
placeholder="••••••••••"
|
||||
autoComplete="current-password"
|
||||
value={form.password}
|
||||
onChange={onPasswordChange}
|
||||
error={errors.password && errors.password[0] ? true : false}
|
||||
helperText={
|
||||
errors.password === "auth.common.inputs.password.errors.empty"
|
||||
? t(errors.password)
|
||||
: ""
|
||||
} // Other errors are related to required password conditions and are visualized below the input
|
||||
/>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="register-confirm-input"
|
||||
name="confirm"
|
||||
label={t("auth.common.inputs.passwordConfirm.label")}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.passwordConfirm.placeholder")}
|
||||
autoComplete="current-password"
|
||||
value={form.confirm}
|
||||
onChange={onPasswordChange}
|
||||
error={errors.confirm && errors.confirm[0] ? true : false}
|
||||
/>
|
||||
<Stack
|
||||
gap={theme.spacing(4)}
|
||||
mb={{ xs: theme.spacing(6), sm: theme.spacing(8) }}
|
||||
>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.length.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.length.highlighted")}
|
||||
variant={feedback.length}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.special.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.special.highlighted")}
|
||||
variant={feedback.special}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.number.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.number.highlighted")}
|
||||
variant={feedback.number}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.uppercase.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.uppercase.highlighted")}
|
||||
variant={feedback.uppercase}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.lowercase.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.lowercase.highlighted")}
|
||||
variant={feedback.lowercase}
|
||||
/>
|
||||
<Check
|
||||
noHighlightText={t("auth.common.inputs.password.rules.match.beginning")}
|
||||
text={t("auth.common.inputs.password.rules.match.highlighted")}
|
||||
variant={feedback.confirm}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
type="submit"
|
||||
sx={{ width: "30%", alignSelf: "flex-end" }}
|
||||
>
|
||||
{t("auth.common.navigation.continue")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
Register.propTypes = {
|
||||
superAdminExists: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Register;
|
||||
Reference in new issue
Block a user