Start to build search user page

src/helpers/AccountHelper.ts

@@ -12,12 +12,17 @@ export interface AuthOptions {
 	keys: AuthKey[];
 }
 
+export type AdminAccountRole =
+	| "manage_admins"
+	| "manage_users"
+	| "access_all_admin_logs";
+
 export interface AdminAccount {
 	id: number;
 	name: string;
 	email: string;
 	time_create: number;
-	roles: Array<"manage_admins" | "manage_users" | "access_all_admin_logs">;
+	roles: Array<AdminAccountRole>;
 }
 
 export interface NewAdminGeneralSettings {

src/ui/routes/LoginRoute.tsx

@@ -24,7 +24,6 @@ import React from "react";
 import { AccountHelper, AuthOptions } from "../../helpers/AccountHelper";
 import { AdminKeyHelper, AuthKey } from "../../helpers/AdminKeyHelper";
 import { input, matAlert } from "../widgets/DialogsProvider";
-import LockIcon from "@material-ui/icons/Lock";
 
 function ErrorGettingOptions(p: { message: string }) {
 	return (

src/ui/routes/MainRoute.tsx

@@ -18,8 +18,8 @@ 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 GroupIcon from "@material-ui/icons/Group";
 import HistoryIcon from "@material-ui/icons/History";
 import React from "react";
 import {
@@ -29,12 +29,13 @@ import {
 	useHistory,
 	useRouteMatch,
 } from "react-router-dom";
-import { AccountHelper } from "../../helpers/AccountHelper";
+import { AccountHelper, AdminAccountRole } from "../../helpers/AccountHelper";
+import { AccountLogsRoute } from "./AccountLogsRoute";
 import { AccountSettingsRoute } from "./AccountSettingsRoute";
+import { AccountsListRoute } from "./AccountsListRoute";
 import { HomeRoute } from "./HomeRoute";
 import { NotFoundRoute } from "./NotFoundRoute";
-import { AccountsListRoute } from "./AccountsListRoute";
-import { AccountLogsRoute } from "./AccountLogsRoute";
+import { SearchComunicUsersRoute } from "./SearchComunicUsersRoute";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -90,6 +91,12 @@ function Menu() {
 		<div>
 			<List component="nav" aria-label="main mailbox folders">
 				<MainMenuItem title="Home" icon={<Home />} uri="/" />
+				<MainMenuItem
+					title="Comunic Users"
+					icon={<GroupIcon />}
+					uri="/users"
+					needsRole="manage_users"
+				/>
 				<MainMenuItem
 					title="Administrators"
 					icon={<GroupIcon />}
@@ -115,6 +122,7 @@ function MainMenuItem(p: {
 	title: string;
 	icon: React.ReactNode;
 	uri: string;
+	needsRole?: AdminAccountRole;
 }) {
 	const history = useHistory();
 	const openMyAccount = () => history.push(p.uri);
@@ -125,6 +133,12 @@ function MainMenuItem(p: {
 			exact: true,
 		}) != null;
 
+	// Check if roles are filtered
+	if (p.needsRole) {
+		if (!AccountHelper.currentAccount.roles.includes(p.needsRole))
+			return <span></span>;
+	}
+
 	return (
 		<ListItem button onClick={openMyAccount} selected={selected}>
 			<ListItemIcon>{p.icon}</ListItemIcon>
@@ -203,6 +217,10 @@ export function MainRoute() {
 									<HomeRoute></HomeRoute>
 								</Route>
 
+								<Route exact path="/users">
+									<SearchComunicUsersRoute />
+								</Route>
+
 								<Route exact path="/accounts">
 									<AccountsListRoute />
 								</Route>
@@ -216,7 +234,7 @@ export function MainRoute() {
 								</Route>
 
 								<Route path="*">
-									<NotFoundRoute></NotFoundRoute>
+									<NotFoundRoute />
 								</Route>
 							</Switch>
 						</div>

src/ui/routes/SearchComunicUsersRoute.tsx

@@ -0,0 +1,121 @@
+/**
+ * Search Coumnic user
+ *
+ * @author Pierre Hubert
+ */
+
+import { Grid, Paper, TextField } from "@material-ui/core";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { PageTitle } from "../widgets/PageTitle";
+
+export class SearchComunicUsersRoute extends React.Component<
+	{},
+	{ firstName: string; lastName: string; email: string }
+> {
+	constructor(p: any) {
+		super(p);
+		this.state = {
+			firstName: "",
+			lastName: "",
+			email: "",
+		};
+
+		this.updateFirstName = this.updateFirstName.bind(this);
+		this.updateLastName = this.updateLastName.bind(this);
+		this.updateEmailAddress = this.updateEmailAddress.bind(this);
+		this.performSearch = this.performSearch.bind(this);
+		this.buildResults = this.buildResults.bind(this);
+	}
+
+	updateFirstName(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			firstName: e.target.value,
+		});
+	}
+
+	updateLastName(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			lastName: e.target.value,
+		});
+	}
+
+	updateEmailAddress(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			email: e.target.value,
+		});
+	}
+
+	get canPerformSearch(): boolean {
+		return (
+			this.state.firstName.length > 2 ||
+			this.state.lastName.length > 2 ||
+			this.state.email.length > 4
+		);
+	}
+
+	get searchKey(): string {
+		return (
+			this.state.firstName +
+			"##" +
+			this.state.lastName +
+			"##" +
+			this.state.email
+		);
+	}
+
+	async performSearch() {}
+
+	render() {
+		return (
+			<div>
+				<PageTitle name="Search Comunic user" />
+
+				{/* Filter users */}
+				<Grid container spacing={3}>
+					<Grid item xs={3}>
+						<TextField
+							label="First name"
+							style={{ width: "100%" }}
+							value={this.state.firstName}
+							onChange={this.updateFirstName}
+						/>
+					</Grid>
+					<Grid item xs={3}>
+						<TextField
+							label="Last name"
+							style={{ width: "100%" }}
+							value={this.state.lastName}
+							onChange={this.updateLastName}
+						/>
+					</Grid>
+					<Grid item xs={6}>
+						<TextField
+							label="Email address"
+							style={{ width: "100%" }}
+							type="email"
+							value={this.state.email}
+							onChange={this.updateEmailAddress}
+						/>
+					</Grid>
+				</Grid>
+
+				{/* Perform search & display results */}
+				{this.canPerformSearch ? (
+					<AsyncWidget
+						load={this.performSearch}
+						onBuild={this.buildResults}
+						errorMessage="Failed to search users!"
+						key={this.searchKey}
+					/>
+				) : (
+					<div></div>
+				)}
+			</div>
+		);
+	}
+
+	buildResults() {
+		return <p>Results!!! {this.searchKey}</p>;
+	}
+}

src/utils/AccountUtils.ts

@@ -13,3 +13,7 @@ export function adminID(): number {
 export function canManageAdmins(): boolean {
 	return AccountHelper.currentAccount.roles.includes("manage_admins");
 }
+
+export function canManageComunicUsers(): boolean {
+	return AccountHelper.currentAccount.roles.includes("manage_users");
+}