Not-messenger

Envoyer

L'utilisateur peut envoyer un message dans une conversation. Celui-ci peut contenir des emojis, des fichiers, des photos ou des vidéos.
Le message s'affiche sur le côté droit de la fenêtre de conversation.

Recevoir
Les messages reçus s'affichent sur le côté gauche de la fenêtre.
Chaque nouveau message est ajouté à la suite des autres, avec le nom et la photo de profil de l'auteur affichés.

L'utilisateur peut rechercher des utilisateurs par le pseudo et créer une conversation avec.

• S'il veut créer une conversation privée avec une personne alors qu'il en a déja une existante, au lieu de créer la conversation, cela affichera la conversation existante et enverra le message dedans
• Ne peut pas rajouter une peronne qu'il a bloquée
• Ne peut pas rajouter quelqu'un étant déja dans la liste d'ajout
• Si l'utilisateur ne rajoute qu'une personne, la conversation est considérée comme "privée", ils auront donc tous les deux les droits admin.

Au chargement de la page, l'utilisateur charge toutes ses conversations.
(Amélioration à faire : ne charger qu'un certain nombre et mettre un scroll infini.)

Pour chaque conversation, on y voit :

• Le nom de la conversation / les utilisateurs
• Le dernier message et le temps écoulé depuis son envoi
• Une pastille bleue indiquant si l'utilisateur a lu le dernier message
• Un bouton paramètres
• Le symbole "muet" si la conversation a été mise en sourdine

Elles sont triées par date décroissante de leur dernier message.
Si l'utilisateur est l'auteur du dernier message, les photos des personnes ayant vu ce message sont visibles.

Bouton paramètres de la conversation

• Ajout de personnes (conversation de groupe)
• Mettre / retirer la conversation en muet
• Supprimer la conversation pour l'utilisateur
• Quitter la conversation (conversation de groupe)

Chaque fois qu'un message est envoyé dans une conversation, celle-ci est mise à jour dans la liste.

Bloquer un utilisateur permet de ne plus voir les messages que cette personne envoie.

S'il existe une conversation privée avec cette personne, celle-ci sera ne sera plus affichée parmis les conversations, elle sera dans l'onglet "utilisateurs bloqués". Dans cette conversation, les messages précédents le blocage seront toujours visibles mais tout messages ultérieurs ne seront plus visible. De même dans les conversations de groupe dans lesquelles se trouvent la personne bloquée. Une fois la perosnne débloquée, tous les messages seront à nouveai visible.

Uniquement dans une conversation de groupe (non privée), il y a la possibilité d'ajouter/retirer d'autres utilisateurs.

Ajout :
Un modal permet de rechercher les utilisateurs à ajouter

• Seul les admins peuvent le faire
• Recherche par le pseudo
• Liste de personnes "en train d'être ajoutées" à partir de laquelle on peut rapidement les retirer si on ne souhaite plus les ajouter
• Impossible de chercher une personne déja présente dans la conversation

Retirer :

• Seul les admins peuvent le faire
• Impossible de retirer un admin (il faut d'abord lui retirer les droits admins, seul le créateur de la conversation peut le faire (ou l'admin le plus ancien si ce premier a quitté la conversation))
• Impossible de retirer le créateur (ou admin plus ancien)

Un message système sera affiché pour prévenir tous les utilisateurs de la conversation de ce changement

Donner les droits admins permet à l'utilisateur de:

• Ajouter/retirer des membres de la conversation

Un message système sera affiché pour prévenir tous les utilisateurs de la conversation de ce changement

Tout utilisateur peut changer le nom d'une conversation de groupe

• Les conversations sans nom respectent le format : 'utilisateur1, Utilisateur2, Utilisateur3, ..."

• Le nom d'une conversation est de max 30 caractères

• Pour valider le changement de nom, il faut que le nouveau nom soit différent nom du nom actuel

• Mettre un nom vide revient à afficher la conversation sous le format de base cité plus haut

  Un message système sera affiché pour prévenir tous les utilisateurs de la conversation de ce changement

Tout utilisateur peut changer l'emoji d'une conversation.

L'emoji d'une conversation est une réaction rapide sur laquelle l'utilisateur peut appuyer pour directement envoyer un message contenant cet emoji.
Il peut choisir cet emoji parmi une liste d'emojis.

Un message système sera affiché pour prévenir tous les utilisateurs de la conversation de ce changement.

Tout utilisateur peut changer le thème couleur de la conversation. Cela change uniquement la couleur des messages envoyés par l'utilisateur.
En fonction de si la couleur choisie est claire ou foncée, la couleur de la police passe de blanc à noir.

