since3-portal/modules/admin/ui/components/add-client-dialog.tsx

"use client";

import { useActionState, useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from "@/components/ui/dialog";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Mail, PlusIcon, UserRound } from "lucide-react";
import { createClient } from "@/modules/admin/actions/client";
import { CopyField } from "./copy-field";

function AddClientDialogContent({ onDone }: { onDone: () => void }) {
    const [state, formAction, pending] = useActionState(createClient, undefined);
    const success = state && "success" in state && state.success;

    if (success) {
        return (
            <>
                <DialogHeader className="mb-4">
                    <DialogTitle>Client angelegt 🎉</DialogTitle>
                    <DialogDescription>
                        Gib die Zugangsdaten an den Client weiter. Das Passwort wird nur jetzt angezeigt.
                    </DialogDescription>
                </DialogHeader>
                <FieldGroup>
                    <CopyField label="Email" value={state.email} />
                    <CopyField label="Passwort" value={state.password} />
                    {state.welcomeMailSent ? (
                        <p className="text-small text-muted-foreground">Willkommensmail an {state.email} wurde gesendet.</p>
                    ) : (
                        <p className="text-small text-destructive">Die Willkommensmail konnte nicht gesendet werden.</p>
                    )}
                </FieldGroup>
                <DialogFooter className="mt-6">
                    <Button type="button" onClick={onDone}>Fertig</Button>
                </DialogFooter>
            </>
        )
    }

    return (
        <>
            <DialogHeader className="mb-4">
                <DialogTitle>Neuen Clienten anlegen</DialogTitle>
            </DialogHeader>
            <form action={formAction}>
                <FieldGroup>
                    <Field>
                        <FieldLabel htmlFor="client-name"><UserRound className="w-4 h-4"/> Name <span className="text-destructive">*</span></FieldLabel>
                        <Input id="client-name" name="name" required className="focus-visible:ring-0"/>
                    </Field>
                    <Field>
                        <FieldLabel htmlFor="client-email"><Mail className="w-4 h-4"/> Email <span className="text-destructive">*</span></FieldLabel>
                        <Input id="client-email" name="email" type="email" required className="focus-visible:ring-0"/>
                    </Field>
                    {state && "error" in state && (
                        <p className="text-sm text-destructive">{state.error}</p>
                    )}
                </FieldGroup>
                <DialogFooter className="mt-6">
                    <Button type="submit" disabled={pending}>
                        {pending ? "Wird angelegt..." : "Anlegen"}
                    </Button>
                </DialogFooter>
            </form>
        </>
    )
}

export function AddClientDialog() {
    const [open, setOpen] = useState(false);
    const [instanceKey, setInstanceKey] = useState(0);

    function handleOpenChange(nextOpen: boolean) {
        setOpen(nextOpen);
        if (!nextOpen) {
            setInstanceKey((key) => key + 1);
        }
    }

    return (
        <Dialog open={open} onOpenChange={handleOpenChange}>
            <DialogTrigger render={<Button className="cursor-pointer"/>}>
                <PlusIcon/>
                Add a new Client
            </DialogTrigger>
            <DialogContent>
                <AddClientDialogContent key={instanceKey} onDone={() => handleOpenChange(false)} />
            </DialogContent>
        </Dialog>
    )
}