zkt26/Front-end/src/pages/Login.jsx

import React, { useState } from "react";
import { Mail, Lock, AlertCircle } from "lucide-react";
import { useNavigate, Link } from "react-router-dom";
import axios from "axios";
import { useAuth } from "../AuthContext";
import { API_BASE_URL } from "../config";

function Login() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });
  const [error, setError] = useState("");
  const { login } = useAuth(); 
  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
    if (error) setError("");
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    try {
      const response = await axios.post(`${API_BASE_URL}/login`, formData, {
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = response.data;

      if (data.token) {
        login(data.token);
        navigate("/");
      } else {
        setError("Authentification échouée : token manquant dans la réponse");
      }
    } catch (error) {
      console.error("Erreur lors de la connexion", error);

      if (error.response) {
        if (error.response.status === 401) {
          setError("Email ou mot de passe incorrect");
        } else if (error.response.status === 422) {
          setError("Données de formulaire invalides");
        } else if (error.response.status >= 500) {
          setError("Erreur serveur. Veuillez réessayer plus tard.");
        } else {
          setError(
            error.response.data.message ||
              "Une erreur s'est produite lors de la connexion"
          );
        }
      } else if (error.request) {
        setError(
          "Impossible de joindre le serveur. Vérifiez votre connexion internet."
        );
      } else {
        setError("Une erreur s'est produite. Veuillez réessayer.");
      }
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="md:w-96 w-full bg-white rounded-lg shadow-md p-6 mx-auto">
        <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">
          Connexion
        </h2>

        {/* Message d'erreur */}
        {error && (
          <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-md flex items-start">
            <AlertCircle className="h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
            <span className="text-sm">{error}</span>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Email */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Email:
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <Mail className="h-5 w-5 text-gray-400" />
              </div>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                required
              />
            </div>
          </div>

          {/* Mot de passe */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Mot de passe:
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <Lock className="h-5 w-5 text-gray-400" />
              </div>
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                required
                minLength="8"
                autoComplete="current-password"
              />
            </div>
          </div>

          {/* Bouton de connexion */}
          <div className="pt-4">
            <button
              type="submit"
              className="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Se connecter
            </button>
          </div>

          {/* Lien vers la page d'inscription */}
          <div className="mt-4 text-sm text-center">
            <p>
              Vous n'avez pas de compte ?
              <Link
                to="/signup"
                className="text-indigo-600 hover:text-indigo-700 font-medium"
              >
                {" "}
                Inscrivez-vous ici
              </Link>
            </p>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Login;