309 lines
12 KiB
HTML
309 lines
12 KiB
HTML
{{define "title"}}Two-Factor Authentication{{end}}
|
|
{{define "content"}}
|
|
<div class="container">
|
|
<section class="hero is-info is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
<i class="fa fa-lock mr-2"></i>
|
|
Two-Factor Authentication
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{ $User := .CurrentUser }}
|
|
|
|
<div class="block p-4">
|
|
<!-- Currently Enabled screen -->
|
|
{{if .TwoFactor.Enabled}}
|
|
<div class="card">
|
|
<div class="card-header has-background-link">
|
|
<p class="card-header-title has-text-light">
|
|
<i class="fa fa-lock mr-2"></i>
|
|
Two-Factor Authentication
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<p>
|
|
Two-Factor status:
|
|
<i class="fa fa-check mr-1 has-text-success-dark"></i>
|
|
<strong class="has-text-success-dark">Enabled!</strong>
|
|
</p>
|
|
|
|
<p>
|
|
When you next log in to your account, you will need your Authenticator App handy to produce
|
|
the time-limited six-digit code to log in.
|
|
</p>
|
|
|
|
<!-- Are they reconfiguring their 2FA app (viewing the barcode)? -->
|
|
{{if .IsPairingSecondDevice}}
|
|
{{template "2fa-setup" .}}
|
|
<hr>
|
|
{{end}}
|
|
|
|
<h4 class="mt-4">Backup Codes</h4>
|
|
|
|
<p>
|
|
In case you lose access to your Authenticator App, please print off or write down these
|
|
<strong>backup codes</strong> which will allow you to re-gain access to your {{PrettyTitle}}
|
|
account. Each of these codes may be used <strong>one time</strong> in response to your
|
|
2FA Authenticator prompt at login.
|
|
</p>
|
|
|
|
<div class="columns is-multiline is-mobile">
|
|
{{range .TwoFactor.GetBackupCodes}}
|
|
<div class="column is-one-third-mobile is-one-quarter-tablet">
|
|
<code>{{.}}</code>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
<p>
|
|
If you would like to <strong>re-generate</strong> these backup codes, click on the button below. This may
|
|
be useful if you have needed to log in using these codes (which are one-time use only) and wish to generate
|
|
a fresh set of backup codes. Note that re-generating new codes will cause the old ones to no longer work!
|
|
</p>
|
|
|
|
<!-- Form to regenerate backup codes. -->
|
|
<form action="{{.Request.URL.Path}}" method="POST">
|
|
{{InputCSRF}}
|
|
<input type="hidden" name="intent" value="regenerate-backup-codes">
|
|
<button type="submit" class="button is-warning"
|
|
onclick="return window.confirm('Are you sure you want to re-generate all of your Backup Codes? This will remove the current set of Backup Codes and replace them with a new set.')">
|
|
<i class="fa fa-rotate mr-2"></i>
|
|
Generate all-new backup codes
|
|
</button>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<h4 class="has-text-danger mt-4">
|
|
<i class="fa fa-exclamation-triangle mr-1"></i>
|
|
Disable Two-Factor Auth
|
|
</h4>
|
|
|
|
<p>
|
|
If you wish to <strong>disable</strong> two-factor authentication for your account, please enter
|
|
your account password for verification and click on the button below.
|
|
</p>
|
|
|
|
<form action="{{.Request.URL.Path}}" method="POST">
|
|
{{InputCSRF}}
|
|
<input type="hidden" name="intent" value="disable">
|
|
|
|
<div class="field">
|
|
<label class="label" for="password">Your account password:</label>
|
|
<input type="password" class="input"
|
|
name="password"
|
|
placeholder="Password"
|
|
required>
|
|
</div>
|
|
|
|
<button type="submit" class="button is-danger">
|
|
Disable Two-Factor Authentication
|
|
</button>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<h4 class="has-text-warning mt-4">
|
|
<i class="fa fa-qrcode mr-1"></i>
|
|
Set Up Another Device
|
|
</h4>
|
|
|
|
<p>
|
|
If you wish to <strong>set up another authenticator device</strong> and view your original
|
|
QR code, you may do so by entering your current account password below. This may be useful
|
|
if you have bought a new phone or want to migrate your authenticator to a different device,
|
|
so that you may access the original QR code and configure the new authenticator.
|
|
</p>
|
|
|
|
<p>
|
|
<strong>Note:</strong> this will not change your 2FA security key or backup codes. If you
|
|
have lost your old authenticator, it will be more secure to <strong>disable and then set up
|
|
2FA from scratch</strong>, which will generate a new secret key and backup codes.
|
|
</p>
|
|
|
|
<form action="{{.Request.URL.Path}}" method="POST">
|
|
{{InputCSRF}}
|
|
<input type="hidden" name="intent" value="resetup">
|
|
|
|
<div class="field">
|
|
<label class="label" for="password">Your account password:</label>
|
|
<input type="password" class="input"
|
|
name="password"
|
|
placeholder="Password"
|
|
required>
|
|
</div>
|
|
|
|
<button type="submit" class="button is-warning">
|
|
View my original 2FA QR code
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}<!-- Currently Enabled -->
|
|
|
|
<!-- Set Up screen -->
|
|
{{if not .TwoFactor.Enabled}}
|
|
<div class="card">
|
|
<div class="card-header has-background-link">
|
|
<p class="card-header-title has-text-light">
|
|
<i class="fa fa-lock mr-2"></i>
|
|
Set Up Two-Factor Authentication
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<p>
|
|
Two-Factor status:
|
|
<i class="fa fa-xmark mr-1 has-text-danger"></i>
|
|
<strong class="has-text-danger">Disabled!</strong>
|
|
</p>
|
|
|
|
<h2>What is Two-Factor Authentication?</h2>
|
|
|
|
<p>
|
|
Two-Factor Authentication (or 2FA) is a security feature that can help to protect
|
|
your account in case somebody finds out your password. When logging in, you can
|
|
use an Authenticator App that will generate temporary one-time use codes to
|
|
log in to your account.
|
|
</p>
|
|
|
|
<p>
|
|
For example: if somebody figured out your username and password for {{PrettyTitle}},
|
|
they would be able to log in as you with that information. With 2FA you can add
|
|
a second factor to your login: the two factors are "something you know" (your password)
|
|
and "something you have" (your Authenticator App that produces six-digit codes).
|
|
This way, if somebody learns what your password is, they still can't log in to
|
|
your account unless they also have your Authenticator App.
|
|
</p>
|
|
|
|
<p>
|
|
After you set up 2FA, from the next time you log in to {{PrettyTitle}} with your
|
|
password, you will also be prompted to enter the six-digit code from your Authenticator
|
|
App. In case you lost access to your Authenticator, you will be able to use a
|
|
"Backup Code" to log in -- you will be able to see your Backup Codes after
|
|
setting up your Authenticator App.
|
|
</p>
|
|
|
|
{{template "2fa-setup" .}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}<!-- Setup -->
|
|
|
|
</div>
|
|
{{end}}
|
|
{{define "2fa-setup"}}
|
|
<h2>Set up your Authenticator App</h2>
|
|
|
|
<p>
|
|
To set up Two-Factor Auth, you'll need to download and install a compatible
|
|
Authenticator App on your device. Some suggestions for apps that are compatible
|
|
with {{PrettyTitle}} are as follows:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<strong>Google Authenticator:</strong>
|
|
for <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank">
|
|
<i class="fab fa-android"></i> Android
|
|
</a> or <a href="https://apps.apple.com/us/app/google-authenticator/id388497605" target="_blank">
|
|
<i class="fab fa-apple"></i> iOS
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<strong>
|
|
<a href="https://authy.com/download/" target="_blank">Authy:</a>
|
|
</strong>
|
|
available for <i class="fab fa-android"></i> Android and <i class="fab fa-apple"></i> iOS
|
|
as well as Windows, macOS and Linux computers.
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Add {{PrettyTitle}} to your Authenticator App</h3>
|
|
|
|
<p>
|
|
When you have your Authenticator App ready, click on its "Add a new site" button and scan
|
|
the following QR code to enroll your device for {{PrettyTitle}}:
|
|
</p>
|
|
|
|
{{ToHTML .QRCode}}
|
|
|
|
<p>
|
|
Alternatively (if you can't scan the QR code), you may copy and paste this secret text
|
|
in to your Authenticator app:
|
|
</p>
|
|
|
|
<div class="columns is-mobile">
|
|
<div class="column is-half-tablet pr-1">
|
|
<input type="text" class="input"
|
|
id="totp-secret"
|
|
value="{{.Key.Secret}}"
|
|
readonly
|
|
onclick="copySecret()">
|
|
</div>
|
|
<div class="column is-narrow pl-0">
|
|
<button type="button"
|
|
class="button is-success"
|
|
id="copy-button"
|
|
onclick="copySecret()">
|
|
<i class="fa fa-copy mr-1"></i> Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Test your Authenticator App</h3>
|
|
|
|
<p>
|
|
After scanning the QR code (or copying the secret key) into your Authenticator app, you
|
|
should be able to generate temporary six-digit authentication codes.
|
|
</p>
|
|
|
|
<p>
|
|
Test that you have enrolled your authenticator correctly by entering the current six-digit
|
|
code below:
|
|
</p>
|
|
|
|
<form action="{{.Request.URL.Path}}" method="POST">
|
|
{{InputCSRF}}
|
|
<input type="hidden" name="intent" value="setup-verify">
|
|
<div class="field">
|
|
<label class="label" for="code">
|
|
Authentication Code:
|
|
</label>
|
|
<input type="text" class="input is-one-quarter"
|
|
name="code" id="code"
|
|
pattern="^[0-9]{6}$"
|
|
maxlength="6"
|
|
placeholder="000000"
|
|
style="max-width: 12em"
|
|
autocomplete="off">
|
|
</div>
|
|
|
|
<button type="submit" class="button is-primary">Confirm & Continue</button>
|
|
</form>
|
|
{{end}}
|
|
{{define "scripts"}}
|
|
<script>
|
|
function copySecret() {
|
|
const secret = document.querySelector("#totp-secret")
|
|
copyButton = document.querySelector("#copy-button");
|
|
secret.select();
|
|
navigator.clipboard.writeText(secret.value);
|
|
copyButton.innerHTML = `<i class="fa fa-check mr-1"></i> Copied!`;
|
|
setTimeout(() => {
|
|
copyButton.innerHTML = `<i class="fa fa-copy mr-1"></i> Copy`;
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
{{end}}
|