NicolasCantu
bf680ab6dd
🔐 Implémentation PBKDF2 avec credentials navigateur ✅ Fonctionnalités ajoutées: - SecureCredentialsService avec PBKDF2 (100k itérations) - Chiffrement AES-GCM des clés spend/scan - Interface utilisateur complète pour gestion credentials - Tests unitaires complets - Architecture modulaire avec EventBus - Gestion mémoire optimisée - Performance monitoring - Web Workers pour encodage asynchrone 🛡️ Sécurité: - Dérivation PBKDF2 avec salt unique - Chiffrement AES-GCM des clés sensibles - Validation force mot de passe - Stockage sécurisé IndexedDB + WebAuthn - Logging sécurisé sans exposition données 🔧 Corrections: - Erreur 500 résolue (clé dupliquée package.json) - Configuration Vite simplifiée - Dépendances manquantes corrigées 📊 Améliorations: - Architecture découplée avec repositories - Services spécialisés (PairingService, etc.) - Monitoring performance et mémoire - Tests avec couverture complète - Documentation technique détaillée
159 lines
6.3 KiB
Markdown
Executable File
159 lines
6.3 KiB
Markdown
Executable File
# 🚀 4NK Client - Application Web5
|
||
|
||
Application client pour l'écosystème 4NK, permettant la gestion sécurisée des appareils, le pairing, et les signatures de documents.
|
||
|
||
## 📋 Table des matières
|
||
|
||
- [🚀 Démarrage rapide](#-démarrage-rapide)
|
||
- [🏗️ Architecture](#️-architecture)
|
||
- [🔧 Développement](#-développement)
|
||
- [📊 Qualité du code](#-qualité-du-code)
|
||
- [🤝 Contribution](#-contribution)
|
||
|
||
## 🚀 Démarrage rapide
|
||
|
||
### **Prérequis**
|
||
- Node.js 18+
|
||
- Rust (pour le SDK)
|
||
- npm ou yarn
|
||
|
||
### **Installation**
|
||
|
||
```bash
|
||
# 1. Cloner les dépendances
|
||
git clone <sdk_common> # commit "doc pcd" from 28.10.2024
|
||
git clone <sdk_client> # commit "Ignore messages" from 17.10.2024
|
||
git clone <ihm_client_dev3>
|
||
|
||
# 2. Build du SDK Rust
|
||
cd sdk_common && cargo build
|
||
cd ../sdk_client && cargo run
|
||
|
||
# 3. Build et démarrage de l'application
|
||
cd ../ihm_client_dev3
|
||
npm install
|
||
npm run build_wasm
|
||
npm run start
|
||
```
|
||
|
||
### **Scripts disponibles**
|
||
|
||
```bash
|
||
# Développement
|
||
npm run start # Serveur de développement
|
||
npm run build # Build de production
|
||
npm run quality # Vérification de la qualité
|
||
npm run quality:fix # Correction automatique
|
||
|
||
# Tests et analyse
|
||
npm run test # Tests unitaires
|
||
npm run lint # Linting du code
|
||
npm run type-check # Vérification TypeScript
|
||
npm run analyze # Analyse du bundle
|
||
```
|
||
|
||
## 🏗️ Architecture
|
||
|
||
### **Structure du projet**
|
||
```
|
||
src/
|
||
├── components/ # Composants UI réutilisables
|
||
├── pages/ # Pages de l'application
|
||
├── services/ # Services métier
|
||
├── utils/ # Utilitaires et helpers
|
||
├── models/ # Types et interfaces
|
||
└── service-workers/ # Workers pour les opérations async
|
||
```
|
||
|
||
### **Technologies**
|
||
- **Frontend**: TypeScript, Vite, HTML5, CSS3
|
||
- **SDK**: Rust (WebAssembly)
|
||
- **Storage**: IndexedDB, Service Workers
|
||
- **Communication**: WebSockets, PostMessage API
|
||
|
||
## 🔧 Développement
|
||
|
||
### **Standards de code**
|
||
- TypeScript strict
|
||
- ESLint + Prettier
|
||
- Tests unitaires
|
||
- Documentation JSDoc
|
||
|
||
### **Workflow**
|
||
1. Créer une branche feature
|
||
2. Développer avec tests
|
||
3. Vérifier la qualité: `npm run quality`
|
||
4. Créer une PR avec description détaillée
|
||
|
||
## 📊 Qualité du code
|
||
|
||
### **Métriques cibles**
|
||
- Couverture de tests: > 80%
|
||
- Complexité cyclomatique: < 10
|
||
- Taille des fichiers: < 300 lignes
|
||
- Bundle size: < 500KB gzippé
|
||
|
||
### **Outils de qualité**
|
||
- TypeScript strict mode
|
||
- ESLint avec règles personnalisées
|
||
- Prettier pour le formatage
|
||
- Bundle analyzer pour l'optimisation
|
||
|
||
## 🤝 Contribution
|
||
|
||
Voir [CONTRIBUTING.md](./CONTRIBUTING.md) pour les détails complets.
|
||
|
||
### **Démarrage rapide**
|
||
```bash
|
||
# Fork et clone
|
||
git clone <votre-fork>
|
||
cd ihm_client_dev3
|
||
|
||
# Installation
|
||
npm install
|
||
|
||
# Vérification de la qualité
|
||
npm run quality
|
||
|
||
# Développement
|
||
npm run start
|
||
```
|
||
|
||
## USER STORIES
|
||
|
||
1 - I can login with my adress device
|
||
2 - I can login with QR code
|
||
3 - J'accède à la page Process après ma connexion
|
||
4 - Dans l'interface Process, je peux sélectionner un processus avec sa zone
|
||
5 - Je reçois des notifications dans la page Process
|
||
6 - Dans le menu, je peux importer mes données au format JSON
|
||
7 - Dans le menu, je peux accèder à la page Account
|
||
8 - Dans la page Account, je peux cliquer sur mon profil via la bulle de profil en haut à gauche et une popup de profil s'ouvre
|
||
9 - Dans la popup de profil, je peux voir mes informations personnelles et modifier certaines d'entre elles dont le nom, le prénom
|
||
10 - Dans la popup de profil, je peux changer ma photo de profil
|
||
11 - Dans la popup de profil, je peux fermer la popup en cliquant sur le bouton "X" en haut à droite de la popup
|
||
12 - Dans la popup de profil, je peux cliquer sur le bouton "Export User Data", ce qui me génère un fichier JSON
|
||
13 - Dans la popup de profil, je peux cliquer sur le bouton "Delete Account", ce qui me demande à valider mon choix
|
||
14 - Dans la popup de profil, je peux cliquer sur le bouton "Logout", ce qui me déconnecte
|
||
15 - Dans la popup de profil, je peux cliquer sur le bouton "Export Recovery", ce qui me demandera de confirmer mon choix ou d'annuler, si je confirme, je dois retenir et écrire les 4 mots de récupération, le bouton ne sera plus accessible après cela
|
||
16 - Dans l'onglet Pairing de la page Account, je peux ajouter un nouveau "device" en cliquant sur le bouton "Add Device"
|
||
17 - Dans l'onglet Pairing de la page Account, je peux supprimer un "device" en cliquant sur l'emoji de la poubelle à côté du device que je souhaite supprimer
|
||
18 - Dans l'onglet Pairing de la page Account, je peux cliquer sur le bouton "Scan QR Code" pour scanner le QR Code d'un nouveau device
|
||
19 - Dans l'onglet Pairing de la page Account, je peux renommer un "Device" en cliquant sur son nom et en modifiant le nom
|
||
20 - Dans l'onglet Wallet de la page Account, je peux ajouter un nouveau "wallet" en cliquant sur le bouton "Add a line"
|
||
21 - Dans l'onglet Process de la page Account, je peux voir les Process disponibles et voir leur notifications en cliquant sur sur la sonnette à côté du processus
|
||
22 - Dans l'onglet Data de la page Account, je peux voir les données importées
|
||
23 - Je peux voir le contrat associé à une Data en cliquant sur le contrat dans la ligne de la Data
|
||
24 - Dans le menu je peux accèder à la page Chat
|
||
25 - Dans la page Chat, je peux voir les Processus
|
||
26 - Dans les Processus, je peux voir utilisateurs assignés à un rôle
|
||
27 - Dans les Processus, je peux envoyer des messages et des documents en cliquant sur le nom d'un utilisateur en en envoyant "send"
|
||
28 - Dans le menu je peux accèder à la page "Signatures"
|
||
29 - Je peux voir les documents à signer et vierge en cliquand sur l'emoji ⚙️ à côté du processus
|
||
30 - En cliquand sur l'onglet d'un processus, je peux voir les rôles assignés à un utilisateur en cliquant dessus
|
||
31 - En cliquand sur l'emoji 📁 à côté d'un rôle, je peux voir les documents associés à ce rôle
|
||
32 - Dans la vue des documents associés à un rôle, je peux créer un évènement de nouvelle signature pour tous les rôles associés à ce Processus, avec le bouton "New Request"
|
||
33 - En cliquant sur le bouton "New Request", une nouvelle fenêtre s'ouvre pour me permettre de rentrer la description, la visibilité, la date d'échéance, importer des documents, voir les signataires et "Request"
|
||
34 - Dans le menu, je peux me déconnecter avec le bouton "Disconnect"
|
||
|
||
## TO DO |