Can request admin settings update

src/helpers/AccountHelper.ts

@@ -17,6 +17,12 @@ export interface AdminAccount {
 	time_create: number;
 }
 
+export interface NewAdminGeneralSettings {
+	id: number;
+	name: string;
+	email: string;
+}
+
 const SESSION_STORAGE_TOKEN = "auth_token";
 
 let currentAccount: AdminAccount | null = null;
@@ -114,4 +120,17 @@ export class AccountHelper {
 		sessionStorage.removeItem(SESSION_STORAGE_TOKEN);
 		document.location.href = document.location.href + "";
 	}
+
+	/**
+	 * Update an admin's settings
+	 *
+	 * @param a New settings
+	 */
+	static async UpdateGeneralSettings(s: NewAdminGeneralSettings) {
+		await serverRequest("admins/update_general_settings", {
+			id: s.id,
+			name: s.name,
+			email: s.email,
+		});
+	}
 }

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,7 +155,14 @@ export function MainRoute() {
 					<Menu></Menu>
 				</Paper>
 
-				<div style={{ flex: "1", padding: "50px" }}>
+				<div style={{ flex: "1", padding: "50px", height: "100%" }}>
+					<div
+						style={{
+							height: "100%",
+							margin: "auto",
+							maxWidth: "1280px",
+						}}
+					>
 						<Switch>
 							<Route exact path="/">
 								<HomeRoute></HomeRoute>
@@ -171,6 +178,7 @@ export function MainRoute() {
 						</Switch>
 					</div>
 				</div>
+			</div>
 		</Router>
 	);
 }

src/ui/widgets/AsyncWidget.tsx

@@ -59,7 +59,7 @@ export class AsyncWidget extends React.Component<
 	}
 
 	componentDidUpdate() {
-		if (this.state.key != this.props.key) {
+		if (this.state.key !== this.props.key) {
 			this.setState({ key: this.props.key });
 			this.reload();
 		}

src/ui/widgets/DialogsProvider.tsx

@@ -4,40 +4,56 @@
  * @author Pierre Hubert
  */
 
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, TextField } from "@material-ui/core";
+import {
+	Dialog,
+	DialogTitle,
+	DialogContent,
+	DialogContentText,
+	DialogActions,
+	Button,
+	TextField,
+	Snackbar,
+	IconButton,
+} from "@material-ui/core";
+import { Close } from "@material-ui/icons";
 import React from "react";
 
 let cache: ApplicationDialogsProvider;
 
 export interface TextInputOptions {
-    title ?: string,
+	title?: string;
-    message ?: string,
+	message?: string;
-    initialValue ?: string,
+	initialValue?: string;
-    minLength ?: number,
+	minLength?: number;
-    maxLength ?: number,
+	maxLength?: number;
-    label : string,
+	label: string;
 }
 
 interface AppDiagProvState {
-
 	// Alert dialog
-    alertMessage : string,
+	alertMessage: string;
-    showAlert : boolean,
+	showAlert: boolean;
+
+	// Simple snackbar
+	snackBarMessage: string;
+	showSnackBar: boolean;
 
 	// Confirm dialog
-    confirmMessage: string,
+	confirmMessage: string;
-    showConfirm: boolean,
+	showConfirm: boolean;
-    resolveConfirm ?: (confirmed: boolean) => void,
+	resolveConfirm?: (confirmed: boolean) => void;
 
 	// Text input dialog
-    showInputDialog: boolean,
+	showInputDialog: boolean;
-    inputValue: string,
+	inputValue: string;
-    inputOptions: TextInputOptions,
+	inputOptions: TextInputOptions;
-    resolveInput ?: (text: string) => void,
+	resolveInput?: (text: string) => void;
-
 }
 
-export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvState> {
+export class ApplicationDialogsProvider extends React.Component<
+	{},
+	AppDiagProvState
+> {
 	private acceptConfirm: () => void;
 	private rejectConfirm: () => void;
 	private cancelInput: () => void;
@@ -47,11 +63,14 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 		super(props);
 
 		this.state = {
-
 			// Alert dialog
 			alertMessage: "",
 			showAlert: false,
 
+			// Simple snackbar
+			snackBarMessage: "",
+			showSnackBar: false,
+
 			// Confirm dialog
 			showConfirm: false,
 			confirmMessage: "",
@@ -61,13 +80,15 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 			showInputDialog: false,
 			inputValue: "",
 			inputOptions: {
-                label: ""
+				label: "",
 			},
 			resolveInput: undefined,
 		};
 
 		this.handleCloseAlert = this.handleCloseAlert.bind(this);
 
+		this.handleCloseSnackbar = this.handleCloseSnackbar.bind(this);
+
 		this.acceptConfirm = this.handleCloseConfirm.bind(this, true);
 		this.rejectConfirm = this.handleCloseConfirm.bind(this, false);
 
@@ -80,26 +101,41 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 		this.setState({
 			showAlert: true,
 			alertMessage: message,
-        })
+		});
 	}
 
 	handleCloseAlert() {
 		this.setState({ showAlert: false });
 	}
 
