320 lines
10 KiB
JavaScript
320 lines
10 KiB
JavaScript
const API_URL = 'http://localhost:3000';
|
|
|
|
// --- DOM ELEMENTS ---
|
|
const authView = document.getElementById('auth-view');
|
|
const dashboardView = document.getElementById('dashboard-view');
|
|
const loginForm = document.getElementById('login-form');
|
|
const registerForm = document.getElementById('register-form');
|
|
const entriesGrid = document.getElementById('entries-grid');
|
|
const modalOverlay = document.getElementById('modal-overlay');
|
|
const userEmailDisplay = document.getElementById('user-email-display');
|
|
|
|
// --- INITIALIZATION ---
|
|
async function init() {
|
|
|
|
// Hack pour vérifier si on est loggué ou non, afin d'éviter une erreur 401 sur /entries au démarrage.
|
|
const isLoggedIn = localStorage.getItem('is_logged_in');
|
|
|
|
if (!isLoggedIn) {
|
|
// Cas 1 : Première visite ou déconnecté proprement
|
|
showAuth();
|
|
} else {
|
|
// Cas 2 : On pense être connecté, on vérifie auprès du serveur
|
|
|
|
// Petit hack UX : on stocke l'email dans localStorage (non sensible)
|
|
// juste pour l'affichage, car on ne souhaite pas stocker le token JWT côté client.
|
|
const savedEmail = localStorage.getItem('user_email_display');
|
|
if(savedEmail) userEmailDisplay.innerText = savedEmail;
|
|
|
|
await loadEntries(true);
|
|
}
|
|
|
|
}
|
|
|
|
// --- VIEW MANAGEMENT ---
|
|
function showAuth() {
|
|
authView.classList.add('active');
|
|
authView.classList.remove('hidden');
|
|
dashboardView.classList.remove('active');
|
|
dashboardView.classList.add('hidden');
|
|
}
|
|
|
|
function showDashboard() {
|
|
authView.classList.remove('active');
|
|
authView.classList.add('hidden');
|
|
dashboardView.classList.add('active');
|
|
dashboardView.classList.remove('hidden');
|
|
}
|
|
|
|
function switchTab(tab) {
|
|
const loginBtn = document.querySelector('.tab-btn:nth-child(1)');
|
|
const registerBtn = document.querySelector('.tab-btn:nth-child(2)');
|
|
|
|
if (tab === 'login') {
|
|
loginForm.classList.remove('hidden');
|
|
registerForm.classList.add('hidden');
|
|
loginBtn.classList.add('active');
|
|
registerBtn.classList.remove('active');
|
|
} else {
|
|
loginForm.classList.add('hidden');
|
|
registerForm.classList.remove('hidden');
|
|
loginBtn.classList.remove('active');
|
|
registerBtn.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// --- API CALLS ---
|
|
|
|
// LOGIN
|
|
loginForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('login-email').value;
|
|
const password = document.getElementById('login-password').value;
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password }),
|
|
credentials: 'include' // <--- INDISPENSABLE : Envoie/Reçoit les cookies
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
// On marque qu'on est loggué
|
|
localStorage.setItem('is_logged_in', 'true');
|
|
|
|
// On sauvegarde l'email juste pour l'UI (pas de sécurité ici)
|
|
localStorage.setItem('user_email_display', email);
|
|
userEmailDisplay.innerText = email;
|
|
|
|
showToast('Connexion réussie', 'success');
|
|
showDashboard();
|
|
loadEntries();
|
|
loginForm.reset();
|
|
} else {
|
|
showToast(data.error || 'Erreur de connexion', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('Erreur serveur', 'error');
|
|
}
|
|
});
|
|
|
|
// REGISTER
|
|
registerForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('register-email').value;
|
|
const password = document.getElementById('register-password').value;
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/register`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password }),
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (res.ok) {
|
|
showToast('Compte créé ! Connectez-vous.', 'success');
|
|
switchTab('login');
|
|
registerForm.reset();
|
|
} else {
|
|
const data = await res.json();
|
|
showToast(data.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('Erreur serveur', 'error');
|
|
}
|
|
});
|
|
|
|
// LOGOUT (Nouvelle version Serveur)
|
|
async function logout() {
|
|
try {
|
|
// On demande au serveur de supprimer le cookie httpOnly
|
|
await fetch(`${API_URL}/logout`, {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
});
|
|
} catch (e) {
|
|
console.error("Erreur réseau logout", e);
|
|
} finally {
|
|
// Quoi qu'il arrive (succès ou erreur), on nettoie le client
|
|
localStorage.removeItem('user_email_display');
|
|
localStorage.removeItem('is_logged_in');
|
|
showAuth();
|
|
showToast('Déconnecté', 'success');
|
|
}
|
|
}
|
|
|
|
// LOAD ENTRIES
|
|
async function loadEntries(isInit = false) {
|
|
if(!isInit) entriesGrid.innerHTML = '<div class="loading-spinner">Chargement de votre coffre...</div>';
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/entries`, {
|
|
method: 'GET',
|
|
credentials: 'include' // Envoie le cookie d'auth automatiquement
|
|
});
|
|
|
|
if (res.status === 401 || res.status === 403) {
|
|
// Si non autorisé, on affiche l'écran de login
|
|
if (!isInit) logout();
|
|
else showAuth();
|
|
return;
|
|
}
|
|
|
|
if (isInit) showDashboard(); // Si init réussit, on bascule sur le dashboard
|
|
|
|
const entries = await res.json();
|
|
renderEntries(entries);
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
if(!isInit) entriesGrid.innerHTML = '<p>Impossible de charger les données.</p>';
|
|
}
|
|
}
|
|
|
|
function renderEntries(entries) {
|
|
entriesGrid.innerHTML = '';
|
|
if (!entries || entries.length === 0) {
|
|
entriesGrid.innerHTML = '<p style="grid-column: 1/-1; text-align:center; color:#888;">Aucun mot de passe enregistré.</p>';
|
|
return;
|
|
}
|
|
|
|
entries.forEach(entry => {
|
|
const card = document.createElement('div');
|
|
card.className = 'entry-card';
|
|
card.innerHTML = `
|
|
<div class="card-header">
|
|
<div class="card-title">${entry.title}</div>
|
|
${entry.url ? `<a href="${entry.url}" target="_blank" class="card-url">Ouvrir ↗</a>` : ''}
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="field-row">
|
|
<div class="field-label">Identifiant</div>
|
|
<div class="field-value-group">
|
|
<div class="field-value">${entry.username_field}</div>
|
|
<button class="btn-icon" onclick="copyToClipboard('${entry.username_field}')" title="Copier">📋</button>
|
|
</div>
|
|
</div>
|
|
<div class="field-row">
|
|
<div class="field-label">Mot de passe</div>
|
|
<div class="field-value-group">
|
|
<input type="password" class="field-value" value="********" readonly id="pwd-display-${entry.id}" style="border:none; background: #f9fafb;">
|
|
<button class="btn-icon" onclick="revealPassword('${entry.id}', this)" title="Voir / Cacher">👁️</button>
|
|
<button class="btn-icon" onclick="copyPasswordFromId('${entry.id}')" title="Copier">📋</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
entriesGrid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// REVEAL PASSWORD (DECRYPT)
|
|
async function revealPassword(id, btn) {
|
|
const input = document.getElementById(`pwd-display-${id}`);
|
|
|
|
if (input.type === 'text') {
|
|
input.type = 'password';
|
|
input.value = '********';
|
|
btn.innerText = '👁️';
|
|
return;
|
|
}
|
|
|
|
btn.innerText = '⌛';
|
|
try {
|
|
const res = await fetch(`${API_URL}/entries/${id}/password`, {
|
|
credentials: 'include' // Le cookie est nécessaire pour déchiffrer
|
|
});
|
|
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
input.type = 'text';
|
|
input.value = data.password;
|
|
btn.innerText = '🔒';
|
|
|
|
setTimeout(() => {
|
|
if(input.type === 'text') {
|
|
input.type = 'password';
|
|
input.value = '********';
|
|
btn.innerText = '👁️';
|
|
}
|
|
}, 10000);
|
|
|
|
} else {
|
|
showToast('Erreur déchiffrement', 'error');
|
|
btn.innerText = '👁️';
|
|
}
|
|
} catch (e) {
|
|
showToast('Erreur réseau', 'error');
|
|
btn.innerText = '👁️';
|
|
}
|
|
}
|
|
|
|
// CREATE ENTRY
|
|
document.getElementById('add-entry-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const payload = {
|
|
title: document.getElementById('entry-title').value,
|
|
url: document.getElementById('entry-url').value,
|
|
username_field: document.getElementById('entry-username').value,
|
|
password: document.getElementById('entry-password').value
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/entries`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
credentials: 'include' // Important !
|
|
});
|
|
|
|
if (res.ok) {
|
|
showToast('Mot de passe sécurisé !', 'success');
|
|
closeModal();
|
|
document.getElementById('add-entry-form').reset();
|
|
loadEntries();
|
|
} else {
|
|
showToast('Erreur sauvegarde', 'error');
|
|
}
|
|
} catch (e) {
|
|
showToast('Erreur serveur', 'error');
|
|
}
|
|
});
|
|
|
|
// --- UTILS ---
|
|
function openModal() {
|
|
modalOverlay.classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal() {
|
|
modalOverlay.classList.add('hidden');
|
|
}
|
|
|
|
function showToast(msg, type = 'success') {
|
|
const container = document.getElementById('toast-container');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.innerText = msg;
|
|
container.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => showToast('Copié !'));
|
|
}
|
|
|
|
async function copyPasswordFromId(id) {
|
|
const input = document.getElementById(`pwd-display-${id}`);
|
|
if (input.type === 'text' && input.value !== '********') {
|
|
copyToClipboard(input.value);
|
|
} else {
|
|
showToast("Affichez d'abord le mot de passe", 'error');
|
|
}
|
|
}
|
|
|
|
// Lancer l'app
|
|
init(); |