NicolasCantu
c9ff430b09
**Motivations :** - Inconsistent use of console.* methods across codebase - Missing structured logging with proper levels and context - Inline error display breaking UI layout - Risk of sensitive data exposure in logs **Modifications :** - Replace all console.* calls with secureLogger.* in main files - Add proper log levels: DEBUG, INFO, WARN, ERROR - Add component context for better debugging - Create styled error/warning/success containers - Add comprehensive logging guidelines documentation - Fix import paths for secureLogger in security-setup.ts **Pages affectées :** - src/services/service.ts - Main service logging - src/pages/home/home.ts - Home page logging - src/pages/security-setup/security-setup.ts - Security setup logging - src/utils/sp-address.utils.ts - SP address utilities logging - src/router.ts - Router logging - src/websockets.ts - WebSocket logging - src/4nk.css - Error container styles - docs/LOGGING_GUIDELINES.md - Logging best practices
151 lines
4.5 KiB
HTML
151 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Configuration de la Sécurité - 4NK</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
max-width: 500px;
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.security-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.security-option {
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.security-option:hover {
|
|
border-color: #667eea;
|
|
background: #f0f2ff;
|
|
}
|
|
|
|
.security-option.selected {
|
|
border-color: #667eea;
|
|
background: #f0f2ff;
|
|
}
|
|
|
|
.option-title {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.option-description {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.warning {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-top: 20px;
|
|
color: #856404;
|
|
}
|
|
|
|
.continue-btn {
|
|
width: 100%;
|
|
background: #667eea;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.continue-btn:hover {
|
|
background: #5a6fd8;
|
|
}
|
|
|
|
.continue-btn:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔐 Configuration de la Sécurité</h1>
|
|
<p class="subtitle">Choisissez votre mode de sécurité pour protéger vos clés</p>
|
|
|
|
<div class="security-options">
|
|
<div class="security-option" data-mode="proton-pass">
|
|
<div class="option-title">🛡️ Clé de sécurité</div>
|
|
<div class="option-description">Sécurité maximale avec votre gestionnaire de clés de sécurité</div>
|
|
</div>
|
|
|
|
<div class="security-option" data-mode="os">
|
|
<div class="option-title">🔒 Système d'exploitation</div>
|
|
<div class="option-description">Utilise l'authentification biométrique de votre système</div>
|
|
</div>
|
|
|
|
<div class="security-option" data-mode="otp">
|
|
<div class="option-title">🔐 OTP (code à usage unique)</div>
|
|
<div class="option-description">Code OTP généré par Proton Pass, Google Authenticator, etc.</div>
|
|
</div>
|
|
|
|
<div class="security-option" data-mode="password">
|
|
<div class="option-title">🔑 Mot de passe</div>
|
|
<div class="option-description">Chiffrement par mot de passe (non récupérable si oublié)</div>
|
|
</div>
|
|
|
|
<div class="security-option" data-mode="none">
|
|
<div class="option-title">⚠️ Aucune protection</div>
|
|
<div class="option-description">Stockage en clair (non recommandé)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="warning" id="warning" style="display: none;">
|
|
⚠️ <strong>Attention :</strong> Ce mode de sécurité n'est pas recommandé. Vos clés seront stockées en clair.
|
|
</div>
|
|
|
|
<button class="continue-btn" id="continueBtn" disabled>Continuer</button>
|
|
</div>
|
|
|
|
<script type="module" src="./security-setup.ts"></script>
|
|
</body>
|
|
</html>
|