extends layout/layout.pug

block variables
  - page_classname = "secondfactor";

block form-header
  h1 Sign in

block content
  div 
    h3 Hi <b>#{username}</b>
  div(class="row")
    div(class="u2f-token")
      img(src="/img/pendrive.png", alt="security key")
    p 
      | Please, touch your <a href="https://www.yubico.com/products/yubikey-hardware/fido-u2f-security-key/">security key</a><br/>
      b Or<br/>
      | Get a one-time password
    div(class="notification notification-totp")
    form(class="form-signin totp")
      div(class="form-inputs")
        input(type="text" autocomplete="off" class="form-control" id="token" placeholder="Token" required autofocus)
      button(class="btn btn-lg btn-primary btn-block totp-button" type="submit") Sign in
      div(class="pull-right bottom-right-links")
        div Need to register?
        div
          a(href=u2f_identity_start_endpoint, class="link register-u2f", data-toggle="tooltip", title="A security key is required to register.") Security key
          |  | 
          a(href=totp_identity_start_endpoint, class="link register-totp") Google Authenticator
          span(class="clearfix")
  script(src="/js/u2f-api.js", type="text/javascript")