Merge branch 'develop' into feat-page-initialization-hook

client/src/Components/Charts/StatusPageBarChart/index.jsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
-import { useEffect, useState } from "react";
+import { useEffect, useState, forwardRef } from "react";
 import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
@@ -17,23 +17,29 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} The Bar component.
  */
 
-const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
-	const theme = useTheme();
+const Bar = forwardRef(
+	({ width, height, backgroundColor, borderRadius, children, ...otherProps }, ref) => {
+		const theme = useTheme();
 
-	return (
-		<Box
-			width={width}
-			position="relative"
-			height={height}
-			backgroundColor={backgroundColor}
-			sx={{
-				borderRadius: borderRadius || theme.spacing(1.5),
-			}}
-		>
-			{children}
-		</Box>
-	);
-};
+		return (
+			<Box
+				ref={ref}
+				position="relative"
+				width={width}
+				height={height}
+				backgroundColor={backgroundColor}
+				sx={{
+					borderRadius: borderRadius || theme.spacing(1.5),
+				}}
+				{...otherProps}
+			>
+				{children}
+			</Box>
+		);
+	}
+);
+
+Bar.displayName = "Bar";
 
 Bar.propTypes = {
 	width: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,

client/src/Components/Check/Check.jsx

@@ -65,7 +65,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 };
 
 Check.propTypes = {
-	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	noHighlightText: PropTypes.string,
 	variant: PropTypes.oneOf(["info", "error", "success"]),
 	outlined: PropTypes.bool,

client/src/Components/Dialog/genericDialog.jsx

@@ -2,7 +2,7 @@ import { useId } from "react";
 import PropTypes from "prop-types";
 import { Modal, Stack, Typography } from "@mui/material";
 
-const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+const GenericDialog = ({ title, description, open, onClose, theme, children, width }) => {
 	const titleId = useId();
 	const descriptionId = useId();
 	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
@@ -16,6 +16,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 		>
 			<Stack
 				gap={theme.spacing(2)}
+				width={width}
 				sx={{
 					position: "absolute",
 					top: "50%",
@@ -39,6 +40,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					fontSize={16}
 					color={theme.palette.primary.contrastText}
 					fontWeight={600}
+					marginBottom={theme.spacing(4)}
 				>
 					{title}
 				</Typography>
@@ -46,6 +48,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					<Typography
 						id={descriptionId}
 						color={theme.palette.primary.contrastTextTertiary}
+						marginBottom={theme.spacing(4)}
 					>
 						{description}
 					</Typography>
@@ -64,6 +67,7 @@ GenericDialog.propTypes = {
 	theme: PropTypes.object.isRequired,
 	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 		.isRequired,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
 };
 
 export { GenericDialog };

client/src/Hooks/inviteHooks.js

@@ -14,25 +14,25 @@ const useGetInviteToken = () => {
 	const clearToken = () => {
 		setToken(undefined);
 	};
-
+	const fetchToken = async (email, role) => {
+		const response = await networkService.requestInvitationToken({ email, role });
+		const token = response?.data?.data?.token;
+		if (typeof token === "undefined") {
+			throw new Error(t("inviteNoTokenFound"));
+		}
+		return token;
+	};
 	const getInviteToken = async ({ email, role }) => {
 		try {
-			const response = await networkService.requestInvitationToken({
-				email,
-				role,
-			});
-			const token = response?.data?.data?.token;
-			if (typeof token === "undefined") {
-				throw new Error(t("inviteNoTokenFound"));
-			}
-
+			setIsLoading(true);
+			const token = await fetchToken(email, role);
 			let inviteLink = token;
 
 			if (typeof CLIENT_HOST !== "undefined") {
 				inviteLink = `${CLIENT_HOST}/register/${token}`;
 			}
-
 			setToken(inviteLink);
+			return token;
 		} catch (error) {
 			setError(error);
 		} finally {
@@ -40,7 +40,26 @@ const useGetInviteToken = () => {
 		}
 	};
 
-	return [getInviteToken, clearToken, isLoading, error, token];
+	const addTeamMember = async (formData, role) => {
+		try {
+			setIsLoading(true);
+			const token = await fetchToken(formData.email, role);
+			const toSubmit = {
+				...formData,
+				inviteToken: token,
+			};
+			delete toSubmit.confirm;
+			const responseRegister = await networkService.registerUser(toSubmit);
+			return responseRegister;
+		} catch (error) {
+			setError(error);
+			throw error;
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return [getInviteToken, clearToken, isLoading, error, token, addTeamMember];
 };
 
 export { useGetInviteToken };

client/src/Pages/Account/components/AddMemberMenu/index.jsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useTheme } from "@emotion/react";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { useTranslation } from "react-i18next";
+import Proptypes from "prop-types";
+
+const AddMemberMenu = ({ handleInviteOpen, handleIsRegisterOpen }) => {
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<Button
+				variant="contained"
+				color="accent"
+				endIcon={<ArrowDropDownIcon sx={{ color: theme.palette.secondary.light }} />}
+				onClick={handleClick}
+			>
+				{t("teamPanel.addTeamMember.addMemberMenu")}
+			</Button>
+			<Menu
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				sx={{
+					"& .MuiPaper-root": {
+						minWidth: anchorEl?.offsetWidth || "auto",
+					},
+				}}
+			>
+				<MenuItem
+					onClick={() => {
+						handleClose();
+						handleInviteOpen();
+					}}
+				>
+					{t("teamPanel.inviteTeamMember")}
+				</MenuItem>
+				<MenuItem
+					onClick={() => {
+						handleClose();
+						handleIsRegisterOpen(true);
+					}}
+				>
+					{t("teamPanel.register")}
+				</MenuItem>
+			</Menu>
+		</>
+	);
+};
+
+AddMemberMenu.propTypes = {
+	handleInviteOpen: Proptypes.func.isRequired,
+	handleIsRegisterOpen: Proptypes.func.isRequired,
+};
+
+export default AddMemberMenu;

client/src/Pages/Account/components/AddTeamMember/hooks/useAddTeamMember.jsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { newOrChangedCredentials } from "../../../../../Validation/validation";
+import { useTranslation } from "react-i18next";
+const useAddTeamMember = () => {
+	const { t } = useTranslation();
+	const [errors, setErrors] = useState({});
+
+	const clearErrors = () => setErrors({});
+
+	const validateFields = (name, value, formData) => {
+		const { error } = newOrChangedCredentials.validate(
+			{ [name]: value },
+			{ abortEarly: false, context: { password: formData.password } }
+		);
+
+		setErrors((prev) => ({
+			...prev,
+			[name]: error?.details?.[0]?.message || "",
+		}));
+	};
+
+	const validateForm = (formData, role) => {
+		const { error } = newOrChangedCredentials.validate(formData, {
+			abortEarly: false,
+			context: { password: formData.password },
+		});
+		const formErrors = {};
+		if (error) {
+			for (const err of error.details) {
+				formErrors[err.path[0]] = err.message;
+			}
+		}
+		if (!role[0] || role.length === 0) {
+			formErrors.role = t(
+				"teamPanel.registerTeamMember.auth.common.inputs.role.errors.empty"
+			);
+		}
+		if (Object.keys(formErrors).length > 0) {
+			setErrors(formErrors);
+			return false;
+		}
+		setErrors({});
+		return true;
+	};
+
+	return { errors, setErrors, clearErrors, validateFields, validateForm };
+};
+export default useAddTeamMember;

client/src/Pages/Account/components/AddTeamMember/index.jsx

@@ -0,0 +1,213 @@
+import { Button, Stack } from "@mui/material";
+import { GenericDialog } from "../../../../Components/Dialog/genericDialog";
+import TextInput from "../../../../Components/Inputs/TextInput";
+import Select from "../../../../Components/Inputs/Select";
+import { useGetInviteToken } from "../../../../Hooks/inviteHooks";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import { createToast } from "../../../../Utils/toastUtils";
+import { useState } from "react";
+import PasswordTooltip from "../../../Auth/components/PasswordTooltip";
+import useAddTeamMember from "./hooks/useAddTeamMember";
+import usePasswordFeedback from "../../../Auth/hooks/usePasswordFeedback";
+import { PasswordEndAdornment } from "../../../../Components/Inputs/TextInput/Adornments";
+import PropTypes from "prop-types";
+
+const INITIAL_FORM_STATE = {
+	firstName: "",
+	lastName: "",
+	email: "",
+	password: "",
+	confirm: "",
+	teamId: "",
+};
+
+const INITIAL_ROLE_STATE = ["user"];
+const AddTeamMember = ({ handleIsRegisterOpen, isRegisterOpen, onMemberAdded }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { errors, setErrors, clearErrors, validateFields, validateForm } =
+		useAddTeamMember();
+	const { feedback, handlePasswordFeedback } = usePasswordFeedback();
+	const [getInviteToken, clearToken, isLoading, error, token, addTeamMember] =
+		useGetInviteToken();
+	const [form, setForm] = useState(INITIAL_FORM_STATE);
+	const [role, setRole] = useState(INITIAL_ROLE_STATE);
+	const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
+	const closeAddMemberModal = () => {
+		handleIsRegisterOpen(false);
+		setForm(INITIAL_FORM_STATE);
+		setRole(INITIAL_ROLE_STATE);
+		clearErrors();
+		clearToken();
+	};
+
+	const onChange = (e) => {
+		let { name, value } = e.target;
+		if (name === "email") value = value.toLowerCase();
+		const updatedForm = { ...form, [name]: value };
+		validateFields(name, value, updatedForm);
+		setForm(updatedForm);
+
+		if (name === "password" || name === "confirm") {
+			handlePasswordFeedback(updatedForm, name, value, form, errors, setErrors);
+		}
+	};
+
+	const onsubmitAddMember = async (event) => {
+		event.preventDefault();
+		if (!validateForm(form, role)) return;
+		try {
+			setIsLoadingSubmit(true);
+			await addTeamMember(form, role);
+			createToast({
+				body: t("teamPanel.registerToast.success"),
+			});
+			onMemberAdded();
+			closeAddMemberModal();
+		} catch (error) {
+			const errorMsg = error.response?.data?.msg || error.message || "unknownError";
+			createToast({
+				type: "error",
+				body: t(errorMsg),
+			});
+		} finally {
+			setIsLoadingSubmit(false);
+		}
+	};
+	const tErr = (key) => (key ? t([`teamPanel.registerTeamMember.${key}`, key]) : "");
+	return (
+		<>
+			<GenericDialog
+				title={t("teamPanel.addTeamMember.title")}
+				description={t("teamPanel.addTeamMember.description")}
+				open={isRegisterOpen}
+				onClose={closeAddMemberModal}
+				theme={theme}
+				width={{ sm: "55%", md: "50%", lg: "40%", xl: "30%" }}
+			>
+				<TextInput
+					name="firstName"
+					label={t("auth.common.inputs.firstName.label")}
+					isRequired={true}
+					gap={theme.spacing(4)}
+					placeholder={t("auth.common.inputs.firstName.placeholder")}
+					value={form.firstName}
+					onChange={onChange}
+					error={errors.firstName ? true : false}
+					helperText={errors.firstName ? tErr(errors.firstName) : null}
+					sx={{ mb: errors.firstName ? theme.spacing(15) : theme.spacing(5) }}
+				/>
+
+				<TextInput
+					name="lastName"
+					label={t("auth.common.inputs.lastName.label")}
+					isRequired={true}
+					gap={theme.spacing(4)}
+					placeholder={t("auth.common.inputs.lastName.placeholder")}
+					value={form.lastName}
+					onChange={onChange}
+					error={errors.lastName ? true : false}
+					helperText={errors.lastName ? tErr(errors.lastName) : null}
+					sx={{ mb: errors.lastName ? theme.spacing(15) : theme.spacing(5) }}
+				/>
+
+				<TextInput
+					type="email"
+					label={t("auth.common.inputs.email.label")}
+					name="email"
+					gap={theme.spacing(4)}
+					isRequired={true}
+					id="input-team-member"
+					placeholder={t("teamPanel.email")}
+					value={form.email}
+					onChange={onChange}
+					error={errors.email ? true : false}
+					helperText={errors.email ? tErr(errors.email) : null}
+					sx={{ mb: errors.email ? theme.spacing(15) : theme.spacing(5) }}
+				/>
+
+				<Select
+					label={t("teamPanel.role")}
+					id="team-member-role"
+					name="role"
+					required={true}
+					placeholder={t("teamPanel.selectRole")}
+					isHidden={true}
+					value={role[0] || ""}
+					sx={{ mb: theme.spacing(5) }}
+					onChange={(event) => setRole([event.target.value])}
+					items={[
+						{ _id: "admin", name: t("roles.admin") },
+						{ _id: "user", name: t("roles.teamMember") },
+					]}
+				/>
+
+				<PasswordTooltip
+					feedback={feedback}
+					form={form}
+				>
+					<TextInput
+						type="password"
+						id="register-password-input"
+						name="password"
+						label={t("auth.common.inputs.password.label")}
+						isRequired={true}
+						placeholder="••••••••••"
+						value={form.password}
+						onChange={onChange}
+						error={errors.password && errors.password[0] ? true : false}
+						endAdornment={<PasswordEndAdornment />}
+						sx={{ mb: theme.spacing(5) }}
+					/>
+				</PasswordTooltip>
+				<TextInput
+					type="password"
+					id="register-confirm-input"
+					name="confirm"
+					label={t("auth.common.inputs.passwordConfirm.label")}
+					gap={theme.spacing(4)}
+					isRequired={true}
+					placeholder={t("auth.common.inputs.passwordConfirm.placeholder")}
+					autoComplete="current-password"
+					value={form.confirm}
+					onChange={onChange}
+					error={errors.confirm && errors.confirm[0] ? true : false}
+					endAdornment={<PasswordEndAdornment />}
+					sx={{ mb: theme.spacing(5) }}
+				/>
+
+				<Stack
+					direction="row"
+					spacing={theme.spacing(10)}
+					mt={theme.spacing(8)}
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="contained"
+						color="error"
+						onClick={closeAddMemberModal}
+						disabled={isLoadingSubmit}
+					>
+						{t("teamPanel.cancel")}
+					</Button>
+					<Button
+						variant="contained"
+						color="accent"
+						onClick={onsubmitAddMember}
+						disabled={isLoadingSubmit}
+					>
+						{t("teamPanel.addTeamMember.addButton")}
+					</Button>
+				</Stack>
+			</GenericDialog>
+		</>
+	);
+};
+AddTeamMember.propTypes = {
+	handleIsRegisterOpen: PropTypes.func.isRequired,
+	isRegisterOpen: PropTypes.bool.isRequired,
+	onMemberAdded: PropTypes.func.isRequired,
+};
+
+export default AddTeamMember;

client/src/Pages/Account/components/TeamPanel.jsx

@@ -9,10 +9,12 @@ import { networkService } from "../../../main";
 import { createToast } from "../../../Utils/toastUtils";
 import Select from "../../../Components/Inputs/Select";
 import { GenericDialog } from "../../../Components/Dialog/genericDialog";
+import AddTeamMember from "../components/AddTeamMember";
 import DataTable from "../../../Components/Table";
 import { useGetInviteToken } from "../../../Hooks/inviteHooks";
 import { useNavigate } from "react-router-dom";
 import { useIsSuperAdmin } from "../../../Hooks/useIsAdmin";
+import AddMemberMenu from "./AddMemberMenu";
 /**
  * TeamPanel component manages the organization and team members,
  * providing functionalities like renaming the organization, managing team members,
@@ -65,7 +67,10 @@ const TeamPanel = () => {
 			render: (row) => row.role,
 		},
 	];
-
+	const [refreshTrigger, setRefreshTrigger] = useState(false);
+	const refreshTeamList = () => {
+		setRefreshTrigger((prev) => !prev);
+	};
 	useEffect(() => {
 		const fetchTeam = async () => {
 			try {
@@ -79,7 +84,7 @@ const TeamPanel = () => {
 		};
 
 		fetchTeam();
-	}, []);
+	}, [refreshTrigger]);
 
 	useEffect(() => {
 		const ROLE_MAP = {
@@ -109,6 +114,10 @@ const TeamPanel = () => {
 		setIsDisabled(Object.keys(errors).length !== 0 || toInvite.email === "");
 	}, [errors, toInvite.email]);
 	const [isOpen, setIsOpen] = useState(false);
+	const [isRegisterOpen, setIsRegisterOpen] = useState(false);
+	const handleIsRegisterOpen = (open) => {
+		setIsRegisterOpen(open);
+	};
 
 	const handleChange = (event) => {
 		const { value } = event.target;
@@ -138,7 +147,6 @@ const TeamPanel = () => {
 	const handleGetToken = async () => {
 		await getInviteToken({ email: toInvite.email, role: toInvite.role });
 	};
-
 	const handleInviteMember = async () => {
 		if (!toInvite.email) {
 			setErrors((prev) => ({ ...prev, email: "Email is required." }));
@@ -239,13 +247,16 @@ const TeamPanel = () => {
 							</Button>
 						</ButtonGroup>
 					</Stack>
-					<Button
-						variant="contained"
-						color="accent"
-						onClick={() => setIsOpen(true)}
-					>
-						{t("teamPanel.inviteTeamMember")}
-					</Button>
+
+					<AddTeamMember
+						handleIsRegisterOpen={handleIsRegisterOpen}
+						isRegisterOpen={isRegisterOpen}
+						onMemberAdded={refreshTeamList}
+					/>
+					<AddMemberMenu
+						handleInviteOpen={() => setIsOpen(true)}
+						handleIsRegisterOpen={handleIsRegisterOpen}
+					/>
 				</Stack>
 
 				<DataTable
@@ -264,7 +275,6 @@ const TeamPanel = () => {
 					}}
 				/>
 			</Stack>
-
 			<GenericDialog
 				title={t("teamPanel.inviteNewTeamMember")}
 				description={t("teamPanel.inviteDescription")}

client/src/Pages/Auth/components/PasswordTooltip.jsx

@@ -93,14 +93,14 @@ const PasswordTooltip = ({ feedback, form, children }) => {
 				},
 			}}
 		>
-			{children}
+			<span style={{ display: "inline-block", width: "100%" }}>{children}</span>
 		</Tooltip>
 	);
 };
 
 PasswordTooltip.propTypes = {
 	feedback: PropTypes.shape({
-		length: PropTypes.string.isRequired,
+		length: PropTypes.string,
 		special: PropTypes.string,
 		number: PropTypes.string,
 		uppercase: PropTypes.string,

client/src/Pages/Auth/hooks/usePasswordFeedback.jsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { newOrChangedCredentials } from "../../../Validation/validation";
+
+const usePasswordFeedback = () => {
+	const [feedback, setFeedback] = useState({});
+	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 handlePasswordFeedback = (updatedForm, name, value, form, errors, setErrors) => {
+		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);
+	};
+	return { feedback, handlePasswordFeedback, getFeedbackStatus };
+};
+
+export default usePasswordFeedback;

client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx

@@ -11,7 +11,12 @@ import PropTypes from "prop-types";
 
 import { useSelector } from "react-redux";
 
-const MonitorsList = ({ isLoading = false, shouldRender = true, monitors = [] }) => {
+const MonitorsList = ({
+	isLoading = false,
+	shouldRender = true,
+	monitors = [],
+	statusPage = {},
+}) => {
 	const theme = useTheme();
 	const { determineState } = useMonitorUtils();
 
@@ -40,10 +45,12 @@ const MonitorsList = ({ isLoading = false, shouldRender = true, monitors = [] })
 							alignItems="center"
 							gap={theme.spacing(20)}
 						>
-							<Box flex={9}>
-								<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
-							</Box>
-							<Box flex={1}>
+							{statusPage.showCharts !== false && (
+								<Box flex={9}>
+									<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
+								</Box>
+							)}
+							<Box flex={statusPage.showCharts !== false ? 1 : 10}>
 								<StatusLabel
 									status={status}
 									text={status}
@@ -60,6 +67,7 @@ const MonitorsList = ({ isLoading = false, shouldRender = true, monitors = [] })
 
 MonitorsList.propTypes = {
 	monitors: PropTypes.array.isRequired,
+	statusPage: PropTypes.object,
 };
 
 export default MonitorsList;

client/src/Pages/StatusPage/Status/index.jsx

@@ -154,7 +154,10 @@ const PublicStatus = () => {
 			/>
 			<Typography variant="h2">{t("statusPageStatusServiceStatus")}</Typography>
 			<StatusBar monitors={monitors} />
-			<MonitorsList monitors={monitors} />
+			<MonitorsList
+				monitors={monitors}
+				statusPage={statusPage}
+			/>
 			{link}
 		</Stack>
 	);

client/src/Routes/index.jsx

@@ -223,7 +223,7 @@ const Routes = () => {
 			<Route
 				exact
 				path="/register/:token"
-				element={<AuthRegister />}
+				element={<AuthRegister superAdminExists={true} />}
 			/>
 
 			<Route

client/src/locales/en.json

@@ -360,6 +360,12 @@
 		"demoUser": "Demo user"
 	},
 	"teamPanel": {
+		"addTeamMember": {
+			"addMemberMenu": "Add Team Member",
+			"title": "Register new team member",
+			"description": "Create a new user and share the credentials with them. This method gives the member immediate access to all monitors.",
+			"addButton": "Add Member"
+		},
 		"teamMembers": "Team members",
 		"filter": {
 			"all": "All",
@@ -375,6 +381,45 @@
 		"noMembers": "There are no team members with this role",
 		"getToken": "Get token",
 		"emailToken": "E-mail token",
+		"register": "Register a team member",
+		"registerToast": {
+			"success": "User created, share credentials with the member securely.",
+			"dbUserExists": "User already exists.",
+			"unknownError": "Unknown error occurred."
+		},
+		"registerTeamMember": {
+			"title": "Register team member",
+			"auth": {
+				"common": {
+					"inputs": {
+						"firstName": {
+							"errors": {
+								"empty": "Please enter a name",
+								"pattern": "Name must contain only letters, spaces, apostrophes, or hyphens"
+							}
+						},
+						"lastName": {
+							"errors": {
+								"empty": "Please enter a surname",
+								"pattern": "Surname must contain only letters, spaces, apostrophes, or hyphens"
+							}
+						},
+						"email": {
+							"errors": {
+								"empty": "To continue, please enter an email address",
+								"invalid": "Please recheck validity of entered email address"
+							}
+						},
+						"role": {
+							"errors": {
+								"empty": "Role is required"
+							}
+						}
+					}
+				}
+			}
+		},
+		"role": "Role",
 		"table": {
 			"name": "Name",
 			"email": "Email",