maj

parcoursup/components/auth-panel.riot

@@ -2,37 +2,37 @@
 
   <!-- Bouton connexion dans le header (utilisateur non connecté) -->
   <div class="auth-header-btn" if={ !props.user }>
-    <button class="btn btn-auth" onclick={ openModal }>
-      <span class="auth-icon">👤</span> Connexion
+    <button class="btn btn-auth" onclick={ ouvrirModale }>
+      <span class="auth-icon"></span> Connexion
     </button>
   </div>
 
   <!-- Email + bouton déconnexion dans le header (utilisateur connecté) -->
   <div class="auth-user-info" if={ props.user }>
     <span class="auth-email">{ props.user.email }</span>
-    <button class="btn btn-auth-logout" onclick={ handleLogout }>Déconnexion</button>
+    <button class="btn btn-auth-logout" onclick={ seDeconnecter }>Déconnexion</button>
   </div>
 
   <!-- Modale d'authentification -->
-  <div class="auth-modal-overlay" if={ state.open } onclick={ closeOnOverlay }>
+  <div class="auth-modal-overlay" if={ state.visible } onclick={ cliquerFond }>
     <div class="auth-modal">
 
-      <button class="auth-modal-close" onclick={ closeModal }>✕</button>
+      <button class="auth-modal-close" onclick={ fermerModale }>✕</button>
 
       <h2 class="auth-modal-title">{ state.titre }</h2>
 
       <!-- Onglets Connexion / Inscription -->
       <div class="auth-tabs">
-        <button class={ state.classBtnLogin } onclick={ switchToLogin }>
+        <button class={ state.classBtnConnexion }   onclick={ afficherConnexion }>
           Connexion
         </button>
-        <button class={ state.classBtnRegister } onclick={ switchToRegister }>
+        <button class={ state.classBtnInscription } onclick={ afficherInscription }>
           Inscription
         </button>
       </div>
 
       <!-- Formulaire -->
-      <form onsubmit={ handleSubmit } class="auth-form">
+      <form onsubmit={ validerFormulaire } class="auth-form">
 
         <div class="auth-field">
           <label>Adresse e-mail</label>
@@ -56,11 +56,11 @@
         </div>
 
         <!-- Message d'erreur -->
-        <div class="auth-error" if={ state.error }>
-          { state.error }
+        <div class="auth-error" if={ state.erreur }>
+          { state.erreur }
         </div>
 
-        <button type="submit" class="btn btn-primary auth-submit" disabled={ state.loading }>
+        <button type="submit" class="btn btn-primary auth-submit" disabled={ state.chargement }>
           { state.labelBouton }
         </button>
 
@@ -72,93 +72,94 @@
     export default {
 
       state: {
-        open: false,
-        mode: 'login',
-        loading: false,
-        error: null,
-        titre: 'Connexion',
-        labelBouton: 'Se connecter',
-        classBtnLogin: 'auth-tab active',
-        classBtnRegister: 'auth-tab'
+        visible:            false,
+        mode:               'connexion',
+        chargement:         false,
+        erreur:             null,
+        titre:              'Connexion',
+        labelBouton:        'Se connecter',
+        classBtnConnexion:  'auth-tab active',
+        classBtnInscription: 'auth-tab'
       },
 
-      openModal() {
-        this.update({ open: true, error: null })
+      ouvrirModale() {
+        this.update({ visible: true, erreur: null })
       },
 
-      closeModal() {
-        this.update({ open: false, error: null })
+      fermerModale() {
+        this.update({ visible: false, erreur: null })
       },
 
-      closeOnOverlay(e) {
+      // Fermer si l'utilisateur clique en dehors de la modale
+      cliquerFond(e) {
         if (e.target === e.currentTarget) {
-          this.closeModal()
+          this.fermerModale()
         }
       },
 
-      switchToLogin() {
+      afficherConnexion() {
         this.update({
-          mode: 'login',
-          error: null,
-          titre: 'Connexion',
-          labelBouton: 'Se connecter',
-          classBtnLogin: 'auth-tab active',
-          classBtnRegister: 'auth-tab'
+          mode:                'connexion',
+          erreur:              null,
+          titre:               'Connexion',
+          labelBouton:         'Se connecter',
+          classBtnConnexion:   'auth-tab active',
+          classBtnInscription: 'auth-tab'
         })
       },
 
-      switchToRegister() {
+      afficherInscription() {
         this.update({
-          mode: 'register',
-          error: null,
-          titre: 'Créer un compte',
-          labelBouton: 'Créer le compte',
-          classBtnLogin: 'auth-tab',
-          classBtnRegister: 'auth-tab active'
+          mode:                'inscription',
+          erreur:              null,
+          titre:               'Créer un compte',
+          labelBouton:         'Créer le compte',
+          classBtnConnexion:   'auth-tab',
+          classBtnInscription: 'auth-tab active'
         })
       },
 
-      async handleSubmit(e) {
+      async validerFormulaire(e) {
         e.preventDefault()
 
-        var email    = e.target.email.value.trim()
-        var password = e.target.password.value
-        var services = window.firebaseServices
+        var email      = e.target.email.value.trim()
+        var password   = e.target.password.value
+        var services   = window.firebaseServices
 
-        this.update({ loading: true, error: null })
+        this.update({ chargement: true, erreur: null })
 
         try {
 
-          if (this.state.mode === 'register') {
+          if (this.state.mode === 'inscription') {
             await services.createAccount(email, password)
           } else {
             await services.login(email, password)
           }
 
-          this.update({ open: false, loading: false })
+          this.update({ visible: false, chargement: false })
           this.props.onauth && this.props.onauth()
 
         } catch (err) {
 
-          var message = 'Une erreur est survenue.'
+          var messageErreur = 'Une erreur est survenue.'
 
           if (err.code === 'auth/email-already-in-use') {
-            message = 'Cet e-mail est déjà utilisé.'
+            messageErreur = 'Cet e-mail est déjà utilisé.'
           } else if (err.code === 'auth/invalid-email') {
-            message = 'Adresse e-mail invalide.'
+            messageErreur = 'Adresse e-mail invalide.'
           } else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
-            message = 'E-mail ou mot de passe incorrect.'
+            messageErreur = 'E-mail ou mot de passe incorrect.'
           } else if (err.code === 'auth/weak-password') {
-            message = 'Le mot de passe doit faire au moins 6 caractères.'
+            messageErreur = 'Le mot de passe doit faire au moins 6 caractères.'
           } else if (err.code === 'auth/user-not-found') {
-            message = 'Aucun compte trouvé avec cet e-mail.'
+            messageErreur = 'Aucun compte trouvé avec cet e-mail.'
           }
 
-          this.update({ loading: false, error: message })
+          this.update({ chargement: false, erreur: messageErreur })
         }
       },
 
-      async handleLogout() {
+      async seDeconnecter() {
         try {
           await window.firebaseServices.logout()
           this.props.onlogout && this.props.onlogout()