Add direct user registration

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]),
 };
 
 export { GenericDialog };

client/src/Hooks/inviteHooks.js

@@ -33,6 +33,7 @@ const useGetInviteToken = () => {
 			}
 
 			setToken(inviteLink);
+			return token;
 		} catch (error) {
 			setError(error);
 		} finally {

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}
+			>
+				Add Team Member
+			</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/index.jsx

@@ -0,0 +1,238 @@
+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 { newOrChangedCredentials } from "../../../../Validation/validation";
+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 { networkService } from "../../../../main";
+import PasswordTooltip from "../../../Auth/components/PasswordTooltip";
+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 { feedback, handlePasswordFeedback } = usePasswordFeedback();
+	const [getInviteToken, clearToken] = useGetInviteToken();
+	const [form, setForm] = useState(INITIAL_FORM_STATE);
+	const [role, setRole] = useState(INITIAL_ROLE_STATE);
+	const [errors, setErrors] = useState({});
+	const closeAddMemberModal = () => {
+		handleIsRegisterOpen(false);
+		setForm(INITIAL_FORM_STATE);
+		setRole(INITIAL_ROLE_STATE);
+		setErrors({});
+		clearToken();
+	};
+
+	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);
+
+		if (name === "password" || name === "confirm") {
+			handlePasswordFeedback(updatedForm, name, value, form, errors, setErrors);
+		}
+	};
+
+	const onsubmitAddMember = async (event) => {
+		event.preventDefault();
+
+		const { error } = newOrChangedCredentials.validate(form, {
+			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;
+		}
+
+		const token = await getInviteToken({ email: form.email, role: role });
+
+		const toSubmit = {
+			...form,
+			inviteToken: token,
+		};
+		delete toSubmit.confirm;
+
+		try {
+			await networkService.registerUser(toSubmit);
+
+			createToast({
+				body: t("teamPanel.registerToast.success"),
+			});
+			closeAddMemberModal();
+			onMemberAdded();
+		} catch (error) {
+			const errorMsg = error.response?.data?.msg || error.message || "unknownError";
+			createToast({
+				type: "error",
+				body: t(`teamPanel.registerToast.${errorMsg}`),
+			});
+		}
+	};
+	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}
+					offset={[0, 45]}
+				>
+					<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}
+					>
+						{t("teamPanel.cancel")}
+					</Button>
+					<Button
+						variant="contained"
+						color="accent"
+						onClick={onsubmitAddMember}
+					>
+						{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(0);
+	const refreshTeamList = () => {
+		setRefreshTrigger((prev) => prev + 1);
+	};
 	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

@@ -4,7 +4,7 @@ import { Tooltip, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 
-const PasswordTooltip = ({ feedback, form, children }) => {
+const PasswordTooltip = ({ feedback, form, children, offset = [0, 0] }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const hasPassword = form.password.length > 0;
@@ -73,6 +73,16 @@ const PasswordTooltip = ({ feedback, form, children }) => {
 				</Stack>
 			}
 			slotProps={{
+				popper: {
+					modifiers: [
+						{
+							name: "offset",
+							options: {
+								offset: offset,
+							},
+						},
+					],
+				},
 				tooltip: {
 					sx: {
 						backgroundColor: theme.palette.tertiary.background,
@@ -111,6 +121,7 @@ PasswordTooltip.propTypes = {
 		password: PropTypes.string.isRequired,
 	}),
 	children: PropTypes.node,
+	offset: PropTypes.arrayOf(PropTypes.number),
 };
 
 export default PasswordTooltip;

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/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

@@ -991,6 +991,11 @@
 	"submit": "Submit",
 	"SupportedFormats": "Supported formats",
 	"teamPanel": {
+		"addTeamMember": {
+			"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"
+		},
 		"cancel": "Cancel",
 		"email": "Email",
 		"emailToken": "E-mail token",
@@ -1004,6 +1009,40 @@
 		"inviteNewTeamMember": "Invite new team member",
 		"inviteTeamMember": "Invite a team member",
 		"noMembers": "There are no team members with this role",
+		"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": "Role",
 		"selectRole": "Select role",
 		"table": {
 			"created": "Created",