0. Page d'Authentification (AuthPageComponent)

Vue d'ensemble

La page d'authentification est le point d'entrée de l'application. Elle permet aux utilisateurs de se connecter avec un compte existant ou de créer un nouveau compte. Cette page est protégée par le NoAuthGuard qui redirige automatiquement les utilisateurs déjà connectés vers la page d'accueil.

Localisation

Fichier: client/src/app/pages/auth-page/auth-page.component.ts

Route: /auth

Fonctionnalités Principales

Mode Connexion

Permet aux utilisateurs de se connecter avec leurs identifiants existants.

Champs du formulaire:

• Username: Nom d'utilisateur unique
• Password: Mot de passe (minimum 6 caractères)
• Bouton "Afficher/Masquer le mot de passe": Toggle pour la visibilité du mot de passe

Processus de connexion:

1. L'utilisateur saisit son username et mot de passe
2. Le formulaire est validé côté client
3. AuthService.signInWithUsername() est appelé
4. Le service récupère l'email associé au username (requête HTTP)
5. Connexion Firebase avec l'email et le mot de passe
6. Création de session côté serveur
7. Authentification du socket avec le session ID
8. Redirection vers la page d'accueil

Mode Inscription

Permet aux nouveaux utilisateurs de créer un compte.

Champs du formulaire:

• Email: Adresse email valide (max 254 caractères)
• Username: Nom d'utilisateur unique (3-20 caractères, lettres/chiffres/underscore)
• Password: Mot de passe (minimum 6 caractères, max 128 caractères)
• Avatar: Image de profil personnalisée (optionnel)
• Bouton "Vérifier disponibilité": Vérifie en temps réel si le username est disponible
• Bouton "Afficher/Masquer le mot de passe": Toggle pour la visibilité du mot de passe

Processus d'inscription:

1. L'utilisateur saisit les informations requises
2. Validation du format du username (regex: ^[a-zA-Z0-9_]+$)
3. Vérification de disponibilité du username via AuthService.checkUsernameAvailability()
4. Sélection optionnelle d'un avatar
5. AuthService.signUp() est appelé avec les informations
6. Création du compte Firebase
7. Upload de l'avatar si fourni (multipart/form-data)
8. Enregistrement de l'utilisateur dans MongoDB
9. Connexion automatique après inscription

Gestion des Avatars

Format supportés: JPEG, JPG, PNG, GIF, WEBP

Taille maximale: 10 MB

Fonctionnalités:

• Sélection d'image via input file
• Prévisualisation de l'avatar sélectionné
• Validation du format et de la taille côté client
• Upload en multipart/form-data
• Messages d'erreur explicites si validation échoue

Validation:

const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
const maxSize = 10 * 1024 * 1024; // 10MB

Services Utilisés

AuthService

Méthodes principales:

signInWithUsername(username: string, password: string)

• Récupère l'email associé au username (POST /auth/login-username)
• Se connecte avec Firebase (signInWithEmailAndPassword)
• Envoie le token ID au serveur (POST /auth/login)
• Retourne le session ID et le statut de succès
• Gère les erreurs (compte déjà connecté ailleurs, identifiants invalides)

signUp(email: string, password: string, username: string, avatarFile?: File)

• Crée le compte Firebase (createUserWithEmailAndPassword)
• Récupère le token ID Firebase
• Envoie les informations au serveur avec avatar (POST /auth/register)
• Connexion automatique après inscription
• Retourne le session ID

checkUsernameAvailability(username: string)

• Vérifie si le username est disponible (GET /auth/check-username/:username)
• Retourne { available: boolean }
• Utilisé pour la validation en temps réel

getIdToken()

• Récupère le token ID Firebase de l'utilisateur actuel
• Utilisé pour les requêtes HTTP authentifiées

Traduction des erreurs Firebase:
Le service traduit automatiquement les codes d'erreur Firebase en messages compréhensibles en français :

• auth/invalid-email → "L'adresse e-mail n'est pas valide"
• auth/user-not-found → "Aucun compte trouvé avec cette adresse e-mail"
• auth/wrong-password → "Mot de passe incorrect"
• auth/email-already-in-use → "Cette adresse e-mail est déjà utilisée"
• auth/weak-password → "Le mot de passe doit contenir au moins 6 caractères"
• Et 40+ autres codes d'erreur traduits

SocketService

Méthode utilisée:

authenticateSocket(sessionId: string)

• Authentifie le socket avec le session ID reçu du serveur
• Émet l'événement AuthenticateSocket avec le session ID
• Attend la confirmation du serveur
• Retourne true si authentification réussie, false sinon

Composants Utilisés

OneButtonPopupComponent

Utilisé pour afficher des messages d'information ou d'erreur, notamment :

• Popup "Compte déjà connecté ailleurs"
• Messages d'erreur de validation
• Erreurs serveur

Props:

• message: Message à afficher
• onClosePopup: Callback de fermeture

Validation du Formulaire

Connexion

Règles de validation:

• Username et password requis
• Pas de validation supplémentaire (vérification serveur)

Inscription

Règles de validation:

• Email:

  • Requis
  • Format email valide (validé par Firebase)
  • Maximum 254 caractères

