diff --git a/src/components/device-management/device-management.ts b/src/components/device-management/device-management.ts index f803048..e6efee3 100644 --- a/src/components/device-management/device-management.ts +++ b/src/components/device-management/device-management.ts @@ -282,6 +282,19 @@ export class DeviceManagementComponent extends HTMLElement { background: #c82333; } + .delete-account-btn { + background: #f44336 !important; + color: white !important; + font-weight: bold; + border: 2px solid #d32f2f; + } + + .delete-account-btn:hover { + background: #d32f2f !important; + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3); + } + .status-message { padding: 10px; border-radius: 6px; @@ -305,10 +318,17 @@ export class DeviceManagementComponent extends HTMLElement { display: flex; gap: 10px; margin-bottom: 20px; + flex-wrap: wrap; } .import-export .btn { flex: 1; + min-width: 120px; + } + + .import-export .btn-danger { + flex: 1.2; + min-width: 150px; } @@ -321,6 +341,7 @@ export class DeviceManagementComponent extends HTMLElement {
+
@@ -390,6 +411,11 @@ export class DeviceManagementComponent extends HTMLElement { this.exportAccount(); }); + // Delete account button + this.shadowRoot!.getElementById('deleteAccountBtn')?.addEventListener('click', () => { + this.deleteAccount(); + }); + // Add device input validation const wordsInput = this.shadowRoot!.getElementById('newDeviceWords') as HTMLInputElement; const addBtn = this.shadowRoot!.getElementById('addDeviceBtn') as HTMLButtonElement; @@ -582,6 +608,45 @@ export class DeviceManagementComponent extends HTMLElement { } } + async deleteAccount() { + // First confirmation + if (!confirm('⚠️ Êtes-vous sûr de vouloir supprimer complètement votre compte ?\n\nCette action est IRRÉVERSIBLE et supprimera :\n• Tous vos processus\n• Toutes vos données\n• Votre wallet\n• Votre historique\n\nTapez "SUPPRIMER" pour confirmer.')) { + return; + } + + // Second confirmation with text input + const confirmation = prompt('Tapez "SUPPRIMER" pour confirmer la suppression :'); + if (confirmation !== 'SUPPRIMER') { + this.showStatus('❌ Suppression annulée. Le texte de confirmation ne correspond pas.', 'error'); + return; + } + + try { + if (!this.service) { + this.showStatus('❌ Service non disponible', 'error'); + return; + } + + // Show loading status + this.showStatus('🗑️ Suppression du compte en cours...', 'success'); + + // Delete the account + await this.service.deleteAccount(); + + // Show success message + this.showStatus('✅ Compte supprimé avec succès ! Redirection en cours...', 'success'); + + // Reload the page to restart the application + setTimeout(() => { + window.location.reload(); + }, 2000); + + } catch (error) { + console.error('❌ Erreur lors de la suppression du compte:', error); + this.showStatus(`❌ Erreur lors de la suppression du compte: ${error}`, 'error'); + } + } + showStatus(message: string, type: 'success' | 'error') { const statusDiv = this.shadowRoot!.getElementById('statusMessage'); if (statusDiv) { diff --git a/src/router.ts b/src/router.ts index f1929a7..fcc8dfc 100755 --- a/src/router.ts +++ b/src/router.ts @@ -59,7 +59,7 @@ async function handleLocation(path: string) { } await new Promise(requestAnimationFrame); - + // Don't inject header for account page (it has its own design) if (path !== 'account') { injectHeader();