refont de la connexion par google et validation de lenvoie de mail a l'utilisater

frontend/src/App.jsx

@@ -6,6 +6,7 @@ import CookieBanner from './components/CookieBanner.jsx'
 import Connexion from './pages/Connexion'
 import Inscription from './pages/Inscription'
 import AuthCallback from './pages/AuthCallback'
+import DefinirMotDePasse from './pages/DefinirMotDePasse'
 import Accueil from './pages/Accueil'
 import ReglesJeu from './pages/ReglesJeu'
 import MesGains from './pages/MesGains'
@@ -31,6 +32,7 @@ export default function App() {
         <Route path="/connexion" element={<Connexion />} />
         <Route path="/inscription" element={<Inscription />} />
         <Route path="/auth/callback" element={<AuthCallback />} />
+        <Route path="/definir-mot-de-passe/:token" element={<DefinirMotDePasse />} />
 
         {/* Pages publiques */}
         <Route path="/accueil" element={<Layout><Accueil /></Layout>} />

frontend/src/pages/DefinirMotDePasse.jsx

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { resetPasswordApi } from '../services/auth'
+
+// Sert les deux parcours qui passent par un jeton envoyé par email :
+// la définition initiale du mot de passe après une inscription Google,
+// et la réinitialisation classique depuis « mot de passe oublié ».
+export default function DefinirMotDePasse() {
+  const { token } = useParams()
+  const navigate = useNavigate()
+
+  const [form, setForm] = useState({ password: '', confirmPassword: '' })
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value })
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+
+    if (form.password.length < 8) {
+      setError('Le mot de passe doit contenir au moins 8 caractères.')
+      return
+    }
+    if (form.password !== form.confirmPassword) {
+      setError('Les deux mots de passe ne correspondent pas.')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await resetPasswordApi({ token, ...form })
+      setSuccess('Mot de passe enregistré. Vous pouvez maintenant vous connecter avec votre email.')
+      setTimeout(() => navigate('/connexion'), 2500)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto text-center">
+        <div className="mb-4 px-4 py-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
+          {success}
+        </div>
+        <Link to="/connexion" className="text-sm text-[#006B6B] font-medium hover:underline">
+          Aller à la connexion
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold italic font-serif text-[#006B6B]">Mot de passe</h1>
+        <p className="text-gray-500 mt-1 text-sm">
+          Choisissez un mot de passe pour accéder à votre compte sans passer par Google.
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-800 mb-1">
+            Nouveau mot de passe <span className="text-gray-800">*</span>
+          </label>
+          <input
+            type={showPassword ? 'text' : 'password'}
+            id="password"
+            name="password"
+            value={form.password}
+            onChange={handleChange}
+            required
+            minLength={8}
+            placeholder="8 caractères minimum"
+            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-800 mb-1">
+            Confirmer le mot de passe <span className="text-gray-800">*</span>
+          </label>
+          <input
+            type={showPassword ? 'text' : 'password'}
+            id="confirmPassword"
+            name="confirmPassword"
+            value={form.confirmPassword}
+            onChange={handleChange}
+            required
+            placeholder="Saisissez-le à nouveau"
+            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
+          />
+        </div>
+
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={showPassword}
+            onChange={(e) => setShowPassword(e.target.checked)}
+            className="w-4 h-4 accent-[#006B6B]"
+          />
+          <span className="text-xs text-gray-500">Afficher les mots de passe</span>
+        </label>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
+        >
+          {loading ? 'Enregistrement…' : 'Enregistrer mon mot de passe'}
+        </button>
+      </form>
+
+      <p className="text-center text-sm text-gray-500 mt-8">
+        <Link to="/connexion" className="text-gray-700 font-medium hover:underline">
+          Retour à la connexion
+        </Link>
+      </p>
+    </div>
+  )
+}

frontend/src/pages/Profile.jsx

@@ -1,7 +1,7 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import UserNav from '../components/UserNav'
-import { changePasswordApi, deleteAccountApi } from '../services/auth'
+import { changePasswordApi, deleteAccountApi, meApi, forgotPasswordApi } from '../services/auth'
 import { useHandleAuthError } from '../hooks/useHandleAuthError'
 import { useAuth } from '../context/AuthContext'
 
