496: Add ChangePasswordDialog

* Update buildPasswordValidation to take username param
* Add selectedUser state
* Some styling

Author: carrollsa

src/client/src/pages/UserManagement/Components/Dialog/ChangePasswordDialog.jsx

@@ -0,0 +1,94 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from '@material-ui/core';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+import { updateUser } from "../../../../utils/api";
+import { buildPasswordValidation } from '../../Validations';
+
+
+export default function ChangePasswordDialog(props) {
+    const { onClose, notifyResult, token, user } = props;
+    const { username } = user;
+
+    const validationSchema = Yup.object().shape({
+        password: buildPasswordValidation(username),
+        confirmPassword: Yup.string().oneOf([Yup.ref("password")], "Passwords must match"),
+    });
+
+    const { register, handleSubmit, formState: { errors }, trigger } = useForm({
+        resolver: yupResolver(validationSchema),
+    });
+
+    const onSubmitHandler = (data) => {
+        const { password } = data;
+
+        updateUser({ username, password }, token)
+            .then((res) => {
+                if (res === "Updated") {
+                    notifyResult({ success: true, message: `Password for user ${username} successfully changed!` });
+                } else {
+                    notifyResult({ success: false, message: res });
+                }
+            })
+            .catch(e => {
+                console.warn(e)
+                notifyResult({ success: false, message: e })
+            });
+        onClose();
+    }
+
+    return (
+        <Dialog
+            hideBackdrop
+            fullWidth
+            open
+        >
+            <DialogTitle style={{ fontSize: "20px" }}>Change Password</DialogTitle>
+            <form onSubmit={handleSubmit(onSubmitHandler)}>
+                <DialogContent>
+                    <Typography>
+                        {`Fill out the fields below to update the password for user with username: ${user.username}.`}
+                    </Typography>
+                    <TextField
+                        {...register("password")}
+                        margin="dense"
+                        id="password-input"
+                        label="Password"
+                        onBlur={() => trigger("password")}
+                        type="password"
+                        fullWidth
+                    />
+                    {errors.password &&
+                        <Typography color="error">{errors.password.message}</Typography>
+                    }
+                    <TextField
+                        {...register("confirmPassword")}
+                        margin="dense"
+                        id="confirm-password-input"
+                        label="Confirm Password"
+                        onBlur={() => trigger("confirmPassword")}
+                        type="password"
+                        fullWidth
+                    />
+                    {errors.confirmPassword &&
+                        <Typography color="error">{errors.confirmPassword.message}</Typography>
+                    }
+                    <DialogActions>
+                        <Button
+                            onClick={onClose}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            type="submit"
+                        >
+                            Submit
+                        </Button>
+                    </DialogActions>
+                </DialogContent>
+            </form>
+        </Dialog>
+    )
+
+}

src/client/src/pages/UserManagement/Components/Dialog/NewUserDialog.jsx

@@ -19,7 +19,7 @@ export default function NewUserDialog(props) {
         confirmPassword: Yup.string().oneOf([Yup.ref("password")], "Passwords must match"),
     });
 
