Réinitialisation du Mot de Passe

Permettez aux utilisateurs de réinitialiser les mots de passe oubliés.

---

Flux de Réinitialisation du Mot de Passe

---

Étape 1 : Demander la Réinitialisation

'use client';

import { useState } from 'react';

export function RequestResetForm() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const handleRequest = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    const response = await fetch('https://api.syauth.com/e/v1/password/reset/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    });

    if (response.ok) {
      setSent(true);
    }
    setLoading(false);
  };

  if (sent) {
    return (
      <div>
        <p>Si un compte existe avec cet email, vous recevrez un code de réinitialisation.</p>
        <a href="/reset-password">Entrer le code de réinitialisation</a>
      </div>
    );
  }

  return (
    <form onSubmit={handleRequest}>
      <h2>Mot de Passe Oublié</h2>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Entrez votre email"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Envoi...' : 'Envoyer le Code de Réinitialisation'}
      </button>
    </form>
  );
}

---

Étape 2 : Confirmer la Réinitialisation avec le Code

'use client';

import { useState } from 'react';

export function ResetPasswordForm() {
  const [formData, setFormData] = useState({
    email: '',
    code: '',
    new_password: '',
    confirm_password: '',
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleReset = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (formData.new_password !== formData.confirm_password) {
      setError('Les mots de passe ne correspondent pas');
      return;
    }

    setLoading(true);
    setError('');

    const response = await fetch('https://api.syauth.com/e/v1/password/reset/confirm/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: formData.email,
        code: formData.code,
        new_password: formData.new_password,
      }),
    });

    if (response.ok) {
      alert('Mot de passe réinitialisé avec succès ! Veuillez vous connecter.');
      window.location.href = '/login';
    } else {
      const data = await response.json();
      setError(data.error || 'Échec de la réinitialisation');
    }
    setLoading(false);
  };

  return (
    <form onSubmit={handleReset}>
      <h2>Réinitialiser le Mot de Passe</h2>
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        placeholder="Email"
        required
      />
      <input
        type="text"
        value={formData.code}
        onChange={(e) => setFormData({ ...formData, code: e.target.value })}
        placeholder="Code à 6 chiffres"
        maxLength={6}
        required
      />
      <input
        type="password"
        value={formData.new_password}
        onChange={(e) => setFormData({ ...formData, new_password: e.target.value })}
        placeholder="Nouveau Mot de Passe"
        required
      />
      <input
        type="password"
        value={formData.confirm_password}
        onChange={(e) => setFormData({ ...formData, confirm_password: e.target.value })}
        placeholder="Confirmer le Mot de Passe"
        required
      />
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? 'Réinitialisation...' : 'Réinitialiser le Mot de Passe'}
      </button>
    </form>
  );
}

---

Endpoints API

Demander la Réinitialisation

POST https://api.syauth.com/e/v1/password/reset/
Content-Type: application/json

{
  "email": "[email protected]"
}

Réponse (toujours 200 pour la sécurité) :

{
  "success": true,
  "message": "Si l'email existe, un code de réinitialisation a été envoyé"
}

Confirmer la Réinitialisation

POST https://api.syauth.com/e/v1/password/reset/confirm/
Content-Type: application/json

{
  "email": "[email protected]",
  "code": "123456",
  "new_password": "NouveauMotDePasse123!"
}

Réponse succès :

{
  "success": true,
  "message": "Mot de passe réinitialisé avec succès"
}

---

Changer le Mot de Passe (Authentifié)

Pour les utilisateurs connectés voulant changer leur mot de passe :

async function changePassword(currentPassword: string, newPassword: string, accessToken: string) {
  const response = await fetch('https://api.syauth.com/e/v1/user/password/update/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`,
    },
    body: JSON.stringify({
      current_password: currentPassword,
      new_password: newPassword,
    }),
  });

  return response.ok;
}

---

Exigences du Mot de Passe

Les nouveaux mots de passe doivent satisfaire :

• Minimum 8 caractères
• Au moins une lettre majuscule
• Au moins une lettre minuscule
• Au moins un chiffre
• Au moins un caractère spécial

---

Gestion des Erreurs

Erreur	Cause	Solution
invalid_code	Code incorrect ou expiré	Demander un nouveau code
code_expired	Code plus vieux qu'1 heure	Demander un nouveau code
weak_password	Mot de passe trop faible	Afficher les exigences
invalid_current_password	Mot de passe actuel incorrect	Vérifier la saisie

---

Considérations de Sécurité

• Les codes de réinitialisation expirent après 1 heure
• Les codes sont à usage unique
• La limitation de débit empêche les attaques par force brute
• La réponse générique cache l'existence de l'email

---

Prochaines étapes

• Profils Utilisateurs - Mettre à jour les informations de profil
• Groupes Utilisateurs - Gérer les assignations de groupes