MAJ

parcoursup/components/auth-panel.riot

@@ -1,38 +1,39 @@
 <auth-panel>
-  <!-- Bouton compact dans le header quand pas connecté -->
+
+  <!-- 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>
   </div>
 
-  <!-- Info utilisateur connecté dans le header -->
+  <!-- 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>
   </div>
 
-  <!-- Modale -->
+  <!-- Modale d'authentification -->
   <div class="auth-modal-overlay" if={ state.open } onclick={ closeOnOverlay }>
     <div class="auth-modal">
+
       <button class="auth-modal-close" onclick={ closeModal }>✕</button>
 
-      <h2 class="auth-modal-title">{ state.mode === 'login' ? 'Connexion' : 'Créer un compte' }</h2>
+      <h2 class="auth-modal-title">{ state.titre }</h2>
 
+      <!-- Onglets Connexion / Inscription -->
       <div class="auth-tabs">
-        <button
-          class={ state.mode === 'login' ? 'auth-tab active' : 'auth-tab' }
-          onclick={ () => switchMode('login') }>
+        <button class={ state.classBtnLogin } onclick={ switchToLogin }>
           Connexion
         </button>
-        <button
-          class={ state.mode === 'register' ? 'auth-tab active' : 'auth-tab' }
-          onclick={ () => switchMode('register') }>
+        <button class={ state.classBtnRegister } onclick={ switchToRegister }>
           Inscription
         </button>
       </div>
 
+      <!-- Formulaire -->
       <form onsubmit={ handleSubmit } class="auth-form">
+
         <div class="auth-field">
           <label>Adresse e-mail</label>
           <input
@@ -42,6 +43,7 @@
             required
           />
         </div>
+
         <div class="auth-field">
           <label>Mot de passe</label>
           <input
@@ -53,24 +55,31 @@
           />
         </div>
 
+        <!-- Message d'erreur -->
         <div class="auth-error" if={ state.error }>
           { state.error }
         </div>
 
         <button type="submit" class="btn btn-primary auth-submit" disabled={ state.loading }>
-          { state.loading ? 'Chargement...' : (state.mode === 'login' ? 'Se connecter' : 'Créer le compte') }
+          { state.labelBouton }
         </button>
+
       </form>
     </div>
   </div>
 
   <script>
     export default {
+
       state: {
         open: false,
         mode: 'login',
         loading: false,
-        error: null
+        error: null,
+        titre: 'Connexion',
+        labelBouton: 'Se connecter',
+        classBtnLogin: 'auth-tab active',
+        classBtnRegister: 'auth-tab'
       },
 
       openModal() {
@@ -87,19 +96,38 @@
         }
       },
 
-      switchMode(mode) {
-        this.update({ mode: mode, error: null })
+      switchToLogin() {
+        this.update({
+          mode: 'login',
+          error: null,
+          titre: 'Connexion',
+          labelBouton: 'Se connecter',
+          classBtnLogin: 'auth-tab active',
+          classBtnRegister: 'auth-tab'
+        })
+      },
+
+      switchToRegister() {
+        this.update({
+          mode: 'register',
+          error: null,
+          titre: 'Créer un compte',
+          labelBouton: 'Créer le compte',
+          classBtnLogin: 'auth-tab',
+          classBtnRegister: 'auth-tab active'
+        })
       },
 
       async handleSubmit(e) {
         e.preventDefault()
-        var email = e.target.email.value.trim()
+
+        var email    = e.target.email.value.trim()
         var password = e.target.password.value
+        var services = window.firebaseServices
 
         this.update({ loading: true, error: null })
 
         try {
-          var services = window.firebaseServices
 
           if (this.state.mode === 'register') {
             await services.createAccount(email, password)
@@ -109,22 +137,24 @@
 
           this.update({ open: false, loading: false })
           this.props.onauth && this.props.onauth()
+
         } catch (err) {
-          var msg = 'Une erreur est survenue.'
+
+          var message = 'Une erreur est survenue.'
 
           if (err.code === 'auth/email-already-in-use') {
-            msg = 'Cet e-mail est déjà utilisé.'
+            message = 'Cet e-mail est déjà utilisé.'
           } else if (err.code === 'auth/invalid-email') {
-            msg = 'Adresse e-mail invalide.'
+            message = 'Adresse e-mail invalide.'
           } else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
-            msg = 'E-mail ou mot de passe incorrect.'
+            message = 'E-mail ou mot de passe incorrect.'
           } else if (err.code === 'auth/weak-password') {
-            msg = 'Le mot de passe doit faire au moins 6 caractères.'
+            message = 'Le mot de passe doit faire au moins 6 caractères.'
           } else if (err.code === 'auth/user-not-found') {
-            msg = 'Aucun compte trouvé avec cet e-mail.'
+            message = 'Aucun compte trouvé avec cet e-mail.'
           }
 
-          this.update({ loading: false, error: msg })
+          this.update({ loading: false, error: message })
         }
       },
 
@@ -133,9 +163,11 @@
           await window.firebaseServices.logout()
           this.props.onlogout && this.props.onlogout()
         } catch (err) {
-          console.error('Erreur déconnexion:', err)
+          console.error('Erreur déconnexion :', err)
         }
       }
+
     }
   </script>
+
 </auth-panel>