borrow-system/admin/src/components/AddForm.tsx

import React from "react";
import {
  Button,
  Card,
  Field,
  Input,
  Stack,
  Text,
  Checkbox,
} from "@chakra-ui/react";
import { createUser } from "@/utils/userActions";

type AddFormProps = {
  onClose: () => void;
  alert: (
    status: "success" | "error",
    message: string,
    description: string
  ) => void;
};

const AddForm: React.FC<AddFormProps> = ({ onClose, alert }) => {
  const [admin, setAdmin] = React.useState(false);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
      <form
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <Card.Root maxW="sm">
          <Card.Header>
            <Card.Title>Neuen Nutzer erstellen</Card.Title>
            <Card.Description>
              Füllen Sie das folgende Formular aus, um einen Nutzer zu
              erstellen.
            </Card.Description>
          </Card.Header>

          <Card.Body>
            <Stack gap="4" w="full">
              <Field.Root>
                <Field.Label>Benutzername</Field.Label>
                <Input id="username" />
              </Field.Root>
              <Field.Root>
                <Field.Label>Passwort</Field.Label>
                <Input id="password" type="password" />
              </Field.Root>
              <Field.Root>
                <Field.Label>Vorname</Field.Label>
                <Input id="firstname" />
              </Field.Root>
              <Field.Root>
                <Field.Label>Nachname</Field.Label>
                <Input id="lastname" />
              </Field.Root>
              <Field.Root>
                <Field.Label>E-Mail</Field.Label>
                <Input id="email" type="email" />
              </Field.Root>

              {/* Kontrollierte Checkbox */}
              <Checkbox.Root
                checked={admin}
                onCheckedChange={(e: any) => setAdmin(Boolean(e?.checked ?? e))}
              >
                <Checkbox.HiddenInput />
                <Checkbox.Control />
                <Checkbox.Label>Admin</Checkbox.Label>
              </Checkbox.Root>

              <Field.Root>
                <Field.Label>Rolle</Field.Label>
                <Input id="role" type="number" />
              </Field.Root>
            </Stack>
          </Card.Body>
          <Card.Footer justifyContent="flex-end">
            <Text>Der Benutzername kann nicht mehr geändert werden.</Text>
            <Button variant="outline" onClick={onClose}>
              Abbrechen
            </Button>
            <Button
              variant="solid"
              type="submit"
              onClick={async () => {
                const username =
                  (
                    document.getElementById("username") as HTMLInputElement
                  )?.value.trim() || "";
                const password =
                  (document.getElementById("password") as HTMLInputElement)
                    ?.value || "";
                const role = Number(
                  (document.getElementById("role") as HTMLInputElement)?.value
                );
                const firstname =
                  (
                    document.getElementById("firstname") as HTMLInputElement
                  )?.value.trim() || "";
                const lastname =
                  (
                    document.getElementById("lastname") as HTMLInputElement
                  )?.value.trim() || "";
                const email =
                  (
                    document.getElementById("email") as HTMLInputElement
                  )?.value.trim() || "";

                // admin kommt jetzt zuverlässig aus dem State
                const res = await createUser(
                  username,
                  role,
                  password,
                  firstname,
                  lastname,
                  email,
                  admin
                );

                if (res.success) {
                  alert(
                    "success",
                    "Nutzer erstellt",
                    "Der Nutzer wurde erfolgreich erstellt."
                  );
                  onClose();
                } else {
                  alert(
                    "error",
                    "Fehler beim Erstellen des Nutzers",
                    "Es gab einen Fehler beim Erstellen des Nutzers. Vielleicht gibt es bereits einen Nutzer mit diesem Benutzernamen."
                  );
                  onClose();
                }
              }}
            >
              Erstellen
            </Button>
          </Card.Footer>
        </Card.Root>
      </form>
    </div>
  );
};

export default AddForm;