mirror of
https://github.com/mail-in-a-box/mailinabox.git
synced 2026-03-04 15:54:48 +01:00
add user interface for managing 2fa
* update user schema with 2fa columns
This commit is contained in:
Felix Spöttel
@@ -93,6 +93,7 @@
|
||||
<li class="dropdown-header">Advanced Pages</li>
|
||||
<li><a href="#custom_dns" onclick="return show_panel(this);">Custom DNS</a></li>
|
||||
<li><a href="#external_dns" onclick="return show_panel(this);">External DNS</a></li>
|
||||
<li><a href="#two_factor_auth" onclick="return show_panel(this);">Two Factor Authentication</a></li>
|
||||
<li><a href="/admin/munin" target="_blank">Munin Monitoring</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -131,7 +132,11 @@
|
||||
{% include "custom-dns.html" %}
|
||||
</div>
|
||||
|
||||
<div id="panel_login" class="admin_panel">
|
||||
<div id="panel_two_factor_auth" class="admin_panel">
|
||||
{% include "two-factor-auth.html" %}
|
||||
</div>
|
||||
|
||||
<div id="panel_login" class="admin_panel">
|
||||
{% include "login.html" %}
|
||||
</div>
|
||||
|
||||
|
||||
220
management/templates/two-factor-auth.html
Normal file
220
management/templates/two-factor-auth.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<style>
|
||||
.twofactor #setup-2fa,
|
||||
.twofactor #disable-2fa,
|
||||
.twofactor #output-2fa {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.twofactor.loaded .loading-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.twofactor.disabled #disable-2fa,
|
||||
.twofactor.enabled #setup-2fa {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.twofactor.disabled #setup-2fa,
|
||||
.twofactor.enabled #disable-2fa {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.twofactor #qr-2fa img {
|
||||
display: block;
|
||||
width: 256px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.twofactor #output-2fa.visible {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>Two Factor Authentication</h2>
|
||||
|
||||
<div class="twofactor">
|
||||
<div class="loading-indicator">Loading...</div>
|
||||
|
||||
<form id="setup-2fa">
|
||||
<div class="form-group">
|
||||
<h3>Setup</h3>
|
||||
<p>After enabling two factor authentication, any login to the admin panel will require you to enter a time-limited 6-digit number from an authenticator app after entering your normal credentials.</p>
|
||||
<p>1. Scan the QR code or enter the secret into an authenticator app (e.g. Google Authenticator)</p>
|
||||
<div id="qr-2fa"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="otp">2. Enter the code displayed in the Authenticator app</label>
|
||||
<input type="text" id="setup-otp" class="form-control" placeholder="6-digit code" />
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="setup-secret" />
|
||||
|
||||
<div class="form-group">
|
||||
<button id="setup-submit" disabled type="submit" class="btn">Enable two factor authentication</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="disable-2fa">
|
||||
<div class="form-group">
|
||||
<p>Two factor authentication is active.</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-danger">Disable two factor authentication</button>
|
||||
</form>
|
||||
|
||||
<div id="output-2fa" class="panel panel-danger">
|
||||
<div class="panel-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var el = {
|
||||
disableForm: document.getElementById('disable-2fa'),
|
||||
output: document.getElementById('output-2fa'),
|
||||
setupForm: document.getElementById('setup-2fa'),
|
||||
setupInputOtp: document.getElementById('setup-otp'),
|
||||
setupInputSecret: document.getElementById('setup-secret'),
|
||||
setupQr: document.getElementById('qr-2fa'),
|
||||
setupSubmit: document.querySelector('#setup-2fa button[type="submit"]'),
|
||||
wrapper: document.querySelector('.twofactor')
|
||||
}
|
||||
|
||||
function update_setup_disabled(evt) {
|
||||
var val = evt.target.value.trim();
|
||||
|
||||
if (
|
||||
typeof val !== 'string' ||
|
||||
typeof el.setupInputSecret.value !== 'string' ||
|
||||
val.length !== 6 ||
|
||||
el.setupInputSecret.value.length !== 32 ||
|
||||
!(/^\+?\d+$/.test(val))
|
||||
) {
|
||||
el.setupSubmit.setAttribute('disabled', '');
|
||||
} else {
|
||||
el.setupSubmit.removeAttribute('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function render_setup(res) {
|
||||
function render_qr_code(encoded) {
|
||||
var img = document.createElement('img');
|
||||
img.src = encoded;
|
||||
|
||||
var code = document.createElement('div');
|
||||
code.innerHTML = `Secret: ${res.secret}`;
|
||||
|
||||
el.setupQr.appendChild(img);
|
||||
el.setupQr.appendChild(code);
|
||||
}
|
||||
|
||||
el.setupInputOtp.addEventListener('input', update_setup_disabled);
|
||||
el.setupForm.addEventListener('submit', do_setup);
|
||||
|
||||
el.setupInputSecret.setAttribute('value', res.secret);
|
||||
|
||||
render_qr_code(res.qr_code);
|
||||
el.wrapper.classList.add('disabled');
|
||||
}
|
||||
|
||||
function render_disable() {
|
||||
el.disableForm.addEventListener('submit', do_disable);
|
||||
el.wrapper.classList.add('enabled');
|
||||
}
|
||||
|
||||
function hide_error() {
|
||||
el.output.querySelector('.panel-body').innerHTML = '';
|
||||
el.output.classList.remove('visible');
|
||||
}
|
||||
|
||||
function render_error(msg) {
|
||||
el.output.querySelector('.panel-body').innerHTML = msg;
|
||||
el.output.classList.add('visible');
|
||||
}
|
||||
|
||||
function reset_view() {
|
||||
el.wrapper.classList.remove('loaded', 'disabled', 'enabled');
|
||||
|
||||
el.disableForm.removeEventListener('submit', do_disable);
|
||||
|
||||
hide_error();
|
||||
|
||||
el.setupForm.reset();
|
||||
el.setupForm.removeEventListener('submit', do_setup);
|
||||
|
||||
el.setupInputSecret.setAttribute('value', '');
|
||||
el.setupInputOtp.removeEventListener('input', update_setup_disabled);
|
||||
|
||||
el.setupSubmit.setAttribute('disabled', '');
|
||||
el.setupQr.innerHTML = '';
|
||||
}
|
||||
|
||||
function show_two_factor_auth() {
|
||||
reset_view();
|
||||
|
||||
api(
|
||||
'/two-factor-auth/status',
|
||||
'GET',
|
||||
{},
|
||||
function(res) {
|
||||
el.wrapper.classList.add('loaded');
|
||||
var isEnabled = res.status === 'on'
|
||||
return isEnabled ? render_disable(res) : render_setup(res);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function do_disable(evt) {
|
||||
evt.preventDefault();
|
||||
hide_error();
|
||||
|
||||
api(
|
||||
'/two-factor-auth/disable',
|
||||
'POST',
|
||||
{},
|
||||
function() { show_two_factor_auth(); }
|
||||
);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function do_setup(evt) {
|
||||
evt.preventDefault();
|
||||
hide_error();
|
||||
|
||||
api(
|
||||
'/two-factor-auth/setup',
|
||||
'POST',
|
||||
{
|
||||
token: $(el.setupInputOtp).val(),
|
||||
secret: $(el.setupInputSecret).val()
|
||||
},
|
||||
function(res) { show_two_factor_auth(); },
|
||||
function(res) {
|
||||
var errorMessage = 'Something went wrong.';
|
||||
var parsed;
|
||||
|
||||
try {
|
||||
parsed = JSON.parse(res);
|
||||
} catch (err) {
|
||||
return render_error(errorMessage);
|
||||
}
|
||||
|
||||
var error = parsed && parsed.error
|
||||
? parsed.error
|
||||
: null;
|
||||
|
||||
if (error === 'token_mismatch') {
|
||||
errorMessage = 'Code does not match.';
|
||||
} else if (error === 'bad_input') {
|
||||
errorMessage = 'Received request with malformed data.';
|
||||
}
|
||||
|
||||
render_error(errorMessage);
|
||||
}
|
||||
);
|
||||
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user