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 }>
+      <div class="header-right">
-        { state.selectedFormations.length } sélection(s)
+        <a href="#/comparateur" class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 }>
-      </a>
+          { 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">

parcoursup/style.css

@@ -89,46 +89,6 @@
     border: 1px solid #b8e0cd;
   }
   
-  /* --- Header nav --- */
-  .header-nav {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-  
-  .nav-link {
-    color: var(--gris-500);
-    text-decoration: none;
-    padding: 6px 14px;
-    border-radius: var(--rayon);
-    font-size: 14px;
-    font-weight: 600;
-    transition: all 0.15s;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  .nav-link:hover {
-    color: var(--vert);
-    background: var(--vert-clair);
-  }
-  
-  .nav-active {
-    color: var(--vert-fonce);
-    background: var(--vert-clair);
-    border: 1px solid #b8e0cd;
-  }
-  
-  .nav-badge {
-    background: var(--vert);
-    color: white;
-    font-size: 11px;
-    font-weight: 800;
-    padding: 1px 7px;
-    border-radius: 10px;
-  }
-  
   /* ===========================================================
      PAGE
      =========================================================== */
@@ -229,13 +189,6 @@
   
   .card:hover { border-color: var(--vert); }
   
-  /* Pas de hover vert sur les cards colorées du comparateur */
-  .card-tres-favorable:hover { border-color: #6ec89b; }
-  .card-favorable:hover { border-color: #a3d9b8; }
-  .card-possible:hover { border-color: #f6e05e; }
-  .card-difficile:hover { border-color: #f5c6cb; }
-  .card-tres-difficile:hover { border-color: #f5a3a3; }
-  
   .card h3, .card h4 {
     margin-top: 0;
     margin-bottom: 6px;
@@ -743,3 +696,203 @@
     .search-bar button { width: 100%; }
   }
 
+  /* ===========================================================
+     HEADER RIGHT (badge + auth)
+     =========================================================== */
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  /* ===========================================================
+     AUTH PANEL
+     =========================================================== */
+
+  .btn-auth {
+    background: var(--vert);
+    color: white;
+    padding: 6px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    border: none;
+    border-radius: var(--rayon);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: background 0.15s;
+  }
+
+  .btn-auth:hover { background: var(--vert-fonce); }
+
+  .auth-icon { font-size: 15px; }
+
+  .auth-user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .auth-email {
+    font-size: 13px;
+    color: var(--gris-700);
+    font-weight: 500;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .btn-auth-logout {
+    background: white;
+    color: var(--rouge);
+    border: 1.5px solid #f5c6cb;
+    padding: 5px 12px;
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: var(--rayon);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .btn-auth-logout:hover {
+    background: #fef2f2;
+  }
+
+  /* --- Modale --- */
+  .auth-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(17, 24, 39, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    backdrop-filter: blur(2px);
+    animation: fadeIn 0.15s ease;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  .auth-modal {
+    background: white;
+    border-radius: 10px;
+    padding: 32px 36px;
+    width: 100%;
+    max-width: 400px;
+    position: relative;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
+    animation: slideUp 0.2s ease;
+  }
+
+  @keyframes slideUp {
+    from { transform: translateY(16px); opacity: 0; }
+    to   { transform: translateY(0);    opacity: 1; }
+  }
+
+  .auth-modal-close {
+    position: absolute;
+    top: 14px;
+    right: 16px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: var(--gris-500);
+    line-height: 1;
+    padding: 4px 6px;
+    border-radius: 4px;
+    transition: background 0.15s;
+  }
+
+  .auth-modal-close:hover { background: var(--gris-100); }
+
+  .auth-modal-title {
+    margin: 0 0 20px;
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--gris-900);
+  }
+
+  /* --- Onglets --- */
+  .auth-tabs {
+    display: flex;
+    margin-bottom: 24px;
+    border-bottom: 2px solid var(--gris-200);
+  }
+
+  .auth-tab {
+    flex: 1;
+    background: none;
+    border: none;
+    padding: 8px 0;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    color: var(--gris-500);
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: all 0.15s;
+  }
+
+  .auth-tab.active {
+    color: var(--vert);
+    border-bottom-color: var(--vert);
+  }
+
+  .auth-tab:hover:not(.active) { color: var(--gris-700); }
+
+  /* --- Formulaire --- */
+  .auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .auth-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .auth-field label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--gris-700);
+  }
+
+  .auth-field input {
+    padding: 10px 12px;
+    font-size: 14px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    outline: none;
+    transition: border-color 0.2s;
+    background: white;
+  }
+
+  .auth-field input:focus {
+    border-color: var(--vert);
+    box-shadow: 0 0 0 3px rgba(26, 147, 111, 0.12);
+  }
+
+  .auth-error {
+    background: #fef2f2;
+    border: 1px solid #f5c6cb;
+    color: var(--rouge);
+    padding: 10px 14px;
+    border-radius: var(--rayon);
+    font-size: 13px;
+  }
+
+  .auth-submit {
+    width: 100%;
+    justify-content: center;
+    padding: 11px;
+    font-size: 15px;
+  }