A.2 — Connexion et prise en main

Chapitre A.2 du Manuel PIGBF

A.2.2.1 — Prérequis techniques

2.1 Prérequis techniques

Avant d'accéder à la PIGBF, assurez-vous de disposer des éléments suivants :

Prérequis Détail
Navigateur web Google Chrome (recommandé), Mozilla Firefox, Microsoft Edge ou Safari — version récente
Connexion internet Requise en permanence pour toute utilisation de l'interface web
Identifiants Adresse email et mot de passe fournis par le Super Admin ou l'équipe IT GROUP
URL d'accès https://pigbf.org

ℹ️ Note : La PIGBF est une application web accessible directement depuis un navigateur. Aucune installation de logiciel n'est nécessaire sur le poste de l'administrateur. Les navigateurs en version trop ancienne peuvent présenter des problèmes d'affichage ; il est recommandé de maintenir son navigateur à jour.

A.2.2.2 — Se connecter à la plateforme

2.2 Se connecter à la plateforme

Procédure de connexion standard

  1. Ouvrez votre navigateur web et saisissez l'adresse https://pigbf.org dans la barre d'adresse. Appuyez sur Entrée.
  2. La page de connexion s'affiche. Elle présente le logo PAAF, une photo illustrant des élèves filles, et un formulaire avec deux champs : Email et Mot de passe.
  3. Saisissez votre adresse email dans le champ Email. Respectez exactement la casse de votre adresse (minuscules/majuscules).
  4. Saisissez votre mot de passe dans le champ Mot de passe. Les caractères saisis s'affichent sous forme de points pour préserver la confidentialité. Une icône en forme d'œil permet d'afficher temporairement le mot de passe si nécessaire.
  5. Cochez la case Se souvenir de moi si vous souhaitez que la plateforme mémorise votre session sur ce poste (déconseillé sur un ordinateur partagé).
  6. Cliquez sur le bouton Connexion ou appuyez sur la touche Entrée du clavier.
  7. La plateforme vérifie vos identifiants. En cas de succès, vous êtes redirigé automatiquement vers le tableau de bord.

📸 Capture d'écran à insérer : Page de connexion complète : photo de fond avec élèves, logo PAAF en haut à droite, champs Email et Mot de passe avec leurs labels, case "Se souvenir de moi", lien "Mot de passe oublié ?", bouton "Connexion" en bleu

⚠️ Attention : Après plusieurs tentatives de connexion échouées consécutives, la plateforme peut temporairement bloquer l'accès depuis votre adresse IP. Si cela se produit, attendez quelques minutes avant de réessayer ou contactez l'administrateur système.

A.2.2.3 — Mot de passe oublié

2.3 Mot de passe oublié

Si vous avez oublié votre mot de passe, une procédure de réinitialisation autonome est disponible directement depuis la page de connexion, sans intervention de l'administrateur.

Procédure de réinitialisation

  1. Sur la page de connexion, cliquez sur le lien « Mot de passe oublié ? » situé sous le champ Mot de passe.
  2. Une page de réinitialisation s'affiche. Saisissez l'adresse email associée à votre compte PIGBF.
  3. Cliquez sur Envoyer le lien de réinitialisation.
  4. Un message de confirmation s'affiche à l'écran, vous indiquant qu'un email a été envoyé si l'adresse existe dans le système.
  5. Consultez votre boîte email. Vous recevrez un message contenant un lien de réinitialisation sécurisé. Ce lien est valide pour une durée limitée (généralement 60 minutes).
  6. Cliquez sur le lien reçu par email. Vous êtes redirigé vers un formulaire de définition d'un nouveau mot de passe.
  7. Saisissez votre nouveau mot de passe dans le premier champ, puis confirmez-le dans le second. Choisissez un mot de passe robuste (au moins 8 caractères, combinant lettres majuscules, minuscules, chiffres et caractères spéciaux).
  8. Cliquez sur Réinitialiser le mot de passe.
  9. Vous êtes redirigé vers la page de connexion. Connectez-vous avec vos nouveaux identifiants.

