philomena/lib/philomena_web/templates/registration/totp/edit.html.heex

<h1>
  Two Factor Authentication
</h1>
<%= form_for @changeset, ~p"/registrations/totp", [as: :user], fn f -> %>
  <%= if @changeset.action do %>
    <div class="alert alert-danger">
      <p>
        Oops, something went wrong! Please check the errors below.
      </p>
    </div>
  <% end %>
  <%= if @current_user.otp_required_for_login do %>
    <%= if !@changeset.action and get_flash(@conn, :totp_backup_codes) do %>
      <div class="dnp-warning">
        <h4>
          Important - Save The Below Codes
        </h4>
        <p>
          The backup codes shown in the green box below are necessary to
          regain access to your account in the event of you losing access
          to your authenticator app (such as loss, theft, or damage to your
          phone). It is extremely important that you write them down and
          store them in a safe, secure place. If you lose access to you
          authenticator app and do not have one or more of the above codes,
          we will be unable to help you regain access to your account.
        </p>
      </div>
      <br />
      <div class="block block--fixed block--success layout--narrow">
        <h2>
          Two Factor Authentication Enabled
        </h2>
        <p>
          You've successfully enabled two factor authentication on your
          account. From now on you'll be asked for the 6 digit code each
          time you log in.
        </p>
        <p>
          In case you lose your device or uninstall the application, you
          will need one of the following backup codes to access to your
          account:
        </p>
        <ul>
          <%= for code <- get_flash(@conn, :totp_backup_codes) do %>
            <li>
              <%= code %>
            </li>
          <% end %>
        </ul>
        <br />
        <p>
          Make sure to write these down (preferably on paper) and store them
          in a safe location, otherwise you may
          <strong>
            permanently lose access
          </strong>
          to your account.
        </p>
      </div>
    <% end %>
    <p>
      Two factor authentication is currently
      <strong>
        enabled
      </strong>
      for your account.
    </p>
    <h4>
      Enter the generated 6-digit code or one of your backup codes to disable.
    </h4>
    <p>
      Note that the 6-digit codes are limited to a single use within their
      lifespan of 30 seconds, so if you just logged in with a code, entering
      it again here will cause an error. If that's the case, just wait for a
      new code to be generated.
    </p>
    <div class="field">
      <%= text_input(f, :twofactor_token, class: "input", placeholder: "6-digit code") %>
      <%= error_tag(f, :twofactor_token) %>
    </div>
  <% else %>
    <p>
      Two factor authentication is currently
      <strong>
        disabled
      </strong>
      for your account.
    </p>
    <br />
    <div class="block block--fixed block--warning">
      <p>
        Enabling 2FA will make it harder for an attacker to get into your account, but it may also make it harder for
        <strong>
          you
        </strong>
        to get into your account. Make sure you'll have access to your authenticator if you enable it.
      </p>
    </div>
    <h4>
      Download application
    </h4>
    <p>
      You will need an application on your phone that'll generate TOTP codes for you, such as:
      <ul>
        <li>
          Authy (
          <a href="https://play.google.com/store/apps/details?id=com.authy.authy" rel="noreferrer" target="_blank">
            Android
          </a>
          /
          <a href="https://itunes.apple.com/us/app/authy/id494168017" rel="noreferrer" target="_blank">
            iOS
          </a>
          )
        </li>
        <li>
          LastPass Authenticator (
          <a href="https://play.google.com/store/apps/details?id=com.lastpass.authenticator" rel="noreferrer" target="_blank">
            Android
          </a>
          /
          <a href="https://itunes.apple.com/us/app/lastpass-authenticator/id1079110004" rel="noreferrer" target="_blank">
            iOS
          </a>
          /
          <a href="https://www.microsoft.com/en-us/store/apps/lastpass-authenticator/9nblggh5l9d7" rel="noreferrer" target="_blank">
            Windows Mobile
          </a>
          )
        </li>
        <li>
          Microsoft Authenticator (
          <a href="https://play.google.com/store/apps/details?id=com.azure.authenticator" rel="noreferrer" target="_blank">
            Android
          </a>
          /
          <a href="https://itunes.apple.com/us/app/microsoft-authenticator/id983156458" rel="noreferrer" target="_blank">
            iOS
          </a>
          /
          <a href="https://www.microsoft.com/en-us/store/p/microsoft-authenticator/9nblgggzmcj6" rel="noreferrer" target="_blank">
            Windows Mobile
          </a>
          )
        </li>
      </ul>
    </p>
    <h4>
      Pair application
    </h4>
    <p>
      Using the application of your choice, scan the QR code below or enter the following secret key:
      <strong>
        <%= @totp_secret %>
      </strong>
    </p>
    <p>
      <svg height="392" width="392" xmlns="http://www.w3.org/2000/svg">
        <rect fill="#fff" height="392" width="392"></rect>
        <image alt="QR Code" x="32" xlink:href={@totp_qrcode} y="32"></image>
      </svg>
    </p>
    <h4>
      Confirm pairing
    </h4>
    <p>
      Enter the code generated by your authenticator app into the field below for verification.
    </p>
    <%= text_input(f, :twofactor_token, class: "input", placeholder: "6-digit code", autocomplete: "off") %>
    <p>
      Note that the 6-digit codes are limited to a single use within their lifespan of 30 seconds, so if you use a code to enable the feature here, you won't be able to immediately use the same code to log in or to disable the feature. You have to wait for a new code to be generated.
    </p>
    <div class="dnp-warning">
      <h4>
        Warning - Authenticator Backup Codes
      </h4>
      <p>
        Once you enable 2FA on your account, you will be provided with a list of backup codes that can be used to access your account in the event of you losing access to your authenticator app. You will only be provided with these codes once, so please ensure that you have a way to safely and securely record them before enabling 2FA on your account. If you lose access to your authenticator app and do not have your backup codes, you will be locked out of your account permanently, and we will be unable to assist you.
      </p>
    </div>
  <% end %>
  <br />
  <div class="block block--fixed block--warning">
    <div class="field">
      <%= password_input(f, :current_password, class: "input", placeholder: "Current password") %>
      <%= error_tag(f, :current_password) %>
    </div>
    <div class="fieldlabel">
      We need your current password to confirm these changes
    </div>
    <br />
    <%= submit("Save Account", class: "button") %>
  </div>
<% end %>
<p>
  <%= link("Back", to: ~p"/registrations/edit") %>
</p>