strings

client/src/Pages/Account/EditUser/index.tsx

@@ -1,10 +1,16 @@
-import { Stack, MenuItem } from "@mui/material";
+import { Stack, Typography, IconButton, Divider } from "@mui/material";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { ConfigBox, BasePage, Breadcrumb } from "@/Components/v2/design-elements";
-import { TextField, Button, Select } from "@/Components/v2/inputs";
+import { TextField, Button, Autocomplete } from "@/Components/v2/inputs";
 import { UserRoles } from "@/Types/User";
 import { useState } from "react";
+import { Trash2 } from "lucide-react";
+
+interface RoleOption {
+	id: string;
+	name: string;
+}
 
 const EditUserPage = () => {
 	const theme = useTheme();
@@ -17,6 +23,17 @@ const EditUserPage = () => {
 
 	const editableRoles = UserRoles.filter((role) => role !== "superadmin");
 
+	const roleOptions: RoleOption[] = editableRoles.map((role) => ({
+		id: role,
+		name: t(`common.auth.roles.${role}`),
+	}));
+
+	const selectedRoles = roleOptions.filter((r) => roles.includes(r.id));
+
+	const handleRemoveRole = (roleToRemove: string) => {
+		setRoles(roles.filter((role) => role !== roleToRemove));
+	};
+
 	return (
 		<BasePage>
 			<Breadcrumb breadcrumbOverride={[t("menu.team"), t("editUserPage.title")]} />
@@ -50,25 +67,47 @@ const EditUserPage = () => {
 					}
 				/>
 				<ConfigBox
-					title={t("editUserPage.form.role")}
-					subtitle={t("pages.account.team.invite.role.placeholder")}
+					title={t("pages.editUser.form.roles.title")}
+					subtitle={t("pages.editUser.form.roles.description")}
 					rightContent={
-						<Select
-							multiple
-							value={roles}
-							onChange={(e) => setRoles(e.target.value as string[])}
-							placeholder={t("pages.account.team.invite.role.placeholder")}
-							sx={{ minWidth: 200 }}
-						>
-							{editableRoles.map((role) => (
-								<MenuItem
-									key={role}
-									value={role}
+						<Stack spacing={theme.spacing(4)}>
+							<Autocomplete
+								fieldLabel={t("common.form.role.option.label")}
+								multiple
+								options={roleOptions}
+								value={selectedRoles}
+								getOptionLabel={(option) => option.name}
+								onChange={(_: unknown, newValue: RoleOption[]) => {
+									setRoles(newValue.map((r) => r.id));
+								}}
+								isOptionEqualToValue={(option, value) => option.id === value.id}
+							/>
+							{selectedRoles.length > 0 && (
+								<Stack
+									flex={1}
+									width="100%"
 								>
-									{t(`common.auth.roles.${role}`)}
-								</MenuItem>
-							))}
-						</Select>
+									{selectedRoles.map((role, index) => (
+										<Stack
+											direction="row"
+											alignItems="center"
+											key={role.id}
+											width="100%"
+										>
+											<Typography flexGrow={1}>{role.name}</Typography>
+											<IconButton
+												size="small"
+												onClick={() => handleRemoveRole(role.id)}
+												aria-label="Remove role"
+											>
+												<Trash2 size={16} />
+											</IconButton>
+											{index < selectedRoles.length - 1 && <Divider />}
+										</Stack>
+									))}
+								</Stack>
+							)}
+						</Stack>
 					}
 				/>
 				<Button

client/src/Pages/Account/TabProfile.tsx

@@ -90,8 +90,8 @@ export const TabProfile = () => {
 							render={({ field, fieldState }) => (
 								<TextField
 									{...field}
-									fieldLabel={t("pages.account.form.name.option.firstName.label")}
-									placeholder={t("pages.account.form.name.option.firstName.placeholder")}
+									fieldLabel={t("common.form.name.option.firstName.label")}
+									placeholder={t("common.form.name.option.firstName.placeholder")}
 									autoComplete="given-name"
 									error={!!fieldState.error}
 									helperText={fieldState.error?.message ?? ""}
@@ -104,8 +104,8 @@ export const TabProfile = () => {
 							render={({ field, fieldState }) => (
 								<TextField
 									{...field}
-									fieldLabel={t("pages.account.form.name.option.lastName.label")}
-									placeholder={t("pages.account.form.name.option.lastName.placeholder")}
+									fieldLabel={t("common.form.name.option.lastName.label")}
+									placeholder={t("common.form.name.option.lastName.placeholder")}
 									autoComplete="family-name"
 									error={!!fieldState.error}
 									helperText={fieldState.error?.message ?? ""}

client/src/Pages/Account/components/AddTeamMemberDialog.tsx

@@ -91,8 +91,8 @@ export const AddTeamMemberDialog = ({
 					render={({ field, fieldState }) => (
 						<TextField
 							{...field}
-							fieldLabel={t("pages.auth.register.form.option.name.label")}
-							placeholder={t("pages.auth.register.form.option.name.placeholder")}
+							fieldLabel={t("common.form.name.option.firstName.label")}
+							placeholder={t("common.form.name.option.firstName.placeholder")}
 							error={!!fieldState.error}
 							helperText={fieldState.error?.message ?? ""}
 							fullWidth
@@ -105,8 +105,8 @@ export const AddTeamMemberDialog = ({
 					render={({ field, fieldState }) => (
 						<TextField
 							{...field}
-							fieldLabel={t("pages.auth.register.form.option.surname.label")}
-							placeholder={t("pages.auth.register.form.option.surname.placeholder")}
+							fieldLabel={t("common.form.name.option.lastName.label")}
+							placeholder={t("common.form.name.option.lastName.placeholder")}
 							error={!!fieldState.error}
 							helperText={fieldState.error?.message ?? ""}
 							fullWidth
@@ -119,8 +119,8 @@ export const AddTeamMemberDialog = ({
 					render={({ field, fieldState }) => (
 						<TextField
 							{...field}
-							fieldLabel={t("pages.auth.common.form.option.email.label")}
-							placeholder={t("pages.auth.common.form.option.email.placeholder")}
+							fieldLabel={t("common.form.email.option.email.label")}
+							placeholder={t("common.form.email.option.email.placeholder")}
 							type="email"
 							error={!!fieldState.error}
 							helperText={fieldState.error?.message ?? ""}
@@ -136,8 +136,7 @@ export const AddTeamMemberDialog = ({
 							{...field}
 							value={field.value[0] ?? "user"}
 							onChange={(e) => field.onChange([e.target.value])}
-							fieldLabel={t("pages.account.team.invite.role.label")}
-							placeholder={t("pages.account.team.invite.role.placeholder")}
+							fieldLabel={t("common.form.role.option.role.label")}
 							fullWidth
 						>
 							{roleOptions.map((option) => (

client/src/Pages/Account/components/InviteTeamMemberDialog.tsx

@@ -104,8 +104,8 @@ export const InviteTeamMemberDialog = ({
 					render={({ field, fieldState }) => (
 						<TextField
 							{...field}
-							fieldLabel={t("pages.account.team.invite.email.label")}
-							placeholder={t("pages.account.team.invite.email.placeholder")}
+							fieldLabel={t("common.form.email.option.email.label")}
+							placeholder={t("common.form.email.option.email.placeholder")}
 							type="email"
 							fullWidth
 							error={!!fieldState.error}
@@ -122,8 +122,7 @@ export const InviteTeamMemberDialog = ({
 								{...field}
 								value={Array.isArray(value) ? (value[0] ?? "") : ""}
 								onChange={(e) => onChange([e.target.value as UserRole])}
-								fieldLabel={t("pages.account.team.invite.role.label")}
-								placeholder={t("pages.account.team.invite.role.placeholder")}
+								fieldLabel={t("common.form.role.option.role.label")}
 								fullWidth
 								error={!!fieldState.error}
 							>

client/src/locales/en.json

@@ -238,6 +238,13 @@
 			"responseTime": "Response time"
 		},
 		"form": {
+			"role": {
+				"option": {
+					"role": {
+						"label": "Roles"
+					}
+				}
+			},
 			"name": {
 				"option": {
 					"firstName": {
@@ -544,17 +551,7 @@
 			"form": {
 				"name": {
 					"title": "Name",
-					"description": "Update your personal information",
-					"option": {
-						"firstName": {
-							"label": "First name",
-							"placeholder": "Enter your first name"
-						},
-						"lastName": {
-							"label": "Last name",
-							"placeholder": "Enter your last name"
-						}
-					}
+					"description": "Update your personal information"
 				},
 				"photo": {
 					"title": "Profile photo",
@@ -822,6 +819,14 @@
 				}
 			}
 		},
+		"editUser": {
+			"form": {
+				"roles": {
+					"title": "Roles",
+					"description": "Assign roles to the user. Multiple roles can be selected."
+				}
+			}
+		},
 		"incidents": {
 			"dialog": {
 				"details": {