📸 Capture d'écran à insérer : Page "Mot de passe oublié" : champ Email, bouton "Envoyer le lien de réinitialisation", message de confirmation après envoi

📸 Capture d'écran à insérer : Email de réinitialisation reçu dans la boîte mail : objet, corps du message avec le bouton/lien de réinitialisation

📸 Capture d'écran à insérer : Formulaire de définition du nouveau mot de passe : deux champs (Nouveau mot de passe / Confirmation), indicateur de robustesse, bouton "Réinitialiser le mot de passe"

ℹ️ Note : Si vous ne recevez pas l'email dans les 5 minutes suivant votre demande, vérifiez votre dossier de courrier indésirable (spam/junk). En cas de problème persistant (adresse email incorrecte, email non reçu), contactez l'équipe IT GROUP.

A.2.2.4 — Découverte de l'interface

2.4 Découverte de l'interface

Une fois connecté, vous accédez à l'interface principale de la PIGBF. Celle-ci est composée de trois zones permanentes qui restent visibles quelle que soit la page consultée.

📸 Capture d'écran à insérer : Vue générale de l'interface après connexion : tableau de bord affiché au centre, menu latéral à gauche avec tous les modules, barre supérieure en haut avec l'année scolaire, les icônes et l'avatar utilisateur. Les trois zones sont identifiées par des annotations : "1 - Menu latéral", "2 - Barre supérieure", "3 - Zone de contenu centrale"

2.4.1 Le menu latéral (navigation principale)

Le menu latéral est situé à gauche de l'écran. Il donne accès à l'ensemble des modules de la plateforme, organisés par groupes fonctionnels logiques. Chaque groupe est affiché avec son libellé en lettres capitales grises, suivi des modules qui le composent.

Structure complète du menu (rôle Super Admin / Admin) :

Groupe Modules
(sans groupe) Dashboard
Gestion des bénéficiaires Bénéficiaires · Écoles · Tuteurs
Gestion des paiements Prestataires · Paiements
Validation des données collectées Données Collectées
Rapports Rapports
Gestion des utilisateurs et param. Utilisateurs · Paramètres
Journal des activités Logs
Gestion de mon compte Profil

Cliquer sur une entrée de menu qui possède des sous-menus la développe pour afficher ses sous-sections. Un second clic la referme. Le bouton fléché (chevron) en haut du menu latéral permet de réduire entièrement la barre latérale à une bande d'icônes, libérant ainsi de l'espace pour la zone de contenu — utile sur les écrans de petite taille.

Les modules affichés varient selon les droits attribués à votre rôle. Un utilisateur Admin ONG, par exemple, ne verra pas les modules Prestataires ou Paramètres complets.

📸 Capture d'écran à insérer : Menu latéral entièrement déroulé (rôle Super Admin) : tous les groupes et leurs sous-menus visibles, élément actif surligné en bleu, bouton fléché en haut pour réduire

📸 Capture d'écran à insérer : Menu latéral réduit en mode icônes : seules les icônes sont visibles, les libellés ont disparu, le bouton fléché pointe vers la droite pour élargir

2.4.2 La barre supérieure

La barre supérieure, fixe en haut de l'écran, affiche en permanence plusieurs éléments essentiels à la navigation et au contexte de travail :

Sélecteur d'année scolaire (à gauche ou au centre) : affiche l'année scolaire en cours (ex. : 2024-2025 ▼). Ce paramètre est le filtre global de toute la plateforme : il détermine quelles données sont affichées dans tous les modules. Un clic dessus ouvre la liste des années disponibles.

Icône de notifications (cloche) : indique la présence d'alertes ou de messages système en attente de consultation. Un badge numérique rouge signale le nombre de notifications non lues.

Icône des paramètres (engrenage) : accès rapide à certains réglages de l'interface.

