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

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

function Login() {
  const { t } = useTranslation();
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });
  const [alert, setAlert] = useState({
    show: false,
    type: "", // 'success', 'error', 'info', 'warning'
    message: "",
  });
  const { login } = useAuth(); 
  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
    if (alert.show) setAlert({ ...alert, show: false });
  };

  const showAlert = (type, message) => {
    setAlert({
      show: true,
      type,
      message,
    });

    // Auto-hide success and info alerts after 5 seconds
    if (type === 'success' || type === 'info') {
      setTimeout(() => {
        setAlert(prev => ({ ...prev, show: false }));
      }, 5000);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setAlert({ show: false, type: "", message: "" });

    try {
      // Afficher un message de chargement
      showAlert("info", t('auth.login.loading'));
      
      const response = await axios.post(`${API_BASE_URL}/login`, formData, {
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = response.data;

      if (data.token) {
        showAlert("success", t('auth.login.success'));
        login(data.token);
        
        // Court délai pour montrer le message de succès avant la redirection
        setTimeout(() => {
          navigate("/");
        }, 1000);
      } else {
        showAlert("error", t('auth.login.missingToken'));
      }
    } catch (error) {
      console.error("Erreur lors de la connexion", error);

      if (error.response) {
        if (error.response.status === 401) {
          showAlert("error", t('auth.login.incorrectAuth'));
        } else if (error.response.status === 422) {
          showAlert("error", t('auth.login.invalidData'));
        } else if (error.response.status >= 500) {
          showAlert("error", t('auth.login.serverError'));
        } else {
          showAlert("error", error.response.data.message || t('auth.login.genericError'));
        }
      } else if (error.request) {
        showAlert("error", t('auth.login.networkError'));
      } else {
        showAlert("error", t('auth.login.genericError'));
      }
    }
  };

  // Configuration des alertes selon le type
  const alertConfig = {
    success: {
      bgColor: "bg-green-50",
      borderColor: "border-green-200",
      textColor: "text-green-700",
      icon: <CheckCircle className="h-5 w-5 mr-2 mt-0.5 flex-shrink-0 text-green-500" />
    },
    error: {
      bgColor: "bg-red-50",
      borderColor: "border-red-200",
      textColor: "text-red-700",
      icon: <AlertCircle className="h-5 w-5 mr-2 mt-0.5 flex-shrink-0 text-red-500" />
    },
    info: {
      bgColor: "bg-blue-50",
      borderColor: "border-blue-200",
      textColor: "text-blue-700",
      icon: <Info className="h-5 w-5 mr-2 mt-0.5 flex-shrink-0 text-blue-500" />
    },
    warning: {
      bgColor: "bg-yellow-50",
      borderColor: "border-yellow-200",
      textColor: "text-yellow-700",
      icon: <AlertCircle className="h-5 w-5 mr-2 mt-0.5 flex-shrink-0 text-yellow-500" />
    }
  };

  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">
          {t('auth.login.title')}
        </h2>

        {/* Système d'alertes */}
        {alert.show && (
          <div className={`mb-4 p-3 ${alertConfig[alert.type].bgColor} border ${alertConfig[alert.type].borderColor} ${alertConfig[alert.type].textColor} rounded-md flex items-start justify-between`}>
            <div className="flex items-start">
              {alertConfig[alert.type].icon}
              <span className="text-sm">{alert.message}</span>
            </div>
            <button 
              onClick={() => setAlert({ ...alert, show: false })}
              className="ml-2 p-1 hover:bg-gray-200 rounded-full"
            >
              <X size={14} />
            </button>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Email */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              {t('auth.login.emailLabel')}
            </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">
              {t('auth.login.passwordLabel')}
            </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"
            >
              {t('auth.login.submitButton')}
            </button>
          </div>

          {/* Lien vers la page d'inscription */}
          <div className="mt-4 text-sm text-center">
            <p>
              {t('auth.login.noAccount')}
              <Link
                to="/signup"
                className="text-indigo-600 hover:text-indigo-700 font-medium ml-1"
              >
                {t('auth.login.signupLink')}
              </Link>
            </p>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Login;