Merge pull request #48 from ProjectLighthouseCAU/user-role-key-management

Implement Admin management UI

Author: fwcd

src/components/Display.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import {
   LIGHTHOUSE_COLOR_CHANNELS,
   LIGHTHOUSE_COLS,
@@ -7,6 +7,11 @@ import {
 
 export const DISPLAY_ASPECT_RATIO = 0.8634;
 
+export interface MousePos {
+  x: number;
+  y: number;
+}
+
 export interface DisplayProps {
   frame: Uint8Array;
   width?: number;
@@ -16,6 +21,10 @@ export interface DisplayProps {
   relativeBezelWidth?: number;
   relativeGutterWidth?: number;
   className?: string;
+  strictBoundsChecking?: boolean;
+  onMouseDown?: (p: MousePos) => void;
+  onMouseUp?: (p: MousePos) => void;
+  onMouseDrag?: (p: MousePos) => void;
 }
 
 export function Display({
@@ -27,9 +36,15 @@ export function Display({
   relativeBezelWidth = 0.0183,
   relativeGutterWidth = 0.0064,
   className,
+  strictBoundsChecking = false,
+  onMouseDown = (p: MousePos) => {},
+  onMouseUp = (p: MousePos) => {},
+  onMouseDrag = (p: MousePos) => {},
 }: DisplayProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  const [drag, setDrag] = useState(false);
+  const [prevCoords, setPrevCoords] = useState<number[] | null>(null);
   // Set up rendering
   useLayoutEffect(() => {
     const canvas = canvasRef.current!;
@@ -71,18 +86,111 @@ export function Display({
       ctx.fillRect(x, 0, gutterWidth, height);
     }
 
+    const midPoints: number[][] = [];
     // Draw windows
     for (let j = 0; j < columns; j++) {
       const x = bezelWidth + j * windowWidth + (j + 1) * gutterWidth;
 
       for (let i = 0; i < rows; i++) {
         const y = i * (1 + spacersPerRow) * windowHeight;
+        midPoints.push([x + windowWidth / 2, y + windowHeight / 2]);
         const k = (i * LIGHTHOUSE_COLS + j) * LIGHTHOUSE_COLOR_CHANNELS;
         const rgb = frame.slice(k, k + LIGHTHOUSE_COLOR_CHANNELS);
         ctx.fillStyle = `rgb(${rgb.join(',')})`;
         ctx.fillRect(x, y, windowWidth, windowHeight);
       }
     }
+
+    const dist = ([x1, y1]: number[], [x2, y2]: number[]) => {
+      const xDiff = x1 - x2;
+      const yDiff = y1 - y2;
+      return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+    };
+
+    const mouseToWindowCoords = (mouseCoords: number[]) => {
+      const closestPointIdx = midPoints
+        .map(p => dist(p, mouseCoords))
+        .reduce(
+          ([aIdx, acc], val, idx) => [
+            val < acc ? idx : aIdx,
+            Math.min(acc, val),
+          ],
+          [-1, Infinity]
+        )[0];
+      const closestPoint = midPoints[closestPointIdx];
+      const x = closestPoint[0] - windowWidth / 2;
+      const y = closestPoint[1] - windowHeight / 2;
+      if (
+        strictBoundsChecking &&
+        !(
+          mouseCoords[0] >= x &&
+          mouseCoords[0] <= x + windowWidth &&
+          mouseCoords[1] >= y &&
+          mouseCoords[1] <= y + windowHeight
+        )
+      ) {
+        return null;
+      }
+      const j = Math.round(
+        (x - bezelWidth - gutterWidth) / (windowWidth + gutterWidth)
+      );
+      const i = Math.round(y / (windowHeight * (1 + spacersPerRow)));
+      return [i, j];
+    };
+
+    const onMouseDownHandler = (event: MouseEvent) => {
+      setDrag(true);
+
+      const rect = canvas.getBoundingClientRect();
+      const mouseCoords = [event.clientX - rect.left, event.clientY - rect.top];
+
+      const windowCoords = mouseToWindowCoords(mouseCoords);
+      if (!windowCoords) return; // in case of strict bounds checking
+      setPrevCoords(windowCoords); // for consecutive drag
+
+      onMouseDown({ x: windowCoords[1], y: windowCoords[0] });
+    };
+    const onMouseUpHandler = (event: MouseEvent) => {
+      setDrag(false);
+
+      const rect = canvas.getBoundingClientRect();
+      const mouseCoords = [event.clientX - rect.left, event.clientY - rect.top];
+
+      const windowCoords = mouseToWindowCoords(mouseCoords);
+      if (!windowCoords) return; // in case of strict bounds checking
+      setPrevCoords(windowCoords); // for consecutive drag
+
+      onMouseUp({ x: windowCoords[1], y: windowCoords[0] });
+    };
+
+    const onMouseDragHandler = (event: MouseEvent) => {
+      if (!drag) return;
+      const rect = canvas.getBoundingClientRect();
+      const mouseCoords = [event.clientX - rect.left, event.clientY - rect.top];
+
+      const windowCoords = mouseToWindowCoords(mouseCoords);
+      if (!windowCoords) return; // in case of strict bounds checking
+
+      // don't emit drag events if coords haven't changed
+      if (
+        prevCoords &&
+        prevCoords[0] === windowCoords[0] &&
+        prevCoords[1] === windowCoords[1]
+      ) {
+        return;
+      }
+      setPrevCoords(windowCoords);
+      onMouseDrag({ x: windowCoords[1], y: windowCoords[0] });
+    };
+    canvas.style.cursor = 'crosshair';
+    canvas.addEventListener('mousedown', onMouseDownHandler);
+    canvas.addEventListener('mousemove', onMouseDragHandler);
+    canvas.addEventListener('mouseup', onMouseUpHandler);
+    return () => {
+      canvas.removeEventListener('mousedown', onMouseDownHandler);
+      canvas.removeEventListener('mousemove', onMouseDragHandler);
+      canvas.removeEventListener('mouseup', onMouseUpHandler);
+    };
   }, [
     customWidth,
     aspectRatio,
@@ -91,6 +199,14 @@ export function Display({
     columns,
     relativeBezelWidth,
     relativeGutterWidth,
+    strictBoundsChecking,
+    setDrag,
+    drag,
+    setPrevCoords,
+    prevCoords,
+    onMouseDown,
+    onMouseUp,
+    onMouseDrag,
   ]);
 
   return <canvas ref={canvasRef} className={className} />;

src/components/UserAddModal.tsx

@@ -0,0 +1,104 @@
+import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
+import { newUninitializedUser, User } from '@luna/contexts/api/auth/types';
+import { CreateOrUpdateUserPayload } from '@luna/contexts/api/auth/types/CreateOrUpdateUserPayload';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@nextui-org/react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+export interface UserAddModalProps {
+  isOpen: boolean;
+  setOpen: (show: boolean) => void;
+}
+
+export function UserAddModal({ isOpen, setOpen }: UserAddModalProps) {
+  const [user, setUser] = useState<User>(newUninitializedUser());
+  const [password, setPassword] = useState('');
+
+  // initialize/reset modal state
+  useEffect(() => {
+    if (!isOpen) return;
+    setUser(newUninitializedUser());
+    setPassword('');
+  }, [isOpen]);
+
+  const auth = useContext(AuthContext);
+
+  const addUser = useCallback(async () => {
+    const payload: CreateOrUpdateUserPayload = {
+      username: user.username,
+      password,
+      email: user.email,
+      permanent_api_token: user.permanentApiToken,
+    };
+    const result = await auth.createUser(payload);
+    if (result.ok) {
+      console.log('added user:', payload);
+    } else {
+      console.log('failed to add user:', result.error);
+    }
+    // TODO: UI feedback from the request (success, error)
+    setOpen(false);
+  }, [setOpen, user, password, auth]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setOpen}>
+      <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,116 @@
+import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
+import { newUninitializedUser, User } from '@luna/contexts/api/auth/types';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@nextui-org/react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+export interface UserDeleteModalProps {
+  id: number;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function UserDeleteModal({ id, isOpen, setOpen }: UserDeleteModalProps) {
+  const [user, setUser] = useState<User>(newUninitializedUser());
+
+  const auth = useContext(AuthContext);
+
+  // initialize modal state
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const fetchUser = async () => {
+      const userResult = await auth.getUserById(id);
+      if (userResult.ok) {
+        setUser(userResult.value);
+      } else {
+        console.log('Fetching user failed:', userResult.error);
+        setUser(newUninitializedUser());
+      }
+    };
+    fetchUser();
+  }, [id, isOpen, auth]);
+
+  const deleteUser = useCallback(() => {
+    console.log('deleting user with id', id);
+    // TODO: call DELETE /users/<id>
+    // TODO: feedback from the request (success, error)
+    setOpen(false);
+  }, [id, setOpen]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setOpen}>
+      <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>
+  );
+}