website/web/templates/account/two_factor_setup.html
2024-08-22 22:53:37 -07:00

309 lines
12 KiB
HTML

{{define "title"}}Two-Factor Authentication{{end}}
{{define "content"}}
<div class="container">
<section class="hero is-link 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 &amp; 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}}