Can request admin settings update

src/ui/routes/AccountSettingsRoute.tsx

@@ -4,10 +4,19 @@
  * @author Pierre Hubert
  */
 
+import {
+	Button,
+	Divider,
+	Grid,
+	Paper,
+	TextField,
+	Typography,
+} from "@material-ui/core";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { matAlert, snackbar } from "../widgets/DialogsProvider";
 
 export function AccountSettingsRoute() {
 	let params: any = useParams();
@@ -52,6 +61,110 @@ class AccountSettingsRouteInner extends React.Component<
 	}
 
 	build() {
-		return <p>{this.state.account.email}</p>;
+		return (
+			<Grid container spacing={2}>
+				<GeneralSettings admin={this.state.account}></GeneralSettings>
+			</Grid>
+		);
 	}
 }
+
+class GeneralSettings extends React.Component<
+	{ admin: AdminAccount },
+	{ newName: string; newEmail: string }
+> {
+	constructor(p: any) {
+		super(p);
+
+		this.state = {
+			newName: this.props.admin.name,
+			newEmail: this.props.admin.email,
+		};
+
+		this.changedName = this.changedName.bind(this);
+		this.changedEmail = this.changedEmail.bind(this);
+		this.handleSubmit = this.handleSubmit.bind(this);
+	}
+
+	changedName(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({ newName: e.target.value });
+	}
+
+	changedEmail(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({ newEmail: e.target.value });
+	}
+
+	get isValid(): boolean {
+		return this.state.newEmail.length > 2 && this.state.newName.length > 2;
+	}
+
+	async handleSubmit() {
+		try {
+			if (!this.isValid) return;
+
+			await AccountHelper.UpdateGeneralSettings({
+				id: this.props.admin.id,
+				name: this.state.newName,
+				email: this.state.newEmail,
+			});
+
+			snackbar("Successfully updated admin settings!");
+		} catch (e) {
+			console.error(e);
+			matAlert("Failed to update admin settings!");
+		}
+	}
+
+	render() {
+		return (
+			<SettingsSection title="General settings">
+				<TextField
+					required
+					label="Name"
+					value={this.state.newName}
+					onChange={this.changedName}
+					style={{ width: "100%", paddingBottom: "20px" }}
+				/>
+
+				<TextField
+					required
+					label="Email"
+					value={this.state.newEmail}
+					onChange={this.changedEmail}
+					type="mail"
+					style={{ width: "100%", paddingBottom: "20px" }}
+				/>
+
+				<Button
+					style={{ alignSelf: "end", marginRight: "10px" }}
+					disabled={!this.isValid}
+					onClick={this.handleSubmit}
+				>
+					Update
+				</Button>
+			</SettingsSection>
+		);
+	}
+}
+
+function SettingsSection(p: { title: string; children?: React.ReactNode }) {
+	return (
+		<Grid item xs={6} spacing={2}>
+			<Paper>
+				<Typography variant="h5" style={{ padding: "10px 10px " }}>
+					General settings
+				</Typography>
+				<Divider />
+				<div
+					style={{
+						padding: "10px 10px",
+						display: "flex",
+						flexDirection: "column",
+					}}
+				>
+					{p.children}
+				</div>
+			</Paper>
+		</Grid>
+	);
+}

src/ui/routes/MainRoute.tsx

@@ -155,20 +155,28 @@ export function MainRoute() {
 					<Menu></Menu>
 				</Paper>
 
-				<div style={{ flex: "1", padding: "50px" }}>
-					<Switch>
-						<Route exact path="/">
-							<HomeRoute></HomeRoute>
-						</Route>
+				<div style={{ flex: "1", padding: "50px", height: "100%" }}>
+					<div
+						style={{
+							height: "100%",
+							margin: "auto",
+							maxWidth: "1280px",
+						}}
+					>
+						<Switch>
+							<Route exact path="/">
+								<HomeRoute></HomeRoute>
+							</Route>
 
-						<Route path="/accounts/:id">
-							<AccountSettingsRoute></AccountSettingsRoute>
-						</Route>
+							<Route path="/accounts/:id">
+								<AccountSettingsRoute></AccountSettingsRoute>
+							</Route>
 
-						<Route path="*">
-							<NotFoundRoute></NotFoundRoute>
-						</Route>
-					</Switch>
+							<Route path="*">
+								<NotFoundRoute></NotFoundRoute>
+							</Route>
+						</Switch>
+					</div>
 				</div>
 			</div>
 		</Router>