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,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>

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,239 +4,321 @@
  * @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;
+let cache: ApplicationDialogsProvider;
 
 export interface TextInputOptions {
-    title ?: string,
-    message ?: string,
-    initialValue ?: string,
-    minLength ?: number,
-    maxLength ?: number,
-    label : string,
+	title?: string;
+	message?: string;
+	initialValue?: string;
+	minLength?: number;
+	maxLength?: number;
+	label: string;
 }
 
 interface AppDiagProvState {
+	// Alert dialog
+	alertMessage: string;
+	showAlert: boolean;
 
-    // Alert dialog
-    alertMessage : string,
-    showAlert : boolean,
+	// Simple snackbar
+	snackBarMessage: string;
+	showSnackBar: boolean;
 
-    // Confirm dialog
-    confirmMessage: string,
-    showConfirm: boolean,
-    resolveConfirm ?: (confirmed: boolean) => void,
-
-    // Text input dialog
-    showInputDialog: boolean,
-    inputValue: string,
-    inputOptions: TextInputOptions,
-    resolveInput ?: (text: string) => void,
+	// Confirm dialog
+	confirmMessage: string;
+	showConfirm: boolean;
+	resolveConfirm?: (confirmed: boolean) => void;
 
+	// Text input dialog
+	showInputDialog: boolean;
+	inputValue: string;
+	inputOptions: TextInputOptions;
+	resolveInput?: (text: string) => void;
 }
 
