freelancer-match/frontend/app/auth/login/page.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(1),
});

type FormData = z.infer<typeof loginSchema>;

export default function LoginPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const form = useForm<FormData>({ resolver: zodResolver(loginSchema) });

  async function onSubmit(data: FormData) {
    setLoading(true);
    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (!res.ok) throw new Error("Неверный email или пароль");

      router.push("/dashboard");
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md p-8 rounded-xl shadow-sm bg-white">
        <h1 className="text-2xl font-bold mb-6">Вход</h1>

        {error && (
          <div className="mb-4 p-3 bg-red-50 text-red-700 rounded">{error}</div>
        )}

        <input {...form.register("email")} placeholder="Email" className="w-full mb-3 px-4 py-2 border rounded" />
        {form.formState.errors.email && (
          <p className="text-sm text-red-500 mb-2">{form.formState.errors.email.message}</p>
        )}

        <input {...form.register("password")} type="password" placeholder="Пароль" className="w-full mb-4 px-4 py-2 border rounded" />
        {form.formState.errors.password && (
          <p className="text-sm text-red-500 mb-2">{form.formState.errors.password.message}</p>
        )}

        <button type="submit" disabled={loading} className="w-full bg-blue-600 text-white py-3 rounded font-medium">
          {loading ? "Вход..." : "Войти"}
        </button>

        <p className="text-center mt-4 text-sm">
          Нет аккаунта?{" "}
          <Link href="/auth/register" className="text-blue-600">Зарегистрироваться</Link>
        </p>
      </form>
    </div>
  );
}