{% extends '@Core/admin/layout.html.twig' %}

{% import _self as macros %}

{% block title %}{{ 'My account'|trans }} - {{ parent() }}{% endblock %}

{% block body %}
    <div class="bg-light pl-5 pr-4 pt-5 pb-5">
        <div class="crud-header">
            <h1 class="crud-header-title">{{ 'My account'|trans }}</h1>
        </div>
    </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>{{ 'New password'|trans }}</h4>

                            <hr>

                            <div class="alert alert-info">
                                {{ "The indicator must display 5 green lines for the password to be accepted."|trans }}
                                <br>
                            </div>

                            <div class="form-group">
                                <label for="form-password">{{ 'Current password'|trans }}</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">{{ 'New password'|trans }}</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>
                                        {{ 'The indicator must display 5 green lines for the password to be accepted.'|trans }}
                                    </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">
                                    {{ 'Password confirmation'|trans }}
                                </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>{{ 'Passwords must match.'|trans }}</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 authentication'|trans }}</h4>

                            <hr>

                            <p>
                                {% trans %}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.{% endtrans %}
                            </p>

                            {% if app.request.isMethod('GET') %}
                                {% if account.isTotpAuthenticationEnabled %}
                                    <p class="text-success">
                                        <strong>{{ 'Your account is secured by double authentication.'|trans }}</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>{{ 'Step %number%'|trans({'%number%': 1}) }}</h4>

                                <p>
                                    {{ 'Download your TOTP application:'|trans }}
                                </p>

                                <ul>
                                    <li>
                                        <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&amp;hl=fr" target="_blank">
                                            {{ 'Android app'|trans }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://apps.apple.com/in/app/authy/id494168017" target="_blank">
                                            {{ 'IOS app'|trans }}
                                        </a>
                                    </li>
                                </ul>

                                <h4>{{ 'Step %number%'|trans({'%number%': 2}) }}</h4>

                                {% set twoFaQrCodeContent = twoFaQrCodeContent|replace({
                                    '%40': '@',
                                    '%3A': ':',
                                }) ~ '&algorithm=SHA1&digits=6&period=30' %}

                                <p>
                                    {{ 'Scan this QRCode to register %siteName%:'|trans({"%siteName%": site_name}) }}

                                    <div id="qrcode"></div>
                                </p>

                                <script src="{{ asset('vendor/qrcodejs/qrcode.min.js') }}"></script>
                                <script>
                                    new QRCode(
                                        document.getElementById("qrcode"),
                                        "{{ twoFaQrCodeContent|raw }}"
                                    );
                                </script>

                                <h4>{{ 'Step %number%'|trans({'%number%': 3}) }}</h4>

                                <p>
                                    {% trans %}Generate and enter an authentication code:{% endtrans %}
                                </p>

                                <div class="form-group">
                                    <label for="form-password">
                                        {{ 'Confirmation code'|trans }}
                                    </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">
                                    {% trans %}If you enable two-factor authentication, you will not be able to log in without your phone.{% endtrans %}
                                </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 %}