You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
3.0 KiB
61 lines
3.0 KiB
extends ../layouts/main
|
|
block content
|
|
|
|
section.uk-section.uk-section-primary.uk-section-xsmall
|
|
.uk-container
|
|
h1 #{site.name} #{otpServiceName} 2FA Setup
|
|
div(class="uk-text-large uk-visible@m") Two-factor authentication is required to access #{site.name} #{otpServiceName}.
|
|
|
|
section.uk-section.uk-section-default.uk-section-xsmall
|
|
.uk-container
|
|
form(method="POST", action="/auth/otp/enable")
|
|
input(type="hidden", name="otp-secret", value= otpTempSecret)
|
|
input(type="hidden", name="otp-service", value= otpServiceName)
|
|
input(type="hidden", name="otp-redirect", value= otpRedirectURL)
|
|
div(uk-grid)
|
|
|
|
div(class="uk-width-1-1 uk-width-auto@s uk-text-center")
|
|
.uk-margin
|
|
canvas(id="otp-qrcode", width="480", height="480")
|
|
.uk-margin
|
|
a(href=otpKeyURI, title="Add to Authenticator App").uk-button.dtp-button-default.uk-border-pill Add to authenticator
|
|
|
|
div(class="uk-width-1-1 uk-width-expand@s uk-text-center uk-text-left@m")
|
|
.uk-margin
|
|
p You can scan this QR code using an authenticator app such as #[a(href="https://freeotp.github.io/") FreeOTP], or select "Add to authenticator" if you are using the device with your authenticator app installed.
|
|
|
|
p Your authenticator will begin displaying #{otpOptions.digits}-digit authentication codes. Enter one below to enable Two-Factor Authentication (2FA) for #{site.name} #{otpServiceName} (as #{user.username}).
|
|
|
|
.uk-text-center
|
|
.uk-margin
|
|
label(for="otp-passcode").uk-form-label Enter passcode:
|
|
br
|
|
input(
|
|
id="otp-passcode",
|
|
name="otp-passcode",
|
|
type="text",
|
|
placeholder="######",
|
|
autocomplete="off",
|
|
).uk-input.uk-form-large.uk-text-center.uk-width-1-2
|
|
|
|
.uk-margin
|
|
button(type="submit").uk-button.dtp-button-primary.uk-border-pill Enable 2FA
|
|
|
|
div(class="uk-width-1-1 uk-text-center uk-text-left@m")
|
|
.uk-margin
|
|
p Or, if your authenticator doesn't support scanning QR codes, you can enter the OTP configuration information shown here to begin displaying codes:
|
|
pre(
|
|
style="display: inline-block; border: solid 1px #888888; padding: 8px;"
|
|
).uk-border.uk-text-left.uk-margin-remove.
|
|
Secret: #{otpTempSecret}
|
|
Algorithm: #{otpOptions.algorithm.toUpperCase()}
|
|
Step/Period: #{otpOptions.step}
|
|
Digits: #{otpOptions.digits}
|
|
|
|
block viewjs
|
|
script.
|
|
window.dtp.keyURI = !{JSON.stringify(otpKeyURI)};
|
|
window.addEventListener('dtp-load', async ( ) => {
|
|
const canvas = document.getElementById('otp-qrcode');
|
|
dtp.app.generateOtpQR(canvas, window.dtp.keyURI);
|
|
});
|