Group details page and integrated with the hosted veda-auth-central

veda-auth-portal/package.json

@@ -21,10 +21,12 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-oidc-context": "^3.1.0",
-    "react-router-dom": "^6.26.1"
+    "react-router-dom": "^6.26.1",
+    "react-tag-input-component": "^2.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@types/node": "^22.5.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

veda-auth-portal/src/App.tsx

@@ -1,7 +1,6 @@
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
 import { Heading } from '@chakra-ui/react';
 import { Groups } from './components/Groups';
-import './App.css';
 import { NavContainer } from './components/NavContainer';
 import { GroupDetails } from './components/Groups/GroupDetails';
 import { Login } from './components/Login';
@@ -25,7 +24,7 @@ export default function App() {
         <Route path="/" element={<Login />} />
           <Route path="/applications" element={<ProtectedComponent Component={NotImplemented}  />} />
           <Route path="/users" element={<ProtectedComponent Component={NotImplemented}  />} />
-          <Route path="/groups/:id" element={<ProtectedComponent Component={GroupDetails}  />} />
+          <Route path="/groups/:id/:path" element={<ProtectedComponent Component={GroupDetails}  />} />
           <Route path="/groups" element={<ProtectedComponent Component={Groups}  />} />
       </Routes>
     </BrowserRouter>

veda-auth-portal/src/components/Groups/AddGroupMemberModal.tsx

@@ -0,0 +1,122 @@
+import {
+    useToast,
+    Button, Input, Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton, FormControl,
+    FormLabel,
+    Stack,
+    Select
+} from "@chakra-ui/react";
+import { BACKEND_URL } from "../../lib/constants";
+import axios, { AxiosResponse } from "axios";
+import React from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
+
+  export const AddGroupMemberModal = ({
+    groupId,
+    isOpen,
+    onClose,
+  }: {
+    groupId: string | undefined;
+    isOpen: boolean;
+    onClose: () => void;
+  }) => {
+    const toast = useToast();
+    const [newEmail, setNewEmail] = React.useState("");
+    const [newRole, setNewRole] = React.useState("MEMBER");
+    const auth = useAuth();
+    const navigate = useNavigate();
+
+    const handleAddMember = async () => {
+      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+
+      if (!emailRegex.test(newEmail)) {
+        toast({
+          title: "Invalid email",
+          status: "error",
+          duration: 2000,
+          isClosable: true,
+        });
+        return;
+      }
+
+      const resp = await axios
+        .post(
+          `${BACKEND_URL}/api/v1/group-management/groups/${groupId}/members`,
+          {
+            username: newEmail,
+            type: newRole,
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${auth.user?.access_token}`,
+            },
+          }
+        )
+        .catch((error) => {
+          toast({
+            title: "Error adding member",
+            description: error.response.data.error,
+            status: "error",
+            duration: 2000,
+            isClosable: true,
+          });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }) as AxiosResponse<any, any>;
+
+      if (resp.status > 199 && resp.status < 300) {
+        onClose();
+        navigate(0);
+      }
+    };
+
+    return (
+      <>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Add Member</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Stack spacing={4}>
+                <FormControl>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    type="email"
+                    placeholder="[email protected]"
+                    value={newEmail}
+                    onChange={(e) => setNewEmail(e.target.value)}
+                  />
+                </FormControl>
+
+                <FormControl>
+                  <FormLabel>Role</FormLabel>
+                  <Select
+                    value={newRole}
+                    onChange={(e) => setNewRole(e.target.value)}
+                  >
+                    <option value="MEMBER">Member</option>
+                    <option value="OWNER">Owner</option>
+                    <option value="ADMIN">ADMIN</option>
+                  </Select>
+                </FormControl>
+
+                <Button colorScheme="blue" onClick={handleAddMember}>
+                  Add
+                  {newEmail && newRole ? ` ${newEmail} as ${newRole}` : ""}
+                </Button>
+              </Stack>
+            </ModalBody>
+
+            <ModalFooter />
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  };
+