RH-Lieferscheine/components/LoginForm.js

// components/LoginForm.js
"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Input } from "@nextui-org/react";
import Link from "next/link";
import SubmitButton from "./SubmitButton"; // Neuen Button importieren

export default function LoginForm() {
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");
	const [error, setError] = useState(null);
	const [isLoading, setIsLoading] = useState(false);
	const router = useRouter();

	const handleSubmit = async (e) => {
		e.preventDefault();
		setError(null);
		setIsLoading(true);

		try {
			const response = await fetch("/api/auth/login", {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify({ username, password }),
				credentials: "include",
			});

			const data = await response.json();

			if (response.ok && data.redirectUrl) {
				router.push(data.redirectUrl);
			} else {
				setError(data.error || "Login failed. Please try again.");
			}
		} catch (err) {
			setError("An error occurred. Please try again later.");
			console.error("Fetch error:", err);
		} finally {
			setIsLoading(false);
		}
	};

	return (
		<form
			onSubmit={handleSubmit}
			className="bg-slate-200 rounded-xl p-8 shadow-md"
		>
			<h3 className="text-lg mb-8">
				Logge dich mit dem{" "}
				<span className="font-semibold">bereitgestellten </span> Login ein.
			</h3>
			<div className="flex flex-col items-center">
				<Input
					isRequired
					type="text"
					label="Niederlassung"
					className="max-w-xs"
					value={username}
					onChange={(e) => setUsername(e.target.value)}
				/>
			</div>
			<div className="mt-4 flex flex-col items-center ">
				<Input
					isRequired
					type="password"
					label="Passwort"
					value={password}
					onChange={(e) => setPassword(e.target.value)}
					className="max-w-xs"
				/>
			</div>
			<div className="flex flex-col items-center mt-4">
				{error && <p className="text-red-600 text-lg mb-2">{error}</p>}
				<SubmitButton isLoading={isLoading} />
				<Link href="mailto:cayan@attus.de" className="mt-4 text-sm">
					Passwort vergessen?
				</Link>
			</div>
		</form>
	);
}