Created the AddUser button on the Dashboard page (#23)

* Created the AddUser button on the Dashboard page

* resolved comments

* tried debugging, but keeping getting promise error

* fix: Promise error

---------

Co-authored-by: Lucas Ha <[email protected]>
Co-authored-by: miguel-merlin <[email protected]>

README.md

@@ -1,7 +1,6 @@
 # Blueprint Admin
 ## Overview
 React Web Application that will serve as an admin dashboard to manage members, and permission of Stevens Blueprint. The main purpose of the web application is to provide a tool for the Blueprint eboard to manage Blueprint members and display statistics about them. Stevens Blueprint uses Authelia as SSO, therefore to log in members should be signed in. 
-
 ## Features
 The Blueprint Admin will provide means for Blueprint members to do the following:
 

src/components/CreateUserButton.tsx

@@ -0,0 +1,119 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  useDisclosure,
+  Alert,
+  AlertIcon
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+function CreateUserButton ({
+  setDisplaySuccess
+}: {
+  displaySuccess: boolean
+  setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>>
+}): JSX.Element {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const initialRef = React.useRef(null)
+  const finalRef = React.useRef(null)
+  const [formData, setFormData] = useState({ email: '', roles: '' })
+  const [displayError, setDisplayError] = useState(false)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    event.preventDefault()
+    console.log('Form submitted', formData)
+
+    const simulateApiCall = async (): Promise<void> => {
+      await new Promise<void>((resolve, reject) => {
+        const apiState = true
+        if (!apiState) {
+          reject(new Error('API call failed'))
+        } else {
+          resolve()
+        }
+      })
+    }
+    simulateApiCall()
+      .then(() => {
+        setDisplaySuccess(true)
+        onClose()
+      })
+      .catch((error) => {
+        setDisplayError(true)
+        console.error(error)
+      })
+  }
+
+  return (
+    <>
+      <Button onClick={onOpen} colorScheme="blue">
+        Add Users
+      </Button>
+
+      <Modal
+        initialFocusRef={initialRef}
+        finalFocusRef={finalRef}
+        isOpen={isOpen}
+        onClose={onClose}
+        isCentered
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Add User</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            {displayError && (
+              <Alert status="error">
+                <AlertIcon />
+                Request failed
+              </Alert>
+            )}
+            <FormControl>
+              <FormLabel>Email</FormLabel>
+              <Input
+                name="email"
+                placeholder="Email"
+                ref={initialRef}
+                onChange={handleChange}
+                value={formData.email}
+              />
+            </FormControl>
+
+            <FormControl mt={4}>
+              <FormLabel>Roles</FormLabel>
+              <Input
+                name="roles"
+                placeholder="Roles"
+                onChange={handleChange}
+                value={formData.roles}
+              />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={handleSubmit}>
+              Accept
+            </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default CreateUserButton

src/pages/DashboardPage.tsx

@@ -0,0 +1,26 @@
+import CreateUserButton from '../components/CreateUserButton'
+import { Alert, AlertIcon, VStack, Flex, Spacer } from '@chakra-ui/react'
+import { useState } from 'react'
+
+function DashboardPage (): JSX.Element {
+  const [displaySuccess, setDisplaySuccess] = useState(false)
+  return (
+    <VStack align="stretch" >
+      <Flex>
+      <Spacer/>
+      <CreateUserButton displaySuccess={displaySuccess} setDisplaySuccess={setDisplaySuccess} />
+      </Flex>
+      {displaySuccess && (
+       <Flex>
+        <Spacer/>
+        <Alert status="success" justifyContent="center" height="50px" width = "200px" alignItems="right">
+          <AlertIcon/>
+          Request success
+        </Alert>
+        </Flex>
+      )}
+    </VStack>
+  )
+}
+
+export default DashboardPage