Merge pull request #685 from userlocalhost/fixed/new-ui/edit-user-password

(WIP) changed to use TextField instad of Input component at EditUserPage

Author: userlocalhost

frontend/src/components/user/UserPasswordFormModal.tsx

@@ -1,11 +1,18 @@
-import { Box, Button, Input, Modal, Theme, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  TextField,
+  Modal,
+  Theme,
+  Typography,
+} from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import React, { FC, useMemo, useState } from "react";
 import { useHistory } from "react-router-dom";
 
 import { DjangoContext } from "../../utils/DjangoContext";
 
-import { topPath, usersPath } from "Routes";
+import { loginPath, topPath, usersPath } from "Routes";
 import {
   updateUserPassword,
   updateUserPasswordAsSuperuser,
@@ -32,6 +39,7 @@ const useStyles = makeStyles<Theme>((theme) => ({
     color: "#90A4AE",
   },
   passwordFieldInput: {
+    width: "100%",
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
   },
@@ -60,12 +68,20 @@ export const UserPasswordFormModal: FC<Props> = ({
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [checkPassword, setCheckPassword] = useState("");
+  const [isUnmatch, setIsUnmatch] = useState(false);
 
   const asSuperuser = useMemo(() => {
     return DjangoContext.getInstance().user.isSuperuser;
   }, []);
 
   const handleSubmit = async () => {
+    if (newPassword != checkPassword) {
+      // abort to submit password
+      setIsUnmatch(true);
+
+      return;
+    }
+
     if (asSuperuser) {
       await updateUserPasswordAsSuperuser(userId, newPassword, checkPassword);
     } else {
@@ -75,8 +91,12 @@ export const UserPasswordFormModal: FC<Props> = ({
     // This calls event handler, which is specified by caller component
     onSubmit();
 
-    history.replace(topPath());
-    history.replace(usersPath());
+    if (DjangoContext.getInstance().user.id == userId) {
+      history.replace(loginPath());
+    } else {
+      history.replace(topPath());
+      history.replace(usersPath());
+    }
   };
 
   return (
@@ -91,8 +111,9 @@ export const UserPasswordFormModal: FC<Props> = ({
                 今まで使用していたパスワードをご入力ください。
               </label>
             </Box>
-            <Input
+            <TextField
               className={classes.passwordFieldInput}
+              variant={"standard"}
               type="password"
               placeholder="Old password"
               value={oldPassword}
@@ -107,8 +128,9 @@ export const UserPasswordFormModal: FC<Props> = ({
               新しいパスワードをご入力ください。
             </label>
           </Box>
-          <Input
+          <TextField
             className={classes.passwordFieldInput}
+            variant={"standard"}
             type="password"
             placeholder="New password"
             value={newPassword}
@@ -121,17 +143,32 @@ export const UserPasswordFormModal: FC<Props> = ({
               確認のためもう一度、新しいパスワードをご入力ください。
             </label>
           </Box>
-          <Input
+          <TextField
+            error={isUnmatch}
             className={classes.passwordFieldInput}
+            variant={"standard"}
             type="password"
             placeholder="Confirm new password"
             value={checkPassword}
-            onChange={(e) => setCheckPassword(e.target.value)}
+            helperText={
+              isUnmatch ? "新しいパスワードと、入力内容が一致しません" : ""
+            }
+            onChange={(e) => {
+              setCheckPassword(e.target.value);
+              setIsUnmatch(false);
+            }}
           />
         </Box>
 
         <Box className={classes.buttons}>
           <Button
+            disabled={
+              (asSuperuser && (!newPassword.length || !checkPassword.length)) ||
+              (!asSuperuser &&
+                (!oldPassword.length ||
+                  !newPassword.length ||
+                  !checkPassword.length))
+            }
             type="submit"
             variant="contained"
             color="secondary"