Merge pull request #2870 from bluewave-labs/feat/add-team-member

Add direct user registration for team management
2026-01-05 01:10:36 -06:00 · 2025-09-03 09:58:35 -07:00
parent 5d23966f00 c61874dbdd
commit 36402dfefa
13 changed files with 629 additions and 85 deletions
--- a/client/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/client/src/Components/Charts/StatusPageBarChart/index.jsx
@@ -22,7 +22,7 @@ const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {

 	return (
 		<Box
-            width={width}
+			width={width}
 			position="relative"
 			height={height}
 			backgroundColor={backgroundColor}
--- a/client/src/Components/Check/Check.jsx
+++ b/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,
--- a/client/src/Components/Dialog/genericDialog.jsx
+++ b/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 };
--- a/client/src/Hooks/inviteHooks.js
+++ b/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 };
--- a/client/src/Pages/Account/components/AddMemberMenu/index.jsx
+++ b/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;
--- a/client/src/Pages/Account/components/AddTeamMember/hooks/useAddTeamMember.jsx
+++ b/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;
--- a/client/src/Pages/Account/components/AddTeamMember/index.jsx
+++ b/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;
--- a/client/src/Pages/Account/components/TeamPanel.jsx
+++ b/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")}
--- a/client/src/Pages/Auth/components/PasswordTooltip.jsx
+++ b/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,
--- a/client/src/Pages/Auth/hooks/usePasswordFeedback.jsx
+++ b/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;
--- a/client/src/Routes/index.jsx
+++ b/client/src/Routes/index.jsx
@@ -223,7 +223,7 @@ const Routes = () => {
 			<Route
 				exact
 				path="/register/:token"
-				element={<AuthRegister />}
+				element={<AuthRegister superAdminExists={true} />}
 			/>

 			<Route
--- a/client/src/locales/en.json
+++ b/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",
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -259,9 +259,9 @@
 			}
 		},
 		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.7.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
-			"integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+			"version": "4.8.0",
+			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.8.0.tgz",
+			"integrity": "sha512-MJQFqrZgcW0UNYLGOuQpey/oTN59vyWwplvCGZztn1cKz9agZPPYpJB7h2OMmuu7VLqkvEjN8feFZJmxNF9D+Q==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -469,33 +469,19 @@
 			}
 		},
 		"node_modules/@humanfs/node": {
-			"version": "0.16.6",
-			"resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
-			"integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+			"version": "0.16.7",
+			"resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+			"integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@humanfs/core": "^0.19.1",
-				"@humanwhocodes/retry": "^0.3.0"
+				"@humanwhocodes/retry": "^0.4.0"
 			},
 			"engines": {
 				"node": ">=18.18.0"
 			}
 		},
-		"node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
-			"integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=18.18"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
 		"node_modules/@humanwhocodes/module-importer": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1237,6 +1223,17 @@
 				"node": ">=14.16"
 			}
 		},
+		"node_modules/@trysound/sax": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+			"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+			"license": "ISC",
+			"optional": true,
+			"peer": true,
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1273,6 +1270,12 @@
 				"undici-types": "~7.10.0"
 			}
 		},
+		"node_modules/@types/relateurl": {
+			"version": "0.2.33",
+			"resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.33.tgz",
+			"integrity": "sha512-bTQCKsVbIdzLqZhLkF5fcJQreE4y1ro4DIyVrlDNSCJRRwHhB8Z+4zXXa8jN6eDvc2HbRsEYgbvrnGvi54EpSw==",
+			"license": "MIT"
+		},
 		"node_modules/@types/triple-beam": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
@@ -2502,12 +2505,14 @@
 			}
 		},
 		"node_modules/css-tree": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
-			"integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
 			"license": "MIT",
+			"optional": true,
+			"peer": true,
 			"dependencies": {
-				"mdn-data": "2.12.2",
+				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
 			},
 			"engines": {
@@ -3015,9 +3020,9 @@
 			"license": "MIT"
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.5.212",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.212.tgz",
-			"integrity": "sha512-gE7ErIzSW+d8jALWMcOIgf+IB6lpfsg6NwOhPVwKzDtN2qcBix47vlin4yzSregYDxTCXOUqAZjVY/Z3naS7ww==",
+			"version": "1.5.213",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.213.tgz",
+			"integrity": "sha512-xr9eRzSLNa4neDO0xVFrkXu3vyIzG4Ay08dApecw42Z1NbmCt+keEpXdvlYGVe0wtvY5dhW0Ay0lY0IOfsCg0Q==",
 			"license": "ISC"
 		},
 		"node_modules/emitter-component": {
@@ -4290,11 +4295,12 @@
 			"license": "MIT"
 		},
 		"node_modules/htmlnano": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-2.1.2.tgz",
