Can toggle admin role

src/helpers/AdminRolesHelper.ts

@@ -23,4 +23,22 @@ export class AdminRolesHelper {
 	static async LoadRolesList() {
 		RolesList = await serverRequest("roles/list");
 	}
+
+	/**
+	 * Toggle a role for an administrator
+	 *
+	 * @param adminID Target administrator ID
+	 * @param role The role to toggle
+	 */
+	static async ToggleAdminRole(
+		adminID: number,
+		role: AdminRole,
+		enable: boolean
+	) {
+		await serverRequest("roles/toggle", {
+			adminID: adminID,
+			role: role.id,
+			enable: enable,
+		});
+	}
 }

src/ui/accountSettings/RoleSettingsSection.tsx

@@ -4,15 +4,74 @@
  * @author Pierre Hubert
  */
 
+import { Checkbox, FormControlLabel, Tooltip } from "@material-ui/core";
 import React from "react";
 import { AdminAccount } from "../../helpers/AccountHelper";
+import {
+	AdminRole,
+	AdminRolesHelper,
+	RolesList,
+} from "../../helpers/AdminRolesHelper";
+import { matAlert, snackbar } from "../widgets/DialogsProvider";
 import { SettingsSection } from "./SettingsSection";
 
 export class RoleSettingsSection extends React.Component<{
 	admin: AdminAccount;
 	editable: boolean;
+	onChanged: () => void;
 }> {
+	constructor(p: any) {
+		super(p);
+
+		this.toggleRole = this.toggleRole.bind(this);
+	}
+
+	async toggleRole(r: AdminRole, enable: boolean) {
+		try {
+			await AdminRolesHelper.ToggleAdminRole(
+				this.props.admin.id,
+				r,
+				enable
+			);
+			this.props.onChanged();
+			snackbar("Administrator roles were successfully updated!");
+		} catch (e) {
+			console.error(e);
+			matAlert("Failed to update admin roles!");
+		}
+	}
+
 	render() {
-		return <SettingsSection title="Roles">Soon : roles</SettingsSection>;
+		return (
+			<SettingsSection title="Roles">
+				<div style={{ padding: "10px" }}>
+					{RolesList.map((r) => {
+						const hasRole = this.props.admin.roles.includes(
+							r.id as any
+						);
+						return (
+							<Tooltip
+								disableFocusListener
+								title={r.description}
+								placement="top"
+								key={r.id}
+								arrow
+							>
+								<FormControlLabel
+									disabled={!this.props.editable}
+									control={<Checkbox color="primary" />}
+									label={r.name}
+									checked={hasRole}
+									onChange={() =>
+										this.toggleRole(r, !hasRole)
+									}
+									style={{ display: "block" }}
+								></FormControlLabel>
+							</Tooltip>
+						);
+					})}
+				</div>
+			</SettingsSection>
+		);
 	}
 }

src/ui/routes/AccountSettingsRoute.tsx

@@ -5,6 +5,7 @@
  */
 
 import { Grid } from "@material-ui/core";
+import { version } from "process";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
@@ -27,6 +28,7 @@ interface SettingsRouteProps {
 
 interface SettingsRouteState {
 	account: AdminAccount;
+	version: number;
 }
 
 class AccountSettingsRouteInner extends React.Component<
@@ -38,6 +40,17 @@ class AccountSettingsRouteInner extends React.Component<
 
 		this.load = this.load.bind(this);
 		this.build = this.build.bind(this);
+
+		this.state = {
+			account: {} as AdminAccount,
+			version: 1,
+		};
+
+		this.reload = this.reload.bind(this);
+	}
+
+	reload() {
+		this.setState({ version: this.state.version + 1 });
 	}
 
 	async load() {
@@ -49,7 +62,7 @@ class AccountSettingsRouteInner extends React.Component<
 	render() {
 		return (
 			<AsyncWidget
-				key={this.props.id}
+				key={this.props.id + "-" + this.state.version}
 				errorMessage="Failed to load admin information!"
 				onBuild={this.build}
 				load={this.load}
@@ -65,11 +78,11 @@ class AccountSettingsRouteInner extends React.Component<
 					<GeneralSettings
 						admin={this.state.account}
 						editable={
-							this.props.id == adminID() || canManageAdmins()
+							this.props.id === adminID() || canManageAdmins()
 						}
 					/>
 
-					{this.props.id == adminID() || canManageAdmins() ? (
+					{this.props.id === adminID() || canManageAdmins() ? (
 						<KeySettingsSection admin={this.state.account} />
 					) : (
 						<div></div>
@@ -78,6 +91,7 @@ class AccountSettingsRouteInner extends React.Component<
 					<RoleSettingsSection
 						admin={this.state.account}
 						editable={canManageAdmins()}
+						onChanged={this.reload}
 					/>
 				</Grid>
 			</div>