ihm_client/src/pages/wallet-setup/wallet-setup.html
NicolasCantu 057102300a Fix TypeScript errors and display issues
**Motivations:**
- Corriger les erreurs TypeScript dans secure-credentials.service.ts qui empêchaient le chargement du module
- Résoudre l'affichage cassé des pages de setup en utilisant une redirection directe
- Supprimer le mode 'browser' et nettoyer le code mort

**Modifications:**
- Correction de la méthode inexistante getEncryptedKey() dans secure-credentials.service.ts
- Correction de la redéclaration de variable encryptedKey dans generatePBKDF2Key()
- Suppression des références au mode 'browser' supprimé dans security-mode.service.ts
- Ajout des propriétés requiresOTP et requiresPassword dans l'interface SecurityModeConfig
- Suppression de la méthode retrieveKeyFromBrowser() non utilisée dans storage.service.ts
- Changement de stratégie de routage pour les pages de setup (redirection directe au lieu d'injection)
- Mise à jour des textes des options de sécurité (Proton Pass → Clé de sécurité, OTP → code à usage unique)

**Pages affectées:**
- src/services/secure-credentials.service.ts (correction des erreurs principales)
- src/services/security-mode.service.ts (correction des références au mode browser)
- src/services/credentials/storage.service.ts (suppression de la méthode non utilisée)
- src/router.ts (changement de stratégie de routage)
- src/pages/security-setup/security-setup.html (mise à jour des textes)
- src/pages/wallet-setup/wallet-setup.html (mise à jour des textes)
- src/components/security-mode-selector/ (suppression du mode browser)
- src/pages/home/home.ts (suppression du mode browser)
- src/services/service.ts (suppression du mode browser)
2025-10-27 18:56:51 +01:00

121 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Génération du Wallet - LeCoffre</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;
}
.status {
text-align: center;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.status.loading {
background: #e3f2fd;
color: #1976d2;
}
.status.success {
background: #e8f5e8;
color: #2e7d32;
}
.status.error {
background: #ffebee;
color: #c62828;
}
.progress {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin: 20px 0;
}
.progress-bar {
height: 100%;
background: #667eea;
width: 0%;
transition: width 0.3s ease;
}
.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>💰 Génération du Wallet</h1>
<p class="subtitle">Création et sécurisation de votre portefeuille</p>
<div class="status loading" id="status">
🔄 Initialisation en cours...
</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<button class="continue-btn" id="continueBtn" disabled>Ajouter la date anniversaire du wallet</button>
</div>
<script type="module" src="./wallet-setup.ts"></script>
</body>
</html>