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

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