Maj

2026-03-30 14:54:53 +02:00
parent 71773df0ee
commit bd24e921a7
16 changed files with 1240 additions and 683 deletions
@@ -0,0 +1,174 @@
+<auth-panel>
+
+  <!-- Bouton connexion dans le header (utilisateur non connecté) -->
+  <div class="auth-header-btn" if={ !props.user }>
+    <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={ seDeconnecter }>Déconnexion</button>
+  </div>
+
+  <!-- Modale d'authentification -->
+  <div class="auth-modal-overlay" if={ state.visible } onclick={ cliquerFond }>
+    <div class="auth-modal">
+
+      <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.classBtnConnexion }   onclick={ afficherConnexion }>
+          Connexion
+        </button>
+        <button class={ state.classBtnInscription } onclick={ afficherInscription }>
+          Inscription
+        </button>
+      </div>
+
+      <!-- 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 -->
+        <div class="auth-error" if={ state.erreur }>
+          { state.erreur }
+        </div>
+
+        <button type="submit" class="btn btn-primary auth-submit" disabled={ state.chargement }>
+          { state.labelBouton }
+        </button>
+
+      </form>
+    </div>
+  </div>
+
+  <script>
+    export default {
+
+      state: {
+        visible:            false,
+        mode:               'connexion',
+        chargement:         false,
+        erreur:             null,
+        titre:              'Connexion',
+        labelBouton:        'Se connecter',
+        classBtnConnexion:  'auth-tab active',
+        classBtnInscription: 'auth-tab'
+      },
+
+      ouvrirModale() {
+        this.update({ visible: true, erreur: null })
+      },
+
+      fermerModale() {
+        this.update({ visible: false, erreur: null })
+      },
+
+      // Fermer si l'utilisateur clique en dehors de la modale
+      cliquerFond(e) {
+        if (e.target === e.currentTarget) {
+          this.fermerModale()
+        }
+      },
+
+      afficherConnexion() {
+        this.update({
+          mode:                'connexion',
+          erreur:              null,
+          titre:               'Connexion',
+          labelBouton:         'Se connecter',
+          classBtnConnexion:   'auth-tab active',
+          classBtnInscription: 'auth-tab'
+        })
+      },
+
+      afficherInscription() {
+        this.update({
+          mode:                'inscription',
+          erreur:              null,
+          titre:               'Créer un compte',
+          labelBouton:         'Créer le compte',
+          classBtnConnexion:   'auth-tab',
+          classBtnInscription: 'auth-tab active'
+        })
+      },
+
+      async validerFormulaire(e) {
+        e.preventDefault()
+
+        var email      = e.target.email.value.trim()
+        var password   = e.target.password.value
+        var services   = window.firebaseServices
+
+        this.update({ chargement: true, erreur: null })
+
+        try {
+
+          if (this.state.mode === 'inscription') {
+            await services.createAccount(email, password)
+          } else {
+            await services.login(email, password)
+          }
+
+          this.update({ visible: false, chargement: false })
+          this.props.onauth && this.props.onauth()
+
+        } catch (err) {
+
+          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 })
+        }
+      },
+
+      async seDeconnecter() {
+        try {
+          await window.firebaseServices.logout()
+          this.props.onlogout && this.props.onlogout()
+        } catch (err) {
+          console.error('Erreur déconnexion :', err)
+        }
+      }
+
+    }
+  </script>
+
+</auth-panel>