Tout utilisateur peut changer les pseudos des membres de la conversation.
Chaque fois que le nom d'un utilisateur sera utilisé dans la conversation (ex: auteur de message, message système...),
son pseudo sera affiché à la place.

L'utiisateur peut envoyer tout type de fichiers dans la conversation.

• Possibilité d'ajouter les fichiers en cliquant sur le bouton ou en drag & drop
• Les fichiers ne peuvent pas faire plus de 20Mb par fichier
• Le nom du fichier ne peut pas contenir de virgule ni de tiret
• Impossible d'envoyer plusieurs fois le même fichier en même temps

Preview des fichiers:

• Affiche une preview des différents fichiers à envoyer, possibilité de les retirer avant l'envoi
• Les fichiers sont représentés par une image de fichier avec leur noms en-dessous
• Les images et vidéos sont directement visibles

L'utilisateur peut envoyer un gif (image animée) dans une conversation à partir du bouton GIF.

Cela ouvre une boîte dans laquelle il peut rechercher le GIF qu'il souhaite. Lorsqu'il clique dessus, cela envoie un message contenant le GIF choisi.
Cliquer sur ce message redirige directement vers la page internet du GIF.

L'utilisateur peut rechercher une chaîne de minimum 3 caractères dans une conversation.
Lui retourne tous les messages contenant cette chaîne.
Excepté :

• S'il a supprimé la conversation, les messages précédant la date de suppression
• Les messages qu'il aurait supprimés pour lui-même (mais toujours visibles par les autres)
• Les messages supprimés par l'auteur (supprimés pour tout le monde et remplacés par "Ce message a été supprimé")
• S'il a quitté/été exclu d'une conversation, les messages suivant cette date

Cliquer sur un des messages de la liste contenant la chaîne de caractères :
Si le message est déjà chargé, scroll jusqu'au message, autrement, charge le message en question ainsi qu'une dizaine de messages avant et après celui-ci.

Le message en question est mis en évidence.

L'utilisateur peut mettre une conversation en sourdine pendant différentes durées ou indéfiniment jusqu'à ce qu'il le change.
Mettre la conversation en sourdine empêche de jouer le son de notification lors d'un nouveau message

L'utilisateur peut supprimer une conversation, cela permet de la retirer de sa liste de conversations et de ne plus rien voir précédent ce moment.
Dès qu'un nouveau message sera envoyé dans cette conversation, elle réapparaitra dans la liste.
Les anciens messages, photos et fichiers ne seront plus accessibles par l'utilisateur mais le seront toujours pour les autres participants.
Il ne sera plus possible non plus de rechercher des messages précédents ce moment.

Quand l'utilisateur est dans le visualiseur d'image, il peut la transférer dans une autre conversation via un bouton.
Dans ce modal, ses 5 conversations les plus récentes lui sont directement proposées.
Il peut aussi rechercher parmi ses conversations en tapant le nom d'un utilisateur ou bien le nom d'une conversation.

L'auteur d'un message peut modifier un message qu'il a envoyé au-delà des 10 minutes après l'avoir envoyé.
Quand un message est modifié, une mention "Modifié" est affichée juste au-dessus du dit message.
En cliquant dessus, il est possible de voir les différentes modifications effectuées.

Supprimer un message pour soi

L'utilisateur peut supprimer n'importe quel message "pour lui", il sera le seul à ne plus voir ce message, il ne pourra plus le chercher non plus. Si ce message est le dernier de la conversation, dans la liste des conversations, le dernier message sera remplacé par le message précédent.

Supprimer un message pour tout le monde

Seul l'auteur d'un message peut le faire.
Le texte de ce message sera remplacé par "Ce message a été supprimé", plus personne ne pourra ni voir ni rechercher le texte original de ce message.
Si ce message est le dernier de la conversation, dans la liste des conversations, le texte sera aussi remplacé par "Ce message a été supprimé".

Ces deux actions sont irréversibles.

L'utilisateur peut réagir à n'importe quel message avec un emoji.
Cinq émojis de base lui sont proposés, mais plus sont accessibles en appuyant sur le "+".
La réaction à ce message est visible en dessous de celui-ci.

En cliquant sur les différentes réactions du message, la liste complète s'affiche, montrant la réaction de chaque personne.

Il est possible de retirer sa réaction en recliquant sur l'emoji dans le menu ou dans la liste des personnes ayant réagi.