-export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvState> {
-    private acceptConfirm: () => void;
-    private rejectConfirm: () => void;
-    private cancelInput: () => void;
-    private  confirmInput: () => void;
+export class ApplicationDialogsProvider extends React.Component<
+	{},
+	AppDiagProvState
+> {
+	private acceptConfirm: () => void;
+	private rejectConfirm: () => void;
+	private cancelInput: () => void;
+	private confirmInput: () => void;
 
-    constructor(props: any) {
-        super(props);
+	constructor(props: any) {
+		super(props);
 
-        this.state = {
+		this.state = {
+			// Alert dialog
+			alertMessage: "",
+			showAlert: false,
 
-            // Alert dialog
-            alertMessage: "",
-            showAlert: false,
+			// Simple snackbar
+			snackBarMessage: "",
+			showSnackBar: false,
 
-            // Confirm dialog
-            showConfirm: false,
-            confirmMessage: "",
-            resolveConfirm: undefined,
+			// Confirm dialog
+			showConfirm: false,
+			confirmMessage: "",
+			resolveConfirm: undefined,
 
-            // Text input dialog
-            showInputDialog: false,
-            inputValue: "",
-            inputOptions: {
-                label: ""
-            },
-            resolveInput: undefined, 
-        };
+			// Text input dialog
+			showInputDialog: false,
+			inputValue: "",
+			inputOptions: {
+				label: "",
+			},
+			resolveInput: undefined,
+		};
 
-        this.handleCloseAlert = this.handleCloseAlert.bind(this);
+		this.handleCloseAlert = this.handleCloseAlert.bind(this);
 
-        this.acceptConfirm = this.handleCloseConfirm.bind(this, true);
-        this.rejectConfirm = this.handleCloseConfirm.bind(this, false);
+		this.handleCloseSnackbar = this.handleCloseSnackbar.bind(this);
 
-        this.handleInputValueChanged = this.handleInputValueChanged.bind(this);
-        this.cancelInput = this.handleCloseInput.bind(this, true);
-        this.confirmInput = this.handleCloseInput.bind(this, false);
-    }
+		this.acceptConfirm = this.handleCloseConfirm.bind(this, true);
+		this.rejectConfirm = this.handleCloseConfirm.bind(this, false);
 
-    showAlert(message: string) {
-        this.setState({
-            showAlert: true,
-            alertMessage: message,
-        })
-    }
+		this.handleInputValueChanged = this.handleInputValueChanged.bind(this);
+		this.cancelInput = this.handleCloseInput.bind(this, true);
+		this.confirmInput = this.handleCloseInput.bind(this, false);
+	}
 
-    handleCloseAlert() {
-        this.setState({showAlert: false});
-    }
+	showAlert(message: string) {
+		this.setState({
+			showAlert: true,
+			alertMessage: message,
+		});
+	}
 
-    showConfirm(message: string) : Promise<boolean> {
-        return new Promise((res, _rej) => {
-            this.setState({
-                showConfirm: true,
-                confirmMessage: message,
-                resolveConfirm: res
-            });
-        });
-    }
+	handleCloseAlert() {
+		this.setState({ showAlert: false });
+	}
 
-    handleCloseConfirm(accept: boolean) {
-        this.setState({
-            showConfirm: false
-        });
+	showSnackbar(message: string) {
+		this.setState({ showSnackBar: true, snackBarMessage: message });
+	}
 
-        this.state.resolveConfirm && this.state.resolveConfirm(accept);
-    }
+	handleCloseSnackbar(
+		_event: React.SyntheticEvent | React.MouseEvent,
+		reason?: string
+	) {
+		if (reason === "clickaway") {
+			return;
+		}
 
-    showInput(options: TextInputOptions) : Promise<string> {
-        return new Promise((res, _rej) => {
-            this.setState({
-                showInputDialog: true,
-                inputOptions: options,
-                resolveInput: res,
-                inputValue: options.initialValue || ""
-            });
-        });
-    }
+		this.setState({ showSnackBar: false });
+	}
 
-    handleInputValueChanged(e: React.ChangeEvent<HTMLInputElement>){
-        this.setState({inputValue: e.target.value});
-    }
+	showConfirm(message: string): Promise<boolean> {
+		return new Promise((res, _rej) => {
+			this.setState({
+				showConfirm: true,
+				confirmMessage: message,
+				resolveConfirm: res,
+			});
+		});
+	}
 
-    handleCloseInput(cancel: boolean) {
-        this.setState({
-            showInputDialog: false
-        });
+	handleCloseConfirm(accept: boolean) {
+		this.setState({
+			showConfirm: false,
+		});
 
-        if (!cancel)
-            this.state.resolveInput && this.state.resolveInput(this.state.inputValue);
-    }
+		this.state.resolveConfirm && this.state.resolveConfirm(accept);
+	}
 
-    get isInputValid() : boolean {
-        const options = this.state.inputOptions;
-        const value = this.state.inputValue;
+	showInput(options: TextInputOptions): Promise<string> {
+		return new Promise((res, _rej) => {
+			this.setState({
+				showInputDialog: true,
+				inputOptions: options,
+				resolveInput: res,
+				inputValue: options.initialValue || "",
+			});
+		});
+	}
 
-        if (options.minLength && value.length < options.minLength)
-            return false;
+	handleInputValueChanged(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({ inputValue: e.target.value });
+	}
 
-        if (options.maxLength && value.length > options.maxLength)
-            return false;
+	handleCloseInput(cancel: boolean) {
+		this.setState({
+			showInputDialog: false,
+		});
 
-        return true;
-    }
+		if (!cancel)
+			this.state.resolveInput &&
+				this.state.resolveInput(this.state.inputValue);
+	}
 
-    render() {
-        cache = this;
+	get isInputValid(): boolean {
+		const options = this.state.inputOptions;
+		const value = this.state.inputValue;
 
-        if(this.state == null)
-            return(<div></div>);
+		if (options.minLength && value.length < options.minLength) return false;
 
-        return (<div>
+		if (options.maxLength && value.length > options.maxLength) return false;
 
-            {/* Simple alert dialog */}
-            <Dialog
-                open={this.state.showAlert}
-                onClose={this.handleCloseAlert}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
-            >
-                <DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Message</DialogTitle>
-                <DialogContent>
-                    <DialogContentText id="alert-dialog-description">
-                    {this.state.alertMessage}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.handleCloseAlert} color="default">
-                        OK
-                    </Button>
-                </DialogActions>
-            </Dialog>
+		return true;
+	}
 
-            {/* Confirm dialog */}
-            <Dialog
-                open={this.state.showConfirm}
-                onClose={this.rejectConfirm}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
-            >
-                <DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Confirm action</DialogTitle>
-                <DialogContent>
-                    <DialogContentText id="alert-dialog-description">
-                    {this.state.confirmMessage}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.rejectConfirm} color="default">
-                        Cancel
-                    </Button>
-                    <Button onClick={this.acceptConfirm} color="default">
-                        Confirm
-                    </Button>
-                </DialogActions>
-            </Dialog>
+	render() {
+		cache = this;
 
-            {/* Text input dialog */}
-            <Dialog
-                open={this.state.showInputDialog}
-                onClose={this.rejectConfirm}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
-            >
-                <DialogTitle id="alert-dialog-title">
-                    {this.state.inputOptions.title || this.state.inputOptions.label}
-                </DialogTitle>
-                <DialogContent>
-                    {this.state.inputOptions.message ? <DialogContentText id="alert-dialog-description">
-                        {this.state.inputOptions.message} <br /><br />
-                    </DialogContentText> : <span></span> }
+		if (this.state == null) return <div></div>;
 
-                    <TextField 
-                        label={this.state.inputOptions.label} 
-                        variant="outlined" 
-                        value={this.state.inputValue}
-                        onChange={this.handleInputValueChanged}
+		return (
+			<div>
+				{/* Simple alert dialog */}
+				<Dialog
+					open={this.state.showAlert}
+					onClose={this.handleCloseAlert}
+					aria-labelledby="alert-dialog-title"
+					aria-describedby="alert-dialog-description"
+				>
+					<DialogTitle
+						id="alert-dialog-title"
+						style={{ minWidth: "300px" }}
+					>
+						Message
+					</DialogTitle>
+					<DialogContent>
+						<DialogContentText id="alert-dialog-description">
+							{this.state.alertMessage}
+						</DialogContentText>
+					</DialogContent>
+					<DialogActions>
+						<Button onClick={this.handleCloseAlert} color="default">
+							OK
+						</Button>
+					</DialogActions>
+				</Dialog>
 
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.cancelInput} color="default">
-                        Cancel
-                    </Button>
-                    <Button onClick={this.confirmInput} color="default" disabled={!this.isInputValid}>
-                        OK
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </div>)
-    }
+				{/* 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}
+					onClose={this.rejectConfirm}
+					aria-labelledby="alert-dialog-title"
+					aria-describedby="alert-dialog-description"
+				>
+					<DialogTitle
+						id="alert-dialog-title"
+						style={{ minWidth: "300px" }}
+					>
+						Confirm action
+					</DialogTitle>
+					<DialogContent>
+						<DialogContentText id="alert-dialog-description">
+							{this.state.confirmMessage}
+						</DialogContentText>
+					</DialogContent>
+					<DialogActions>
+						<Button onClick={this.rejectConfirm} color="default">
+							Cancel
+						</Button>
+						<Button onClick={this.acceptConfirm} color="default">
+							Confirm
+						</Button>
+					</DialogActions>
+				</Dialog>
+
+				{/* Text input dialog */}
+				<Dialog
+					open={this.state.showInputDialog}
+					onClose={this.rejectConfirm}
+					aria-labelledby="alert-dialog-title"
+					aria-describedby="alert-dialog-description"
+				>
+					<DialogTitle id="alert-dialog-title">
+						{this.state.inputOptions.title ||
+							this.state.inputOptions.label}
+					</DialogTitle>
+					<DialogContent>
+						{this.state.inputOptions.message ? (
+							<DialogContentText id="alert-dialog-description">
+								{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}
+						>
+							OK
+						</Button>
+					</DialogActions>
+				</Dialog>
+			</div>
+		);
+	}
 }
 
 export function matAlert(msg: string) {
-    cache.showAlert(msg);
+	cache.showAlert(msg);
 }
 
-export function matConfirm(msg: string) : Promise<boolean> {
-    return cache.showConfirm(msg);
+export function snackbar(msg: string) {
+	cache.showSnackbar(msg);
 }
 
-export function input(options: TextInputOptions) : Promise<string> {
-    return cache.showInput(options);
+export function matConfirm(msg: string): Promise<boolean> {
+	return cache.showConfirm(msg);
+}
+
+export function input(options: TextInputOptions): Promise<string> {
+	return cache.showInput(options);
 }