-			"integrity": "sha512-8Fst+0bhAfU362S6oHVb4wtJj/UYEFr0qiCLAEi8zioqmp1JYBQx5crZAADlFVX0Ly/6s/IQz6G7PL9/hgoJaQ==",
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-2.1.3.tgz",
+			"integrity": "sha512-mzTUHhxdfDw80X36rv5qFvjvor7r0uCwXI5mzo8CW61tImbe5Jpvl3JzPAetVh54wUYVuoa8x3qw8LFn8B3gHQ==",
 			"license": "MIT",
 			"dependencies": {
+				"@types/relateurl": "^0.2.33",
 				"cosmiconfig": "^9.0.0",
 				"posthtml": "^0.16.5"
 			},
@@ -5257,10 +5263,12 @@
 			}
 		},
 		"node_modules/mdn-data": {
-			"version": "2.12.2",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
-			"integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
-			"license": "CC0-1.0"
+			"version": "2.0.30",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+			"license": "CC0-1.0",
+			"optional": true,
+			"peer": true
 		},
 		"node_modules/media-typer": {
 			"version": "0.3.0",
@@ -6198,13 +6206,14 @@
 			}
 		},
 		"node_modules/nise/node_modules/path-to-regexp": {
-			"version": "8.2.0",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
-			"integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+			"integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
 			"dev": true,
 			"license": "MIT",
-			"engines": {
-				"node": ">=16"
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
 			}
 		},
 		"node_modules/node-abort-controller": {
@@ -7136,6 +7145,59 @@
 				"postcss": "^8.4.32"
 			}
 		},
+		"node_modules/postcss-svgo/node_modules/commander": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+			"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/postcss-svgo/node_modules/css-tree": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+			"integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+			"license": "MIT",
+			"dependencies": {
+				"mdn-data": "2.12.2",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+			}
+		},
+		"node_modules/postcss-svgo/node_modules/mdn-data": {
+			"version": "2.12.2",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+			"integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+			"license": "CC0-1.0"
+		},
+		"node_modules/postcss-svgo/node_modules/svgo": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.0.tgz",
+			"integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==",
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^11.1.0",
+				"css-select": "^5.1.0",
+				"css-tree": "^3.0.1",
+				"css-what": "^6.1.0",
+				"csso": "^5.0.5",
+				"picocolors": "^1.1.1",
+				"sax": "^1.4.1"
+			},
+			"bin": {
+				"svgo": "bin/svgo.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/svgo"
+			}
+		},
 		"node_modules/postcss-unique-selectors": {
 			"version": "7.0.4",
 			"resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.4.tgz",
@@ -8245,24 +8307,26 @@
 			}
 		},
 		"node_modules/svgo": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.0.tgz",
-			"integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==",
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+			"integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
 			"license": "MIT",
+			"optional": true,
+			"peer": true,
 			"dependencies": {
-				"commander": "^11.1.0",
+				"@trysound/sax": "0.2.0",
+				"commander": "^7.2.0",
 				"css-select": "^5.1.0",
-				"css-tree": "^3.0.1",
+				"css-tree": "^2.3.1",
 				"css-what": "^6.1.0",
 				"csso": "^5.0.5",
-				"picocolors": "^1.1.1",
-				"sax": "^1.4.1"
+				"picocolors": "^1.0.0"
 			},
 			"bin": {
-				"svgo": "bin/svgo.js"
+				"svgo": "bin/svgo"
 			},
 			"engines": {
-				"node": ">=16"
+				"node": ">=14.0.0"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -8270,18 +8334,20 @@
 			}
 		},
 		"node_modules/svgo/node_modules/commander": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
-			"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
 			"license": "MIT",
+			"optional": true,
+			"peer": true,
 			"engines": {
-				"node": ">=16"
+				"node": ">= 10"
 			}
 		},
 		"node_modules/swagger-ui-dist": {
-			"version": "5.28.0",
-			"resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.28.0.tgz",
-			"integrity": "sha512-I9ibQtr77BPzT28WFWMVktzQOtWzoSS2J99L0Att8gDar1atl1YTRI7NUFSr4kj8VvWICgylanYHIoHjITc7iA==",
+			"version": "5.28.1",
+			"resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.28.1.tgz",
+			"integrity": "sha512-IvPrtNi8MvjiuDgoSmPYgg27Lvu38fnLD1OSd8Y103xXsPAqezVNnNeHnVCZ/d+CMXJblflGaIyHxAYIF3O71w==",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@scarf/scarf": "=1.4.0"