# 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 :

<table id="bkmrk-pr%C3%A9requis-d%C3%A9tail-nav"><thead><tr><th>Prérequis</th><th>Détail</th></tr></thead><tbody><tr><td>**Navigateur web**</td><td>Google Chrome (recommandé), Mozilla Firefox, Microsoft Edge ou Safari — version récente</td></tr><tr><td>**Connexion internet**</td><td>Requise en permanence pour toute utilisation de l'interface web</td></tr><tr><td>**Identifiants**</td><td>Adresse email et mot de passe fournis par le Super Admin ou l'équipe IT GROUP</td></tr><tr><td>**URL d'accès**</td><td>https://pigbf.org</td></tr></tbody></table>

ℹ️ **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**.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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</callout>`

⚠️ **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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> Page "Mot de passe oublié" : champ Email, bouton "Envoyer le lien de réinitialisation", message de confirmation après envoi</callout>`

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> Email de réinitialisation reçu dans la boîte mail : objet, corps du message avec le bouton/lien de réinitialisation</callout>`

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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"</callout>`

ℹ️ **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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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"</callout>`

### 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) :**

<table id="bkmrk-groupe-modules-%28sans"><thead><tr><th>Groupe</th><th>Modules</th></tr></thead><tbody><tr><td>*(sans groupe)*</td><td>**Dashboard**</td></tr><tr><td>**Gestion des bénéficiaires**</td><td>Bénéficiaires · Écoles · Tuteurs</td></tr><tr><td>**Gestion des paiements**</td><td>Prestataires · Paiements</td></tr><tr><td>**Validation des données collectées**</td><td>Données Collectées</td></tr><tr><td>**Rapports**</td><td>Rapports</td></tr><tr><td>**Gestion des utilisateurs et param.**</td><td>Utilisateurs · Paramètres</td></tr><tr><td>**Journal des activités**</td><td>Logs</td></tr><tr><td>**Gestion de mon compte**</td><td>Profil</td></tr></tbody></table>

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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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</callout>`

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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</callout>`

### 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**.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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</callout>`

### 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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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</callout>`

⚠️ **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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> 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"</callout>`

### 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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> Zone avatar en mode modification : nouvelle photo chargée et affichée en aperçu avant confirmation, bouton "Enregistrer les modifications" actif</callout>`

### 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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> Fenêtre modale "Changer de mot de passe" : trois champs (Ancien MdP, Nouveau MdP, Confirmation), boutons Annuler et Valider</callout>`

⚠️ **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.

`<callout class="info">📸 <strong>Capture d'écran à insérer :</strong> Menu déroulant utilisateur ouvert : options "Mon profil" et "Déconnexion" visibles</callout>`

ℹ️ **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

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

---

---