add + remove users from organisation

2026-02-08 18:33:01 +00:00 · 2026-01-01 10:46:54 +00:00
parent 8511c6472c
commit 63fef4a0e9
20 changed files with 560 additions and 32 deletions
--- a/packages/frontend/src/components/add-member-dialog.tsx
+++ b/packages/frontend/src/components/add-member-dialog.tsx
@@ -0,0 +1,141 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { Field } from "@/components/ui/field";
+import { organisation, user } from "@/lib/server";
+
+export function AddMemberDialog({
+    organisationId,
+    existingMembers,
+    trigger,
+    onSuccess,
+}: {
+    organisationId: number;
+    existingMembers: string[];
+    trigger?: React.ReactNode;
+    onSuccess?: () => void | Promise<void>;
+}) {
+    const [open, setOpen] = useState(false);
+    const [username, setUsername] = useState("");
+    const [submitAttempted, setSubmitAttempted] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const reset = () => {
+        setUsername("");
+        setSubmitAttempted(false);
+        setSubmitting(false);
+        setError(null);
+    };
+
+    const onOpenChange = (nextOpen: boolean) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            reset();
+        }
+    };
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setError(null);
+        setSubmitAttempted(true);
+
+        if (username.trim() === "") {
+            return;
+        }
+
+        if (existingMembers.includes(username)) {
+            setError("user is already a member of this organisation");
+            return;
+        }
+
+        setSubmitting(true);
+        try {
+            let userId: number | null = null;
+            await user.byUsername({
+                username,
+                onSuccess: (userData) => {
+                    userId = userData.id;
+                },
+                onError: (err) => {
+                    setError(err || "user not found");
+                    setSubmitting(false);
+                },
+            });
+
+            if (!userId) {
+                return;
+            }
+
+            await organisation.addMember({
+                organisationId,
+                userId,
+                role: "member",
+                onSuccess: async () => {
+                    setOpen(false);
+                    reset();
+                    try {
+                        await onSuccess?.();
+                    } catch (actionErr) {
+                        console.error(actionErr);
+                    }
+                },
+                onError: (err) => {
+                    setError(err || "failed to add member");
+                    setSubmitting(false);
+                },
+            });
+        } catch (err) {
+            console.error(err);
+            setError("failed to add member");
+            setSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogTrigger asChild>{trigger || <Button variant="outline">Add Member</Button>}</DialogTrigger>
+
+            <DialogContent className={"w-md"}>
+                <DialogHeader>
+                    <DialogTitle>Add Member</DialogTitle>
+                </DialogHeader>
+
+                <form onSubmit={handleSubmit}>
+                    <div className="grid mt-2">
+                        <Field
+                            label="Username"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
+                            submitAttempted={submitAttempted}
+                            placeholder="Enter username"
+                            error={error || undefined}
+                        />
+
+                        <div className="flex gap-2 w-full justify-end mt-2">
+                            <DialogClose asChild>
+                                <Button variant="outline" type="button">
+                                    Cancel
+                                </Button>
+                            </DialogClose>
+                            <Button
+                                type="submit"
+                                disabled={submitting || (username.trim() === "" && submitAttempted)}
+                            >
+                                {submitting ? "Adding..." : "Add"}
+                            </Button>
+                        </div>
+                    </div>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}