ajout de la persistance des données et authentification
This commit is contained in:
+46
-5
@@ -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>
|
||||
<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) }) },
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
};
|
||||
@@ -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">
|
||||
|
||||
+200
-47
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user