ajout de la persistance des données et authentification

2026-03-20 02:35:15 +01:00
parent 70aed67ba6
commit c3ba9c39c1
5 changed files with 1152 additions and 753 deletions
@@ -0,0 +1,141 @@
+<auth-panel>
+  <!-- Bouton compact dans le header quand pas 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 -->
+  <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 -->
+  <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>
+
+      <div class="auth-tabs">
+        <button
+          class={ state.mode === 'login' ? 'auth-tab active' : 'auth-tab' }
+          onclick={ () => switchMode('login') }>
+          Connexion
+        </button>
+        <button
+          class={ state.mode === 'register' ? 'auth-tab active' : 'auth-tab' }
+          onclick={ () => switchMode('register') }>
+          Inscription
+        </button>
+      </div>
+
+      <form onsubmit={ handleSubmit } 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>
+
+        <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') }
+        </button>
+      </form>
+    </div>
+  </div>
+
+  <script>
+    export default {
+      state: {
+        open: false,
+        mode: 'login',
+        loading: false,
+        error: null
+      },
+
+      openModal() {
+        this.update({ open: true, error: null })
+      },
+
+      closeModal() {
+        this.update({ open: false, error: null })
+      },
+
+      closeOnOverlay(e) {
+        if (e.target === e.currentTarget) {
+          this.closeModal()
+        }
+      },
+
+      switchMode(mode) {
+        this.update({ mode: mode, error: null })
+      },
+
+      async handleSubmit(e) {
+        e.preventDefault()
+        var email = e.target.email.value.trim()
+        var password = e.target.password.value
+
+        this.update({ loading: true, error: null })
+
+        try {
+          var services = window.firebaseServices
+
+          if (this.state.mode === 'register') {
+            await services.createAccount(email, password)
+          } else {
+            await services.login(email, password)
+          }
+
+          this.update({ open: false, loading: false })
+          this.props.onauth && this.props.onauth()
+        } catch (err) {
+          var msg = 'Une erreur est survenue.'
+
+          if (err.code === 'auth/email-already-in-use') {
+            msg = 'Cet e-mail est déjà utilisé.'
+          } else if (err.code === 'auth/invalid-email') {
+            msg = 'Adresse e-mail invalide.'
+          } else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
+            msg = '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.'
+          } else if (err.code === 'auth/user-not-found') {
+            msg = 'Aucun compte trouvé avec cet e-mail.'
+          }
+
+          this.update({ loading: false, error: msg })
+        }
+      },
+
+      async handleLogout() {
+        try {
+          await window.firebaseServices.logout()
+          this.props.onlogout && this.props.onlogout()
+        } catch (err) {
+          console.error('Erreur déconnexion:', err)
+        }
+      }
+    }
+  </script>
+</auth-panel>