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={ 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>