-    const { register, handleSubmit, formState: { errors }, reset, trigger } = useForm({
+    const { register, handleSubmit, formState: { errors }, trigger } = useForm({
         resolver: yupResolver(validationSchema),
     });
 

src/client/src/pages/UserManagement/Components/Dialog/UserDialog.jsx

@@ -1,12 +1,21 @@
 import React from 'react';
+import ChangePasswordDialog from './ChangePasswordDialog';
 import NewUserDialog from './NewUserDialog';
 
 export const DialogTypes = {
     NewUser: 'new-user',
+    ChangePassword: 'change-password',
 }
 
 export default function UserDialog(props) {
-    const { notifyResult, onClose, type, token, updateUsers } = props;
+    const {
+        notifyResult,
+        onClose,
+        selectedUser,
+        type,
+        token,
+        updateUsers
+    } = props;
 
     switch (type) {
         case DialogTypes.NewUser:
@@ -16,9 +25,16 @@ export default function UserDialog(props) {
                     onClose={onClose}
                     token={token}
                     updateUsers={updateUsers}
-                >
-                    "Hello"
-                </NewUserDialog>
+                />
+            )
+        case DialogTypes.ChangePassword:
+            return (
+                <ChangePasswordDialog
+                    notifyResult={notifyResult}
+                    onClose={onClose}
+                    user={selectedUser}
+                    token={token}
+                />
             )
         default:
             return null

src/client/src/pages/UserManagement/Components/UserRow.jsx

@@ -4,9 +4,11 @@ import {
     TableRow
 } from "@material-ui/core";
 import React from 'react';
+import { DialogTypes } from "./Dialog/UserDialog";
 
 export default function UserRow(props) {
     const { active, full_name: fullName, role, username } = props.user;
+    const openDialog = props.openDialog;
 
     return (
         <TableRow>
@@ -16,7 +18,12 @@ export default function UserRow(props) {
             <TableCell>{active === 'Y' ? 'Yes' : 'No'}</TableCell>
             <TableCell>
                 <Button>
-                    Update
+                    Update User
+                </Button>
+            </TableCell>
+            <TableCell>
+                <Button onClick={() => openDialog({ type: DialogTypes.ChangePassword, user: props.user })}>
+                    Change Password
                 </Button>
             </TableCell>
         </TableRow>

src/client/src/pages/UserManagement/UserManagement.jsx

@@ -25,6 +25,7 @@ export default function UserManagement(props) {
     const [resultBanner, setResultBanner] = React.useState(undefined);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [dialogType, setDialogType] = React.useState(undefined)
+    const [selectedUser, setSelectedUser] = React.useState(undefined);
     const { access_token: token } = props;
 
     React.useEffect(() => {
@@ -63,13 +64,15 @@ export default function UserManagement(props) {
     }
 
     const openDialog = (opts) => {
+        setSelectedUser(opts.user);
         setDialogType(opts.type);
         setDialogOpen(true);
     }
 
     const closeDialog = () => {
         setDialogOpen(false);
         setDialogType(null);
+        setSelectedUser(null);
     }
 
     return (
@@ -112,11 +115,12 @@ export default function UserManagement(props) {
                                 <TableCell>Role</TableCell>
                                 <TableCell>Active</TableCell>
                                 <TableCell></TableCell>
+                                <TableCell></TableCell>
                             </TableRow>
                         </TableHead>
                         <TableBody>
                             {_.map(users, user => {
-                                return <UserRow user={user} key={user.username} />
+                                return <UserRow user={user} openDialog={openDialog} key={user.username} />
                             })}
                         </TableBody>
                     </Table>
@@ -126,6 +130,7 @@ export default function UserManagement(props) {
                 <UserDialog
                     notifyResult={notifyResult}
                     onClose={closeDialog}
+                    selectedUser={selectedUser}
                     token={token}
                     type={dialogType}
                     updateUsers={updateUsers}

src/client/src/pages/UserManagement/Validations.js

@@ -28,7 +28,7 @@ export const buildRoleValidation = () => {
         .required("Role is required")
 }
 
-export const buildPasswordValidation = () => {
+export const buildPasswordValidation = (username) => {
     return Yup.string()
         .test(
             "no-disallowed-words",
@@ -39,7 +39,7 @@ export const buildPasswordValidation = () => {
                 }
 
                 const lowercasePassword = value.toLowerCase();
-                const lowercaseUsername = context.parent.username.toLowerCase()
+                const lowercaseUsername = username || context.parent.username.toLowerCase()
                 return [...DISALLOWED_WORDS, lowercaseUsername].every((word) => !lowercasePassword.includes(word))
             })
         .min(12, "Password must contain at least 12 letters")

src/client/src/utils/api.js

@@ -16,7 +16,7 @@ export const fetchUsers = async ({ token }) => {
 }
 
 export const createUser = async (userData, token) => {
-    const api = "/api/admin/user/create"
+    const api = "/api/admin/user/create";
     const requestOptions = {
         method: 'POST',
         headers: {
@@ -25,6 +25,24 @@ export const createUser = async (userData, token) => {
         body: JSON.stringify(userData)
     };
 
+    return fetch(api, requestOptions)
+        .then((res) => res.json())
+        .catch((e) => {
+            console.warn(e)
+            throw new Error(e);
+        })
+}
+
+export const updateUser = async (userData, token) => {
+    const api = "/api/admin/user/update";
+    const requestOptions = {
+        method: 'POST',
+        headers: {
+            'Authorization': 'Bearer ' + token
+        },
+        body: JSON.stringify(userData)
+    }
+
     return fetch(api, requestOptions)
         .then((res) => res.json())
         .catch((e) => {