Prettier templates
This commit is contained in:
parent
d98268d9d6
commit
7b1cb83742
SSH key fingerprint:
SHA256:19MbXpLua4rUtk8tunMesD8KUKb91LXLHg8E/qTooww
33 changed files with 4207 additions and 4374 deletions
|
|
@ -1,109 +1,113 @@
|
|||
{% 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="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="my-4 text-center">
|
||||
<img src="{{ QrCode }}" alt="Code QR">
|
||||
<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="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>
|
||||
<div class="my-4 text-center">
|
||||
<img src="{{ QrCode }}" alt="Code QR" />
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
<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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue