external/mailinabox
1
0
Fork 0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2026-03-04 15:54:48 +01:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'fspoettel/admin-panel-2fa' into totp

Browse Source 
# Conflicts:
#	management/auth.py
#	management/daemon.py
#	setup/mail-users.sh
#	setup/management.sh
#	setup/migrate.py
This commit is contained in:
downtownallday
2020-09-10 15:23:27 -04:00
parent b10f82152a 2ea97f0643
commit 24ae913d68
13 changed files with 718 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
management/templates/index.html
View File

@@ -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,6 +132,10 @@
{% include "custom-dns.html" %}
</div>
<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>
@@ -292,7 +297,7 @@ function ajax_with_indicator(options) {
}
var api_credentials = ["", ""];
function api(url, method, data, callback, callback_error) {
function api(url, method, data, callback, callback_error, headers) {
// from http://www.webtoolkit.info/javascript-base64.html
function base64encode(input) {
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
@@ -330,7 +335,7 @@ function api(url, method, data, callback, callback_error) {
method: method,
cache: false,
data: data,
headers: headers,
// the custom DNS api sends raw POST/PUT bodies --- prevent URL-encoding
processData: typeof data != "string",
mimeType: typeof data == "string" ? "text/plain; charset=ascii" : null,

76
management/templates/login.html
View File

@@ -1,4 +1,29 @@
<h1 style="margin: 1em; text-align: center">{{hostname}}</h1>
<style>
.title {
margin: 1em;
text-align: center;
}
.subtitle {
margin: 2em;
text-align: center;
}
.login {
margin: 0 auto;
max-width: 32em;
}
.login #loginOtp {
display: none;
}
#loginForm.is-twofactor #loginOtp {
display: block
}
</style>
<h1 class="title">{{hostname}}</h1>
{% if no_users_exist or no_admins_exist %}
<div class="row">
@@ -20,10 +45,10 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
</div>
{% endif %}
<p style="margin: 2em; text-align: center;">Log in here for your Mail-in-a-Box control panel.</p>
<p class="subtitle">Log in here for your Mail-in-a-Box control panel.</p>
<div style="margin: 0 auto; max-width: 32em;">
<form class="form-horizontal" role="form" onsubmit="do_login(); return false;" method="get">
<div class="login">
<form id="loginForm" class="form-horizontal" role="form" onsubmit="do_login(); return false;" method="get">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
@@ -45,6 +70,12 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
</div>
</div>
</div>
<div class="form-group" id="loginOtp">
<div class="col-sm-offset-3 col-sm-9">
<label for="loginOtpInput" class="control-label">Two-Factor Code</label>
<input type="text" class="form-control" id="loginOtpInput" placeholder="6-digit code">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Sign in</button>
@@ -53,15 +84,15 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
</form>
</div>
<script>
function do_login() {
if ($('#loginEmail').val() == "") {
show_modal_error("Login Failed", "Enter your email address.", function() {
$('#loginEmail').focus();
$('#loginEmail').focus();
});
return false;
}
if ($('#loginPassword').val() == "") {
show_modal_error("Login Failed", "Enter your email password.", function() {
$('#loginPassword').focus();
@@ -75,17 +106,24 @@ function do_login() {
api(
"/me",
"GET",
{ },
function(response){
{},
function(response) {
// This API call always succeeds. It returns a JSON object indicating
// whether the request was authenticated or not.
if (response.status != "ok") {
// Show why the login failed.
show_modal_error("Login Failed", response.reason)
// Reset any saved credentials.
do_logout();
if (response.status != 'ok') {
if (response.status === 'missing_token' && !$('#loginForm').hasClass('is-twofactor')) {
$('#loginForm').addClass('is-twofactor');
setTimeout(() => {
$('#loginOtpInput').focus();
});
} else {
$('#loginForm').removeClass('is-twofactor');
// Show why the login failed.
show_modal_error("Login Failed", response.reason)
// Reset any saved credentials.
do_logout();
}
} else if (!("api_key" in response)) {
// Login succeeded but user might not be authorized!
show_modal_error("Login Failed", "You are not an administrator on this system.")
@@ -102,6 +140,8 @@ function do_login() {
// Try to wipe the username/password information.
$('#loginEmail').val('');
$('#loginPassword').val('');
$('#loginOtpInput').val('');
$('#loginForm').removeClass('is-twofactor');
// Remember the credentials.
if (typeof localStorage != 'undefined' && typeof sessionStorage != 'undefined') {
@@ -119,7 +159,11 @@ function do_login() {
// which confuses the loading indicator.
setTimeout(function() { show_panel(!switch_back_to_panel || switch_back_to_panel == "login" ? 'system_status' : switch_back_to_panel) }, 300);
}
})
},
undefined,
{
'x-auth-token': $('#loginOtpInput').val()
});
}
function do_logout() {
@@ -132,6 +176,8 @@ function do_logout() {
}
function show_login() {
$('#loginForm').removeClass('is-twofactor');
$('#loginOtpInput').val('');
$('#loginEmail,#loginPassword').each(function() {
var input = $(this);
if (!$.trim(input.val())) {

220
management/templates/two-factor-auth.html Normal file
View File

@@ -0,0 +1,220 @@
<style>
.twofactor #totp-setup,
.twofactor #disable-2fa,
.twofactor #output-2fa {
display: none;
}
.twofactor.loaded .loading-indicator {
display: none;
}
.twofactor.disabled #disable-2fa,
.twofactor.enabled #totp-setup {
display: none;
}
.twofactor.disabled #totp-setup,
.twofactor.enabled #disable-2fa {
display: block;
}
.twofactor #totp-setup-qr 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="totp-setup">
<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="totp-setup-qr"></div>
</div>
<div class="form-group">
<label for="otp">2. Enter the code displayed in the Authenticator app</label>
<input type="text" id="totp-setup-token" class="form-control" placeholder="6-digit code" />
</div>
<input type="hidden" id="totp-setup-secret" />
<div class="form-group">
<button id="totp-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'),
totpSetupForm: document.getElementById('totp-setup'),
totpSetupToken: document.getElementById('totp-setup-token'),
totpSetupSecret: document.getElementById('totp-setup-secret'),
totpQr: document.getElementById('totp-setup-qr'),
totpSetupSubmit: document.querySelector('#totp-setup-submit'),
wrapper: document.querySelector('.twofactor')
}
function update_setup_disabled(evt) {
var val = evt.target.value.trim();
if (
typeof val !== 'string' ||
typeof el.totpSetupSecret.value !== 'string' ||
val.length !== 6 ||
el.totpSetupSecret.value.length !== 32 ||
!(/^\+?\d+$/.test(val))
) {
el.totpSetupSubmit.setAttribute('disabled', '');
} else {
el.totpSetupSubmit.removeAttribute('disabled');
}
}
function render_totp_setup(res) {
function render_qr_code(encoded) {
var img = document.createElement('img');
img.src = encoded;
var code = document.createElement('div');
code.innerHTML = `Secret: ${res.totp_secret}`;
el.totpQr.appendChild(img);
el.totpQr.appendChild(code);
}
el.totpSetupToken.addEventListener('input', update_setup_disabled);
el.totpSetupForm.addEventListener('submit', do_enable_totp);
el.totpSetupSecret.setAttribute('value', res.totp_secret);
render_qr_code(res.totp_qr);
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.totpSetupForm.reset();
el.totpSetupForm.removeEventListener('submit', do_enable_totp);
el.totpSetupSecret.setAttribute('value', '');
el.totpSetupToken.removeEventListener('input', update_setup_disabled);
el.totpSetupSubmit.setAttribute('disabled', '');
el.totpQr.innerHTML = '';
}
function show_two_factor_auth() {
reset_view();
api(
'/mfa/status',
'GET',
{},
function(res) {
el.wrapper.classList.add('loaded');
var isTotpEnabled = res.type === 'totp'
return isTotpEnabled ? render_disable(res) : render_totp_setup(res);
}
);
}
function do_disable(evt) {
evt.preventDefault();
hide_error();
api(
'/mfa/totp/disable',
'POST',
{},
function() { show_two_factor_auth(); }
);
return false;
}
function do_enable_totp(evt) {
evt.preventDefault();
hide_error();
api(
'/mfa/totp/enable',
'POST',
{
token: $(el.totpSetupToken).val(),
secret: $(el.totpSetupSecret).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>