# Login fonctionnel de bout en bout - Implémentations réalisées

**Author:** Équipe 4NK  
**Date:** 2026-01-28

## Vue d'ensemble

Ce document décrit les implémentations réalisées pour compléter le login fonctionnel de bout en bout sur PC et mobile.

---

## 1. userwallet - Notifications relais pour mobile

**Note importante :** Le modèle est **pull-only** (HTTP REST uniquement). Les WebSockets ne sont pas souhaités selon la documentation (`userwallet/features/userwallet-notifications-relais.md`).

### 1.1 Modèle pull-only (HTTP REST)

**Fichier modifié :** `userwallet/src/services/relayNotificationService.ts`

**Implémentations :**

1. **Polling HTTP REST uniquement**
   - Modèle pull-only : uniquement des appels GET HTTP REST
   - Pas de WebSocket (non souhaité selon la documentation)
   - Polling périodique des relais pour détecter nouveaux hashes
   - Détection via `GET /keys?start=&end=` pour scanner les nouveaux messages

2. **Gestion du polling**
   - `startPolling(intervalMs)` : démarre le polling périodique
   - `stopPolling()` : arrête le polling
   - Fenêtre temporelle configurable pour le scan des clés
   - Émission d'événements `RelayHashEvent` avec `source: 'polling'`

### 1.2 Optimisations mobile (backoff, reconnexions)

**Fichier modifié :** `userwallet/src/services/relayNotificationService.ts`

**Implémentations :**

1. **Stratégie de backoff exponentiel**
   - Interface `BackoffState` pour gérer l'état de retry par relais
   - `getBackoffDelay(endpoint)` : calcul du délai avec exponentiel (max 60s)
   - `recordFailure(endpoint)` : enregistre un échec et incrémente les tentatives
   - `recordSuccess(endpoint)` : réinitialise le backoff après succès
   - `shouldRetry(endpoint)` : vérifie si un retry est autorisé (max 5 tentatives)

2. **Gestion réseau mobile**
   - `setupNetworkListeners()` : écoute des événements `online`/`offline`
   - `resumeOperations()` : reprend les opérations après reconnexion
   - `pauseOperations()` : pause les opérations en mode offline
   - Vérification `isOnline` avant chaque opération réseau

3. **Optimisation des appels réseau**
   - Retry avec backoff pour `getMessageByHash`, `getSignatures`, `getKeys`
   - Skip des relais en échec répétés
   - Réduction des appels inutiles en mode offline

### 1.3 Fetch automatique des données

**Fichier modifié :** `userwallet/src/services/relayNotificationService.ts`

**Implémentations :**

1. **ProcessHash amélioré**
   - Fetch automatique de message, signatures, clés quand un hash est connu
   - Déchiffrement et mise à jour du graphe automatiques
   - Gestion des erreurs avec backoff par relais

2. **ProcessHashByType optimisé**
   - Optimisation selon le type d'objet (signature, contrat, membre, pair, action, champ)
   - Fetch sélectif selon le type (ex: pas besoin de clés pour une signature seule)

3. **Intégration avec useRelayNotifications**
   - Auto-processing des hashes détectés via polling
   - Démarrage automatique du polling avec `startPolling()`
   - Arrêt propre avec `stopPolling()` et `cleanup()`

**Fichier modifié :** `userwallet/src/hooks/useRelayNotifications.ts`

**Implémentations :**

1. **Polling HTTP REST**
   - `startPolling()` démarre le polling périodique
   - `stopPolling()` arrête le polling
   - Gestion du cycle de vie du polling

---

## 2. userwallet - Responsive design mobile

### 2.1 CSS responsive

**Fichier modifié :** `userwallet/src/index.css`

**Implémentations :**

1. **Media queries**
   - `@media (max-width: 768px)` : tablettes et petits écrans
   - `@media (max-width: 480px)` : smartphones
   - Adaptation des paddings, marges, tailles de police

