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);
    });