Menu utilisateur (coin supérieur droit) : affiche l'avatar et le nom de l'utilisateur connecté. Un clic ouvre un menu déroulant donnant accès à Mon profil et à la fonction de Déconnexion.

📸 Capture d'écran à insérer : Barre supérieure zoomée : sélecteur "2024-2025 ▼" visible à gauche, icône cloche avec badge rouge au centre, icône engrenage, puis avatar rond avec initiales et nom de l'utilisateur à droite

2.4.3 La zone de contenu centrale

C'est dans cette zone principale que s'affichent les pages, tableaux, formulaires, graphiques et détails de chaque module. Son contenu change dynamiquement selon la section sélectionnée dans le menu latéral. Elle occupe la majeure partie de l'écran et est scrollable verticalement lorsque le contenu dépasse la hauteur de l'écran.

A.2.2.5 — Changer l'année scolaire affichée

2.5 Changer l'année scolaire affichée

La notion d'année scolaire est centrale dans la PIGBF. Tous les tableaux de données, statistiques et opérations sont filtrés par l'année scolaire sélectionnée dans la barre supérieure. Naviguer d'une année à l'autre est une opération fréquente, notamment pour comparer des données entre années ou consulter l'historique.

Procédure

  1. Dans la barre supérieure, identifiez le sélecteur d'année scolaire affichant l'année en cours (ex. : 2024-2025).
  2. Cliquez dessus. Une liste déroulante présente toutes les années scolaires créées dans la plateforme, de la plus récente à la plus ancienne.
  3. Cliquez sur l'année souhaitée.
  4. L'ensemble des données affichées dans la plateforme se met à jour immédiatement pour refléter l'année sélectionnée. L'indicateur dans la barre supérieure change en conséquence.

📸 Capture d'écran à insérer : Sélecteur d'année scolaire ouvert : liste déroulante avec plusieurs années (2024-2025, 2023-2024, 2022-2023), l'année active en surbrillance, les années clôturées éventuellement marquées d'un cadenas

⚠️ Attention : La consultation d'une année passée est toujours possible. En revanche, toute création ou modification de données ne peut s'effectuer que sur l'année scolaire active (non clôturée). Si vous tentez de modifier des données sur une année clôturée, la plateforme bloquera l'action et affichera un message d'avertissement.

A.2.2.6 — Gérer son profil et changer de mot de passe

2.6 Gérer son profil et changer de mot de passe

Chaque utilisateur peut mettre à jour ses informations personnelles, sa photo de profil et son mot de passe de manière autonome, sans solliciter un administrateur. Ces modifications sont immédiatement synchronisées avec le service d'authentification Keycloak.

Accéder à la page Profil

Depuis le menu latéral, faites défiler jusqu'en bas et cliquez sur Profil (section « Gestion de mon compte »). Alternativement, cliquez sur votre avatar dans la barre supérieure et sélectionnez Mon profil dans le menu déroulant.

📸 Capture d'écran à insérer : Page "Mon Profil" complète : avatar circulaire à gauche avec bouton "Changer la photo" dessous, badge indiquant le rôle (ex. "Superadmin"), email en lecture seule, champ Nom éditable, boutons "Enregistrer les modifications" et "Changer de mot de passe"

Modifier son nom affiché

Le nom affiché est celui qui apparaît dans la barre supérieure, dans le journal d'activités et dans les historiques de validation.

  1. Sur la page Profil, localisez le champ Nom.
  2. Effacez la valeur actuelle et saisissez le nouveau nom souhaité.
  3. Cliquez sur Enregistrer les modifications.
  4. Un message de confirmation vert apparaît brièvement en haut de l'écran en cas de succès.

ℹ️ Note : L'adresse email est l'identifiant technique unique du compte. Elle est affichée à titre informatif mais ne peut pas être modifiée depuis cette interface. Pour changer l'adresse email associée à un compte, contactez le Super Admin.

Changer sa photo de profil

  1. Sur la page Profil, cliquez sur le bouton Changer la photo situé sous l'avatar actuel.
  2. Une fenêtre de sélection de fichier s'ouvre. Choisissez une image sur votre ordinateur.
  3. Formats acceptés : JPG et PNG. Taille maximale recommandée : 2 Mo.
  4. Après sélection, l'aperçu de la nouvelle photo s'affiche. Confirmez si la photo vous convient.
  5. Cliquez sur Enregistrer les modifications. La photo est sauvegardée et synchronisée avec Keycloak.

📸 Capture d'écran à insérer : Zone avatar en mode modification : nouvelle photo chargée et affichée en aperçu avant confirmation, bouton "Enregistrer les modifications" actif

Changer son mot de passe

  1. Sur la page Profil, cliquez sur le bouton Changer de mot de passe.
  2. Une fenêtre modale s'ouvre avec trois champs :
    - Ancien mot de passe — votre mot de passe actuel, requis pour vérification
    - Nouveau mot de passe — votre nouveau mot de passe souhaité
    - Confirmation du nouveau mot de passe — ressaisissez le nouveau mot de passe à l'identique
  3. Renseignez les trois champs.
  4. Cliquez sur Valider.
  5. En cas de succès, un message de confirmation s'affiche et la fenêtre se ferme. Le nouveau mot de passe est actif immédiatement et synchronisé avec Keycloak.

📸 Capture d'écran à insérer : Fenêtre modale "Changer de mot de passe" : trois champs (Ancien MdP, Nouveau MdP, Confirmation), boutons Annuler et Valider

⚠️ Attention : En cas d'erreur lors de la saisie de l'ancien mot de passe, la plateforme affichera un message d'erreur explicite « Mot de passe actuel incorrect ». Si l'image téléversée dépasse la taille autorisée, un message spécifique vous en informera. Dans les deux cas, l'opération est annulée et aucune modification n'est enregistrée.

A.2.2.7 — Se déconnecter

2.7 Se déconnecter

Il est important de se déconnecter explicitement de la plateforme à la fin de chaque session de travail, en particulier sur un poste partagé.

Procédure

  1. Dans la barre supérieure, cliquez sur votre nom ou avatar (coin supérieur droit).
  2. Dans le menu déroulant qui s'affiche, cliquez sur Déconnexion.
  3. Vous êtes immédiatement redirigé vers la page de connexion. Votre session est fermée côté plateforme et côté Keycloak.

📸 Capture d'écran à insérer : Menu déroulant utilisateur ouvert : options "Mon profil" et "Déconnexion" visibles

ℹ️ Bonne pratique : Ne fermez pas simplement l'onglet ou le navigateur sans vous déconnecter. La session reste active côté serveur pendant un certain temps, ce qui pourrait permettre à une autre personne accédant au même navigateur de consulter vos données. Utilisez systématiquement le bouton de déconnexion.

A.2.2.8 — Cas particuliers et messages d'erreur courants

2.8 Cas particuliers et messages d'erreur courants

Message / situation Cause probable Action à entreprendre
Identifiants incorrects Email ou mot de passe erroné Vérifiez la saisie (majuscules, espaces) ; utilisez « Mot de passe oublié ? » si nécessaire
Trop de tentatives — accès temporairement bloqué Protection anti-bruteforce activée Attendez quelques minutes et réessayez
Compte suspendu ou inactif Compte désactivé par un administrateur Contactez votre responsable ou l'équipe IT GROUP
Aucune année scolaire configurée Aucune année scolaire active n'a été paramétrée dans le système Le Super Admin doit créer et activer une année scolaire (cf. chapitre A.14)
Accès refusé à une page Droits insuffisants pour le rôle assigné Contactez l'administrateur pour vérifier vos permissions
Page blanche ou chargement infini après connexion Session expirée, problème réseau ou cache navigateur Actualisez la page (F5 ou Ctrl+R), videz le cache navigateur, ou reconnectez-vous
Erreur 500 — Erreur serveur Problème technique côté serveur Notez l'heure et les actions effectuées et contactez l'équipe IT GROUP