7.5 KiB
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 :
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.