Guillaume-Sanchez
612 lines
28 KiB
HTML
612 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#0D2B5E">
|
|
<title>CYBERUSGATE - Access</title>
|
|
<link rel="manifest" href="manifest.json">
|
|
<style>
|
|
:root {
|
|
--blue-dark: #0D2B5E;
|
|
--blue-main: #1565C0;
|
|
--blue-light: #1E88E5;
|
|
--blue-pale: #E3F2FD;
|
|
--green: #2E7D32;
|
|
--green-light: #E8F5E9;
|
|
--red: #C62828;
|
|
--red-light: #FFEBEE;
|
|
--orange: #E65100;
|
|
--gray-1: #F5F6FA;
|
|
--gray-2: #E8ECF1;
|
|
--gray-3: #B0BEC5;
|
|
--gray-4: #607D8B;
|
|
--white: #FFFFFF;
|
|
--text-main: #1A2332;
|
|
--text-sub: #546E7A;
|
|
--radius: 14px;
|
|
--radius-sm: 8px;
|
|
--shadow: 0 2px 16px rgba(0,0,0,0.10);
|
|
}
|
|
|
|
body.dark-mode {
|
|
--gray-1: #070c16;
|
|
--gray-2: #1a2333;
|
|
--gray-3: #4b5563;
|
|
--gray-4: #9ca3af;
|
|
--white: #111826;
|
|
--text-main: #f8fafc;
|
|
--text-sub: #94a3b8;
|
|
--blue-dark: #0f172a;
|
|
--blue-pale: rgba(21, 101, 192, 0.2);
|
|
--green-light: rgba(46, 125, 50, 0.2);
|
|
--red-light: rgba(198, 40, 40, 0.2);
|
|
--shadow: 0 4px 20px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
|
body { background: var(--gray-1); color: var(--text-main); min-height: 100vh; overflow-x: hidden; transition: 0.3s; }
|
|
|
|
/* SCREENS */
|
|
.screen { display: none; min-height: 100vh; flex-direction: column; }
|
|
.screen.active { display: flex; animation: fadeIn 0.3s ease; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* ======= LOGIN ======= */
|
|
#screen-login { background: linear-gradient(145deg, #0D2B5E 0%, #1565C0 100%); align-items: center; justify-content: center; padding: 24px; }
|
|
.login-card { background: var(--white); border-radius: 20px; padding: 32px 24px; width: 100%; max-width: 380px; box-shadow: var(--shadow); text-align: center; }
|
|
.logo-box { width: 64px; height: 64px; background: var(--blue-pale); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
|
|
.logo-box svg { width: 32px; height: 32px; fill: var(--blue-main); }
|
|
.login-card h1 { font-size: 22px; color: var(--text-main); margin-bottom: 8px; }
|
|
.login-card p { font-size: 14px; color: var(--text-sub); margin-bottom: 32px; }
|
|
|
|
.role-btn { width: 100%; padding: 16px; border-radius: 12px; border: 2px solid var(--gray-2); background: var(--white); margin-bottom: 16px; cursor: pointer; display: flex; align-items: center; gap: 16px; text-align: left; transition: 0.2s; }
|
|
.role-btn:active { transform: scale(0.98); border-color: var(--blue-main); background: var(--blue-pale); }
|
|
.role-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--gray-1); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: var(--blue-main); }
|
|
.role-text h3 { font-size: 16px; color: var(--text-main); margin-bottom: 4px; }
|
|
.role-text p { font-size: 12px; color: var(--text-sub); }
|
|
|
|
/* ======= APP HEADER & NAV ======= */
|
|
.app-header { background: var(--blue-dark); padding: 48px 20px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
|
|
.user-badge { display: flex; align-items: center; gap: 12px; }
|
|
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-light); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
|
|
.header-info h2 { font-size: 16px; color: white; }
|
|
.header-info p { font-size: 12px; color: rgba(255,255,255,0.7); }
|
|
.logout-btn { background: rgba(255,255,255,0.1); border: none; color: white; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
|
|
|
|
.nav-tabs { display: flex; background: var(--white); border-bottom: 1px solid var(--gray-2); position: sticky; top: 112px; z-index: 99; }
|
|
.nav-tab { flex: 1; padding: 14px 4px; border: none; background: transparent; font-size: 11px; font-weight: 700; color: var(--gray-3); text-transform: uppercase; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
|
.nav-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
|
|
.nav-tab.active { color: var(--blue-main); border-bottom-color: var(--blue-main); }
|
|
|
|
.tab-content { padding: 20px; display: none; flex-direction: column; gap: 16px; padding-bottom: 100px;}
|
|
.tab-content.active { display: flex; animation: fadeIn 0.3s; }
|
|
|
|
/* ======= UI COMPONENTS ======= */
|
|
.card { background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
|
|
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between;}
|
|
.btn { padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.2s; }
|
|
.btn-primary { background: var(--blue-main); color: white; }
|
|
.btn-primary:active { background: var(--blue-dark); transform: scale(0.98); }
|
|
.btn-outline { background: transparent; border: 2px solid var(--blue-main); color: var(--blue-main); }
|
|
|
|
/* BADGE COMPONENT (USER) */
|
|
.virtual-badge { background: linear-gradient(135deg, var(--blue-dark), var(--blue-main)); border-radius: 16px; padding: 24px; color: white; text-align: center; position: relative; overflow: hidden; box-shadow: 0 10px 24px rgba(21,101,192,0.3); margin-bottom: 16px;}
|
|
.virtual-badge .company { font-size: 12px; opacity: 0.8; letter-spacing: 1px; margin-bottom: 16px; text-transform: uppercase;}
|
|
.virtual-badge .nfc-icon { width: 80px; height: 80px; margin: 0 auto 16px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; cursor: pointer;}
|
|
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 70% { box-shadow: 0 0 0 20px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
|
|
.virtual-badge h3 { font-size: 20px; margin-bottom: 4px; }
|
|
.virtual-badge p { font-size: 14px; opacity: 0.9; }
|
|
|
|
/* ADMIN UI */
|
|
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
|
|
.stat-box { background: var(--white); padding: 16px; border-radius: 12px; box-shadow: var(--shadow); border-left: 4px solid var(--blue-main); }
|
|
.stat-box .num { font-size: 24px; font-weight: bold; color: var(--text-main); }
|
|
.stat-box .lbl { font-size: 12px; color: var(--text-sub); margin-top: 4px; text-transform: uppercase;}
|
|
|
|
.user-list-item { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--gray-2); cursor: pointer; }
|
|
.user-list-item:last-child { border-bottom: none; }
|
|
.user-list-item .info h4 { font-size: 15px; margin-bottom: 4px; }
|
|
.user-list-item .info p { font-size: 12px; color: var(--text-sub); }
|
|
|
|
/* BADGE MANAGEMENT CARD */
|
|
.badge-mgmt-card { border: 1px solid var(--gray-2); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: var(--gray-1); }
|
|
.badge-mgmt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.badge-mgmt-header h4 { font-size: 14px; }
|
|
|
|
/* TOGGLE */
|
|
.toggle { width: 44px; height: 24px; background: var(--gray-3); border-radius: 12px; position: relative; cursor: pointer; transition: 0.3s; }
|
|
.toggle.on { background: var(--green); }
|
|
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: 0.3s; }
|
|
.toggle.on::after { left: 22px; }
|
|
|
|
/* SELECT */
|
|
select.select-slot { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--gray-3); background: var(--white); color: var(--text-main); font-size: 13px; outline: none; }
|
|
|
|
/* MODALS */
|
|
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(3px); opacity: 0; transition: 0.3s; }
|
|
.modal-overlay.open { display: flex; opacity: 1; }
|
|
.modal-box { background: var(--white); border-radius: 20px; padding: 24px; width: 90%; max-width: 360px; transform: scale(0.9); transition: 0.3s; text-align: center;}
|
|
.modal-overlay.open .modal-box { transform: scale(1); }
|
|
.qr-placeholder { width: 200px; height: 200px; margin: 20px auto; background: white; border: 4px solid var(--blue-main); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative;}
|
|
.qr-placeholder img { width: 100%; height: 100%; object-fit: contain; }
|
|
|
|
/* TOAST */
|
|
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #263238; color: white; padding: 14px 24px; border-radius: 30px; font-size: 14px; font-weight: bold; opacity: 0; transition: 0.3s; z-index: 9999; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
|
|
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
|
|
/* Biometric animation */
|
|
.bio-icon { color: var(--blue-main); margin-bottom: 16px; animation: pulseBio 2s infinite; }
|
|
@keyframes pulseBio { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
|
|
</style>
|
|
</head>
|
|
<body class="dark-mode">
|
|
|
|
<!-- ===== LOGIN SCREEN ===== -->
|
|
<div id="screen-login" class="screen active">
|
|
<div class="login-card">
|
|
<div class="logo-box">
|
|
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h1>CYBERUSGATE</h1>
|
|
<p>Système de contrôle d'accès</p>
|
|
|
|
<div class="role-btn" onclick="login('user')">
|
|
<div class="role-icon">AD</div>
|
|
<div class="role-text">
|
|
<h3>Espace Utilisateur</h3>
|
|
<p>Alice Dupont · Employée</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="role-btn" onclick="login('admin')" style="border-color: var(--orange);">
|
|
<div class="role-icon" style="color: var(--orange);">⚙️</div>
|
|
<div class="role-text">
|
|
<h3>Espace DSI / Admin</h3>
|
|
<p>Gestion Infrastructure</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== MAIN APP SCREEN ===== -->
|
|
<div id="screen-app" class="screen">
|
|
<div class="app-header">
|
|
<div class="user-badge">
|
|
<div class="avatar" id="header-avatar">AD</div>
|
|
<div class="header-info">
|
|
<h2 id="header-name">Alice Dupont</h2>
|
|
<p id="header-role">Utilisateur Interne</p>
|
|
</div>
|
|
</div>
|
|
<button class="logout-btn" onclick="logout()">Quitter</button>
|
|
</div>
|
|
|
|
<!-- USER NAV -->
|
|
<nav class="nav-tabs" id="nav-user" style="display:none;">
|
|
<button class="nav-tab active" onclick="switchTab('user-badge', this)">
|
|
<svg viewBox="0 0 24 24"><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M8 12h.01M12 12h.01M16 12h.01"/></svg>
|
|
Mon Badge
|
|
</button>
|
|
<button class="nav-tab" onclick="switchTab('user-add', this)">
|
|
<svg viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM21 14v7m-3-3h6"/></svg>
|
|
Scanner QR
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- ADMIN NAV -->
|
|
<nav class="nav-tabs" id="nav-admin" style="display:none;">
|
|
<button class="nav-tab active" onclick="switchTab('admin-dash', this)">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
|
Infrastructure
|
|
</button>
|
|
<button class="nav-tab" onclick="switchTab('admin-users', this)">
|
|
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
|
|
Badges
|
|
</button>
|
|
<button class="nav-tab" onclick="switchTab('admin-qr', this)">
|
|
<svg viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg>
|
|
Générer QR
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- ===============================
|
|
USER VIEWS
|
|
=============================== -->
|
|
|
|
<div id="tab-user-badge" class="tab-content">
|
|
<div id="user-badges-container">
|
|
<!-- Generated via JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-user-add" class="tab-content">
|
|
<div class="card" style="text-align: center;">
|
|
<h2 style="margin-bottom:10px;">Ajouter un badge</h2>
|
|
<p style="font-size:14px; color:var(--text-sub); margin-bottom:24px;">Demandez à votre administrateur système de générer un QR code d'invitation pour provisionner votre téléphone.</p>
|
|
|
|
<div style="width:200px; height:200px; background:var(--gray-2); border-radius:16px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; border:2px dashed var(--gray-4);">
|
|
<svg viewBox="0 0 24 24" style="width:48px; fill:none; stroke:var(--gray-4); stroke-width:2;"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4z"/><path d="M14 14l6 6M20 14l-6 6"/></svg>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" onclick="simulateScanQR()">
|
|
<svg viewBox="0 0 24 24" width="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7V5a2 2 0 012-2h2M17 3h2a2 2 0 012 2v2M21 17v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2"/></svg>
|
|
Simuler le Scan du QR
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ===============================
|
|
ADMIN VIEWS
|
|
=============================== -->
|
|
|
|
<div id="tab-admin-dash" class="tab-content">
|
|
<div class="stat-grid">
|
|
<div class="stat-box"><div class="num" id="stat-machines">190</div><div class="lbl">Équipements</div></div>
|
|
<div class="stat-box" style="border-color:var(--green);"><div class="num" id="stat-users">30</div><div class="lbl">Utilisateurs</div></div>
|
|
<div class="stat-box" style="border-color:var(--orange);"><div class="num" id="stat-badges">--</div><div class="lbl">Badges Actifs</div></div>
|
|
<div class="stat-box" style="border-color:var(--red);"><div class="num" id="stat-invites">--</div><div class="lbl">QR Actifs</div></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-title">État du système</div>
|
|
<div style="font-size:13px; color:var(--text-sub); display:flex; flex-direction:column; gap:12px;">
|
|
<div style="display:flex; justify-content:space-between;"><span>Synchro Active Directory</span><span style="color:var(--green);font-weight:bold;">Opérationnelle</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span>Chiffrement AES-256</span><span style="color:var(--green);font-weight:bold;">Actif</span></div>
|
|
<div style="display:flex; justify-content:space-between;"><span>Contrôleurs de Domaine</span><span style="color:var(--green);font-weight:bold;">En ligne</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-admin-users" class="tab-content">
|
|
<div class="card" style="padding:0; overflow:hidden;">
|
|
<div style="padding:16px; background:var(--gray-2); font-weight:bold; font-size:14px;">Annuaire Utilisateurs</div>
|
|
<div id="admin-user-list">
|
|
<!-- Generated via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-admin-qr" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-title">Générateur d'accès sécurisé</div>
|
|
<p style="font-size:13px; color:var(--text-sub); margin-bottom:20px;">Générez un QR Code temporaire. L'utilisateur devra le scanner avec son application pour provisionner son e-badge.</p>
|
|
|
|
<button class="btn btn-primary" onclick="generateInviteQR()">Créer une invitation NFC</button>
|
|
</div>
|
|
|
|
<h3 style="font-size:14px; margin-top:20px; margin-bottom:10px;">Invitations en attente</h3>
|
|
<div id="active-invites-list">
|
|
<!-- Generated via JS -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ===== MODALS ===== -->
|
|
|
|
<!-- 2MFA / Biometric Overlay (Apple Pay Style) -->
|
|
<div class="modal-overlay" id="modal-biometric" onclick="if(event.target===this)cancelBiometric()">
|
|
<div class="modal-box" style="max-width:320px;">
|
|
<div class="bio-icon">
|
|
<svg viewBox="0 0 24 24" width="64" height="64" stroke="currentColor" fill="none" stroke-width="1.5">
|
|
<path d="M12 2a10 10 0 0 0-10 10c0 5.523 4.477 10 10 10s10-4.477 10-10A10 10 0 0 0 12 2z"/>
|
|
<path d="M8 14s1.5 2 4 2 4-2 4-2"/>
|
|
<line x1="9" y1="9" x2="9.01" y2="9"/>
|
|
<line x1="15" y1="9" x2="15.01" y2="9"/>
|
|
</svg>
|
|
</div>
|
|
<h2 style="margin-bottom:8px; font-size:18px;">Face ID / Touch ID</h2>
|
|
<p style="font-size:13px; color:var(--text-sub); margin-bottom:24px;">Confirmez votre identité pour libérer l'accès NFC.</p>
|
|
|
|
<button class="btn btn-primary" onclick="confirmBiometric()" style="margin-bottom:12px;">
|
|
S'authentifier
|
|
</button>
|
|
<button class="btn btn-outline" onclick="cancelBiometric()">Annuler</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Manage User Modal -->
|
|
<div class="modal-overlay" id="modal-manage-user" onclick="if(event.target===this)closeModal('modal-manage-user')">
|
|
<div class="modal-box" style="max-width:400px; text-align:left;">
|
|
<h2 id="manage-user-name" style="margin-bottom:4px;">Utilisateur</h2>
|
|
<p style="font-size:13px; color:var(--text-sub); margin-bottom:20px;">Gestion des badges et droits d'accès</p>
|
|
|
|
<div id="manage-user-badges" style="max-height:60vh; overflow-y:auto; margin-bottom:20px;">
|
|
<!-- Generated via JS -->
|
|
</div>
|
|
|
|
<button class="btn btn-outline" onclick="closeModal('modal-manage-user')">Fermer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Generator Modal -->
|
|
<div class="modal-overlay" id="modal-qr" onclick="if(event.target===this)closeModal('modal-qr')">
|
|
<div class="modal-box">
|
|
<h2>QR d'Invitation</h2>
|
|
<div class="qr-placeholder">
|
|
<svg width="150" height="150" viewBox="0 0 24 24" fill="var(--text-main)"><path d="M3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm13-2h2v2h-2zm-2 2h2v2h-2zm2 2h2v2h-2zm-4 0h2v2h-2zm2 2h2v2h-2zm-4-4h2v2h-2zm2-2h2v2h-2z"/></svg>
|
|
</div>
|
|
<p style="font-weight:bold; color:var(--green); margin-bottom:4px;" id="qr-expiry">Expire dans 14:59</p>
|
|
<p style="font-size:12px; color:var(--text-sub); margin-bottom:20px;" id="qr-creator">Créé par: --</p>
|
|
|
|
<button class="btn btn-outline" onclick="closeModal('modal-qr')">Fermer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
// ===== DATABASE / STATE =====
|
|
const defaultDB = {
|
|
users: [
|
|
{ id: 'u1', name: 'Alice Dupont', email: 'alice@societe.fr', role: 'user', avatar: 'AD' },
|
|
{ id: 'u2', name: 'Administrateur', email: 'admin@societe.fr', role: 'admin', avatar: '⚙️' }
|
|
],
|
|
badges: [
|
|
{ id: 'b1', userId: 'u1', name: 'Pass Sécurité Principal', tech: 'NFC', active: true, timeSlot: '247' }
|
|
],
|
|
invitations: []
|
|
};
|
|
|
|
// Changed version key to ensure fresh start without previous AVM data
|
|
let db = JSON.parse(localStorage.getItem('sa_db_v4')) || defaultDB;
|
|
let currentUser = null;
|
|
|
|
function saveDb() {
|
|
localStorage.setItem('sa_db_v4', JSON.stringify(db));
|
|
}
|
|
|
|
// ===== PWA SETUP =====
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('sw.js').catch(err => console.log('SW error:', err));
|
|
});
|
|
}
|
|
|
|
// ===== CORE LOGIC =====
|
|
function showToast(msg) {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.classList.add('show');
|
|
setTimeout(() => t.classList.remove('show'), 3000);
|
|
}
|
|
|
|
function login(roleType) {
|
|
currentUser = db.users.find(u => u.role === roleType);
|
|
document.getElementById('header-avatar').innerText = currentUser.avatar;
|
|
document.getElementById('header-name').innerText = currentUser.name;
|
|
document.getElementById('header-role').innerText = roleType === 'admin' ? "DSI / Infra" : "Utilisateur Interne";
|
|
|
|
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
|
|
document.getElementById('screen-app').classList.add('active');
|
|
|
|
if(roleType === 'user') {
|
|
document.getElementById('nav-user').style.display = 'flex';
|
|
document.getElementById('nav-admin').style.display = 'none';
|
|
switchTab('user-badge', document.querySelectorAll('#nav-user .nav-tab')[0]);
|
|
} else {
|
|
document.getElementById('nav-user').style.display = 'none';
|
|
document.getElementById('nav-admin').style.display = 'flex';
|
|
switchTab('admin-dash', document.querySelectorAll('#nav-admin .nav-tab')[0]);
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
currentUser = null;
|
|
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
|
|
document.getElementById('screen-login').classList.add('active');
|
|
}
|
|
|
|
function switchTab(tabId, btnElement) {
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
document.getElementById('tab-' + tabId).classList.add('active');
|
|
|
|
if(btnElement) {
|
|
const parent = btnElement.parentElement;
|
|
parent.querySelectorAll('.nav-tab').forEach(b => b.classList.remove('active'));
|
|
btnElement.classList.add('active');
|
|
}
|
|
|
|
// Refresh data based on tab
|
|
if(tabId === 'user-badge') renderUserBadges();
|
|
if(tabId === 'admin-dash') updateAdminDash();
|
|
if(tabId === 'admin-users') renderAdminUserList();
|
|
if(tabId === 'admin-qr') renderActiveInvites();
|
|
}
|
|
|
|
// ===== USER VIEWS & BIOMETRICS =====
|
|
function renderUserBadges() {
|
|
const container = document.getElementById('user-badges-container');
|
|
const myBadges = db.badges.filter(b => b.userId === currentUser.id);
|
|
|
|
if(myBadges.length === 0) {
|
|
container.innerHTML = `<div class="card" style="text-align:center; padding:40px 20px;"><p style="color:var(--text-sub);">Aucun badge actif.<br>Scannez un QR code pour en ajouter un.</p></div>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = myBadges.map(b => `
|
|
<div class="virtual-badge" style="${!b.active ? 'filter: grayscale(1); opacity:0.7;' : ''}">
|
|
<div class="company">CYBERUSGATE - SECURE INFRA</div>
|
|
<div class="nfc-icon" onclick="${b.active ? 'triggerBiometricAuth()' : 'showToast(\'Ce badge a été désactivé par l\\\\\'administrateur\')'}">
|
|
<svg viewBox="0 0 24 24" width="40" stroke="currentColor" fill="none" stroke-width="2"><path d="M12 4C8 4 4 8 4 12s4 8 8 8 8-4 8-8"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>
|
|
</div>
|
|
<h3>${b.name}</h3>
|
|
<p>ID: ${b.id} ${!b.active ? '<br><b style="color:#FFCDD2;">DÉSACTIVÉ</b>' : ''}</p>
|
|
<div style="font-size:11px; margin-top:10px; opacity:0.7;">Plage: ${b.timeSlot === '247' ? 'Accès 24/7' : 'Heures de bureau uniquement'}</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Intercept NFC with Biometric 2MFA Modal
|
|
function triggerBiometricAuth() {
|
|
if(navigator.vibrate) navigator.vibrate(50);
|
|
document.getElementById('modal-biometric').classList.add('open');
|
|
}
|
|
|
|
function cancelBiometric() {
|
|
document.getElementById('modal-biometric').classList.remove('open');
|
|
showToast("❌ Authentification annulée");
|
|
}
|
|
|
|
function confirmBiometric() {
|
|
// Close modal
|
|
document.getElementById('modal-biometric').classList.remove('open');
|
|
|
|
// Simulate successful biometric read and subsequent NFC transmission
|
|
if(navigator.vibrate) navigator.vibrate([50, 50, 100]);
|
|
showToast("✓ Identité confirmée. Transmission NFC en cours...");
|
|
|
|
// After short delay, show success of access
|
|
setTimeout(() => {
|
|
showToast("🟢 Accès Autorisé au lecteur");
|
|
if(navigator.vibrate) navigator.vibrate(200);
|
|
}, 1200);
|
|
}
|
|
|
|
function simulateScanQR() {
|
|
const validInvites = db.invitations.filter(i => Date.now() < i.expiresAt);
|
|
if(validInvites.length === 0) {
|
|
showToast("❌ Aucun QR code d'invitation actif trouvé.");
|
|
return;
|
|
}
|
|
|
|
const invite = validInvites.pop();
|
|
db.invitations = db.invitations.filter(i => i.id !== invite.id);
|
|
|
|
const newBadge = {
|
|
id: 'B' + Math.floor(Math.random()*10000),
|
|
userId: currentUser.id,
|
|
name: 'Nouveau Badge Sécurisé',
|
|
tech: 'NFC',
|
|
active: true,
|
|
timeSlot: 'office'
|
|
};
|
|
|
|
db.badges.push(newBadge);
|
|
saveDb();
|
|
|
|
showToast(`✓ Badge ajouté avec succès ! (Généré par ${invite.createdBy})`);
|
|
switchTab('user-badge', document.querySelectorAll('#nav-user .nav-tab')[0]);
|
|
}
|
|
|
|
// ===== ADMIN VIEWS =====
|
|
function updateAdminDash() {
|
|
document.getElementById('stat-badges').innerText = db.badges.length;
|
|
const validInvites = db.invitations.filter(i => Date.now() < i.expiresAt);
|
|
document.getElementById('stat-invites').innerText = validInvites.length;
|
|
}
|
|
|
|
function renderAdminUserList() {
|
|
const list = document.getElementById('admin-user-list');
|
|
const normalUsers = db.users.filter(u => u.role === 'user');
|
|
|
|
list.innerHTML = normalUsers.map(u => {
|
|
const userBadges = db.badges.filter(b => b.userId === u.id);
|
|
return `
|
|
<div class="user-list-item" onclick="openManageUser('${u.id}')">
|
|
<div class="info">
|
|
<h4>${u.name}</h4>
|
|
<p>${u.email} · ${userBadges.length} badge(s)</p>
|
|
</div>
|
|
<svg viewBox="0 0 24 24" width="20" stroke="var(--gray-3)" fill="none"><path d="M9 18l6-6-6-6"/></svg>
|
|
</div>
|
|
`}).join('');
|
|
}
|
|
|
|
let managingUserId = null;
|
|
|
|
function openManageUser(userId) {
|
|
managingUserId = userId;
|
|
const user = db.users.find(u => u.id === userId);
|
|
document.getElementById('manage-user-name').innerText = user.name;
|
|
renderManageUserBadges();
|
|
document.getElementById('modal-manage-user').classList.add('open');
|
|
}
|
|
|
|
function renderManageUserBadges() {
|
|
const container = document.getElementById('manage-user-badges');
|
|
const userBadges = db.badges.filter(b => b.userId === managingUserId);
|
|
|
|
if(userBadges.length === 0) {
|
|
container.innerHTML = '<p style="font-size:13px; color:var(--text-sub);">Aucun badge attribué à cet utilisateur.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = userBadges.map(b => `
|
|
<div class="badge-mgmt-card">
|
|
<div class="badge-mgmt-header">
|
|
<h4>${b.name} (${b.id})</h4>
|
|
<div class="toggle ${b.active ? 'on' : ''}" onclick="toggleBadgeStatus('${b.id}', this)"></div>
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<label style="font-size:12px; font-weight:bold; color:var(--text-sub); display:block; margin-bottom:6px;">Plage d'accès autorisée</label>
|
|
<select class="select-slot" onchange="updateBadgeTimeSlot('${b.id}', this.value)">
|
|
<option value="247" ${b.timeSlot === '247' ? 'selected' : ''}>Accès Total (24/7)</option>
|
|
<option value="office" ${b.timeSlot === 'office' ? 'selected' : ''}>Heures de bureau (08h00 - 18h00)</option>
|
|
<option value="night" ${b.timeSlot === 'night' ? 'selected' : ''}>Astreinte Nuit (18h00 - 08h00)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function toggleBadgeStatus(badgeId, toggleElement) {
|
|
const badge = db.badges.find(b => b.id === badgeId);
|
|
badge.active = !badge.active;
|
|
toggleElement.classList.toggle('on', badge.active);
|
|
saveDb();
|
|
showToast(badge.active ? "Badge réactivé" : "Badge désactivé ! L'utilisateur ne peut plus entrer.");
|
|
}
|
|
|
|
function updateBadgeTimeSlot(badgeId, slotValue) {
|
|
const badge = db.badges.find(b => b.id === badgeId);
|
|
badge.timeSlot = slotValue;
|
|
saveDb();
|
|
showToast("Plage d'accès mise à jour.");
|
|
}
|
|
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('open');
|
|
}
|
|
|
|
function generateInviteQR() {
|
|
const newInvite = {
|
|
id: 'QR-' + Math.floor(Math.random()*10000),
|
|
createdBy: currentUser.name,
|
|
expiresAt: Date.now() + 15 * 60000 // 15 mins
|
|
};
|
|
db.invitations.push(newInvite);
|
|
saveDb();
|
|
|
|
document.getElementById('qr-creator').innerText = "Généré par: " + newInvite.createdBy;
|
|
document.getElementById('modal-qr').classList.add('open');
|
|
renderActiveInvites();
|
|
}
|
|
|
|
function renderActiveInvites() {
|
|
const container = document.getElementById('active-invites-list');
|
|
const validInvites = db.invitations.filter(i => Date.now() < i.expiresAt);
|
|
|
|
if(validInvites.length === 0) {
|
|
container.innerHTML = '<p style="font-size:13px; color:var(--text-sub);">Aucune invitation en cours.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = validInvites.map(i => {
|
|
const minsLeft = Math.ceil((i.expiresAt - Date.now()) / 60000);
|
|
return `
|
|
<div style="background:var(--gray-2); padding:12px; border-radius:8px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
|
|
<div>
|
|
<div style="font-weight:bold; font-size:14px;">${i.id}</div>
|
|
<div style="font-size:11px; color:var(--text-sub);">Par: ${i.createdBy}</div>
|
|
</div>
|
|
<div style="font-size:12px; color:var(--orange); font-weight:bold;">Expire dans ~${minsLeft} min</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |