|
|
|
|
@@ -1,2 +1,184 @@
|
|
|
|
|
# IHM
|
|
|
|
|
# Création d'une IHM pour le projet MIA
|
|
|
|
|
|
|
|
|
|
## Introduction
|
|
|
|
|
|
|
|
|
|
Ce projet couvre les IHM d'accès aux sessions de visio-conférence pour le projet MIA.
|
|
|
|
|
|
|
|
|
|
Ces IHM se découpent en deux étapes :\
|
|
|
|
|
1 - connexion d'un utilisateur sur une session de visio\
|
|
|
|
|
2 - identification de l'utilisateur sur la session
|
|
|
|
|
|
|
|
|
|
## Architecture du module
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
mia
|
|
|
|
|
├── ...
|
|
|
|
|
├── node_modules
|
|
|
|
|
│ ├── Tous les modules Node nécessaires à l'application (body-parser, bcrypt, express, ...)
|
|
|
|
|
├── public
|
|
|
|
|
│ ├── functions.js (contient des fonctions Javascript utilisées globalement sur tout le projet)
|
|
|
|
|
│ ├── session.js (fonctions spécifiques à l'écran de création des sessions)
|
|
|
|
|
│ ├── styles.css (feuilles de style globales de l'appli)
|
|
|
|
|
├── views
|
|
|
|
|
│ ├── create-session.hbs (écran de création d'une session de visio)
|
|
|
|
|
│ ├── login-session.hbs (écran de connexion sur une session)
|
|
|
|
|
│ ├── login.hbs (écran d'identification de l'utilisateur)
|
|
|
|
|
│ ├── login.hbs.old (DEPRECATED : ancienne version de l'identification de l'utilisateur, comprenant la saisie d'une adresse email ou d'un pseudo)
|
|
|
|
|
│ ├── register.hbs (DEPRECATED : écran de création du compte utilisateur)
|
|
|
|
|
├──.env (variables globales, pour l'environnement de test)
|
|
|
|
|
├──.env.prod (idem, pour l'environnement de prod)
|
|
|
|
|
├──mia_ihm.js (....)
|
|
|
|
|
├──package-lock.json
|
|
|
|
|
├──package.json
|
|
|
|
|
├──README.md (le présent fichier)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Installation des dépendances
|
|
|
|
|
|
|
|
|
|
Exemple de commande :
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install bcrypt
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Description des différents écrans
|
|
|
|
|
|
|
|
|
|
### create-session
|
|
|
|
|
|
|
|
|
|
Cet écran permet la création unitaire d'une session de visio.
|
|
|
|
|
Ceci permet à n'importe quel utilisateur de créer une session à venir --> cette session apparaitra dans la liste présente sur la page des sessions.
|
|
|
|
|
|
|
|
|
|
#### Accès à l'écran
|
|
|
|
|
|
|
|
|
|
Depuis l'écran de choix de la session, via un lien hypertexte situé au bas du formulaire.
|
|
|
|
|
|
|
|
|
|
#### Contrôles mis en place
|
|
|
|
|
|
|
|
|
|
* Le mot de passe (et sa confirmation) doivent être identiques, sinon message d'erreur.
|
|
|
|
|
* Champs obligatoires : **intitulé** et **date de début**
|
|
|
|
|
* Le nombre de participants (si renseigné) doit être un nombre entier strictement positif.
|
|
|
|
|
|
|
|
|
|
#### Actions effectuées depuis cet écran
|
|
|
|
|
|
|
|
|
|
A la soumission du formulaire, si tous les contrôles sont passants, une nouvelle session est créée en base de données dans la table "session".\
|
|
|
|
|
Y sont stockés :
|
|
|
|
|
* un UUID généré automatiquement (champ id)
|
|
|
|
|
* l'intitulé de la session (champ topic)
|
|
|
|
|
* le mot de passe de la session (champ password, chiffré via le module bcrypt)
|
|
|
|
|
* la date/heure de début (scheduled_on), au format YYYYMMDDHHmm
|
|
|
|
|
* le nombre de participants attendus (champ nb_of_attended)
|
|
|
|
|
* le nombre de participants réel (champ nb_of_participants) valorisé par défaut à 0
|
|
|
|
|
|
|
|
|
|
L'utilisateur est ensuite rédirigé vers la page **login-session**
|
|
|
|
|
|
|
|
|
|
-------------------------------------------------
|
|
|
|
|
|
|
|
|
|
### login-session
|
|
|
|
|
|
|
|
|
|
Ecran d'accueil du site, il permet à l'utilisateur de se connecter sur une session existante (listées dans une liste déroulante).
|
|
|
|
|
|
|
|
|
|
Dans cet écran, l'utilisateur peut préciser son rôle ("Présentateur" ou simple "Auditeur"), sur la session qu'il aura sélectionné.\
|
|
|
|
|
Par défaut, l'utilisateur est considéré comme "Auditeur".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Accès à l'écran
|
|
|
|
|
|
|
|
|
|
* Page d'accueil du site
|
|
|
|
|
* Via le lien "Projet MIA" apparaissant dans le header du site
|
|
|
|
|
|
|
|
|
|
#### Contrôles mis en place
|
|
|
|
|
|
|
|
|
|
* Le mot de passe saisi par l'utilisateur est contrôlé (après déchiffremment) et comparé avec celui stocké en BDD --> si cela ne correspond pas, un message d'erreur apparait à l'utilisateur.
|
|
|
|
|
* L'utilisateur doit saisir un mot de passe.
|
|
|
|
|
|
|
|
|
|
#### Actions effectuées depuis cet écran
|
|
|
|
|
|
|
|
|
|
* L'utilisateur peut créer une nouvelle session, via le lien hypertexte _"Besoin d'une nouvelle session ?..."_
|
|
|
|
|
* Au clic sur le bouton, l'existence de la session (et la conformité de son mot de passe) sont vérifiées.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-------------------------------------------------
|
|
|
|
|
|
|
|
|
|
### login
|
|
|
|
|
|
|
|
|
|
Ecran qui permet à l'utilisateur de s'identifier sur la session via l'identifiant de son choix : il peut saisir un texte quelconque ou bien une adresse email, par exemple.
|
|
|
|
|
|
|
|
|
|
#### Accès à l'écran
|
|
|
|
|
|
|
|
|
|
Depuis la page des sessions, après vérification de l'accès autorisé à la session.
|
|
|
|
|
|
|
|
|
|
#### Contrôles mis en place
|
|
|
|
|
|
|
|
|
|
* L'identifiant saisi n'a pas de format particulier.
|
|
|
|
|
* L'identifiant ne doit pas déjà être utilisé sur la session préalablement choisie par le client --> ce contrôle s'effectue en consultant les utilisateurs déjà déclarés sur la session en cours de saisie (table **participation**)
|
|
|
|
|
|
|
|
|
|
#### Actions effectuées depuis cet écran
|
|
|
|
|
|
|
|
|
|
Au clic sur le bouton "Se connecter", si les contrôles sont passants, l'utilisateur sera rédirigé vers une page Web dont l'URL est définie dans le fichier .env (donnée MASTER_URL ou SLAVE_URL en fonction du rôle que l'utilisateur s'est choisi sur l'écran des sessions) :
|
|
|
|
|
* si rôle = "Présentateur" --> MASTER_URL
|
|
|
|
|
* si rôle = "Auditeur" --> SLAVE_URL
|
|
|
|
|
|
|
|
|
|
Simultanément, la présence de l'utilisateur sur la session est tracée :
|
|
|
|
|
* incrémentation du compteur des participants, dans la table **session**
|
|
|
|
|
* création de l'utilisateur dans la table **user** avec un identifiant unique (UUID) auto-généré
|
|
|
|
|
* enregistrement de la présence de l'utilisateur sur la session, dans la table **participation**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-------------------------------------------------
|
|
|
|
|
|
|
|
|
|
### login.old
|
|
|
|
|
|
|
|
|
|
**DEPRECATED**
|
|
|
|
|
|
|
|
|
|
Suite à un point avec l'équipe Cortex le 16/11/2023, cet écran a été retiré et remplacé par une version simplifiée (avec uniquement la saisie d'un identifiant).
|
|
|
|
|
|
|
|
|
|
Cet écran a pour objectif de permettre à l'utilisateur de s'identifier via la saisie de son identifiant (soit un pseudo, soit une adresse email) et du mot de passe associé.
|
|
|
|
|
|
|
|
|
|
#### Accès à l'écran
|
|
|
|
|
|
|
|
|
|
**A date, plus d'accès possible à cet écran**
|
|
|
|
|
|
|
|
|
|
#### Contrôles mis en place
|
|
|
|
|
|
|
|
|
|
* L'utilisateur doit avoir saisi soit un pseudo soit une adresse email
|
|
|
|
|
* On vérifie que l'identifiant saisi n'est pas déjà utilisé --> si c'est le cas, l'utilisateur sera informé
|
|
|
|
|
* L'utilisateur doit saisir (et confirmer) un mot de passe
|
|
|
|
|
|
|
|
|
|
#### Actions effectuées depuis cet écran
|
|
|
|
|
|
|
|
|
|
* L'utilisateur peut créer un nouveau compte via le lien hypertexte présent au bas du fomulaire (_"Pas encore inscrit ?..."_)--> redirection vers la page **register**
|
|
|
|
|
* Au clic sur le bouton _"Se connecter"_, le nombre de participants sur la session (table **session**) est incrémenté et l'utilisateur est ajouté dans la table **participation**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-------------------------------------------------
|
|
|
|
|
|
|
|
|
|
### register
|
|
|
|
|
|
|
|
|
|
**DEPRECATED**
|
|
|
|
|
|
|
|
|
|
Cet écran permet de créer un nouveau compte utilisateur.
|
|
|
|
|
|
|
|
|
|
Il est demandé (obligatoire) à l'utilisateur d'y saisir :
|
|
|
|
|
* un identifiant (soit l'adresse email soit le pseudonyme)
|
|
|
|
|
* un mot de passe (et sa confirmation)
|
|
|
|
|
|
|
|
|
|
Il est proposé (facultatif) de renseigner :
|
|
|
|
|
* Son genre (Monsieur ou Madame)
|
|
|
|
|
* Som nom et/ou son prénom
|
|
|
|
|
* Son titre ou fonction
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Accès à l'écran
|
|
|
|
|
|
|
|
|
|
**A date, plus d'accès possible à cet écran**
|
|
|
|
|
|
|
|
|
|
#### Contrôles mis en place
|
|
|
|
|
|
|
|
|
|
* Les 2 mots de passe doivent concorder, sinon message d'erreur
|
|
|
|
|
* L'utilisateur doit avoir renseigné au moins le pseudo ou l'adresse email (il peut renseigner les deux, et plus)
|
|
|
|
|
* L'identifiant ne doit pas déjà être connu dans la BDD
|
|
|
|
|
|
|
|
|
|
#### Actions effectuées depuis cet écran
|
|
|
|
|
|
|
|
|
|
* Si l'utilisateur s'aperçoit qu'il a finalement déjà un compte, il peut abandoinner la création d'un nouveau compte en cliquant sur le lien _"Déjà inscrit ?..."_
|
|
|
|
|
* Au clic sur le bouton _"M'enregistrer"_, l'utilisateur sera créé en base de données et un identifiant unique (UUID) lui sera automatiquement attribué en BDD.
|
|
|
|
|
|