Add RegistrationKeyDetailsModal

Author: NicoBiernat

src/contexts/api/auth/AuthContext.tsx

@@ -117,6 +117,9 @@ export interface AuthContextValue {
 
   /** Deletes a registration key */
   deleteRegistrationKey(id: number): Promise<Result<void>>;
+
+  /** Get all users that registered with this registration key */
+  getUsersOfRegistrationKey(id: number): Promise<Result<User[]>>;
 }
 
 export const AuthContext = createContext<AuthContextValue>({
@@ -155,6 +158,8 @@ export const AuthContext = createContext<AuthContextValue>({
     errorResult('No auth context for updating registration key'),
   deleteRegistrationKey: async () =>
     errorResult('No auth context for deleting registration key'),
+  getUsersOfRegistrationKey: async () =>
+    errorResult('No auth context for fetching users of registration key'),
 });
 
 interface AuthContextProviderProps {
@@ -521,6 +526,18 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
           );
         }
       },
+
+      async getUsersOfRegistrationKey(id) {
+        try {
+          const apiUsersResponse =
+            await apiRef.current.registrationKeys.usersDetail(id);
+          return okResult(apiUsersResponse.data.map(convert.userFromApi));
+        } catch (error) {
+          return errorResult(
+            `Fetching users of role with id ${id} failed: ${await formatError(error)}`
+          );
+        }
+      },
     }),
     [apiRef, apiUser?.id, isInitialized, token, updateToken, user]
   );

src/modals/RegistrationKeyDetailsModal.tsx

@@ -0,0 +1,112 @@
+import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
+import {
+  newUninitializedRegistrationKey,
+  RegistrationKey,
+  User,
+} from '@luna/contexts/api/auth/types';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@heroui/react';
+import { useContext, useEffect, useState } from 'react';
+
+export interface RegistrationKeyShowModalProps {
+  id: number;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function RegistrationKeyDetailsModal({
+  id,
+  isOpen,
+  setOpen,
+}: RegistrationKeyShowModalProps) {
+  const [regKey, setRegKey] = useState<RegistrationKey>(
+    newUninitializedRegistrationKey()
+  );
+  const [users, setUsers] = useState<User[]>([]);
+  const auth = useContext(AuthContext);
+
+  // initialize modal state
+  useEffect(() => {
+    if (!isOpen) return;
+    const fetchRegistrationKey = async () => {
+      const regKeyResult = await auth.getRegistrationKeyById(id);
+      if (regKeyResult.ok) {
+        setRegKey(regKeyResult.value);
+      } else {
+        console.log('Failed to fetch registration key:', regKeyResult.error);
+        setRegKey(newUninitializedRegistrationKey());
+      }
+      const usersResult = await auth.getUsersOfRegistrationKey(id);
+      if (usersResult.ok) {
+        setUsers(usersResult.value);
+      } else {
+        console.log(
+          'Failed to fetch users of registration key:',
+          usersResult.error
+        );
+        setRegKey(newUninitializedRegistrationKey());
+      }
+    };
+    fetchRegistrationKey();
+  }, [auth, id, isOpen]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setOpen}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader>Registration Key</ModalHeader>
+            <ModalBody>
+              <Input label="ID" value={id.toString()} isDisabled />
+              <Input label="Key" value={regKey.key} />
+              <Input label="Description" value={regKey.description} />
+              <Input
+                label="Expires At"
+                value={regKey.expiresAt.toLocaleString()}
+              />
+              <Checkbox isSelected={regKey.permanent}>
+                Permanent Registration Key
+              </Checkbox>
+              Users:
+              <Table>
+                <TableHeader>
+                  <TableColumn key="id" allowsSorting>
+                    ID
+                  </TableColumn>
+                  <TableColumn key="id" allowsSorting>
+                    Username
+                  </TableColumn>
+                </TableHeader>
+                <TableBody items={users}>
+                  {user => (
+                    <TableRow key={user.username}>
+                      <TableCell>{user.id}</TableCell>
+                      <TableCell>{user.username}</TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </ModalBody>
+            <ModalFooter>
+              <Button onPress={onClose}>Cancel</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

src/screens/home/admin/RegistrationKeysView.tsx

@@ -22,6 +22,7 @@ import { useCallback, useContext, useState } from 'react';
 import { RegistrationKeyAddModal } from '@luna/modals/RegistrationKeyAddModal';
 import { RegistrationKeyDeleteModal } from '@luna/modals/RegistrationKeyDeleteModal';
 import { RegistrationKeyEditModal } from '@luna/modals/RegistrationKeyEditModal';
+import { RegistrationKeyDetailsModal } from '@luna/modals/RegistrationKeyDetailsModal';
 
 export function RegistrationKeysView() {
   const auth = useContext(AuthContext);
@@ -81,6 +82,11 @@ export function RegistrationKeysView() {
         setOpen={setShowKeyAddModal}
         onSuccess={onSuccess}
       />
+      <RegistrationKeyDetailsModal
+        id={keyId}
+        isOpen={showKeyDetailsModal}
+        setOpen={setShowKeyDetailsModal}
+      />
       <RegistrationKeyEditModal
         id={keyId}
         isOpen={showKeyEditModal}