Add info and help on TOTP enroll page

views/totp_enroll.html

@@ -14,8 +14,22 @@
 					</div>
 				{% endif %}
 				
-				<div id="totp-enroll-image" class="text-center my-3">
+				<div class="lh-sm text-center">
+					Le double facteur protège l’application et
+					sécurise les données personnelles de nos camarades.
+					Même en cas de vol de mot de passe, l’accès est bloqué sans une
+					vérification supplémentaire.
+				</div>
+
+				<div class="my-4 text-center">
 					<img src="{{ QrCode }}" alt="Code QR">
+
+					<div class="mt-2">
+						<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-help">
+							<i class="bi-info-square"></i>
+							Comment utiliser ce code QR ?
+						</a>
+					</div>
 				</div>
 
 				<form id="login" method="post">
@@ -58,4 +72,38 @@
 		</div>
 	</div>
 </div>
+
+<div id="modal-help" class="modal" tabindex="-1">
+	<div class="modal-dialog modal-dialog-centered">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">Aide</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+			</div>
+			<div class="modal-body">
+				<ol>
+					<li>
+						<b>Téléchargez une application d’authentification :</b>
+						Installez une application compatible TOTP (comme Google Authenticator,
+						Microsoft Authenticator ou Authy) sur votre smartphone.
+					</li>
+					<li>
+						<b>Scannez le code QR :</b>
+						Ouvrez l'application, choisissez "Ajouter un compte" ou "Scanner un code QR",
+						puis utilisez votre appareil pour scanner le QR code affiché.
+					</li>
+					<li>
+						<b>Enregistrez le compte :</b>
+						Une fois scanné, l'application générera un code à usage unique qui
+						se renouvelle régulièrement.
+					</li>
+					<li>
+						<b>Testez le code :</b>
+						Entrez le code généré dans l'application pour confirmer l’enrôlement.
+					</li>
+				</ol>
+			</div>
+		</div>
+	</div>
+</div>
 {% endblock %}