{% 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&amp;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 &amp; 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 %}