add + remove users from organisation

packages/frontend/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Button } from "./button";
+import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "./dialog";
+ 
+export function ConfirmDialog({
+    open,
+    onOpenChange,
+    onConfirm,
+    title,
+    message,
+    processingText = "Processing...",
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    variant = "default",
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    processingText?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "default" | "destructive";
+}) {
+    const [submitting, setSubmitting] = useState(false);
+
+    const handleConfirm = async () => {
+        setSubmitting(true);
+        try {
+            await onConfirm();
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                </DialogHeader>
+                <p className="text-sm text-muted-foreground">{message}</p>
+                <div className="flex gap-2 justify-end mt-4">
+                    <DialogClose asChild>
+                        <Button variant="outline" type="button">
+                            {cancelText}
+                        </Button>
+                    </DialogClose>
+                    <Button variant={variant} onClick={handleConfirm} disabled={submitting}>
+                        {submitting ? processingText : confirmText}
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

packages/frontend/src/components/ui/field.tsx

@@ -10,6 +10,7 @@ export function Field({
     hidden = false,
     submitAttempted,
     placeholder,
+    error,
 }: {
     label: string;
     value?: string;
@@ -18,6 +19,7 @@ export function Field({
     hidden?: boolean;
     submitAttempted?: boolean;
     placeholder?: string;
+    error?: string;
 }) {
     const [internalTouched, setInternalTouched] = useState(false);
     const isTouched = submitAttempted || internalTouched;
@@ -43,12 +45,12 @@ export function Field({
                 onChange={onChange}
                 onBlur={() => setInternalTouched(true)}
                 name={label}
-                aria-invalid={invalidMessage !== ""}
+                aria-invalid={error !== undefined || invalidMessage !== ""}
                 type={hidden ? "password" : "text"}
             />
-            <div className="flex items-end justify-end w-full text-xs -mb-0 -mt-1">
-                {invalidMessage !== "" ? (
-                    <Label className="text-destructive text-sm">{invalidMessage}</Label>
+            <div className="flex items-end justify-end w-full text-xs mb-0 -mt-1">
+                {error || invalidMessage !== "" ? (
+                    <Label className="text-destructive text-sm">{error ?? invalidMessage}</Label>
                 ) : (
                     <Label className="opacity-0 text-sm">a</Label>
                 )}