Change the way to enable 2FA

And add a step to validate a generated code from the OTP app
This commit is contained in:
Jeremy Benoist
2019-01-18 22:46:44 +01:00
parent 4c0e747940
commit a0c5eb003f
20 changed files with 620 additions and 293 deletions

View File

@ -168,48 +168,41 @@
</div>
</fieldset>
{{ form_widget(form.user.save) }}
{% if twofactor_auth %}
<h5>{{ 'config.otp.page_title'|trans }}</h5>
<div class="row">
{{ 'config.form_user.two_factor_description'|trans }}
</div>
<fieldset class="w500p inline">
<div class="row">
{{ form_label(form.user.emailTwoFactor) }}
{{ form_errors(form.user.emailTwoFactor) }}
{{ form_widget(form.user.emailTwoFactor) }}
</div>
<br/>
<div class="row">
{{ form_label(form.user.googleTwoFactor) }}
{{ form_widget(form.user.googleTwoFactor) }}
{{ form_errors(form.user.googleTwoFactor) }}
</div>
{% for OtpQrCode in app.session.flashbag.get('OtpQrCode') %}
<div class="row">
{{ '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 %}
</fieldset>
<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>
{% endif %}
{{ form_widget(form.user._token) }}
{{ form_widget(form.user.save) }}
</form>
{% if enabled_users > 1 %}

View File

@ -0,0 +1,55 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{{ 'config.page_title'|trans }} > {{ 'config.otp.page_title'|trans }}{% endblock %}
{% block content %}
<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>
{% endblock %}

View File

@ -196,45 +196,40 @@
</div>
</div>
{% if twofactor_auth %}
<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>
</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'}}) }}
{% if twofactor_auth %}
<br/>
<br/>
<div class="row">
<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>
{% endif %}
{{ form_widget(form.user._token) }}
</form>
</div>

View File

@ -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 %}