public-html2/parcoursup/components/auth-panel.riot

<auth-panel>

  <!-- 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>

  <!-- 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 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.titre }</h2>

      <!-- Onglets Connexion / Inscription -->
      <div class="auth-tabs">
        <button class={ state.classBtnLogin } onclick={ switchToLogin }>
          Connexion
        </button>
        <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
            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.error }>
          { state.error }
        </div>

        <button type="submit" class="btn btn-primary auth-submit" disabled={ state.loading }>
          { state.labelBouton }
        </button>

      </form>
    </div>
  </div>

  <script>
    export default {

      state: {
        open: false,
        mode: 'login',
        loading: false,
        error: null,
        titre: 'Connexion',
        labelBouton: 'Se connecter',
        classBtnLogin: 'auth-tab active',
        classBtnRegister: 'auth-tab'
      },

      openModal() {
        this.update({ open: true, error: null })
      },

      closeModal() {
        this.update({ open: false, error: null })
      },

      closeOnOverlay(e) {
        if (e.target === e.currentTarget) {
          this.closeModal()
        }
      },

      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 password = e.target.password.value
        var services = window.firebaseServices

        this.update({ loading: true, error: null })

        try {

          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 message = 'Une erreur est survenue.'

          if (err.code === 'auth/email-already-in-use') {
            message = 'Cet e-mail est déjà utilisé.'
          } else if (err.code === 'auth/invalid-email') {
            message = 'Adresse e-mail invalide.'
          } else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
            message = '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.'
          } else if (err.code === 'auth/user-not-found') {
            message = 'Aucun compte trouvé avec cet e-mail.'
          }

          this.update({ loading: false, error: message })
        }
      },

      async handleLogout() {
        try {
          await window.firebaseServices.logout()
          this.props.onlogout && this.props.onlogout()
        } catch (err) {
          console.error('Erreur déconnexion :', err)
        }
      }

    }
  </script>

</auth-panel>