This commit is contained in:
4NK CI Bot
parent
09c2d1f969
commit
b1be8e65ac
85
README.md
85
README.md
@ -4,49 +4,52 @@
|
|||||||
|
|
||||||
## HOW TO START
|
## HOW TO START
|
||||||
|
|
||||||
1 - clone sdk_common, commit name "doc pcd" from 28.10.2024
|
1 - clone sdk_common, commit name "doc pcd" from 28.10.2024
|
||||||
2 - clone sdk_client, commit name "Ignore messages" from 17.10.2024
|
2 - clone sdk_client, commit name "Ignore messages" from 17.10.2024
|
||||||
3 - clone ihm_client_test3
|
3 - clone ihm_client_test3
|
||||||
4 - cargo build in sdk_common
|
4 - cargo build in sdk_common
|
||||||
5 - cargo run in sdk_client
|
5 - cargo run in sdk_client
|
||||||
6 - npm run build_wasm in ihm_client_test3
|
6 - npm run build_wasm in ihm_client_test3
|
||||||
7 - npm run start in ihm_client_test3
|
7 - npm run start in ihm_client_test3
|
||||||
|
|
||||||
## USER STORIES
|
## USER STORIES
|
||||||
|
|
||||||
1 - I can login with my adress device
|
1 - I can login with my adress device
|
||||||
2 - I can login with QR code
|
2 - I can login with QR code
|
||||||
3 - J'accède à la page Process après ma connexion
|
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
|
4 - Dans l'interface Process, je peux sélectionner un processus avec sa zone
|
||||||
5 - Je reçois des notifications dans la page Process
|
5 - Je reçois des notifications dans la page Process
|
||||||
6 - Dans le menu, je peux importer mes données au format JSON
|
6 - Dans le menu, je peux importer mes données au format JSON
|
||||||
7 - Dans le menu, je peux accèder à la page Account
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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"
|
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
|
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
|
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
|
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"
|
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
|
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
|
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
|
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
|
24 - Dans le menu je peux accèder à la page Chat
|
||||||
25 - Dans la page Chat, je peux voir les Processus
|
25 - Dans la page Chat, je peux voir les Processus
|
||||||
26 - Dans les Processus, je peux voir utilisateurs assignés à un rôle
|
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"
|
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"
|
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
|
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
|
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
|
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"
|
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"
|
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"
|
34 - Dans le menu, je peux me déconnecter avec le bouton "Disconnect"
|
||||||
|
|
||||||
## TO DO
|
## TO DO
|
||||||
|
|
||||||
|
### Documentation centralisée
|
||||||
|
- Voir `/home/debian/4NK_env/docs/ihm_client/`
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.9 MiB |
@ -1,39 +0,0 @@
|
|||||||
## Analyse détaillée
|
|
||||||
|
|
||||||
### Périmètre
|
|
||||||
|
|
||||||
Client front (Vite) intégrant un package WASM pré‑construit `pkg/` et Nginx pour le dev.
|
|
||||||
|
|
||||||
### Stack
|
|
||||||
|
|
||||||
- **Outillage**: Vite 5, TypeScript 5
|
|
||||||
- **WASM**: paquet `sdk_client` précompilé (copié dans `pkg/`)
|
|
||||||
- **UI/Libs**: axios, QR, SweetAlert2, plugins Vite (React/Vue activables)
|
|
||||||
- **Serveur**: Nginx en dev via `start-dev.sh`
|
|
||||||
|
|
||||||
### Build et exécution
|
|
||||||
|
|
||||||
- Scripts: `build_wasm`, `start` (Vite host 0.0.0.0), `build`, `deploy`.
|
|
||||||
- Dockerfile: Node 20‑alpine, installe `git` et `nginx`, `npm install`, copie `nginx.dev.conf`, script de démarrage.
|
|
||||||
|
|
||||||
### Ports
|
|
||||||
|
|
||||||
- 3003 (exposition dev), 80 via Nginx.
|
|
||||||
|
|
||||||
### Risques et points d’attention
|
|
||||||
|
|
||||||
- Coexistence double serveur (Vite + Nginx) en dev: veiller au routage, CORS et proxys.
|
|
||||||
- Paquet WASM précompilé: vérifier cohérence de version avec `sdk_client`.
|
|
||||||
- Absence de tests automatiques; ajouter stratégie `tests/` (unit/integration).
|
|
||||||
|
|
||||||
### Actions proposées
|
|
||||||
|
|
||||||
- Documenter matrice compatibilité `pkg/` ↔ `sdk_client` (source, commit/tag, date).
|
|
||||||
- Ajouter lints/tests en CI; unifier serveur dev (proxy Nginx vers Vite ou inverse).
|
|
||||||
- Paramétrer variables d’env front (URLs relais, API) et fournir `.env.example`.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# Architecture - IHM Client
|
|
||||||
|
|
||||||
## Composants
|
|
||||||
- Frontend embarqué en iframe dans `lecoffre-front`.
|
|
||||||
|
|
||||||
## Dépendances
|
|
||||||
- `sdk_relay` via `VITE_WS_URL`.
|
|
||||||
- Backend `lecoffre-back-mini` via `VITE_API_BASE_URL`.(sur dev3.4nkweb.com)
|
|
||||||
|
|
||||||
## Réseau et ports
|
|
||||||
- Exposé derrière Nginx via `https://dev4.4nkweb.com/`.
|
|
||||||
|
|
||||||
## Variables d’environnement (centralisées)
|
|
||||||
- Chargement depuis `lecoffre_node/.env.master`.
|
|
||||||
|
|
||||||
## Monitoring
|
|
||||||
- Logs → Promtail → Loki → Grafana (Frontend Services).
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
- Code splitting (`React.lazy`, `Suspense`).
|
|
||||||
- Pas de `.env` local, configuration via Docker Compose.
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
# Corrections Appliquées - IHM Client
|
|
||||||
|
|
||||||
## Date: 20 Septembre 2025
|
|
||||||
|
|
||||||
### 🔧 Corrections Majeures
|
|
||||||
|
|
||||||
#### 1. Problème de Configuration WebSocket
|
|
||||||
**Problème:** L'iframe était bloquée sur "Chargement de l'authentification..." car elle tentait de se connecter à une URL WebSocket inaccessible.
|
|
||||||
|
|
||||||
**Solution:**
|
|
||||||
- Correction de `VITE_BOOTSTRAPURL` pour pointer vers le bootstrap externe
|
|
||||||
- Configuration des `RELAY_URLS` pour utiliser le relais local et externe
|
|
||||||
- Mise à jour des variables d'environnement
|
|
||||||
|
|
||||||
**Fichiers modifiés:**
|
|
||||||
- `.env` - Configuration WebSocket corrigée
|
|
||||||
- `docker-compose.yml` - Variables d'environnement mises à jour
|
|
||||||
|
|
||||||
#### 2. Configuration des URLs
|
|
||||||
**Variables d'environnement:**
|
|
||||||
```env
|
|
||||||
BOOTSTRAPURL=wss://dev3.4nkweb.com/ws/
|
|
||||||
RELAY_URLS=ws://sdk_relay:8090,wss://dev3.4nkweb.com/ws/
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 3. Installation des Outils
|
|
||||||
**Ajouté dans le Dockerfile:**
|
|
||||||
- `curl`, `git`, `wget`, `jq`, `telnet`, `npm`, `wscat`
|
|
||||||
- Outils de diagnostic et de connectivité
|
|
||||||
|
|
||||||
### 📊 État Actuel
|
|
||||||
- **Statut:** ✅ Healthy
|
|
||||||
- **Connectivité:** Bootstrap et relais configurés
|
|
||||||
- **URLs:** Correctement mappées
|
|
||||||
- **Logs:** Optimisés
|
|
||||||
|
|
||||||
### 🔄 Prochaines Étapes
|
|
||||||
- Tests de connectivité WebSocket
|
|
||||||
- Monitoring des performances
|
|
||||||
- Optimisations supplémentaires
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
# Déploiement - IHM Client
|
|
||||||
|
|
||||||
## Préparation
|
|
||||||
- Branche `ext` sur tous les dépôts.
|
|
||||||
- Variables dans `lecoffre_node/.env.master` (pas de `.env` local).
|
|
||||||
- Ne pas utiliser `docker compose up -d`.
|
|
||||||
|
|
||||||
## Déploiement (orchestrateur)
|
|
||||||
```bash
|
|
||||||
cd /home/debian/4NK_env/lecoffre_node
|
|
||||||
./scripts/start.sh | cat
|
|
||||||
./scripts/validate-deployment.sh | cat
|
|
||||||
```
|
|
||||||
|
|
||||||
## Vérifications
|
|
||||||
- `https://dev4.4nkweb.com/` (iframe OK)
|
|
||||||
- WS `wss://dev4.4nkweb.com/ws/`
|
|
||||||
- `./scripts/monitor-progress.sh | cat`
|
|
||||||
|
|
||||||
## Règles
|
|
||||||
- Pousser sur `ext` sans déclencher de CI tant que non nécessaire.
|
|
||||||
- Config centralisée uniquement.
|
|
||||||
- Logs via Promtail → Loki → Grafana.
|
|
||||||
10
docs/FLUX.md
10
docs/FLUX.md
@ -1,10 +0,0 @@
|
|||||||
# Description des Flux - IHM Client
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
documentation
|
|
||||||
```
|
|
||||||
|
|
||||||
## Flux principaux
|
|
||||||
1. Auth notaire via front → IdNot → front → iframe IHM.
|
|
||||||
2. IHM ↔ Signer (opérations signées).
|
|
||||||
3. IHM ↔ Relay (WebSocket) pour évènements.
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
# Description Fonctionnelle - IHM Client
|
|
||||||
|
|
||||||
## Objectif
|
|
||||||
Fournir l’interface d’interaction utilisateur (iframe) pour les flux métiers et les opérations liées aux clés Bitcoin (Silent Payment).
|
|
||||||
|
|
||||||
## Parcours clés
|
|
||||||
- Authentification via redirection IdNot (depuis `lecoffre-front`).
|
|
||||||
- Échanges temps réel via `sdk_relay` (WebSocket).
|
|
||||||
|
|
||||||
## Rôles
|
|
||||||
- Notaire: initie les dossiers, suit l’état.
|
|
||||||
- Client: accède aux dossiers, valide via SMS, téléverse des pièces.
|
|
||||||
|
|
||||||
## Résultats attendus
|
|
||||||
- Affichage fiable de l’iframe.
|
|
||||||
- Opérations signées validées.
|
|
||||||
- Erreurs affichées à l’utilisateur, logs collectés.
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
# Installation - IHM Client
|
|
||||||
|
|
||||||
## Prérequis
|
|
||||||
- Accès au dépôt `4NK_env` (branche `ext`).
|
|
||||||
- Docker/Compose installés.
|
|
||||||
- Variables centralisées dans `lecoffre_node/.env.master`.
|
|
||||||
|
|
||||||
## Récupération du code
|
|
||||||
```bash
|
|
||||||
cd /home/debian/4NK_env
|
|
||||||
# Assure-toi d'être sur la branche ext dans tous les dépôts
|
|
||||||
```
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
- Ne pas créer de `.env` local.
|
|
||||||
- Renseigner/valider `VITE_*` dans `lecoffre_node/.env.master`.
|
|
||||||
|
|
||||||
## Démarrage (via orchestrateur)
|
|
||||||
- Lancer via `lecoffre_node` (recommandé) :
|
|
||||||
```bash
|
|
||||||
cd /home/debian/4NK_env/lecoffre_node
|
|
||||||
./scripts/start.sh | cat
|
|
||||||
```
|
|
||||||
|
|
||||||
## Accès
|
|
||||||
- `https://dev4.4nkweb.com/` (intégré via Nginx).
|
|
||||||
|
|
||||||
## Vérifications
|
|
||||||
- Page statut: `https://dev4.4nkweb.com/status/`
|
|
||||||
- WebSocket: `wss://dev4.4nkweb.com/ws/`
|
|
||||||
- Logs Grafana.
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
- Brancher IHM via iframe dans `lecoffre-front`.
|
|
||||||
- Ne pas déclencher de CI depuis ce dépôt; builds images depuis pipelines tag `ext` si nécessaire.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
# Qualité Logicielle - IHM Client
|
|
||||||
|
|
||||||
- Lint/format: respecter config projet.
|
|
||||||
- Tests: ajouter vérifs WS et intégration iframe.
|
|
||||||
- Performance: code splitting et lazy loading.
|
|
||||||
- Observabilité: logs structurés, erreurs gérées.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
# Sécurité - IHM Client
|
|
||||||
|
|
||||||
- Pas de secrets dans le code/dépôt.
|
|
||||||
- Variables via `.env.master` uniquement.
|
|
||||||
- CSP/headers via Nginx.
|
|
||||||
- WS sécurisé via `wss://`.
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
# Description Technique - IHM Client
|
|
||||||
|
|
||||||
## Tech stack
|
|
||||||
- Node.js 20, Vite/React.
|
|
||||||
- Code splitting (`React.lazy`, `Suspense`).
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
- Variables `VITE_*` via `lecoffre_node/.env.master`.
|
|
||||||
- Aucune lecture de `.env` local.
|
|
||||||
|
|
||||||
## Interfaces
|
|
||||||
- WebSocket `VITE_WS_URL` (relay).
|
|
||||||
- REST `VITE_API_BASE_URL` (backend).
|
|
||||||
- `VITE_SIGNER_URL` (signer).
|
|
||||||
|
|
||||||
## Sécurité
|
|
||||||
- Aucune clé en dépôt.
|
|
||||||
- Headers sécurisés via Nginx.
|
|
||||||
|
|
||||||
## Observabilité
|
|
||||||
- Logs Promtail → Loki.
|
|
||||||
- Dashboards Grafana.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
# TODO - IHM Client
|
|
||||||
|
|
||||||
- Vérifier intégration iframe avec `lecoffre-front`.
|
|
||||||
- Tester WS `wss://dev4.4nkweb.com/ws/`.
|
|
||||||
- Vérifier configuration `VITE_*` via `.env.master`.
|
|
||||||
- Ajouter dashboards Grafana si manquants.
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
# Connexion WebSocket - ihm_client
|
|
||||||
|
|
||||||
## Architecture de l'iframe
|
|
||||||
|
|
||||||
### Structure de fonctionnement
|
|
||||||
L'iframe `ihm_client` suit une architecture modulaire :
|
|
||||||
|
|
||||||
1. **Initialisation** (`router.ts`) :
|
|
||||||
- `init()` initialise les services
|
|
||||||
- `Services.getInstance()` crée l'instance singleton
|
|
||||||
- `connectAllRelays()` établit les connexions WebSocket
|
|
||||||
|
|
||||||
2. **Services** (`services/service.ts`) :
|
|
||||||
- Gestion des connexions WebSocket
|
|
||||||
- Communication avec les relays
|
|
||||||
- Gestion des messages et handshakes
|
|
||||||
|
|
||||||
3. **WebSocket** (`websockets.ts`) :
|
|
||||||
- API WebSocket native
|
|
||||||
- Gestion des événements (open, message, error, close)
|
|
||||||
|
|
||||||
## Configuration WebSocket
|
|
||||||
|
|
||||||
### Variables d'environnement
|
|
||||||
```bash
|
|
||||||
VITE_BOOTSTRAPURL=wss://dev4.4nkweb.com/ws/
|
|
||||||
RELAY_URLS=wss://dev4.4nkweb.com/ws/,wss://dev3.4nkweb.com/ws/
|
|
||||||
```
|
|
||||||
|
|
||||||
### Connexion aux relays
|
|
||||||
```typescript
|
|
||||||
// Dans service.ts
|
|
||||||
const BOOTSTRAPURL = [import.meta.env.VITE_BOOTSTRAPURL || `wss://${BASEURL}/ws/`];
|
|
||||||
|
|
||||||
// Connexion à tous les relays
|
|
||||||
await services.connectAllRelays();
|
|
||||||
```
|
|
||||||
|
|
||||||
## Gestion des messages
|
|
||||||
|
|
||||||
### Handshake
|
|
||||||
```typescript
|
|
||||||
public async handleHandshakeMsg(url: string, parsedMsg: any) {
|
|
||||||
const handshakeMsg: HandshakeMessage = JSON.parse(parsedMsg);
|
|
||||||
this.updateRelay(url, handshakeMsg.sp_address);
|
|
||||||
this.currentBlockHeight = handshakeMsg.chain_tip;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Mise à jour des adresses relay
|
|
||||||
```typescript
|
|
||||||
public updateRelay(wsurl: string, spAddress: string): void {
|
|
||||||
this.relayAddresses[wsurl] = spAddress;
|
|
||||||
console.log(`Updated: ${wsurl} -> ${spAddress}`);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Communication avec le parent
|
|
||||||
|
|
||||||
### Écoute des messages
|
|
||||||
```typescript
|
|
||||||
// Dans router.ts
|
|
||||||
if (window.self !== window.top) {
|
|
||||||
// L'iframe écoute les messages du parent
|
|
||||||
window.addEventListener('message', handleMessage);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Gestion des erreurs
|
|
||||||
```typescript
|
|
||||||
// Détection des fonds insuffisants
|
|
||||||
if (insufficientFunds) {
|
|
||||||
await this.triggerAutomaticFundsTransfer();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Problèmes résolus
|
|
||||||
|
|
||||||
### 1. Configuration WebSocket incorrecte
|
|
||||||
**Problème :** L'iframe utilisait `ws://sdk_relay:8090/` au lieu de `wss://dev4.4nkweb.com/ws/`.
|
|
||||||
|
|
||||||
**Solution :** Correction des variables d'environnement et redémarrage du container.
|
|
||||||
|
|
||||||
### 2. Mixed Content errors
|
|
||||||
**Problème :** Tentative de connexion WS depuis une page HTTPS.
|
|
||||||
|
|
||||||
**Solution :** Utilisation de WSS (WebSocket Secure) pour toutes les connexions.
|
|
||||||
|
|
||||||
### 3. Headers WebSocket manquants
|
|
||||||
**Problème :** Nginx ne transmettait pas les headers WebSocket.
|
|
||||||
|
|
||||||
**Solution :** Configuration Nginx avec headers WebSocket explicites.
|
|
||||||
|
|
||||||
## Problème persistant
|
|
||||||
|
|
||||||
### 502 Bad Gateway
|
|
||||||
**Statut :** ⚠️ Problème persistant
|
|
||||||
- L'iframe reçoit 502 Bad Gateway lors de la connexion WebSocket
|
|
||||||
- Nginx ne transmet pas les headers WebSocket vers le relay
|
|
||||||
- Le relay rejette les connexions sans headers
|
|
||||||
|
|
||||||
**Investigation :** La configuration Nginx semble correcte mais les headers ne sont pas transmis.
|
|
||||||
|
|
||||||
## Tests
|
|
||||||
|
|
||||||
### Test de connexion WebSocket
|
|
||||||
```bash
|
|
||||||
# Depuis l'iframe
|
|
||||||
wget -O- https://dev4.4nkweb.com/ws/
|
|
||||||
```
|
|
||||||
|
|
||||||
**Résultat actuel :** 502 Bad Gateway
|
|
||||||
|
|
||||||
### Test avec headers WebSocket
|
|
||||||
```bash
|
|
||||||
curl -v -H "Upgrade: websocket" \
|
|
||||||
-H "Connection: upgrade" \
|
|
||||||
-H "Sec-WebSocket-Version: 13" \
|
|
||||||
-H "Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==" \
|
|
||||||
https://dev4.4nkweb.com/ws/
|
|
||||||
```
|
|
||||||
|
|
||||||
## Date de mise à jour
|
|
||||||
2025-01-20 - Architecture de l'iframe analysée et problèmes de connexion WebSocket identifiés
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
### Objet
|
|
||||||
Analyse synthétique de `ihm_client` (iframe chargée par `lecoffre-front`).
|
|
||||||
|
|
||||||
### Stack et build
|
|
||||||
- **Outil**: Vite
|
|
||||||
- **Langage**: TypeScript + HTML templates
|
|
||||||
- **Cible**: `index.html` + `src/main.ts` (SPA montée en iframe)
|
|
||||||
- **Serveur dev**: `nginx.dev.conf` et script `start-dev.sh`
|
|
||||||
|
|
||||||
### Arborescence notable
|
|
||||||
- `src/components`: header, modales (confirmation/creation/waiting), login-modal, qrcode-scanner
|
|
||||||
- `src/pages`: home, chat, account, process, signature (+ variantes)
|
|
||||||
- `src/services`: database, storage, token, modal, service générique
|
|
||||||
- `src/utils`: documents, HTML helpers, notifications store, subscriptions utils
|
|
||||||
- `src/websockets.ts`: temps-réel côté iframe
|
|
||||||
|
|
||||||
### Intégrations et communication
|
|
||||||
- **Token/Session**: `src/services/token.ts`
|
|
||||||
- **Stockage**: `src/services/storage.service.ts`
|
|
||||||
- **Base de données**: `src/services/database.service.ts` (cache/worker)
|
|
||||||
- **Workers**: `service-workers/` (cache/database)
|
|
||||||
- **Échanges avec parent**: via postMessage (cf. utils/services) et WebSockets
|
|
||||||
|
|
||||||
### Points d’attention
|
|
||||||
- Sécurité iframe (sandbox, `postMessage` sécurisé par origine)
|
|
||||||
- Gestion des tokens (renouvellement, stockage, effacement)
|
|
||||||
- Cohérence de version avec `lecoffre-front` (API bus/messages)
|
|
||||||
|
|
||||||
### Déploiement
|
|
||||||
- **Dockerfile**: fourni
|
|
||||||
- **Nginx**: `nginx.dev.conf` pour dev local
|
|
||||||
Loading…
x
Reference in New Issue
Block a user