En allant dans les détails de la conversation, l'utilisateur peut voir et télécharger tous les fichiers envoyés, excepté ceux envoyés après qu'il a quitté la conversation.

Pour accéder à toutes les images d'une conversation, l'utilisateur peut soit :

• Aller dans les informations de la conversation ; les images les plus récentes sont chargées, en scrollant vers le bas il en charge davantage.
• Cliquer directement sur une des images contenues dans un message.

Dans ces deux cas, cela ouvre le visualiseur d'images. Il consiste en un carrousel où il suffit de cliquer sur l'image que l'on veut voir.
Il est possible de naviguer entre les images directement sur le carrousel ou bien via les flèches se trouvant sur les côtés.
Le carrousel n'affiche qu'un certain nombre d'images ; en fonction de si l'utilisateur navigue vers les médias les plus anciens ou les plus récents, les éléments suivants sont chargés.

Cliquer sur la flèche "répondre" d'un message permet d'y répondre en le citant.
Le message de l'utilisateur sera précédé d'un extrait du message cité, ce qui permet de comprendre rapidement de quel message il s'agit.

Cliquer sur la citation :
Si le message est déjà chargé, on scroll jusqu'à celui-ci. Sinon, on charge le message concerné ainsi qu'une dizaine de messages avant et après.
Le message en question est mis en évidence.

Au chargement d'une conversation, seulement une vingtaine de messages est chargée.
L'utilisateur peut faire défiler vers le haut pour en charger davantage.

Quand l'utilisateur clique sur un message recherché ou cité et que celui-ci n'est pas déjà présent parmi les messages chargés, l'application charge ce message ainsi que quelques messages juste avant et après.
Les messages affichés ne sont donc plus les plus récents de la conversation.

L'utilisateur peut donc :

• Scroller vers le bas pour charger les messages plus récents que ceux affichés jusqu'à atteindre les derniers
• Cliquer sur la flèche "Retourner aux messages plus récents" pour charger les derniers messages
  Si les messages les plus récents sont déjà chargés, ce bouton fait simplement défiler jusqu'en bas

Système d'authentification avec Firebase Auth

Inscription :

• Choix d'une adresse mail, d'un pseudo et d'un mot de passe
• Création de l'utilisateur sur Firebase et dans la base de données
• Attribution d'un JWT

Connexion :
Actuellement (mauvaise pratique) : j'utilise Firebase directement dans le frontend. Une fois authentifié avec Firebase, j'envoie une requête au backend pour récupérer mon JWT. Ce n'est pas sécurisé, car n'importe qui peut demander le token de n'importe qui. (Début de mon apprentissage)
Je devrais modifier cela pour gérer l'auth Firebase via mon backend, puis envoyer le token au frontend une fois la vérification confirmée (comme dans le projet Tou), mais pour l'instant je laisse comme ça, je changerai peut-être un jour.

Système d'authentification avec Firebase Auth

Inscription :

• Choix d'une adresse mail, d'un pseudo et d'un mot de passe
• Création de l'utilisateur sur Firebase et dans la base de données
• Attribution d'un JWT

Connexion :
Actuellement (mauvaise pratique) : j'utilise Firebase directement dans le frontend. Une fois authentifié avec Firebase, j'envoie une requête au backend pour récupérer mon JWT. Ce n'est pas sécurisé, car n'importe qui peut demander le token de n'importe qui. (Début de mon apprentissage)
Je devrais modifier cela pour gérer l'auth Firebase via mon backend, puis envoyer le token au frontend une fois la vérification confirmée (comme dans le projet Tou), mais pour l'instant je laisse comme ça, je changerai peut-être un jour.

L'utilisateur peut choisir une photo de profil qui sera visible par tout le monde

L'utilisateur peut quitter une conversation de groupe pour ne plus en recevoir les messages.

S'il est le seul admin de la conversation, il doit d'abord en nommer un autre avant de la quitter.
Quitter la conversation l'empêchera de voir tous les messages/médias envoyés après son départ.
S'il rejoint à nouveau la conversation par après, il aura de nouveau accès à l'entiereté de celle-ci.

Dès qu'un utilisateur commence à écrire un message, les autres utilisateurs présents dans la conversation et l'ayant ouverte voient une animation indiquant que la personne est en train d'écrire. Celle-ci s'arrête dès que la personne a terminé.

L'utilisateur peut voir si une personne a déjà vu son message ou non.

Dès qu'un utilisateur voit un message, sa photo de profil s'affiche juste en dessous du dernier message qu'il a vu dans la conversation.
Survoler la photo de la personne permet de voir la date à laquelle elle a vu le message.