First commit
This commit is contained in:
Johan
320
vanilla-client/script.js
Normal file
320
vanilla-client/script.js
Normal file
@@ -0,0 +1,320 @@
|
||||
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();
|
||||
Reference in New Issue
Block a user