+	showSnackbar(message: string) {
+		this.setState({ showSnackBar: true, snackBarMessage: message });
+	}
+
+	handleCloseSnackbar(
+		_event: React.SyntheticEvent | React.MouseEvent,
+		reason?: string
+	) {
+		if (reason === "clickaway") {
+			return;
+		}
+
+		this.setState({ showSnackBar: false });
+	}
+
 	showConfirm(message: string): Promise<boolean> {
 		return new Promise((res, _rej) => {
 			this.setState({
 				showConfirm: true,
 				confirmMessage: message,
-                resolveConfirm: res
+				resolveConfirm: res,
 			});
 		});
 	}
 
 	handleCloseConfirm(accept: boolean) {
 		this.setState({
-            showConfirm: false
+			showConfirm: false,
 		});
 
 		this.state.resolveConfirm && this.state.resolveConfirm(accept);
@@ -111,7 +147,7 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 				showInputDialog: true,
 				inputOptions: options,
 				resolveInput: res,
-                inputValue: options.initialValue || ""
+				inputValue: options.initialValue || "",
 			});
 		});
 	}
@@ -122,22 +158,21 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 
 	handleCloseInput(cancel: boolean) {
 		this.setState({
-            showInputDialog: false
+			showInputDialog: false,
 		});
 
 		if (!cancel)
-            this.state.resolveInput && this.state.resolveInput(this.state.inputValue);
+			this.state.resolveInput &&
+				this.state.resolveInput(this.state.inputValue);
 	}
 
 	get isInputValid(): boolean {
 		const options = this.state.inputOptions;
 		const value = this.state.inputValue;
 
-        if (options.minLength && value.length < options.minLength)
+		if (options.minLength && value.length < options.minLength) return false;
-            return false;
 
-        if (options.maxLength && value.length > options.maxLength)
+		if (options.maxLength && value.length > options.maxLength) return false;
-            return false;
 
 		return true;
 	}
@@ -145,11 +180,10 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 	render() {
 		cache = this;
 
-        if(this.state == null)
+		if (this.state == null) return <div></div>;
-            return(<div></div>);
-
-        return (<div>
 
+		return (
+			<div>
 				{/* Simple alert dialog */}
 				<Dialog
 					open={this.state.showAlert}
@@ -157,7 +191,12 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 					aria-labelledby="alert-dialog-title"
 					aria-describedby="alert-dialog-description"
 				>
-                <DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Message</DialogTitle>
+					<DialogTitle
+						id="alert-dialog-title"
+						style={{ minWidth: "300px" }}
+					>
+						Message
+					</DialogTitle>
 					<DialogContent>
 						<DialogContentText id="alert-dialog-description">
 							{this.state.alertMessage}
@@ -170,6 +209,30 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 					</DialogActions>
 				</Dialog>
 
+				{/* Simple snackbar */}
+				<Snackbar
+					anchorOrigin={{
+						vertical: "bottom",
+						horizontal: "left",
+					}}
+					open={this.state.showSnackBar}
+					autoHideDuration={6000}
+					onClose={this.handleCloseSnackbar}
+					message={this.state.snackBarMessage}
+					action={
+						<React.Fragment>
+							<IconButton
+								size="small"
+								aria-label="close"
+								color="inherit"
+								onClick={this.handleCloseSnackbar}
+							>
+								<Close fontSize="small" />
+							</IconButton>
+						</React.Fragment>
+					}
+				/>
+
 				{/* Confirm dialog */}
 				<Dialog
 					open={this.state.showConfirm}
@@ -177,7 +240,12 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 					aria-labelledby="alert-dialog-title"
 					aria-describedby="alert-dialog-description"
 				>
-                <DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Confirm action</DialogTitle>
+					<DialogTitle
+						id="alert-dialog-title"
+						style={{ minWidth: "300px" }}
+					>
+						Confirm action
+					</DialogTitle>
 					<DialogContent>
 						<DialogContentText id="alert-dialog-description">
 							{this.state.confirmMessage}
@@ -201,31 +269,41 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 					aria-describedby="alert-dialog-description"
 				>
 					<DialogTitle id="alert-dialog-title">
-                    {this.state.inputOptions.title || this.state.inputOptions.label}
+						{this.state.inputOptions.title ||
+							this.state.inputOptions.label}
 					</DialogTitle>
 					<DialogContent>
-                    {this.state.inputOptions.message ? <DialogContentText id="alert-dialog-description">
+						{this.state.inputOptions.message ? (
-                        {this.state.inputOptions.message} <br /><br />
+							<DialogContentText id="alert-dialog-description">
-                    </DialogContentText> : <span></span> }
+								{this.state.inputOptions.message} <br />
+								<br />
+							</DialogContentText>
+						) : (
+							<span></span>
+						)}
 
 						<TextField
 							label={this.state.inputOptions.label}
 							variant="outlined"
 							value={this.state.inputValue}
 							onChange={this.handleInputValueChanged}
-                        
 						/>
 					</DialogContent>
 					<DialogActions>
 						<Button onClick={this.cancelInput} color="default">
 							Cancel
 						</Button>
-                    <Button onClick={this.confirmInput} color="default" disabled={!this.isInputValid}>
+						<Button
+							onClick={this.confirmInput}
+							color="default"
+							disabled={!this.isInputValid}
+						>
 							OK
 						</Button>
 					</DialogActions>
 				</Dialog>
-        </div>)
+			</div>
+		);
 	}
 }
 
@@ -233,6 +311,10 @@ export function matAlert(msg: string) {
 	cache.showAlert(msg);
 }
 
+export function snackbar(msg: string) {
+	cache.showSnackbar(msg);
+}
+
 export function matConfirm(msg: string): Promise<boolean> {
 	return cache.showConfirm(msg);
 }