User Management UI

clients/admin-ui/src/features/user-management/NewUserForm.tsx

@@ -15,6 +15,7 @@ import {
   Input,
   Stack,
   Text,
+  useToast,
 } from '@fidesui/react';
 import config from './config/config.json';
 import {
@@ -31,6 +32,7 @@ const useUserForm = () => {
   const [updateUserPermissions, updateUserPermissionsResult] =
     useUpdateUserPermissionsMutation();
   const router = useRouter();
+  const toast = useToast();
 
   const formik = useFormik({
     initialValues: {
@@ -53,27 +55,39 @@ const useUserForm = () => {
         password: values.password,
       };
 
-      await createUser(userBody)
-        .then((result) => {
-          const userWithPrivileges = {
-            id: 'data' in result ? result.data.id : null,
-            scopes: [...values.scopes, 'privacy-request:read'],
-          };
+      const { error: createUserError, data } = await createUser(userBody);
 
-          return userWithPrivileges;
-        })
-        .then((result) => {
-          const permissionsToAddToUser = updateUserPermissions(
-            result as { id: string }
-          );
+      if (createUserError) {
+        toast({
+          status: 'error',
+          description: createUserError.data.detail.length
+            ? `${createUserError.data.detail[0].msg}`
+            : 'An unexpected error occurred. Please try again.',
+        });
+        return;
+      }
+
+      if (createUserError && createUserError.status == 422) {
+        toast({
+          status: 'error',
+          description: createUserError.data.detail.length
+            ? `${createUserError.data.detail[0].msg}`
+            : 'An unexpected error occurred. Please try again.',
+        });
+      }
+
+      const userWithPrivileges = {
+        id: data ? data.id : null,
+        scopes: [...values.scopes, 'privacy-request:read'],
+      };
+
+      const { error: updatePermissionsError } = await updateUserPermissions(
+        userWithPrivileges as { id: string }
+      );
 
-          return permissionsToAddToUser;
-        })
-        .then((result) => {
-          router.replace('/user-management');
-          return result;
-        })
-        .catch((error) => console.log('ERROR', error));
+      if (!updatePermissionsError) {
+        router.push('/user-management');
+      }
     },
     validate: (values) => {
       const errors: {
@@ -91,7 +105,25 @@ const useUserForm = () => {
         errors.password = 'Password is required';
       }
 
-      // 422 password validation
+      if (values.password.length < 8) {
+        errors.password = 'Password must have at least eight characters.';
+      }
+
+      if (!/[0-9]/.test(values.password)) {
+        errors.password = 'Password must have at least one number.';
+      }
+
+      if (!/[A-Z]/.test(values.password)) {
+        errors.password = 'Password must have at least one capital letter.';
+      }
+
+      if (!/[a-z]/.test(values.password)) {
+        errors.password = 'Password must have at least one lowercase letter.';
+      }
+
+      if (!/[\W]/.test(values.password)) {
+        errors.password = 'Password must have at least one symbol.';
+      }
 
       return errors;
     },
@@ -246,7 +278,7 @@ const UserForm: NextPage = () => {
             _hover={{ bg: 'primary.400' }}
             _active={{ bg: 'primary.500' }}
             colorScheme="primary"
-            disabled={!(isValid && dirty)}
+            // disabled={!(isValid && dirty)}
             size="sm"
           >
             Save

clients/admin-ui/src/features/user-management/UpdatePasswordModal.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  Input,
+  MenuItem,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useDisclosure,
+} from '@fidesui/react';
+
+import { User } from '../user/types';
+import { useUpdatePasswordMutation } from '../user/user.slice';
+
+function UpdatePasswordModal(user: User) {
+  const [oldPasswordValue, setOldPasswordValue] = useState('');
+  const [newPasswordValue, setNewPasswordValue] = useState('');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [changePassword, changePasswordResult] = useUpdatePasswordMutation();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.name === 'username') {
+      setUsernameValue(event.target.value);
+    } else {
+      setConfirmValue(event.target.value);
+    }
+  };
+
+  const deletionValidation =
+    user.id &&
+    confirmValue &&
+    usernameValue &&
+    user.username === usernameValue &&
+    user.username === confirmValue
+      ? true
+      : false;
+
+  const handleDeleteUser = () => {
+    if (deletionValidation && user.id) {
+      deleteUser(user.id);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <MenuItem
+        _focus={{ color: 'complimentary.500', bg: 'gray.100' }}
+        onClick={onOpen}
+      >
+        <Text fontSize="sm">Update Password</Text>
+      </MenuItem>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Update Password</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <Stack direction={'column'} spacing="15px">
+              <FormControl>
+                <Input
+                  isRequired
+                  name="oldPassword"
+                  onChange={handleChange}
+                  placeholder="Old Password"
+                  value={usernameValue}
+                />
+              </FormControl>
+              <FormControl>
+                <Input
+                  isRequired
+                  name="newPassword"
+                  onChange={handleChange}
+                  placeholder="New Password"
+                  value={confirmValue}
+                />
+              </FormControl>
+            </Stack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              onClick={onClose}
+              marginRight={'10px'}
+              size={'sm'}
+              variant={'solid'}
+              bg="white"
+              width={'50%'}
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={!passwordValidation}
+              onClick={handleChangePassword}
+              mr={3}
+              size={'sm'}
+              variant="solid"
+              bg="primary.800"
+              color="white"
+              width={'50%'}
+            >
+              Change Password
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default UpdatePasswordModal;