ajout de la persistance des données et authentification

parcoursup/app.riot

@@ -2,12 +2,15 @@
   <header class="site-header">
     <div class="header-inner">
       <a class="logo" href="#/">
-        <span class="logo-icon">🎓</span>
+        <span class="logo-icon"></span>
         <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
       </a>
-      <a href="#/comparateur" class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 }>
-        { state.selectedFormations.length } sélection(s)
-      </a>
+      <div class="header-right">
+        <a href="#/comparateur" class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 }>
+          { state.selectedFormations.length } sélection(s)
+        </a>
+        <auth-panel user={ state.user } onauth={ onUserAuth } onlogout={ onUserLogout }></auth-panel>
+      </div>
     </div>
   </header>
 
@@ -158,7 +161,8 @@
         filters: {},
         page: 1,
         limit: 20,
-        total: 0
+        total: 0,
+        user: null
       },
 
       onMounted() {
@@ -174,6 +178,23 @@
 
         var self = this
 
+        // Écouter les changements d'authentification Firebase
+        window.firebaseServices.onUserChanged(function(user) {
+          self.update({ user: user })
+
+          if (user) {
+            // Charger la sélection depuis Firestore
+            window.firebaseServices.loadUserData(user.uid).then(function(data) {
+              if (data && data.selection) {
+                self.update({ selectedFormations: data.selection })
+                localStorage.setItem('selectionFormations', JSON.stringify(data.selection))
+              }
+            }).catch(function(err) {
+              console.error('Erreur chargement Firestore:', err)
+            })
+          }
+        })
+
         window.addEventListener('hashchange', function() {
           self.handleRoute()
         })
@@ -181,6 +202,26 @@
         this.handleRoute()
       },
 
+      onUserAuth() {
+        // Appelé après connexion/inscription réussie — l'écouteur onUserChanged gère le reste
+      },
+
+      onUserLogout() {
+        // On garde la sélection locale après déconnexion
+      },
+
+      async saveSelection(selection) {
+        localStorage.setItem('selectionFormations', JSON.stringify(selection))
+
+        if (this.state.user) {
+          try {
+            await window.firebaseServices.saveUserData(this.state.user.uid, { selection: selection })
+          } catch (err) {
+            console.error('Erreur sauvegarde Firestore:', err)
+          }
+        }
+      },
+
       handleRoute() {
         var hash = window.location.hash || '#/'
         var path = hash.slice(1) || '/'
@@ -330,7 +371,7 @@
         if (!exists) {
           selection.push(formation)
           this.update({ selectedFormations: selection })
-          localStorage.setItem('selectionFormations', JSON.stringify(selection))
+          this.saveSelection(selection)
         }
       },
 
@@ -346,12 +387,12 @@
         }
 
         this.update({ selectedFormations: newSelection })
-        localStorage.setItem('selectionFormations', JSON.stringify(newSelection))
+        this.saveSelection(newSelection)
       },
 
       clearSelection() {
         this.update({ selectedFormations: [] })
-        localStorage.setItem('selectionFormations', JSON.stringify([]))
+        this.saveSelection([])
       },
 
       updateNote(e) { this.update({ note: Number(e.target.value) }) },

parcoursup/components/auth-panel.riot

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

parcoursup/firebase.js

@@ -0,0 +1,63 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  signOut,
+  onAuthStateChanged
+} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+import {
+  getFirestore,
+  doc,
+  setDoc,
+  getDoc
+} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyDr1jMgGm0Oj_bOiWY-8Gy27IlzkmAzlOM",
+    authDomain: "parcoursupp-expl.firebaseapp.com",
+    projectId: "parcoursupp-expl",
+    storageBucket: "parcoursupp-expl.firebasestorage.app",
+    messagingSenderId: "973054617217",
+    appId: "1:973054617217:web:4d52af4280396976228f80"
+  };
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+async function createAccount(email, password) {
+  return createUserWithEmailAndPassword(auth, email, password);
+}
+
+async function login(email, password) {
+  return signInWithEmailAndPassword(auth, email, password);
+}
+
+async function logout() {
+  return signOut(auth);
+}
+
+function onUserChanged(callback) {
+  return onAuthStateChanged(auth, callback);
+}
+
+async function saveUserData(uid, data) {
+  await setDoc(doc(db, "users", uid), data, { merge: true });
+}
+
+async function loadUserData(uid) {
+  const snap = await getDoc(doc(db, "users", uid));
+  return snap.exists() ? snap.data() : null;
+}
+
+export {
+  auth,
+  db,
+  createAccount,
+  login,
+  logout,
+  onUserChanged,
+  saveUserData,
+  loadUserData
+};

parcoursup/index.html

@@ -19,6 +19,7 @@
     <script src="./components/result-list.riot" type="riot"></script>
     <script src="./components/detail-view.riot" type="riot"></script>
     <script src="./components/map-view.riot" type="riot"></script>
+    <script src="./components/auth-panel.riot" type="riot"></script>
     <script src="./app.riot" type="riot"></script>
 
     <script type="module">