derive options from roles, wire error state

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

@@ -1,26 +1,32 @@
 import MenuItem from "@mui/material/MenuItem";
+import FormHelperText from "@mui/material/FormHelperText";
 import { useController } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Select } from "@/Components/inputs";
+import { UserRoles } from "@/Types/User";
 import type { UserRole } from "@/Types/User";
 
 export const RoleSelectField = () => {
 	const { t } = useTranslation();
-	const { field } = useController<{ role: UserRole[] }, "role">({ name: "role" });
+	const { field, fieldState } = useController<{ role: UserRole[] }, "role">({
+		name: "role",
+	});
 
-	const roleOptions: { value: UserRole; label: string }[] = [
-		{ value: "admin", label: t("common.auth.roles.admin") },
-		{ value: "user", label: t("common.auth.roles.user") },
-		{ value: "demo", label: t("common.auth.roles.demo") },
-	];
+	const editableRoles = UserRoles.filter((role) => role !== "superadmin");
+	const roleOptions: { value: UserRole; label: string }[] = editableRoles.map((role) => ({
+		value: role,
+		label: t(`common.auth.roles.${role}`),
+	}));
 
 	return (
+		<>
 			<Select
 				{...field}
 				value={field.value[0] ?? "user"}
 				onChange={(e) => field.onChange([e.target.value])}
 				fieldLabel={t("common.form.role.option.role.label")}
 				fullWidth
+				error={!!fieldState.error}
 			>
 				{roleOptions.map((option) => (
 					<MenuItem
@@ -31,5 +37,9 @@ export const RoleSelectField = () => {
 					</MenuItem>
 				))}
 			</Select>
+			{fieldState.error && (
+				<FormHelperText error>{fieldState.error.message}</FormHelperText>
+			)}
+		</>
 	);
 };