Display the list of administrators

src/helpers/AccountHelper.ts

@@ -90,6 +90,13 @@ export class AccountHelper {
 		});
 	}
 
+	/**
+	 * Get the entire list of administrators
+	 */
+	static async GetAdminsList(): Promise<AdminAccount[]> {
+		return await serverRequest("accounts/list");
+	}
+
 	/**
 	 * Attempt to refresh current account information
 	 */

src/ui/routes/AccountSettingsRoute.tsx

@@ -5,7 +5,6 @@
  */
 
 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";

src/ui/routes/AccountsListRoute.tsx

@@ -0,0 +1,83 @@
+/**
+ * Accounts list route
+ *
+ * @author Pierre Hubert
+ */
+
+import {
+	TableContainer,
+	Paper,
+	Table,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableBody,
+} from "@material-ui/core";
+import React from "react";
+import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { TimestampWidget } from "../widgets/TimestampWidget";
+
+export class AccountsListRoute extends React.Component<
+	{},
+	{ version: number; list: AdminAccount[] }
+> {
+	constructor(p: any) {
+		super(p);
+
+		this.state = {
+			version: 1,
+			list: [],
+		};
+
+		this.load = this.load.bind(this);
+		this.build = this.build.bind(this);
+	}
+
+	async load() {
+		const list = await AccountHelper.GetAdminsList();
+		this.setState({ list: list });
+	}
+
+	render() {
+		return (
+			<AsyncWidget
+				errorMessage="Failed to load the list of adminstrators!"
+				onBuild={this.build}
+				key={this.state.version}
+				load={this.load}
+			/>
+		);
+	}
+
+	build() {
+		return (
+			<TableContainer component={Paper}>
+				<Table>
+					<TableHead>
+						<TableRow>
+							<TableCell align="right">ID</TableCell>
+							<TableCell align="right">Name</TableCell>
+							<TableCell align="right">Email address</TableCell>
+							<TableCell align="right">
+								Account creation
+							</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{this.state.list.map((row) => (
+							<TableRow key={row.id}>
+								<TableCell align="right">{row.id}</TableCell>
+								<TableCell align="right">{row.name}</TableCell>
+								<TableCell align="right">{row.email}</TableCell>
+								<TableCell align="right">
+									<TimestampWidget time={row.time_create} />
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+		);
+	}
+}

src/ui/routes/MainRoute.tsx

@@ -6,6 +6,7 @@
 
 import {
 	AppBar,
+	Divider,
 	IconButton,
 	List,
 	ListItem,
@@ -17,6 +18,7 @@ import {
 	Typography,
 } from "@material-ui/core";
 import { Home, Person } from "@material-ui/icons";
+import GroupIcon from "@material-ui/icons/Group";
 import CloseSharpIcon from "@material-ui/icons/CloseSharp";
 import React from "react";
 import {
@@ -30,6 +32,7 @@ import { AccountHelper } from "../../helpers/AccountHelper";
 import { AccountSettingsRoute } from "./AccountSettingsRoute";
 import { HomeRoute } from "./HomeRoute";
 import { NotFoundRoute } from "./NotFoundRoute";
+import { AccountsListRoute } from "./AccountsListRoute";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -85,6 +88,12 @@ function Menu() {
 		<div>
 			<List component="nav" aria-label="main mailbox folders">
 				<MainMenuItem title="Home" icon={<Home />} uri="/" />
+				<MainMenuItem
+					title="Administrators"
+					icon={<GroupIcon />}
+					uri="/accounts"
+				/>
+				<Divider />
 				<MainMenuItem
 					title="My account"
 					icon={<Person />}
@@ -187,6 +196,10 @@ export function MainRoute() {
 									<HomeRoute></HomeRoute>
 								</Route>
 
+								<Route exact path="/accounts">
+									<AccountsListRoute />
+								</Route>
+
 								<Route path="/accounts/:id">
 									<AccountSettingsRoute></AccountSettingsRoute>
 								</Route>