@@ -22,6 +22,35 @@ export default function Profile() {
   const [pwError, setPwError] = useState('')
   const [pwSuccess, setPwSuccess] = useState(false)
 
+  // Un compte créé via Google peut ne pas avoir de mot de passe : le
+  // formulaire de modification n'aurait alors aucun sens. L'information vient
+  // de l'API, car le profil stocké en localStorage ne la contient pas.
+  const [hasPassword, setHasPassword] = useState(null)
+  const [linkSending, setLinkSending] = useState(false)
+  const [linkSent, setLinkSent] = useState(false)
+  const [linkError, setLinkError] = useState('')
+
+  useEffect(() => {
+    meApi()
+      .then((data) => setHasPassword(data.user.hasPassword))
+      .catch((e) => {
+        if (!handleAuthError(e)) setHasPassword(true)
+      })
+  }, [])
+
+  const handleSendSetupLink = async () => {
+    setLinkError('')
+    setLinkSending(true)
+    try {
+      await forgotPasswordApi(user.email)
+      setLinkSent(true)
+    } catch (e) {
+      if (!handleAuthError(e)) setLinkError(e.message)
+    } finally {
+      setLinkSending(false)
+    }
+  }
+
   const handlePwChange = (e) => setPwForm({ ...pwForm, [e.target.name]: e.target.value })
 
   const handlePwSubmit = async (e) => {
@@ -97,9 +126,37 @@ export default function Profile() {
 
       {/* Section changement de mot de passe */}
       <div>
-        <h2 className="text-sm font-semibold text-gray-800 mb-4">Changer mon mot de passe</h2>
+        <h2 className="text-sm font-semibold text-gray-800 mb-4">
+          {hasPassword === false ? 'Définir un mot de passe' : 'Changer mon mot de passe'}
+        </h2>
 
-        {pwSuccess && (
+        {hasPassword === false && (
+          <div className="px-4 py-4 rounded-lg bg-gray-50 border border-gray-200">
+            <p className="text-sm text-gray-600">
+              Votre compte a été créé avec Google et n&apos;a pas encore de mot de passe.
+              Définissez-en un pour pouvoir aussi vous connecter avec votre email.
+            </p>
+
+            {linkSent ? (
+              <p className="mt-3 text-sm text-green-700">
+                Lien envoyé à {user.email}. Consultez votre boîte mail.
+              </p>
+            ) : (
+              <button
+                type="button"
+                onClick={handleSendSetupLink}
+                disabled={linkSending}
+                className="mt-3 bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-medium px-4 py-2.5 rounded-lg transition-colors text-sm"
+              >
+                {linkSending ? 'Envoi…' : 'Recevoir un lien par email'}
+              </button>
+            )}
+
+            {linkError && <p className="mt-2 text-sm text-red-600">{linkError}</p>}
+          </div>
+        )}
+
+        {hasPassword !== false && pwSuccess && (
           <div className="mb-4 px-4 py-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm flex items-center gap-2">
             <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
@@ -108,12 +165,13 @@ export default function Profile() {
           </div>
         )}
 
-        {pwError && (
+        {hasPassword !== false && pwError && (
           <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
             {pwError}
           </div>
         )}
 
+        {hasPassword !== false && (
         <form onSubmit={handlePwSubmit} className="space-y-4">
           {[
             { name: 'currentPassword', label: 'Mot de passe actuel', key: 'current' },
@@ -153,6 +211,7 @@ export default function Profile() {
             {pwLoading ? 'Modification…' : 'Modifier le mot de passe'}
           </button>
         </form>
+        )}
       </div>
     </div>
   )

frontend/src/services/auth.js

@@ -57,6 +57,38 @@ export async function verifyCodeApi({ email, code }) {
   return data
 }
 
+export async function forgotPasswordApi(email) {
+  const res = await fetch(`${BASE}/forgot-password`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw apiError(data.message || "Erreur lors de l'envoi du lien.", res.status)
+  return data
+}
+
+export async function resetPasswordApi({ token, password, confirmPassword }) {
+  const res = await fetch(`${BASE}/reset-password/${token}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password, confirmPassword }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw apiError(data.message || 'Erreur lors de la définition du mot de passe.', res.status)
+  return data
+}
+
+export async function meApi() {
+  const token = localStorage.getItem('token')
+  const res = await fetch(`${BASE}/me`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  const data = await res.json()
+  if (!res.ok) throw apiError(data.message || 'Erreur lors de la récupération du profil.', res.status)
+  return data
+}
+
 export async function deleteAccountApi() {
   const token = localStorage.getItem('token')
   const res = await fetch(`${BASE}/account`, {