wip full user management

Author: aeltorio

client/src/components/auth0.tsx

@@ -481,7 +481,7 @@ export const useSecuredApi = () => {
     }
   };
 
-  const deleteJson = async (url: string) => {
+  const deleteJson = async (url: string, data?: any) => {
     try {
       const accessToken = await getAccessTokenSilently({
         authorizationParams: {
@@ -496,6 +496,7 @@ export const useSecuredApi = () => {
           Authorization: `Bearer ${accessToken}`,
           "Content-Type": "application/json",
         },
+        body: data ? JSON.stringify(data) : undefined,
       });
 
       return await apiResponse.json();

client/src/components/modals/assign-tester-modal.tsx

@@ -0,0 +1,115 @@
+/**
+ * Modal: Assign one or many Auth0 user ids to an existing tester, or create a new tester and assign.
+ */
+import { useEffect, useState } from "react";
+import { Modal, ModalBody, ModalContent, ModalHeader } from "@heroui/modal";
+import { Button } from "@heroui/button";
+import { Input } from "@heroui/input";
+import { useTranslation } from "react-i18next";
+import { addToast } from "@heroui/toast";
+import { useSecuredApi } from "@/components/auth0";
+
+export default function AssignTesterModal({
+    isOpen,
+    onClose,
+    userIds,
+    onSuccess,
+}: {
+    isOpen: boolean;
+    onClose: () => void;
+    userIds: string[]; // one or more Auth0 IDs
+    onSuccess?: () => void;
+}) {
+    const { t } = useTranslation();
+    const { getJson, postJson } = useSecuredApi();
+    const [testers, setTesters] = useState<Array<{ uuid: string; name: string }>>([]);
+    const [selectedUuid, setSelectedUuid] = useState<string | null>(null);
+    const [createName, setCreateName] = useState("");
+    const [isCreating, setIsCreating] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        (async () => {
+            try {
+                const resp = await getJson(`${import.meta.env.API_BASE_URL}/testers`);
+                const data = resp?.data || [];
+                setTesters(data);
+            } catch (err) {
+                console.error(err);
+                addToast({ title: t("error"), description: t("error-fetching-data"), variant: "solid" });
+            }
+        })();
+    }, [isOpen]);
+
+    const assignToExisting = async () => {
+        if (!selectedUuid) return;
+        setIsSubmitting(true);
+        try {
+            const resp = await postJson(`${import.meta.env.API_BASE_URL}/tester/ids`, { uuid: selectedUuid, ids: userIds });
+            if (resp.success) {
+                addToast({ title: t("success"), description: t("assigned-successfully"), variant: "solid" });
+                onSuccess?.();
+                onClose();
+            } else {
+                addToast({ title: t("error"), description: resp.error || t("error-assigning-testers"), variant: "solid" });
+            }
+        } catch (err) {
+            console.error(err);
+            addToast({ title: t("error"), description: t("error-assigning-testers"), variant: "solid" });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const createAndAssign = async () => {
+        if (!createName.trim()) return;
+        setIsCreating(true);
+        try {
+            const resp = await postJson(`${import.meta.env.API_BASE_URL}/tester`, { name: createName.trim(), ids: userIds });
+            if (resp.success) {
+                addToast({ title: t("success"), description: t("tester-created-and-assigned"), variant: "solid" });
+                onSuccess?.();
+                onClose();
+            } else {
+                addToast({ title: t("error"), description: resp.error || t("error-creating-tester"), variant: "solid" });
+            }
+        } catch (err) {
+            console.error(err);
+            addToast({ title: t("error"), description: t("error-creating-tester"), variant: "solid" });
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} aria-labelledby="assign-tester-title">
+            <ModalContent>
+                <ModalHeader id="assign-tester-title">{t("assign-tester")}</ModalHeader>
+                <ModalBody>
+                    <div className="mb-4">
+                        <label className="text-sm font-semibold">{t("select-tester")}</label>
+                        <select
+                            className="w-full p-2 border rounded mt-2"
+                            value={selectedUuid ?? ""}
+                            onChange={(e) => setSelectedUuid(e.target.value || null)}
+                        >
+                            <option value="">{t("choose-tester")}</option>
+                            {testers.map((tst) => (
+                                <option key={tst.uuid} value={tst.uuid}>{tst.name}</option>
+                            ))}
+                        </select>
+                        <div className="text-sm text-muted-foreground mt-2">{t("or-create-new-tester")}</div>
+                        <Input value={createName} onChange={(e) => setCreateName(e.target.value)} placeholder={t("enter-tester-name")} className="mt-2" />
+                    </div>
+
+                    <div className="flex justify-end gap-2 mt-4">
+                        <Button onPress={onClose} color="secondary">{t("cancel")}</Button>
+                        <Button color="primary" isLoading={isSubmitting} disabled={!selectedUuid} onPress={assignToExisting}>{t("assign")}</Button>
+                        <Button color="primary" isLoading={isCreating} disabled={!createName.trim()} onPress={createAndAssign}>{t("create-and-assign")}</Button>
+                    </div>
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
+}

client/src/components/modals/create-tester-modal.tsx

@@ -0,0 +1,59 @@
+/**
+ * Modal: Create a tester (without assigning any OAuth ids)
+ */
+import { FormEvent, useRef, useState } from "react";
+import { Modal, ModalBody, ModalContent, ModalHeader } from "@heroui/modal";
+import { Button } from "@heroui/button";
+import { Input } from "@heroui/input";
+import { useTranslation } from "react-i18next";
+import { addToast } from "@heroui/toast";
+import { useSecuredApi } from "@/components/auth0";
+
+export default function CreateTesterModal({ isOpen, onClose, onSuccess }: { isOpen: boolean; onClose: () => void; onSuccess?: () => void; }) {
+    const { t } = useTranslation();
+    const { postJson } = useSecuredApi();
+    const [name, setName] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const formRef = useRef<HTMLFormElement | null>(null);
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        if (!name.trim()) {
+            addToast({ title: t('error'), description: t('please-enter-a-name'), variant: 'solid' });
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const resp = await postJson(`${import.meta.env.API_BASE_URL}/tester`, { name: name.trim(), ids: [] });
+            if (resp.success) {
+                addToast({ title: t('success'), description: t('tester-created'), variant: 'solid' });
+                onSuccess?.();
+                onClose();
+            } else {
+                addToast({ title: t('error'), description: resp.error || t('error-creating-tester'), variant: 'solid' });
+            }
+        } catch (err) {
+            console.error(err);
+            addToast({ title: t('error'), description: t('error-creating-tester'), variant: 'solid' });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} aria-labelledby="create-tester-title">
+            <ModalContent>
+                <ModalHeader id="create-tester-title">{t('create-tester')}</ModalHeader>
+                <ModalBody>
+                    <form ref={formRef} onSubmit={handleSubmit}>
+                        <Input value={name} onChange={(e) => setName(e.target.value)} label={t('tester-name')} labelPlacement="outside" placeholder={t('enter-the-user-name')} />
+                        <div className="flex justify-end gap-2 mt-4">
+                            <Button color="secondary" onPress={onClose}>{t('cancel')}</Button>
+                            <Button color="primary" isLoading={isSubmitting} type="submit">{t('create')}</Button>
+                        </div>
+                    </form>
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
+}

client/src/locales/base/en-US.json

@@ -122,6 +122,7 @@
   "please-enter-feedback": "Please enter feedback",
   "error": "Error",
   "success": "Success",
+  "info": "Info",
   "feedback-published-successfully": "Feedback published successfully",
   "refund-processed-successfully": "Refund processed successfully",
   "error-processing-refund": "Error processing refund",
@@ -136,6 +137,16 @@
   "please-enter-description": "Please enter desccription",
   "purchase-created-successfully": "Purchase created successfully",
   "error-creating-purchase": "Error creating purchase",
+  "user-already-assigned": "This user is already assigned to a tester",
+  "assign": "Assign",
+  "assign-selected": "Assign selected",
+  "unassign": "Unassign",
+  "unassign-selected": "Unassign selected",
+  "confirm-unassign-selected": "Are you sure you want to unassign the selected OAuth IDs?",
+  "selected-unassigned": "Selected OAuth IDs unassigned",
+  "no-tester-found-for-id": "No tester found for this OAuth ID",
+  "oauth-id-removed-successfully": "OAuth ID removed successfully",
+  "error-removing-oauth-id": "Error removing OAuth ID",
   "enter-order-number": "Enter order number",
   "enter-product-description": "Enter product description",
   "new-purchase": "New purchase",
@@ -270,5 +281,26 @@
   "no-management-token": "No management token",
   "confirm-delete-warning": "Are you sure you want to delete {{name}}?",
   "failed-loading-user-permissions": "Failed to load user permissions",
-  "error-saving-permissions": "Error saving permissions"
+  "error-saving-permissions": "Error saving permissions",
+  "selected-count": "{{count}} selected",
+  "assign-selected": "Assign selected",
+  "unassign-selected": "Unassign selected",
+  "assign": "Assign",
+  "unassign": "Unassign",
+  "no-tester-found-for-id": "No tester found for this ID",
+  "oauth-id-removed-successfully": "OAuth ID removed successfully",
+  "selected-unassigned": "Selected IDs were unassigned",
+  "assign-tester": "Assign Tester",
+  "select-tester": "Select a tester",
+  "choose-tester": "Choose a tester",
+  "or-create-new-tester": "or create a new tester",
+  "enter-tester-name": "Enter the tester name",
+  "create-and-assign": "Create and assign",
+  "assigned-successfully": "Assigned successfully",
+  "tester-created-and-assigned": "Tester created and assigned",
+  "error-assigning-testers": "Error assigning testers",
+  "error-creating-tester": "Error creating tester",
+  "create-tester": "Create a tester",
+  "tester-created": "Tester created",
+  "confirm-unassign-selected": "Are you sure you want to unassign the selected IDs from their testers?"
 }