This commit is contained in:
parent
09c2d1f969
commit
b1be8e65ac
@ -50,3 +50,6 @@
|
|||||||
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