Implement Admin management UI

src/api/auth/types/User.ts

@@ -12,3 +12,25 @@ export interface User {
   permanentApiToken?: boolean;
   registrationKey?: RegistrationKey;
 }
+
+export function newUninitializedUser(): User {
+  return {
+    id: 0,
+    username: '',
+    email: '',
+    roles: [],
+    createdAt: new Date(0),
+    updatedAt: new Date(0),
+    lastSeen: new Date(0),
+    permanentApiToken: false,
+    registrationKey: {
+      id: 0,
+      key: '',
+      description: '',
+      createdAt: new Date(0),
+      updatedAt: new Date(0),
+      expiresAt: new Date(0),
+      permanent: false,
+    },
+  };
+}

src/components/UserAddModal.tsx

@@ -0,0 +1,105 @@
+import { User } from '@luna/api/auth/types';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@nextui-org/react';
+import { useEffect, useState } from 'react';
+
+export interface UserAddModalProps {
+  show: boolean;
+  setShow: (show: boolean) => void;
+}
+
+export function UserAddModal({ show, setShow }: UserAddModalProps) {
+  const [user, setUser] = useState<User>({ username: '' });
+  const [password, setPassword] = useState('');
+
+  // initialize/reset modal state
+  useEffect(() => {
+    setUser({
+      username: '',
+    });
+    setPassword('');
+  }, [show]);
+
+  const addUser = () => {
+    const payload = {
+      username: user.username,
+      password,
+      email: user.email,
+      permanent_api_token: user.permanentApiToken,
+    };
+    console.log('adding user:', payload);
+    // TODO: call POST /users
+    // TODO: feedback from the request (success, error)
+    onOpenChange(false);
+  };
+
+  const onOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      setUser({ username: '' });
+      setPassword('');
+    }
+    setShow(isOpen);
+  };
+
+  return (
+    <Modal isOpen={show} onOpenChange={onOpenChange}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader>Add User</ModalHeader>
+            <ModalBody>
+              <Input
+                label="Username"
+                value={user.username}
+                onValueChange={username => {
+                  if (!user) return;
+                  setUser({ ...user, username });
+                }}
+              />
+              <Input
+                type="password"
+                label="Password"
+                value={password}
+                onValueChange={setPassword}
+              />
+              <Input
+                label="E-Mail"
+                value={user.email}
+                onValueChange={email => {
+                  if (!user) return;
+                  setUser({ ...user, email });
+                }}
+              />
+              <Checkbox
+                isSelected={user.permanentApiToken}
+                onValueChange={permanentApiToken => {
+                  if (!user) return;
+                  setUser({
+                    ...user,
+                    permanentApiToken,
+                  });
+                }}
+              >
+                Permanent API Token
+              </Checkbox>
+            </ModalBody>
+            <ModalFooter>
+              <Button color="success" onPress={addUser}>
+                Add
+              </Button>
+              <Button onPress={onClose}>Cancel</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

src/components/UserDeleteModal.tsx

@@ -0,0 +1,149 @@
+import {
+  newUninitializedUser,
+  RegistrationKey,
+  Role,
+  User,
+} from '@luna/api/auth/types';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@nextui-org/react';
+import { useEffect, useState } from 'react';
+
+export interface UserDeleteModalProps {
+  id: number;
+  show: boolean;
+  setShow: (show: boolean) => void;
+}
+
+export function UserDeleteModal({ id, show, setShow }: UserDeleteModalProps) {
+  const [user, setUser] = useState<User>(newUninitializedUser());
+
+  // initialize modal state
+  useEffect(() => {
+    // only initialize when the modal is shown
+    if (!show) return;
+
+    // TODO: remove test data and query the API
+    const now = new Date();
+    // TODO: call GET /users/<id>/roles
+    const roles: Role[] = [
+      {
+        id: 1,
+        name: 'Testrole',
+        createdAt: now,
+        updatedAt: now,
+      },
+    ];
+    // TODO: call GET /users/<id>
+    const registrationKey: RegistrationKey = {
+      id: 1,
+      key: 'Test-Registration-Key',
+      description: 'Test-Registration-Key for testing purposes',
+      createdAt: now,
+      updatedAt: now,
+      expiresAt: now,
+      permanent: false,
+    };
+    const user: User = {
+      username: 'Testuser',
+      email: 'test@example.com',
+      roles,
+      createdAt: now,
+      updatedAt: now,
+      lastSeen: now,
+      permanentApiToken: false,
+      registrationKey,
+    };
+
+    setUser(user);
+  }, [id, show]);
+
+  const deleteUser = () => {
+    console.log('deleting user with id', id);
+    // TODO: call DELETE /users/<id>
+    // TODO: feedback from the request (success, error)
+    onOpenChange(false);
+  };
+
+  const onOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      setUser(newUninitializedUser());
+    }
+    setShow(isOpen);
+  };
+
+  return (
+    <Modal isOpen={show} onOpenChange={onOpenChange}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader>Delete User</ModalHeader>
+            <ModalBody>
+              <Input label="ID" value={id.toString()} isDisabled />
+
+              <Input
+                label="Username"
+                value={user.username}
+                onValueChange={username => {
+                  if (!user) return;
+                  setUser({ ...user, username });
+                }}
+                isDisabled
+              />
+              <Input
+                label="E-Mail"
+                value={user.email}
+                onValueChange={email => {
+                  if (!user) return;
+                  setUser({ ...user, email });
+                }}
+                isDisabled
+              />
+              <Input
+                label="Created At"
+                value={user.createdAt?.toLocaleString()}
+                isDisabled
+              />
+              <Input
+                label="Updated At"
+                value={user.updatedAt?.toLocaleString()}
+                isDisabled
+              />
+              <Input
+                label="Last Login"
+                value={user.lastSeen?.toLocaleString()}
+                isDisabled
+              />
+              <Checkbox
+                isSelected={user.permanentApiToken}
+                onValueChange={permanentApiToken => {
+                  if (!user) return;
+                  setUser({
+                    ...user,
+                    permanentApiToken,
+                  });
+                }}
+                isDisabled
+              >
+                Permanent API Token
+              </Checkbox>
+            </ModalBody>
+            <ModalFooter>
+              <Button color="danger" onPress={deleteUser}>
+                Delete
+              </Button>
+              <Button onPress={onClose}>Cancel</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}