ionian/packages/client/src/page/profile.tsx

import {
	Button,
	Chip,
	Dialog,
	DialogActions,
	DialogContent,
	DialogContentText,
	DialogTitle,
	Divider,
	Grid,
	Paper,
	TextField,
	Theme,
	Typography,
} from "@mui/material";
import React, { useContext, useState } from "react";
import { CommonMenuList, Headline } from "../component/mod";
import { UserContext } from "../state";
import { PagePad } from "../component/pagepad";

const useStyles = (theme: Theme) => ({
	paper: {
		alignSelf: "center",
		padding: theme.spacing(2),
	},
	formfield: {
		display: "flex",
		flexFlow: "column",
	},
});

export function ProfilePage() {
	const userctx = useContext(UserContext);
	// const classes = useStyles();
	const menu = CommonMenuList();
	const [pw_open, set_pw_open] = useState(false);
	const [oldpw, setOldpw] = useState("");
	const [newpw, setNewpw] = useState("");
	const [newpwch, setNewpwch] = useState("");
	const [msg_dialog, set_msg_dialog] = useState({ opened: false, msg: "" });
	const permission_list = userctx.permission.map((p) => <Chip key={p} label={p}></Chip>);
	const isElectronContent = ((window["electron"] as any) !== undefined) as boolean;
	const handle_open = () => set_pw_open(true);
	const handle_close = () => {
		set_pw_open(false);
		setNewpw("");
		setNewpwch("");
	};
	const handle_ok = async () => {
		if (newpw != newpwch) {
			set_msg_dialog({ opened: true, msg: "password and password check is not equal." });
			handle_close();
			return;
		}
		if (isElectronContent) {
			const elec = window["electron"] as any;
			const success = elec.passwordReset(userctx.username, newpw);
			if (!success) {
				set_msg_dialog({ opened: true, msg: "user not exist." });
			}
		} else {
			const res = await fetch("/user/reset", {
				method: "POST",
				body: JSON.stringify({
					username: userctx.username,
					oldpassword: oldpw,
					newpassword: newpw,
				}),
				headers: {
					"content-type": "application/json",
				},
			});
			if (res.status != 200) {
				set_msg_dialog({ opened: true, msg: "failed to change password." });
			}
		}
		handle_close();
	};
	return (
		<Headline menu={menu}>
			<PagePad>
				<Paper /*className={classes.paper}*/>
					<Grid container direction="column" alignItems="center">
						<Grid item>
							<Typography variant="h4">{userctx.username}</Typography>
						</Grid>
						<Divider></Divider>
						<Grid item>Permission</Grid>
						<Grid item>{permission_list.length == 0 ? "-" : permission_list}</Grid>
						<Grid item>
							<Button onClick={handle_open}>Password Reset</Button>
						</Grid>
					</Grid>
				</Paper>
				<Dialog open={pw_open} onClose={handle_close}>
					<DialogTitle>Password Reset</DialogTitle>
					<DialogContent>
						<Typography>type the old and new password</Typography>
						<div /*className={classes.formfield}*/>
							{!isElectronContent && (
								<TextField
									autoFocus
									margin="dense"
									type="password"
									label="old password"
									value={oldpw}
									onChange={(e) => setOldpw(e.target.value)}
								></TextField>
							)}
							<TextField
								margin="dense"
								type="password"
								label="new password"
								value={newpw}
								onChange={(e) => setNewpw(e.target.value)}
							></TextField>
							<TextField
								margin="dense"
								type="password"
								label="new password check"
								value={newpwch}
								onChange={(e) => setNewpwch(e.target.value)}
							></TextField>
						</div>
					</DialogContent>
					<DialogActions>
						<Button onClick={handle_close} color="primary">
							Cancel
						</Button>
						<Button onClick={handle_ok} color="primary">
							Ok
						</Button>
					</DialogActions>
				</Dialog>
				<Dialog open={msg_dialog.opened} onClose={() => set_msg_dialog({ opened: false, msg: "" })}>
					<DialogTitle>Alert!</DialogTitle>
					<DialogContent>
						<DialogContentText>{msg_dialog.msg}</DialogContentText>
					</DialogContent>
					<DialogActions>
						<Button onClick={() => set_msg_dialog({ opened: false, msg: "" })} color="primary">
							Close
						</Button>
					</DialogActions>
				</Dialog>
			</PagePad>
		</Headline>
	);
}