1
0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2024-11-24 02:37:05 +00:00
mailinabox/management/templates/2fa.html
2015-01-31 20:57:09 +00:00

80 lines
2.6 KiB
HTML

<style>
</style>
<h2>Two-Factor Authentication</h2>
<p>Two-factor authentication (2FA) is <i>something you know</i> and <i>something you have</i>.</p>
<p>Regular password-based logins are one-factor (something you know). 2FA makes an account more secure by guarding against a lost or guessed password, since you also need a special device to access your account. You can turn on 2FA for your account here.</p>
<p>Your authentication method is currently: <strong id="2fa_current"> </strong></p>
<h3>TOTP</h3>
<p>TOTP is a time-based one-time password method of two-factor authentication.</p>
<p>You will need a TOTP-compatible device, such as any Android device with the <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp">FreeOTP Authenticator</a> app. We&rsquo;ll generate a QR code that you import into your device or app. After you generate the QR code, you&rsquo;ll activate 2FA by entering your first activation code provided by your device or app.</p>
<p><button onclick="totp_initialize()">Generate QR Code</button></p>
<div id="totp-form" class="row" style="display: none">
<div class="col-sm-6">
<center>QR Code</center>
<img id="totp_qr_code" src="" class="img-responsive">
</div>
<div class="col-sm-6">
<form class="form" role="form" onsubmit="totp_activate(); return false;">
<div class="form-group">
<label for="inputTOTP" class="control-label">Activation Code</label>
<p><input class="form-control" id="inputTOTP" placeholder="enter 6-digit code"></p>
<p><input type="submit" class="btn btn-primary" value="Activate"></p>
</div>
</form>
</div>
</div>
<p>When using TOTP 2FA, your password becomes your previous plain password plus a space plus the code generated by your TOTP device.</p>
<script>
function show_2fa() {
$('#2fa_current').text('loading...');
api(
"/me/2fa",
"GET",
{
},
function(response) {
$('#2fa_current').text(response.method);
});
}
var secret = null;
function totp_initialize() {
api(
"/me/2fa/totp/initialize",
"POST",
{
},
function(response) {
$('#totp_qr_code').attr('src', 'data:image/png;base64,' + response.qr);
$('#totp-form').fadeIn();
secret = response.secret;
});
}
function totp_activate() {
api(
"/me/2fa/totp/activate",
"POST",
{
"secret": secret,
"code": $('#inputTOTP').val()
},
function(response) {
show_modal_error("Two-Factor Authentication", $("<pre/>").text(response.message));
if (response.status == "OK")
$('#totp-form').fadeOut();
});
}
</script>