dps-webshop/01-frontend/src/helper/navbar/LoginDialog.tsx

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Link,
  TextField,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import i18next from "i18next";
import React, { useEffect, useState } from "react";
import AccountType, { User } from "../../components/Account";
import { useAccount } from "../AccountProvider";
import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung
import { useTranslation } from "react-i18next";

type LoginDialogProps = {
  open: boolean;
  onClose: () => void;
  onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
  loginData: { email: string; password: string };
  setLoginData: React.Dispatch<
    React.SetStateAction<{
      email: string;
      password: string;
      customerId: number;
    }>
  >;
};

const LoginDialog: React.FC<LoginDialogProps> = ({
  open,
  onClose,
  loginData,
  setLoginData,
  onSubmit,
}) => {
  const { t } = useTranslation();
  const { login } = useAccount();
  const [showRegister, setShowRegister] = useState(false);
  const [registerData, setRegisterData] = useState<AccountType>({
    email: "",
    password: "",
    id: 0,
    customer: {
      id: 0,
      name: "",
      surname: "",
      address: "",
      country: "",
      zip: "",
    },
    langI18n: i18next.language,
    admin: false,
  });
  const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
  const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung

  useEffect(() => {
    if (open) {
      const active = document.activeElement as HTMLElement | null;
      if (active && typeof active.blur === "function") {
        active.blur();
      }
    }
  }, [open]);

  // useQuery für Login
  const {
    refetch: refetchLogin,
    isLoading: isLoadingLogin,
    error: errorLogin,
  } = useQuery({
    queryKey: ["submitLogin", loginData],
    queryFn: () => submitLogin(loginData),
    retry: 0,
    retryDelay: 1000,
    enabled: false,
  });

  const { refetch: refetchAccount } = useQuery({
    queryKey: ["fetchAccount", loginData],
    queryFn: () => fetchAccount(loginData),
    retry: 0,
    retryDelay: 1000,
    enabled: false,
  });

  // useQuery für Registrierung
  const {
    refetch: refetchRegister,
    isLoading: isLoadingRegister,
    error: errorRegister,
  } = useQuery({
    queryKey: ["submitRegister", registerData],
    queryFn: () => submitRegister(registerData),
    retry: 0,
    retryDelay: 1000,
    enabled: false,
  });

  const handleClose = () => {
    setShowErrorLogin(false); // Fehlermeldung zurücksetzen
    setShowErrorRegister(false); // Fehlermeldung zurücksetzen
    onClose();
  };

  const handleLogin = async () => {
    try {
      setShowErrorLogin(false); // Fehlermeldung zurücksetzen
      setShowErrorRegister(false); // Fehlermeldung zurücksetzen
      const response = await refetchLogin(); // Anfrage auslösen
      if (response.status === "success") {
        const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
        const customerData = (await refetchAccount()).data;
        const user: User = {
          email: customerData.email,
          password: customerData.password,
          customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
          session: session, // Setze die Session aus der Login-Antwort
          isAdmin: customerData.admin,
        };
        login(user);
        setShowRegister(false); // Zurück zum Login wechseln
        onSubmit(); // Dialog schließen
      } else {
        setShowErrorLogin(true); // Fehlermeldung anzeigen
      }
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
    } catch (error) {
      setShowErrorLogin(true); // Fehlermeldung anzeigen
    }
  };

  const handleRegister = async () => {
    try {
      setShowErrorLogin(false); // Fehlermeldung zurücksetzen
      setShowErrorRegister(false); // Fehlermeldung zurücksetzen
      await refetchRegister(); // Beispiel für den Refetch-Aufruf
      // Erfolgslogik hier
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
    } catch (error) {
      setShowErrorRegister(true); // Fehlermeldung anzeigen
    }
  };

  return (
    <Dialog open={open} onClose={handleClose} disableEnforceFocus>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (showRegister) {
            handleLogin();
          } else {
            handleRegister();
          }
        }}
        noValidate
      >
        <DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
        <DialogContent>
          <TextField
            margin="dense"
            label={t("email")}
            type="email"
            fullWidth
            value={showRegister ? registerData.email : loginData.email}
            onChange={(e) => {
              setLoginData((prev) => ({ ...prev, email: e.target.value }));
              setRegisterData((prev) => ({ ...prev, email: e.target.value }));
            }}
          />
          <TextField
            margin="dense"
            label={t("password")}
            type="password"
            fullWidth
            value={showRegister ? registerData.password : loginData.password}
            onChange={(e) => {
              setLoginData((prev) => ({ ...prev, password: e.target.value }));
              setRegisterData((prev) => ({
                ...prev,
                password: e.target.value,
              }));
            }}
          />
          {showRegister && (
            <>
              <TextField
                margin="dense"
                label={t("firstName")}
                type="text"
                fullWidth
                value={registerData.customer.name}
                onChange={(e) =>
                  setRegisterData((prev) => ({
                    ...prev,
                    customer: { ...prev.customer, name: e.target.value },
                  }))
                }
              />
              <TextField
                margin="dense"
                label={t("lastName")}
                type="text"
                fullWidth
                value={registerData.customer.surname}
                onChange={(e) =>
                  setRegisterData((prev) => ({
                    ...prev,
                    customer: { ...prev.customer, surname: e.target.value },
                  }))
                }
              />
              <TextField
                margin="dense"
                label={t("address")}
                type="text"
                fullWidth
                value={registerData.customer.address}
                onChange={(e) =>
                  setRegisterData((prev) => ({
                    ...prev,
                    customer: { ...prev.customer, address: e.target.value },
                  }))
                }
              />
              <TextField
                margin="dense"
                label={t("country")}
                type="text"
                fullWidth
                value={registerData.customer.country}
                onChange={(e) =>
                  setRegisterData((prev) => ({
                    ...prev,
                    customer: { ...prev.customer, country: e.target.value },
                  }))
                }
              />
              <TextField
                margin="dense"
                label={t("zip")}
                type="text"
                fullWidth
                value={registerData.customer.zip}
                onChange={(e) =>
                  setRegisterData((prev) => ({
                    ...prev,
                    customer: { ...prev.customer, zip: e.target.value },
                  }))
                }
              />
            </>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>{t("cancel")}</Button>
          {showRegister ? (
            <Button onClick={handleRegister} disabled={isLoadingRegister}>
              {isLoadingRegister ? t("loading") : t("register")}
            </Button>
          ) : (
            <Button onClick={handleLogin} disabled={isLoadingLogin}>
              {isLoadingLogin ? t("loading") : t("login")}
            </Button>
          )}
        </DialogActions>
        {showErrorLogin && errorLogin && (
          <Box color="error.main">{t("loginFailed")}</Box>
        )}
        {showErrorRegister && errorRegister !== null && (
          <Box color="error.main">{t("registerFailed")}</Box>
        )}
        {showRegister ? (
          <Box sx={{ width: "100%", textAlign: "center", pb: 2 }}>
            <Link
              component="button"
              variant="body2"
              onClick={() => setShowRegister(false)}
              color="primary"
              underline="hover"
            >
              {t("backToLogin")}
            </Link>
          </Box>
        ) : (
          <Box sx={{ width: "100%", textAlign: "center", pb: 2 }}>
            <Link
              component="button"
              variant="body2"
              onClick={() => setShowRegister(true)}
              color="primary"
              underline="hover"
            >
              {t("noAccountRegister")}
            </Link>
          </Box>
        )}
      </form>
    </Dialog>
  );
};

export default LoginDialog;