# Relay - Specifications ## 1. Autheurs, validations, dates, versions, changement and historique Cf. [Git SDK COMMON](https://git.4nk.com/4nk/sdk_common/doc) ## 2. Table des matières * 1. [Autheurs, validations, dates, versions, changement and historique](#Autheursvalidationsdatesversionschangesandhistory) * 2. [Table des matières](#Tabledesmatires) * 3. [Objectif](#Objectif) * 4. [Portée](#Porte) * 5. [Documents de référence](#Documentsderfrence) * 6. [Interface Client Web](#InterfaceClientWeb) * 6.1. [Structure HTML de Base](#StructureHTMLdeBase) * 6.2. [Page de création d'une identité numérique (create)](#Pagedecrationduneidentitnumriquecreate) * 6.2.1. [Page de sélection de `Process` et des Members en charge de renvoyer les shards de la clé `recover`](#PagedeslectiondelProcessetdesMembersenchargederenvoyerlesshardsdelaclrecover) * 6.2.2. [Page d'enrolement dans un `Process` (`onboarding`)](#PagedenrolementdansunProcessonboarding) * 6.2.3. [Page de téléchargement des images de login des third parties](#Pagedetlchargementdesimagesdelogindesthirdparties) * 6.3. [Page de récupération d'une identité numérique (`recover`)](#Pagedercuprationduneidentitnumriquerecover) * 6.4. [Page de révocation d'une identité numérique (`revoke`)](#Pagedervocationduneidentitnumriquerevoke) * 6.5. [Page de la liste des `Process`](#PagedelalistedesProcess) * 6.6. [Page de Détail d'un `Process`](#PagedeDtaildunProcess) * 6.7. [Page socle des `Process`](#PagesocledesProcess) * 6.7.1. [4.7. Page de la liste d'un type d'`Item`](#PagedelalisteduntypedItem) * 6.7.2. [4.7. Page de détail d'un `Item`](#PagededtaildunItem) * 6.7.3. [4.7. Page de la liste des notifications](#Pagedelalistedesnotifications) * 6.7.4. [4.7. Page de détail d'une notifications](#Pagededtaildunenotifications) * 6.8. [Page d'import d'une image de login](#Pagedimportduneimagedelogin) * 6.9. [Page de validation d'un code de confirmation (2FA)](#Pagedevalidationduncodedeconfirmation2FA) * 7. [5. SDK Typescript](#5.SDKTypescript) * 8. [5. SDK Web Assembly](#5.SDKWebAssembly) * 9. [5. Serveur web](#5.Serveurweb) ## 3. Objectif L'objectif de cette spécification est de définir les exigences et les fonctionnalités de l'interface client web pour l'authentification et l'identification des utilisateurs sur la plateforme 4NK Web5 Solution. Tous les relais ont les mêmes pages, et partagent le SDK en Wasm de 4NK, leur liste d'`Peer` et leur liste `Process`. ## 4. Portée La portée de cette spécification comprend les exigences et les fonctionnalités suivantes pour l'interface client web. Wireframes : ![Wireframes](diagrams/Login-Wireframes.png "Wireframes") ## 5. Documents de référence Voir [_Doc_references.md](_Doc_references.md). ## 6. Interface Client Web ### 6.1. Structure HTML de Base Pour créer une application client web interactive qui communique efficacement avec les relais, une structure de base HTML est nécessaire. Voici les éléments clés à inclure dans votre fichier HTML pour démarrer avec l'application 4NK : ```html 4NK Application
``` Cadre HML commun aux pages des relais : * **Doctype HTML** : Déclare que le document est de type HTML5. * **Langue** : Définit la langue principale du contenu comme étant l'anglais (lang="en"). * **Méta Éléments** : Fournissent des informations sur la page web, notamment le type d'encodage (charset="UTF-8"), l'auteur (author="4NK"), la description (description="4NK Web5 Platform"), les mots-clés (keywords="4NK, web5, bitcoin, blockchain, decentralize, dapps, relay, contract"), et la compatibilité avec les différents appareils (viewport="width=device-width, initial-scale=1.0"). * **Lien CSS** : Référence une feuille de style externe pour styliser l'application (href="style/4nk.css"). * **Titre** : Le titre de la page affiché dans l'onglet du navigateur (title="4NK Application"). * **Conteneur Principal** : Un div conteneur avec un identifiant unique (id="containerId") sert de point d'ancrage pour l'injection de contenu dynamique ou d'interfaces utilisateur spécifiques à l'application. * **Intégration des composants WASM dans l'interface utilisateur**: Un module permet d'intégrer un wrapper js avec le Wasm pour une interaction fluide avec les relais via le WebAssembly. # Règles sur l'affichage des pages ### 6.2. Page de création d'une identité numérique (create) #### 6.2.1. Page de sélection de `Process` et des Members en charge de renvoyer les shards de la clé `recover` #### 6.2.2. Page d'enrolement dans un `Process` (`onboarding`) #### 6.2.3. Page de téléchargement des images de login des third parties ### 6.3. Page de récupération d'une identité numérique (`recover`) ### 6.4. Page de révocation d'une identité numérique (`revoke`) ### 6.5. Page de la liste des `Process` ### 6.6. Page de Détail d'un `Process` ### 6.7. Page socle des `Process` #### 6.7.1. 4.7. Page de la liste d'un type d'`Item` #### 6.7.2. 4.7. Page de détail d'un `Item` #### 6.7.3. 4.7. Page de la liste des notifications #### 6.7.4. 4.7. Page de détail d'une notifications ### 6.8. Page d'import d'une image de login ### 6.9. Page de validation d'un code de confirmation (2FA) ## 7. 5. SDK Typescript ## 8. 5. SDK Web Assembly ## 9. 5. Serveur web