• Username:

  • Requis
  • Entre 3 et 20 caractères
  • Uniquement lettres, chiffres, et underscores (^[a-zA-Z0-9_]+$)
  • Doit être vérifié comme disponible avant soumission

• Password:

  • Requis
  • Minimum 6 caractères (règle Firebase)
  • Maximum 128 caractères

• Avatar:

  • Optionnel
  • Formats: JPEG, JPG, PNG, GIF, WEBP
  • Taille max: 10 MB

État de Validation

Variables d'état:

isCheckingUsername: boolean  // Requête HTTP en cours
hasCheckedUsername: boolean  // Au moins une vérification effectuée
isUsernameAvailable: boolean // Résultat de la vérification

Logique de soumission:

• Le bouton de soumission est désactivé si :
  • Formulaire en cours de chargement
  • Vérification de username en cours
  • Username pas encore vérifié (inscription)
  • Username non disponible (inscription)

Gestion des Erreurs

Erreurs d'Authentification

Compte déjà connecté (ALREADY_CONNECTED):

• Détecté par le serveur (code HTTP 409)
• Affiche une popup spéciale avec message explicite
• Force la déconnexion Firebase côté client
• L'utilisateur doit se déconnecter de l'autre appareil

Identifiants invalides:

• Message: "Les identifiants sont incorrects"
• Affichage dans la zone d'erreur du formulaire

Erreurs Firebase:

• Traduits automatiquement en français
• Affichés dans la zone d'erreur du formulaire
• Exemples : email invalide, mot de passe trop faible, email déjà utilisé

Erreurs de Validation

Username non disponible:

• Détecté en temps réel via checkUsernameAvailability()
• Message: "Ce nom d'utilisateur est déjà pris"
• Bloque la soumission du formulaire

Avatar invalide:

• Format non supporté: "Format non supporté. Utilisez JPEG, PNG, GIF ou WebP."
• Fichier trop volumineux: "Fichier trop volumineux. Taille maximale: 10MB."
• Affichage dans une zone d'erreur dédiée

Champs manquants:

• Message: "Veuillez remplir tous les champs"

État du Composant

Variables principales:

isLoginMode: boolean              // true = connexion, false = inscription
loginUsername: string             // Username pour connexion
email: string                     // Email pour inscription
password: string                  // Mot de passe
username: string                  // Username pour inscription
errorMessage: string              // Message d'erreur affiché
isLoading: boolean                // État de chargement global
isCheckingUsername: boolean       // Vérification username en cours
showPassword: boolean             // Affichage du mot de passe
isPopupActive: boolean            // Popup active
popupMessage: string              // Message de la popup
isUsernameAvailable: boolean      // Username disponible
hasCheckedUsername: boolean       // Username vérifié au moins une fois
selectedAvatarFile: File | null   // Fichier avatar sélectionné
selectedAvatarPreview: string | null  // URL de prévisualisation
avatarError: string               // Erreur d'avatar

Méthodes Principales

toggleMode()

Bascule entre mode connexion et inscription, réinitialise tous les champs.

onSubmit()

Soumet le formulaire après validation complète.

Flux:

1. Validation du formulaire via isFormValid()
2. Activation de isLoading
3. Appel du service approprié (signIn ou signUp)
4. Si succès et session ID fourni : authentification du socket
5. Redirection vers /home
6. Si erreur : affichage du message d'erreur

checkUsernameAvailability()

Vérifie la disponibilité du username en temps réel.

Flux:

1. Vérification de la longueur minimum (3 caractères)
2. Activation de isCheckingUsername
3. Appel API via AuthService.checkUsernameAvailability()
4. Mise à jour de isUsernameAvailable et hasCheckedUsername
5. Affichage du message d'erreur si non disponible

onUsernameChange()

Réinitialise l'état de vérification quand l'utilisateur modifie le username.

onAvatarSelected(event: Event)

Gère la sélection d'un fichier avatar.

Flux:

1. Récupération du fichier depuis l'input
2. Validation du type MIME
3. Validation de la taille
4. Stockage du fichier dans selectedAvatarFile
5. Création d'une prévisualisation avec FileReader
6. Affichage des erreurs si validation échoue

triggerFileInput()

Ouvre le sélecteur de fichiers (uniquement en mode inscription).

togglePasswordVisibility()

Bascule l'affichage du mot de passe entre texte et masqué.

canSubmitForm()

Détermine si le bouton de soumission doit être activé.

Conditions:

• Pas de chargement en cours
• Pas de vérification de username en cours
• Si inscription : username vérifié et disponible

clearForm()

Réinitialise tous les champs et états du formulaire (appelé lors du changement de mode).

Interface Utilisateur

Structure de la Page

Disposition:

• Conteneur centré avec fond dégradé/image
• Logo de l'application en haut
• Formulaire dans un cadre stylisé
• Bascule entre connexion/inscription
• Zone d'erreur pour les messages
• Boutons d'action

Mode Connexion

Éléments:

