Add user name change modal

app/routes/et-members.tsx

@@ -166,6 +166,11 @@ export default function () {
     onClose: closeAddMember,
     onOpen: openAddMember,
   } = useDisclosure();
+  const {
+    isOpen: isNameChangeOpen,
+    onClose: closeNameChange,
+    onOpen: openNameChange,
+  } = useDisclosure();
   const isManagement = data.can_manage;
 
   async function updatePoints(id: string, points: number) {
@@ -202,6 +207,72 @@ export default function () {
 
   return (
     <Container maxW="container.lg">
+      <Modal isOpen={isNameChangeOpen} onClose={closeNameChange}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Change Name</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Input
+              maxLength={64}
+              onChange={(e) => setAddingMemberName(e.target.value)}
+              placeholder="New name"
+            />
+          </ModalBody>
+        </ModalContent>
+        <ModalFooter>
+          <Button
+            onClick={() => {
+              setAddingMemberName("");
+              closeNameChange();
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            colorScheme="blue"
+            ml="8px"
+            onClick={async () => {
+              const nameUpdateResp = await fetch(
+                "/api/events-team/team-members/user",
+                {
+                  body: JSON.stringify({
+                    id: currentModalMember,
+                    name: addingMemberName,
+                  }),
+                  headers: {
+                    "content-type": "application/json",
+                  },
+                  method: "PATCH",
+                },
+              );
+
+              const newName = addingMemberName;
+
+              closeNameChange();
+              setAddingMemberName("");
+
+              if (!nameUpdateResp.ok) {
+                toast({
+                  description: "Failed to update name, try again later.",
+                  status: "error",
+                  title: "Error",
+                });
+
+                return;
+              }
+
+              toast({
+                description: `Name changed to ${newName}`,
+                status: "success",
+                title: "Name changed",
+              });
+            }}
+          >
+            Update Name
+          </Button>
+        </ModalFooter>
+      </Modal>
       <Modal
         isOpen={isOpen}
         onClose={() => {
@@ -239,6 +310,7 @@ export default function () {
               </Button>
               <Button
                 colorScheme="blue"
+                ml="8px"
                 onClick={async () =>
                   await updatePoints(currentModalMember, realtimePoints)
                 }