feat: Ajout du bouton de suppression de compte dans l'interface modale
- Bouton 'Supprimer le Compte' intégré dans l'interface device-management - Double confirmation sécurisée (dialog + prompt) - Style rouge distinctif avec hover effects - Layout responsive avec flex-wrap - Fonctionnalité complète de suppression du storage - Parfait pour une iframe modale sur site externe - Messages de statut détaillés pendant le processus
This commit is contained in:
parent
c6ebf9627b
commit
a7b76ed95c
@ -282,6 +282,19 @@ export class DeviceManagementComponent extends HTMLElement {
|
|||||||
background: #c82333;
|
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 {
|
.status-message {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@ -305,10 +318,17 @@ export class DeviceManagementComponent extends HTMLElement {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-export .btn {
|
.import-export .btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-export .btn-danger {
|
||||||
|
flex: 1.2;
|
||||||
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -321,6 +341,7 @@ export class DeviceManagementComponent extends HTMLElement {
|
|||||||
<div class="import-export">
|
<div class="import-export">
|
||||||
<button class="btn btn-secondary" id="importBtn">📥 Importer</button>
|
<button class="btn btn-secondary" id="importBtn">📥 Importer</button>
|
||||||
<button class="btn btn-secondary" id="exportBtn">📤 Exporter</button>
|
<button class="btn btn-secondary" id="exportBtn">📤 Exporter</button>
|
||||||
|
<button class="btn btn-danger" id="deleteAccountBtn">🗑️ Supprimer le Compte</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="current-device">
|
<div class="current-device">
|
||||||
@ -390,6 +411,11 @@ export class DeviceManagementComponent extends HTMLElement {
|
|||||||
this.exportAccount();
|
this.exportAccount();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Delete account button
|
||||||
|
this.shadowRoot!.getElementById('deleteAccountBtn')?.addEventListener('click', () => {
|
||||||
|
this.deleteAccount();
|
||||||
|
});
|
||||||
|
|
||||||
// Add device input validation
|
// Add device input validation
|
||||||
const wordsInput = this.shadowRoot!.getElementById('newDeviceWords') as HTMLInputElement;
|
const wordsInput = this.shadowRoot!.getElementById('newDeviceWords') as HTMLInputElement;
|
||||||
const addBtn = this.shadowRoot!.getElementById('addDeviceBtn') as HTMLButtonElement;
|
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') {
|
showStatus(message: string, type: 'success' | 'error') {
|
||||||
const statusDiv = this.shadowRoot!.getElementById('statusMessage');
|
const statusDiv = this.shadowRoot!.getElementById('statusMessage');
|
||||||
if (statusDiv) {
|
if (statusDiv) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user