4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Interface complète de gestion des devices avec description du contrat

Browse Source 
- Description détaillée du contrat de pairing avec sécurité, protection et gestion
- Interface unifiée affichant directement après pairing réussi
- Tous les éléments demandés présents :
  ✅ Description du contrat pairing
  ✅ Ajout/suppression de devices
  ✅ 4 mots de pairing du device actuel
  ✅ Bouton de suppression du compte
- Design moderne avec glassmorphism et responsive
- Parfait pour iframe modale sur site externe
This commit is contained in:
NicolasCantu 2025-10-22 15:56:18 +02:00
parent a7b76ed95c
commit 96d1ee33ac
1 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/device-management/device-management.ts
View File

@ -87,10 +87,36 @@ export class DeviceManagementComponent extends HTMLElement {
.header p {
color: #666;
margin: 0;
margin: 0 0 20px 0;
font-size: 16px;
}
.contract-description {
background: rgba(58, 80, 107, 0.05);
border-radius: 8px;
padding: 20px;
margin-top: 20px;
border-left: 4px solid #3a506b;
}
.contract-description p {
margin: 0 0 10px 0;
color: #3a506b;
font-size: 14px;
}
.contract-description ul {
margin: 0;
padding-left: 20px;
}
.contract-description li {
margin-bottom: 8px;
color: #555;
font-size: 14px;
line-height: 1.4;
}
.current-device {
background: #f8f9fa;
border-radius: 8px;
@ -334,8 +360,17 @@ export class DeviceManagementComponent extends HTMLElement {
<div class="device-management">
<div class="header">
<h1>🔐 Gestion des Devices</h1>
<p>Contrat de pairing sécurisé avec authentification 4 mots</p>
<h1>🔐 Contrat de Pairing</h1>
<p>Gestion sécurisée de vos devices avec authentification 4 mots</p>
<div class="contract-description">
<p><strong>📋 Description du contrat :</strong></p>
<ul>
<li>🔐 <strong>Sécurité :</strong> Chaque device est authentifié par 4 mots uniques</li>
<li>🔗 <strong>Pairing :</strong> Connexion sécurisée entre devices approuvés</li>
<li>🛡️ <strong>Protection :</strong> Au moins 1 device doit toujours rester actif</li>
<li>🔄 <strong>Gestion :</strong> Ajout/suppression de devices en temps réel</li>
</ul>
</div>
</div>
<div class="import-export">