2. **Tailles tactiles**
   - `min-height: 44px` pour tous les boutons (recommandation Apple/Google)
   - `min-width: 44px` pour les éléments interactifs
   - Boutons en `width: 100%` sur mobile

3. **Gestion du clavier virtuel**
   - `font-size: 16px` pour les inputs (évite le zoom automatique iOS)
   - `scroll-margin-top: 100px` pour le focus des inputs
   - Adaptation des hauteurs d'iframe selon la taille d'écran

4. **Optimisations tactiles**
   - `@media (hover: none) and (pointer: coarse)` : détection tactile
   - Feedback visuel avec `opacity` et `transform` sur `:active`
   - Espacement suffisant entre les éléments interactifs

---

## 3. service-login-verify - Persistance NonceCache

### 3.1 Amélioration PersistentNonceCache

**Fichier modifié :** `service-login-verify/src/persistentNonceCache.ts`

**Implémentations :**

1. **Persistance IndexedDB en arrière-plan**
   - `persistToIndexedDB(nonce, timestamp)` : persiste en IndexedDB de manière asynchrone
   - Utilisation de localStorage comme stockage principal (synchrone, requis par l'interface)
   - IndexedDB utilisé comme backup persistant

2. **Nettoyage IndexedDB**
   - `cleanupIndexedDB(now)` : supprime les entrées expirées depuis IndexedDB
   - Utilisation de l'index `timestamp` pour les requêtes efficaces
   - Nettoyage asynchrone non-bloquant

3. **Double persistance**
   - localStorage : accès synchrone (requis par `NonceCacheLike`)
   - IndexedDB : persistance entre sessions (backup)
   - Les deux sont maintenus en synchronisation

**Note :** `PersistentNonceCache` est déjà disponible et peut être utilisé à la place de `NonceCache` dans `website-skeleton` si persistance entre redémarrages nécessaire.

---

## Synthèse des modifications

### Fichiers modifiés

1. `userwallet/src/services/relayNotificationService.ts` :
   - Modèle pull-only (HTTP REST)
   - Optimisations mobile (backoff, reconnexions)
   - Gestion réseau online/offline

2. `userwallet/src/hooks/useRelayNotifications.ts` :
   - Polling HTTP REST automatique
   - Gestion du cycle de vie

3. `userwallet/src/index.css` :
   - Media queries responsive
   - Tailles tactiles
   - Gestion clavier virtuel

4. `service-login-verify/src/persistentNonceCache.ts` :
   - Persistance IndexedDB améliorée

---

## Utilisation

### userwallet - Activer les notifications

Le hook `useRelayNotifications` active le polling HTTP REST :

```typescript
const { startPolling, stopPolling } = useRelayNotifications(graphResolver, true);
// Démarrer polling HTTP REST (pull-only)
startPolling(60000); // 60 secondes
```

### service-login-verify - Utiliser PersistentNonceCache

Dans `website-skeleton/src/main.ts` :

```typescript
import { PersistentNonceCache } from 'service-login-verify';

const nonceCache = new PersistentNonceCache(3600000);
await nonceCache.init(); // Initialiser IndexedDB
```

---

## Notes importantes

- **Modèle pull-only** : Le système utilise uniquement des appels HTTP REST (GET). Les WebSockets ne sont pas souhaités selon la documentation (`userwallet/features/userwallet-notifications-relais.md`).
- **Persistance NonceCache** : `PersistentNonceCache` utilise localStorage comme stockage principal (synchrone) et IndexedDB en arrière-plan (asynchrone).
- **Backoff** : Limité à 5 tentatives maximum avec délai exponentiel jusqu'à 60 secondes.
- **Mobile** : Les optimisations réduisent les appels réseau et gèrent les reconnexions automatiquement.

---

## Références

- `features/login-bout-en-bout-reste-a-faire.md` : Liste initiale des éléments à implémenter
- `userwallet/src/services/relayNotificationService.ts` : Service de notifications
- `service-login-verify/src/persistentNonceCache.ts` : Cache persistant