+----------------------------------+
|            LOGO                  |
|                                  |
|  [x] Connexion  [ ] Inscription  |
|                                  |
|  Username: [_______________]     |
|                                  |
|  Password: [_______________] [👁] |
|                                  |
|  [Message d'erreur si présent]   |
|                                  |
|        [SE CONNECTER]            |
|                                  |
+----------------------------------+

Mode Inscription

Éléments:

+----------------------------------+
|            LOGO                  |
|                                  |
|  [ ] Connexion  [x] Inscription  |
|                                  |
|  Email:    [_______________]     |
|  Username: [_______________]     |
|            [Vérifier] ✓/✗        |
|  Password: [_______________] [👁] |
|                                  |
|  Avatar: [Sélectionner]          |
|         [Prévisualisation]       |
|                                  |
|  [Message d'erreur si présent]   |
|                                  |
|        [S'INSCRIRE]              |
|                                  |
+----------------------------------+

Style et Thème

Couleurs principales:

• Primaire: #0f3460 (bleu sombre)
• Secondaire: Couleurs néon (rose, cyan) pour effets
• Fond: Dégradé avec effet retrowave

Typographie:

• Police principale: Orbitron
• Inputs avec bordures arrondies
• Boutons avec effet hover

Animations:

• Transition entre modes connexion/inscription
• Effet de chargement sur les boutons
• Prévisualisation d'avatar avec fondu

Navigation

Entrée sur la Page

Depuis:

• Navigation directe vers /auth
• Redirection automatique si non authentifié

Protection:

• NoAuthGuard redirige vers /home si déjà authentifié

Sortie de la Page

Vers:

• /home (Page d'accueil) après connexion/inscription réussie

Conditions:

• Authentification Firebase réussie
• Session créée côté serveur
• Socket authentifié

Cas d'Usage Typiques

Cas 1: Première Connexion

1. Utilisateur accède à l'application
2. AuthGuard redirige vers /auth (non authentifié)
3. Utilisateur bascule en mode inscription
4. Saisit email, username, password
5. Clique sur "Vérifier" pour le username
6. Sélectionne un avatar (optionnel)
7. Soumet le formulaire
8. Compte créé, connexion automatique
9. Redirection vers /home

Cas 2: Connexion Régulière

1. Utilisateur accède à /auth
2. Saisit username et password
3. Soumet le formulaire
4. Authentification réussie
5. Redirection vers /home

Cas 3: Compte Déjà Connecté

1. Utilisateur se connecte
2. Serveur détecte une session active
3. Retourne erreur 409 ALREADY_CONNECTED
4. Popup affichée avec message explicite
5. Déconnexion Firebase forcée
6. Utilisateur reste sur /auth

Cas 4: Username Déjà Pris

1. Utilisateur en mode inscription
2. Saisit un username existant
3. Clique sur "Vérifier"
4. Serveur retourne { available: false }
5. Message d'erreur affiché
6. Bouton de soumission désactivé
7. Utilisateur modifie le username
8. Doit re-vérifier la disponibilité

Intégration avec Firebase

Configuration Firebase

Fichier: client/src/environments/environment.ts

export const environment = {
  firebaseConfig: {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  }
};

Méthodes Firebase Utilisées

Inscription:

createUserWithEmailAndPassword(auth, email, password)

Connexion:

signInWithEmailAndPassword(auth, email, password)

Récupération Token:

await user.getIdToken()

Déconnexion:

signOut(auth)

Intégration Serveur

Endpoints Utilisés

POST /auth/register

• Body: FormData avec idToken, username, et avatar (optionnel)
• Retourne: { message, user } avec informations utilisateur

POST /auth/login-username

• Body: { username, password }
• Retourne: { email } de l'utilisateur

POST /auth/login

• Body: { idToken }
• Retourne: { message, sessionId, user }

GET /auth/check-username/:username

• Retourne: { available: boolean }

Événements Socket.IO

AuthenticateSocket

• Émis après connexion réussie
• Payload: { sessionId: string }
• Confirmation attendue du serveur

Points d'Attention

Sécurité

• Jamais de mot de passe en clair dans les logs
• Tokens Firebase transmis uniquement en HTTPS
• Session ID stocké en mémoire uniquement (pas de localStorage)
• Validation côté serveur même avec validation client

Performance

• Debounce sur la vérification de username (évite trop de requêtes)
• Prévisualisation d'avatar en base64 (pas d'upload inutile)
• Validation côté client avant appel serveur

Expérience Utilisateur

• Messages d'erreur clairs et en français
• Indication visuelle de chargement
• Désactivation des boutons pendant les opérations
• Feedback immédiat sur la disponibilité du username
• Prévisualisation de l'avatar avant soumission

Limitations

• Un seul appareil connecté à la fois (par design)
• Pas de récupération de mot de passe (à implémenter)
• Pas de modification de l'avatar après création (doit passer par paramètres)
• Pas de validation email (lien de vérification)

Améliorations Futures

• Récupération de mot de passe par email
• Vérification email obligatoire
• Connexion avec Google/autres providers
• Authentification à deux facteurs (2FA)
• Historique des sessions actives
• Force déconnexion à distance
• Validation CAPTCHA pour éviter les bots
• Politique de mot de passe renforcée
• Affichage de la force du mot de passe