{% extends "layouts/main.html" %}

{% block main %}
<div class="container">
	<div id="login-card" class="my-5">
		<div class="card">
			<div class="card-header">
				Enregistrement multifacteur (TOTP)
			</div>
			<div class="card-body">
				{% if MfaError %}
					<div class="alert alert-danger">
						{{ MfaError }}
					</div>
				{% endif %}
				
				<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">
					<div class="mb-3">
						<label for="secret" class="form-label">
							Secret (si pas possible de scanner le code QR)
						</label>
						<input
							id="secret"
							class="form-control"
							type="text"
							name="secret"
							disabled
							value="{{ Secret }}"
						>
					</div>
					<div class="mb-3">
						<label for="otp" class="form-label">
							Code temporaire
						</label>
						<input
							id="otp"
							class="form-control"
							type="text"
							name="otp"
							required
							placeholder="000000"
							pattern="[0-9]{6}"
							autofocus
						>
					</div>
					<div class="text-end">
						<button class="btn btn-outline-primary" type="submit">
							<i class="me-1 bi-check-circle"></i>
							Vérifier
						</button>
					</div>
				</form>
			</div>
		</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 %}