236 lines
9.0 KiB
Plaintext
236 lines
9.0 KiB
Plaintext
<auth-panel>
|
|
<!--
|
|
==========================================================================
|
|
COMPOSANT <auth-panel>
|
|
|
|
RÔLE : gestion complète de l'authentification Firebase dans le header.
|
|
|
|
COMPORTEMENT VISIBLE :
|
|
- Si non connecté : bouton "Connexion" → ouvre une modale
|
|
- Si connecté : email de l'utilisateur + bouton "Déconnexion"
|
|
|
|
MODALE D'AUTHENTIFICATION :
|
|
- Onglet "Connexion" : formulaire email/mot de passe pour se connecter
|
|
- Onglet "Inscription": même formulaire pour créer un compte Firebase
|
|
|
|
PROPS reçues depuis <app> :
|
|
- user : objet utilisateur Firebase (ou null si non connecté)
|
|
- onauth : callback appelé après connexion/inscription réussie
|
|
- onlogout : callback appelé après déconnexion réussie
|
|
==========================================================================
|
|
-->
|
|
|
|
<!-- Bouton "Connexion" dans le header — visible uniquement si pas connecté -->
|
|
<div class="auth-header-btn" if={ !props.user }>
|
|
<button class="btn btn-auth" onclick={ ouvrirModale }>
|
|
<span class="auth-icon"></span> Connexion
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Informations utilisateur dans le header — visible uniquement si connecté -->
|
|
<div class="auth-user-info" if={ props.user }>
|
|
<span class="auth-email">{ props.user.email }</span>
|
|
<button class="btn btn-auth-logout" onclick={ seDeconnecter }>Déconnexion</button>
|
|
</div>
|
|
|
|
<!-- Modale d'authentification (overlay + contenu centré) -->
|
|
<!-- onclick={ cliquerFond } ferme la modale si on clique en dehors -->
|
|
<div class="auth-modal-overlay" if={ state.visible } onclick={ cliquerFond }>
|
|
<div class="auth-modal">
|
|
|
|
<!-- Croix de fermeture -->
|
|
<button class="auth-modal-close" onclick={ fermerModale }>✕</button>
|
|
|
|
<!-- Titre dynamique : "Connexion" ou "Créer un compte" selon l'onglet actif -->
|
|
<h2 class="auth-modal-title">{ state.titre }</h2>
|
|
|
|
<!-- Onglets pour basculer entre connexion et inscription -->
|
|
<div class="auth-tabs">
|
|
<button class={ state.classBtnConnexion } onclick={ afficherConnexion }>
|
|
Connexion
|
|
</button>
|
|
<button class={ state.classBtnInscription } onclick={ afficherInscription }>
|
|
Inscription
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Formulaire unique utilisé pour les deux modes (connexion et inscription) -->
|
|
<!-- onsubmit={ validerFormulaire } intercepte la soumission native du formulaire -->
|
|
<form onsubmit={ validerFormulaire } class="auth-form">
|
|
|
|
<div class="auth-field">
|
|
<label>Adresse e-mail</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="exemple@email.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="auth-field">
|
|
<label>Mot de passe</label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
required
|
|
minlength="6"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Message d'erreur : affiché uniquement si state.erreur est défini -->
|
|
<div class="auth-error" if={ state.erreur }>
|
|
{ state.erreur }
|
|
</div>
|
|
|
|
<!-- Bouton désactivé pendant le chargement pour éviter les doubles soumissions -->
|
|
<button type="submit" class="btn btn-primary auth-submit" disabled={ state.chargement }>
|
|
{ state.labelBouton }
|
|
</button>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
// ========================================================================
|
|
// ÉTAT LOCAL du composant
|
|
// visible : true si la modale est ouverte
|
|
// mode : 'connexion' ou 'inscription' (détermine l'action Firebase)
|
|
// chargement : true pendant l'appel Firebase (désactive le bouton submit)
|
|
// erreur : message d'erreur à afficher (null si pas d'erreur)
|
|
// titre, labelBouton, classBtn... : textes dynamiques selon le mode actif
|
|
// ========================================================================
|
|
state: {
|
|
visible: false,
|
|
mode: 'connexion',
|
|
chargement: false,
|
|
erreur: null,
|
|
titre: 'Connexion',
|
|
labelBouton: 'Se connecter',
|
|
classBtnConnexion: 'auth-tab active',
|
|
classBtnInscription: 'auth-tab'
|
|
},
|
|
|
|
// Ouvrir la modale et effacer les erreurs précédentes
|
|
ouvrirModale() {
|
|
this.update({ visible: true, erreur: null });
|
|
},
|
|
|
|
// Fermer la modale et effacer les erreurs
|
|
fermerModale() {
|
|
this.update({ visible: false, erreur: null });
|
|
},
|
|
|
|
// Fermer si l'utilisateur clique sur l'overlay (fond sombre)
|
|
// e.target === e.currentTarget : vrai seulement si on clique sur le fond lui-même
|
|
// et non sur le contenu de la modale (qui stopperait la propagation)
|
|
cliquerFond(e) {
|
|
if (e.target === e.currentTarget) {
|
|
this.fermerModale();
|
|
}
|
|
},
|
|
|
|
// Basculer vers l'onglet "Connexion"
|
|
afficherConnexion() {
|
|
this.update({
|
|
mode: 'connexion',
|
|
erreur: null,
|
|
titre: 'Connexion',
|
|
labelBouton: 'Se connecter',
|
|
classBtnConnexion: 'auth-tab active',
|
|
classBtnInscription: 'auth-tab'
|
|
});
|
|
},
|
|
|
|
// Basculer vers l'onglet "Inscription"
|
|
afficherInscription() {
|
|
this.update({
|
|
mode: 'inscription',
|
|
erreur: null,
|
|
titre: 'Créer un compte',
|
|
labelBouton: 'Créer le compte',
|
|
classBtnConnexion: 'auth-tab',
|
|
classBtnInscription: 'auth-tab active'
|
|
});
|
|
},
|
|
|
|
// ========================================================================
|
|
// validerFormulaire(e)
|
|
// RÔLE : soumettre le formulaire via Firebase Auth selon le mode actif.
|
|
//
|
|
// Étapes :
|
|
// 1. e.preventDefault() : empêche le rechargement de la page (comportement natif)
|
|
// 2. Lecture des champs email et password
|
|
// 3. Appel Firebase (createAccount ou login) selon state.mode
|
|
// 4. Si succès : fermer la modale et appeler props.onauth
|
|
// 5. Si échec : traduire le code d'erreur Firebase en message lisible
|
|
//
|
|
// Les codes d'erreur Firebase (err.code) sont des chaînes standardisées
|
|
// ex: "auth/email-already-in-use", "auth/wrong-password", etc.
|
|
// ========================================================================
|
|
async validerFormulaire(e) {
|
|
e.preventDefault(); // empêche la soumission HTML classique (rechargement de page)
|
|
|
|
var email = e.target.email.value.trim();
|
|
var password = e.target.password.value;
|
|
var services = window.firebaseServices;
|
|
|
|
this.update({ chargement: true, erreur: null }); // désactive le bouton pendant l'appel
|
|
|
|
try {
|
|
|
|
if (this.state.mode === 'inscription') {
|
|
await services.createAccount(email, password); // crée le compte Firebase
|
|
} else {
|
|
await services.login(email, password); // connecte l'utilisateur
|
|
}
|
|
|
|
this.update({ visible: false, chargement: false });
|
|
// Notifie le parent que l'authentification a réussi
|
|
this.props.onauth && this.props.onauth();
|
|
|
|
} catch (err) {
|
|
|
|
// Traduction des codes d'erreur Firebase en messages utilisateur compréhensibles
|
|
var messageErreur = 'Une erreur est survenue.';
|
|
|
|
if (err.code === 'auth/email-already-in-use') {
|
|
messageErreur = 'Cet e-mail est déjà utilisé.';
|
|
} else if (err.code === 'auth/invalid-email') {
|
|
messageErreur = 'Adresse e-mail invalide.';
|
|
} else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
|
|
messageErreur = 'E-mail ou mot de passe incorrect.';
|
|
} else if (err.code === 'auth/weak-password') {
|
|
messageErreur = 'Le mot de passe doit faire au moins 6 caractères.';
|
|
} else if (err.code === 'auth/user-not-found') {
|
|
messageErreur = 'Aucun compte trouvé avec cet e-mail.';
|
|
}
|
|
|
|
this.update({ chargement: false, erreur: messageErreur });
|
|
}
|
|
},
|
|
|
|
// ========================================================================
|
|
// seDeconnecter()
|
|
// RÔLE : déconnecter l'utilisateur via Firebase et notifier le parent.
|
|
// app.riot réagit en vidant la sélection (props.onlogout → surDeconnexion).
|
|
// ========================================================================
|
|
async seDeconnecter() {
|
|
try {
|
|
await window.firebaseServices.logout();
|
|
// Notifie le parent pour qu'il vide la sélection et mette à jour l'UI
|
|
this.props.onlogout && this.props.onlogout();
|
|
} catch (err) {
|
|
console.error('Erreur déconnexion :', err);
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
</auth-panel>
|