Maj smtp, reset password, et ajout afroshine

app/forgot-password/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useUser } from '@/components/UserProvider';
+
+const ForgotPasswordPage = () => {
+    const { settings } = useUser();
+    const siteName = settings?.siteName || "Afrohub";
+    const [email, setEmail] = useState('');
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        setMessage('');
+
+        try {
+            const res = await fetch('/api/auth/forgot-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email }),
+            });
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                throw new Error(data.error || 'Une erreur est survenue');
+            }
+
+            setMessage(data.message);
+        } catch (err: any) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-[80vh] flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full space-y-8">
+                <div className="text-center">
+                    <div className="mx-auto h-12 w-12 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-2xl">
+                        {siteName.charAt(0)}
+                    </div>
+                    <h2 className="mt-6 text-3xl font-extrabold text-gray-900 font-serif">Mot de passe oublié</h2>
+                    <p className="mt-2 text-sm text-gray-600">
+                        Entrez votre adresse email pour recevoir un lien de réinitialisation
+                    </p>
+                </div>
+                
+                {message ? (
+                    <div className="bg-green-50 border-l-4 border-green-500 p-4 rounded text-green-700 text-sm">
+                        {message}
+                        <div className="mt-4">
+                            <Link href="/login" className="font-medium text-brand-600 hover:text-brand-500"> Retourner à la connexion</Link>
+                        </div>
+                    </div>
+                ) : (
+                    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+                        {error && (
+                            <div className="bg-red-50 border-l-4 border-red-500 p-4 rounded text-red-700 text-sm">
+                                {error}
+                            </div>
+                        )}
+                        <div className="rounded-md shadow-sm -space-y-px">
+                            <div>
+                                <input
+                                    type="email"
+                                    required
+                                    className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-brand-500 focus:border-brand-500 focus:z-10 sm:text-sm"
+                                    placeholder="Adresse email"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <button 
+                                type="submit" 
+                                disabled={loading}
+                                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-70"
+                            >
+                                {loading ? 'Envoi...' : 'Envoyer le lien'}
+                            </button>
+                        </div>
+                        <div className="text-center">
+                            <Link href="/login" className="font-medium text-brand-600 hover:text-brand-500 text-sm"> Retourner à la connexion</Link>
+                        </div>
+                    </form>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ForgotPasswordPage;