From a0c5eb003f1cbeef10d5620e98870c7556e17c75 Mon Sep 17 00:00:00 2001
From: Jeremy Benoist <jeremy.benoist@gmail.com>
Date: Fri, 18 Jan 2019 22:46:44 +0100
Subject: Change the way to enable 2FA

And add a step to validate a generated code from the OTP app
---
 .../views/themes/material/Config/index.html.twig   | 65 ++++++++++------------
 .../views/themes/material/Config/otp_app.html.twig | 63 +++++++++++++++++++++
 2 files changed, 93 insertions(+), 35 deletions(-)
 create mode 100644 src/Wallabag/CoreBundle/Resources/views/themes/material/Config/otp_app.html.twig

(limited to 'src/Wallabag/CoreBundle/Resources/views/themes/material/Config')

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig
index 5b00eb7b..412c18f4 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig
@@ -196,45 +196,40 @@
                                 </div>
                             </div>
 
+                            {{ form_widget(form.user.save, {'attr': {'class': 'btn waves-effect waves-light'}}) }}
+
                             {% if twofactor_auth %}
+                                <br/>
+                                <br/>
                                 <div class="row">
-                                    {{ 'config.form_user.two_factor_description'|trans }}
-
-                                    <div class="input-field col s11">
-                                        {{ form_widget(form.user.emailTwoFactor) }}
-                                        {{ form_label(form.user.emailTwoFactor) }}
-                                        {{ form_errors(form.user.emailTwoFactor) }}
-                                    </div>
-                                    <div class="input-field col s11">
-                                        {{ form_widget(form.user.googleTwoFactor) }}
-                                        {{ form_label(form.user.googleTwoFactor) }}
-                                        {{ form_errors(form.user.googleTwoFactor) }}
-                                    </div>
+                                    <h5>{{ 'config.otp.page_title'|trans }}</h5>
+
+                                    <p>{{ 'config.form_user.two_factor_description'|trans }}</p>
+
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th>{{ 'config.form_user.two_factor.table_method'|trans }}</th>
+                                                <th>{{ 'config.form_user.two_factor.table_state'|trans }}</th>
+                                                <th>{{ 'config.form_user.two_factor.table_action'|trans }}</th>
+                                            </tr>
+                                        </thead>
+
+                                        <tbody>
+                                            <tr>
+                                                <td>{{ 'config.form_user.two_factor.emailTwoFactor_label'|trans }}</td>
+                                                <td>{% if app.user.isEmailTwoFactor %}<b>{{ 'config.form_user.two_factor.state_enabled'|trans }}</b>{% else %}{{ 'config.form_user.two_factor.state_disabled'|trans }}{% endif %}</td>
+                                                <td><a href="{{ path('config_otp_email') }}" class="waves-effect waves-light btn{% if app.user.isEmailTwoFactor %} disabled{% endif %}">{{ 'config.form_user.two_factor.action_email'|trans }}</a></td>
+                                            </tr>
+                                            <tr>
+                                                <td>{{ 'config.form_user.two_factor.googleTwoFactor_label'|trans }}</td>
+                                                <td>{% if app.user.isGoogleTwoFactor %}<b>{{ 'config.form_user.two_factor.state_enabled'|trans }}</b>{% else %}{{ 'config.form_user.two_factor.state_disabled'|trans }}{% endif %}</td>
+                                                <td><a href="{{ path('config_otp_app') }}" class="waves-effect waves-light btn{% if app.user.isGoogleTwoFactor %} disabled{% endif %}">{{ 'config.form_user.two_factor.action_app'|trans }}</a></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
                                 </div>
-
-                                {% for OtpQrCode in app.session.flashbag.get('OtpQrCode') %}
-                                    <div class="card-panel yellow darken-1 black-text">
-                                        {{ 'config.form_user.two_factor_code_description_1'|trans }}
-                                        <br/>
-                                        {{ 'config.form_user.two_factor_code_description_2'|trans }}
-                                        <br/><br/>
-                                        <img id="2faQrcode" class="hide-on-med-and-down" />
-                                        <script>
-                                            document.getElementById('2faQrcode').src = jrQrcode.getQrBase64('{{ OtpQrCode }}');
-                                        </script>
-                                        <br/><br/>
-                                        {{ 'config.form_user.two_factor_code_description_3'|trans }}
-                                        <br/><br/>
-                                        <strong>{{ app.user.getGoogleAuthenticatorSecret }}</strong>
-                                        <br/><br/>
-                                        {{ 'config.form_user.two_factor_code_description_4'|trans }}
-                                        <br/><br/>
-                                        <strong>{{ app.user.getBackupCodes|join("\n")|nl2br }}</strong>
-                                    </div>
-                                {% endfor %}
                             {% endif %}
-
-                            {{ form_widget(form.user.save, {'attr': {'class': 'btn waves-effect waves-light'}}) }}
                             {{ form_widget(form.user._token) }}
                         </form>
                     </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/otp_app.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/otp_app.html.twig
new file mode 100644
index 00000000..6aef355e
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Config/otp_app.html.twig
@@ -0,0 +1,63 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{{ 'config.page_title'|trans }} > {{ 'config.otp.page_title'|trans }}{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col s12">
+            <div class="card-panel settings">
+                <div class="row">
+                    <h5>{{ 'config.otp.page_title'|trans }}</h5>
+
+                    <ol>
+                        <li>
+                            <p>{{ 'config.otp.app.two_factor_code_description_1'|trans }}</p>
+                            <p>{{ 'config.otp.app.two_factor_code_description_2'|trans }}</p>
+
+                            <p>
+                                <img id="2faQrcode" class="hide-on-med-and-down" />
+                                <script>
+                                    document.getElementById('2faQrcode').src = jrQrcode.getQrBase64('{{ qr_code }}');
+                                </script>
+                            </p>
+                        </li>
+                        <li>
+                            <p>{{ 'config.otp.app.two_factor_code_description_3'|trans }}</p>
+
+                            <p><strong>{{ app.user.getBackupCodes|join("\n")|nl2br }}</strong></p>
+                        </li>
+                        <li>
+                            <p>{{ 'config.otp.app.two_factor_code_description_4'|trans }}</p>
+
+                            {% for flashMessage in app.session.flashbag.get("two_factor") %}
+                            <div class="card-panel red darken-1 black-text">
+                                {{ flashMessage|trans }}
+                            </div>
+                            {% endfor %}
+
+                            <form class="form" action="{{ path("config_otp_app_check") }}" method="post">
+                                <div class="card-content">
+                                    <div class="row">
+                                        <div class="input-field col s12">
+                                            <label for="_auth_code">{{ "scheb_two_factor.auth_code"|trans }}</label>
+                                            <input id="_auth_code" type="text" autocomplete="off" name="_auth_code" />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-action">
+                                    <a href="{{ path('config_otp_app_cancel') }}" class="waves-effect waves-light grey btn">
+                                        {{ 'config.otp.app.cancel'|trans }}
+                                    </a>
+                                    <button class="btn waves-effect waves-light" type="submit" name="send">
+                                        {{ 'config.otp.app.enable'|trans }}
+                                        <i class="material-icons right">send</i>
+                                    </button>
+                                </div>
+                            </form>
+                        </li>
+                    </ol>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
-- 
cgit v1.2.3