227 lines
11 KiB
Twig
227 lines
11 KiB
Twig
{% extends 'admin/layout.html.twig' %}
|
|
|
|
{% import _self as macros %}
|
|
|
|
{% block title %}Mon compte - {{ parent() }}{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="row">
|
|
<h1 class="h2 p-4 mr-auto">Mon compte</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<form action="{{ path('admin_account_password') }}" method="post">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active">
|
|
<div class="tab-form">
|
|
<h4>Changer mon mot de passe</h4>
|
|
|
|
<hr>
|
|
|
|
<div class="alert alert-info">
|
|
L'indicateur doit afficher 5 traits verts pour que
|
|
le mot de passe soit accepté.<br>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="form-password">Mot de passe actuel</label>
|
|
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-key"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<input autocomplete="current-password" type="password" name="password" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="form-password">Nouveau mot de passe</label>
|
|
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-key"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<input autocomplete="new-password" type="password" name="password1" class="form-control" id="form-password-new" required>
|
|
</div>
|
|
|
|
<div class="form-text text-muted">
|
|
<small> L'indicateur doit afficher 5 traits verts pour que
|
|
le mot de passe soit accepté.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row password-strenth" id="form-password-strength">
|
|
<div class="col-sm bg-light"></div>
|
|
<div class="col-sm bg-light"></div>
|
|
<div class="col-sm bg-light"></div>
|
|
<div class="col-sm bg-light"></div>
|
|
<div class="col-sm bg-light"></div>
|
|
<div class="col-12 password-strenth-info"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="form-password">Confirmation du mot de passe</label>
|
|
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-key"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<input autocomplete="off" type="password" name="password2" class="form-control" id="form-password-confirmation" required>
|
|
</div>
|
|
|
|
<div class="form-text text-muted">
|
|
<small>Les 2 mots de passe doivent correspondre.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="submit" class="btn btn-primary" disabled id="form-password-submit" value="Mettre à jour">
|
|
</div>
|
|
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token('password') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<form action="{{ path('admin_account_2fa') }}" method="post">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active">
|
|
<div class="tab-form">
|
|
<h4>Double authentification</h4>
|
|
|
|
<hr>
|
|
|
|
<p>
|
|
La double authentification ou vérification en deux étapes
|
|
est une méthode par laquelle un utilisateur peut accéder à un site web
|
|
après avoir présenté deux preuves d'identité distinctes.<br>
|
|
|
|
En activant la double authentification, vous devrez saisir un code généré depuis votre téléphone
|
|
en plus de votre identifiant et votre mot de passe.
|
|
</p>
|
|
|
|
{% if app.request.isMethod('GET') %}
|
|
{% if account.isTotpAuthenticationEnabled %}
|
|
<p class="text-success">
|
|
<strong>Votre compte est sécurisé par une double authentification.</strong>
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<input type="hidden" name="enable" value="0">
|
|
<input type="submit" class="btn btn-primary" value="Désactiver">
|
|
</div>
|
|
{% else %}
|
|
<div class="form-group">
|
|
<input type="hidden" name="enable" value="1">
|
|
<input type="submit" class="btn btn-primary" value="Activer">
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<h4>Étape 1</h4>
|
|
|
|
<p>
|
|
Télécharger votre application TOTP :
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=fr" target="_blank">
|
|
Application pour Android :
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://apps.apple.com/in/app/authy/id494168017" target="_blank">
|
|
Application pour IOS
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4>Étape 2</h4>
|
|
|
|
{% set twoFaQrCodeContent = twoFaQrCodeContent|replace({
|
|
'%40': '@',
|
|
'%3A': ':',
|
|
}) ~ '&algorithm=SHA1&digits=6&period=30' %}
|
|
|
|
<p>
|
|
Scannez ce QRCode pour enregistrer Tinternet & cie :
|
|
|
|
<div id="qrcode"></div>
|
|
</p>
|
|
|
|
<script src="{{ asset('vendor/qrcodejs/qrcode.min.js') }}"></script>
|
|
<script>
|
|
new QRCode(
|
|
document.getElementById("qrcode"),
|
|
"{{ twoFaQrCodeContent|raw }}"
|
|
);
|
|
</script>
|
|
|
|
<h4>Étape 3</h4>
|
|
|
|
<p>
|
|
Générez et saisissez un code d'authentification :
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<label for="form-password">Code de confirmation</label>
|
|
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-key"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
autocomplete="off"
|
|
type="text"
|
|
name="code"
|
|
maxlength="6"
|
|
pattern="[0-9]*"
|
|
inputmode="numeric"
|
|
class="form-control"
|
|
style="max-width: 100px"
|
|
required
|
|
>
|
|
|
|
<input
|
|
type="hidden"
|
|
name="secret"
|
|
value="{{ twoFaKey }}"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
Si vous activez la double authentification, vous ne pourrez pas vous connecter sans votre téléphone.
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="hidden" name="enable" value="1">
|
|
<input type="submit" class="btn btn-primary" value="Envoyer">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token('2fa') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|