ptechcore_ui 0.0.0

package/src/pages/auth/Login.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import login_illustration from "../../assets/imgs/login_illustration.png";
+import { useToast } from "../../contexts/ToastContext";
+
+const Login: React.FC = () => {
+    const [formData, setFormData] = useState({ email: "", password: "" });
+    const [loading, setLoading] = useState(false);
+    const { success, error: showError } = useToast();
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        const { email, password } = formData;
+        if (!email || !password) {
+            showError("Veuillez entrer votre email et votre mot de passe.");
+            return;
+        }
+        
+        setLoading(true);
+        
+        try {
+            // Simuler un appel API
+            await new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    // Simulation d'une connexion réussie
+                    if (email === "test@example.com" && password === "password") {
+                        resolve(true);
+                    } else {
+                        reject(new Error("Email ou mot de passe incorrect"));
+                    }
+                }, 1000);
+            });
+            
+            success("Connexion réussie ! Bienvenue !");
+            // Rediriger vers le dashboard ou page d'accueil
+            
+        } catch (error) {
+            showError(error instanceof Error ? error.message : "Erreur de connexion");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100">
+            <div className="bg-white rounded-3xl shadow-2xl overflow-hidden max-w-4xl w-full mx-4">
+                <div className="flex flex-col lg:flex-row">
+                    {/* Côté gauche - Illustration */}
+                    <div className="lg:w-1/2 p-8 lg:p-12 bg-white flex flex-col justify-center">
+                        <div className="flex justify-center items-center h-full mb-8">
+                            <img src={login_illustration} alt="Illustration de connexion" className="object-contain" />
+                        </div>
+                    </div>
+                    {/* Côté droit - Formulaire de connexion */}
+                    <div className="lg:w-1/2 p-8 lg:p-12 bg-gray-50">
+                        <div className="max-w-sm mx-auto">
+                            <h2 className="text-3xl font-bold text-gray-800 mb-2">Bienvenue sur Rewise</h2>
+                            <p className="text-gray-600 mb-8">Débloquez la performance de votre équipe</p>
+
+
+                            <form onSubmit={handleSubmit} className="space-y-6">
+                                <div>
+                                    <label htmlFor="email" className="block text-gray-700 text-sm font-medium mb-2">
+                                        Adresse e-mail
+                                    </label>
+                                    <input
+                                        id="email"
+                                        name="email"
+                                        type="email"
+                                        placeholder="exemple@email.com"
+                                        className="w-full px-4 py-3 border border-teal-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-400"
+                                        value={formData.email}
+                                        onChange={handleChange}
+                                        autoComplete="email"
+                                        required
+                                    />
+                                </div>
+                                
+                                <div>
+                                    <label htmlFor="password" className="block text-gray-700 text-sm font-medium mb-2">
+                                        Mot de passe
+                                    </label>
+                                    <input
+                                        id="password"
+                                        name="password"
+                                        type="password"
+                                        placeholder="Entrez votre mot de passe"
+                                        className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-400"
+                                        value={formData.password}
+                                        onChange={handleChange}
+                                        autoComplete="current-password"
+                                        required
+                                    />
+                                </div>
+                                
+                                <div className="text-right">
+                                    <a href="#" className="text-gray-600 text-sm hover:text-teal-600 transition-colors">
+                                        Mot de passe oublié ?
+                                    </a>
+                                </div>
+                                
+                                <button
+                                    type="submit"
+                                    disabled={loading}
+                                    className="w-full bg-[#8290A9] text-white py-3 rounded-lg font-medium hover:bg-[#6B7C92] transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                                >
+                                    {loading ? "Connexion en cours..." : "Se connecter"}
+                                </button>
+                            </form>
+                            
+                            <div className="mt-6 text-center">
+                                <span className="text-gray-600 text-sm">
+                                    Vous n'avez pas de compte ?{" "}
+                                    <a href="/auth/register" className="text-[#8290A9] font-medium hover:text-[#6B7C92] transition-colors">
+                                        Inscrivez-vous
+                                    </a>
+                                </span>
+                            </div>
+                        </div>
+                        
+                        <div className="text-center mt-12">
+                            <p className="text-gray-400 text-xs">
+                                ©2021 Tous droits réservés
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

package/src/pages/auth/Register.tsx

@@ -0,0 +1,302 @@
+import React, { useState } from "react";
+import login_illustration from "../../assets/imgs/login_illustration.png";
+import { useToast } from "../../contexts/ToastContext";
+import { AuthServices } from "../../services/AuthServices";
+import { useNavigate } from "react-router-dom";
+
+const Register: React.FC = () => {
+    const [formData, setFormData] = useState({
+        email: "",
+        first_name: "",
+        last_name: "",
+        otp: "",
+        password: "",
+        confirm_password: "",
+    });
+    const [step, setStep] = useState<"register" | "otp" | "password">("register");
+    const [loading, setLoading] = useState(false);
+    const { success, error: showError, info } = useToast();
+
+    const navigate = useNavigate();
+
+    // Appels API réels
+    const sendOtp = async (email: string) => {
+        setLoading(true);
+        try {
+            const res = await AuthServices.sendOtp({ email }) as { success: boolean; message?: string; data?: any };
+            if (res.success) {
+                setStep("otp");
+                info(`Code de vérification envoyé à ${email}`);
+            } else {
+                showError(res.message || "Erreur lors de l'envoi du code de vérification");
+            }
+        } catch (error: any) {
+            showError(error?.message || "Erreur lors de l'envoi du code de vérification");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const verifyOtp = async (otp: string) => {
+        setLoading(true);
+        try {
+            const res = await AuthServices.verifyOtp({ email: formData.email, otp }) as { success: boolean; message?: string; data?: any };
+            if (res.success) {
+                setStep("password");
+                success("Code vérifié avec succès !");
+            } else {
+                showError(res.message || "Code de vérification invalide");
+            }
+        } catch (error: any) {
+            showError(error?.message || "Code de vérification invalide");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleChange = (
+        e: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleRegister = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formData.email || !formData.first_name || !formData.last_name) {
+            showError("Tous les champs sont obligatoires");
+            return;
+        }
+        sendOtp(formData.email);
+    };
+
+    const handleOtpSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formData.otp) {
+            showError("Le code de vérification est obligatoire");
+            return;
+        }
+        verifyOtp(formData.otp);
+    };
+
+    const handlePasswordSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formData.password) {
+            showError("Le mot de passe est obligatoire");
+            return;
+        }
+        if (formData.password !== formData.confirm_password) {
+            showError("Les mots de passe ne correspondent pas");
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = await AuthServices.completeRegistration({
+                email: formData.email,
+                password: formData.password,
+                confirmed_password: formData.confirm_password,
+                firstname: formData.first_name,
+                lastname: formData.last_name,
+            }) as { success: boolean; message?: string; data?: any };
+            if (res.success) {
+                success("Inscription réussie ! Bienvenue sur Rewise !");
+                setStep("register");
+                localStorage.setItem("token", res.data.token);
+                navigate("/home");
+                setFormData({ email: "", first_name: "", last_name: "", otp: "", password: "", confirm_password: "" });
+            } else {
+                showError(res.message || "Erreur lors de l'inscription");
+            }
+        } catch (error: any) {
+            showError(error?.message || "Erreur lors de l'inscription");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const getTitle = () => {
+        return step === "register" ? "Créer un compte" : step === "otp" ? "Vérifier l'e-mail" : "Définir le mot de passe";
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="bg-white rounded-3xl shadow-2xl overflow-hidden max-w-4xl w-full mx-4">
+                <div className="flex flex-col lg:flex-row">
+                    {/* Left side - Branding and Illustration */}
+                    <div className="lg:w-1/2 p-8 lg:p-12 bg-white flex flex-col justify-center">
+                        {/* Team illustration */}
+                        <div className="flex justify-center items-center h-full mb-8">
+                            <img src={login_illustration} alt="Register Illustration" className="object-contain" />
+                        </div>
+                    </div>
+                    
+                    {/* Right side - Register form */}
+                    <div className="lg:w-1/2 p-8 lg:p-12 bg-gray-50">
+                        <div className="max-w-sm mx-auto">
+                            <h2 className="text-3xl font-bold text-gray-800 mb-2">Bienvenue sur Rewise</h2>
+                            <p className="text-gray-600 mb-8">{getTitle()}</p>
+
+
+                            {step === "register" && (
+                                <form onSubmit={handleRegister} className="space-y-6">
+                                    <div>
+                                        <label htmlFor="first_name" className="block text-gray-700 text-sm font-medium mb-2">
+                                            Prénom
+                                        </label>
+                                        <input
+                                            id="first_name"
+                                            type="text"
+                                            name="first_name"
+                                            placeholder="Entrez votre prénom"
+                                            value={formData.first_name}
+                                            onChange={handleChange}
+                                            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                                            required
+                                        />
+                                    </div>
+
+                                    <div>
+                                        <label htmlFor="last_name" className="block text-gray-700 text-sm font-medium mb-2">
+                                            Nom
+                                        </label>
+                                        <input
+                                            id="last_name"
+                                            type="text"
+                                            name="last_name"
+                                            placeholder="Entrez votre nom"
+                                            value={formData.last_name}
+                                            onChange={handleChange}
+                                            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                                            required
+                                        />
+                                    </div>
+
+                                    <div>
+                                        <label htmlFor="email" className="block text-gray-700 text-sm font-medium mb-2">
+                                            Adresse e-mail
+                                        </label>
+                                        <input
+                                            id="email"
+                                            type="email"
+                                            name="email"
+                                            placeholder="Entrez votre e-mail"
+                                            value={formData.email}
+                                            onChange={handleChange}
+                                            className="w-full px-4 py-3 border border-[#6B7C92] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                                            required
+                                        />
+                                    </div>
+
+                                    <button
+                                        type="submit"
+                                        className="w-full bg-[#8290A9] text-white py-3 rounded-lg font-medium hover:bg-[#6B7C92] transition-colors shadow-lg"
+                                        disabled={loading}
+                                    >
+                                        {loading ? "Envoi du code..." : "Créer un compte"}
+                                    </button>
+                                </form>
+                            )}
+
+                            {step === "otp" && (
+                                <form onSubmit={handleOtpSubmit} className="space-y-6">
+                                    <div>
+                                        <label htmlFor="otp" className="block text-gray-700 text-sm font-medium mb-2">
+                                            Code de vérification
+                                        </label>
+                                        <input
+                                            id="otp"
+                                            type="text"
+                                            name="otp"
+                                            placeholder="Entrez le code de vérification"
+                                            value={formData.otp}
+                                            onChange={handleChange}
+                                            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-400"
+                                            required
+                                        />
+                                    </div>
+
+                                    <button
+                                        type="submit"
+                                        className="w-full bg-teal-500 text-white py-3 rounded-lg font-medium hover:bg-teal-600 transition-colors shadow-lg"
+                                        disabled={loading}
+                                    >
+                                        {loading ? "Vérification..." : "Vérifier le code"}
+                                    </button>
+
+                                    <button
+                                        type="button"
+                                        className="w-full text-teal-600 text-sm hover:text-teal-700 transition-colors"
+                                        onClick={() => sendOtp(formData.email)}
+                                        disabled={loading}
+                                    >
+                                        Renvoyer le code
+                                    </button>
+                                </form>
+                            )}
+
+                            {step === "password" && (
+                                <form onSubmit={handlePasswordSubmit} className="space-y-6">
+                                    <div>
+                                        <label htmlFor="password" className="block text-gray-700 text-sm font-medium mb-2">
+                                            Nouveau mot de passe
+                                        </label>
+                                        <input
+                                            id="password"
+                                            type="password"
+                                            name="password"
+                                            placeholder="Entrez votre mot de passe"
+                                            value={formData.password}
+                                            onChange={handleChange}
+                                            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-400"
+                                            required
+                                        />
+                                    </div>
+
+                                    <div>
+                                        <label htmlFor="confirm_password" className="block text-gray-700 text-sm font-medium mb-2">
+                                            Confirmer le mot de passe
+                                        </label>
+                                        <input
+                                            id="confirm_password"
+                                            type="password"
+                                            name="confirm_password"
+                                            placeholder="Confirmez votre mot de passe"
+                                            value={formData.confirm_password}
+                                            onChange={handleChange}
+                                            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-400"
+                                            required
+                                        />
+                                    </div>
+
+                                    <button
+                                        type="submit"
+                                        className="w-full bg-teal-500 text-white py-3 rounded-lg font-medium hover:bg-teal-600 transition-colors shadow-lg"
+                                        disabled={loading}
+                                    >
+                                        {loading ? "Création du compte..." : "Terminer l'inscription"}
+                                    </button>
+                                </form>
+                            )}
+
+                            <div className="mt-6 text-center">
+                                <span className="text-gray-600 text-sm">
+                                    Vous avez déjà un compte ?{" "}
+                                    <a href="/auth/login" className="text-[#8290A9] font-medium hover:text-teal-600 transition-colors">
+                                        Se connecter
+                                    </a>
+                                </span>
+                            </div>
+                        </div>
+                        
+                        <div className="text-center mt-12">
+                            <p className="text-gray-400 text-xs">
+                                ©2021 Tous droits réservés
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Register;