496: Handle createUserResponse

* Add banner to UserManagement
* Add response within dialog when user is duplicate

Author: carrollsa

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

@@ -8,7 +8,8 @@ import { buildNameValidation, buildPasswordValidation, buildRoleValidation, buil
 
 
 export default function NewUserDialog(props) {
-    const { onClose, token } = props;
+    const [responseError, setResponseError] = React.useState(undefined);
+    const { onClose, notifyResult, token } = props;
 
     const validationSchema = Yup.object().shape({
         name: buildNameValidation(),
@@ -18,11 +19,13 @@ export default function NewUserDialog(props) {
         confirmPassword: Yup.string().oneOf([Yup.ref("password")], "Passwords must match"),
     });
 
-    const { register, handleSubmit, formState: { errors }, reset } = useForm({
+    const { register, handleSubmit, formState: { errors }, reset, trigger } = useForm({
         resolver: yupResolver(validationSchema),
     });
 
     const onSubmitHandler = (data) => {
+        setResponseError(null);
+
         const { username, name: full_name, role, password } = data;
 
         createUser({
@@ -31,6 +34,15 @@ export default function NewUserDialog(props) {
             role,
             password
         }, token)
+            .then((res) => {
+                if (res.indexOf("duplicate key") > -1) {
+                    setResponseError(`User with username ${username} already exists`)
+                } else {
+                    notifyResult({ success: true, message: `New user ${res} created successfully` });
+                    onClose();
+                }
+            })
+            .catch(e => console.warn(e))
     }
 
     return (
@@ -64,8 +76,8 @@ export default function NewUserDialog(props) {
                         variant="standard"
                         fullWidth
                     />
-                    {errors.username &&
-                        <Typography color="error">{errors.username.message}</Typography>
+                    {(responseError || errors.username) && // This is a little janky... Could be improved upon.
+                        <Typography color="error">{responseError || errors.username.message}</Typography>
                     }
                     <TextField
                         {...register("role")}

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

@@ -6,12 +6,13 @@ export const DialogTypes = {
 }
 
 export default function UserDialog(props) {
-    const { onClose, type, token } = props;
+    const { onClose, type, notifyResult, token } = props;
 
     switch (type) {
         case DialogTypes.NewUser:
             return (
                 <NewUserDialog
+                    notifyResult={notifyResult}
                     onClose={onClose}
                     token={token}
                     open

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

@@ -12,6 +12,7 @@ import {
     TableRow,
     Typography
 } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
 import _ from 'lodash';
 import React from 'react';
 import { fetchUsers } from '../../utils/api';
@@ -21,6 +22,7 @@ import UserRow from './Components/UserRow';
 export default function UserManagement(props) {
     const [users, setUsers] = React.useState(undefined);
     const [isLoading, setIsLoading] = React.useState(undefined);
+    const [resultBanner, setResultBanner] = React.useState(undefined);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [dialogType, setDialogType] = React.useState(undefined)
     const { access_token: token } = props;
@@ -34,6 +36,16 @@ export default function UserManagement(props) {
         setIsLoading(false);
     }, [token]);
 
+    const notifyResult = ({ success, message }) => {
+        setResultBanner({ success, message });
+
+        if (success) {
+            setTimeout(() => {
+                setResultBanner(null);
+            }, 5000)
+        }
+    }
+
     const openDialog = (opts) => {
         setDialogType(opts.type);
         setDialogOpen(true);
@@ -63,6 +75,12 @@ export default function UserManagement(props) {
                     </Button>
                 </Grid>
             </Grid >
+            {resultBanner &&
+                <Alert onClose={() => setResultBanner(null)} severity={resultBanner.success ? "success" : "error"} spacing={2}>
+                    <AlertTitle><Typography variant='h6'>{resultBanner.success ? "Success" : "Error"}</Typography></AlertTitle>
+                    <Typography>{resultBanner.message}</Typography>
+                </Alert>
+            }
             {isLoading &&
                 <Backdrop open={true}>
                     <CircularProgress size={60} />
@@ -90,6 +108,7 @@ export default function UserManagement(props) {
             }
             {dialogOpen &&
                 <UserDialog
+                    notifyResult={notifyResult}
                     onClose={closeDialog}
                     token={token}
                     type={dialogType}

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

@@ -34,6 +34,10 @@ export const buildPasswordValidation = () => {
             "no-disallowed-words",
             "Password cannot include 'dog', 'cat', 'password', or your username",
             (value, context) => {
+                if (!value) {
+                    return true;
+                }
+
                 const lowercasePassword = value.toLowerCase();
                 const lowercaseUsername = context.parent.username.toLowerCase()
                 return [...DISALLOWED_WORDS, lowercaseUsername].every((word) => !lowercasePassword.includes(word))