@okta-dfuhriman/okta-auth-js/samples/templates/partials/spa/mfa.html

The Okta Auth SDK

<div id="mfa" style="display:none" class="panel pure-form-stacked">
  <div class="header">
    <!-- title is set dynamically -->
  </div>

  <div id="mfa-enroll" style="display: none">

    <div id="mfa-enroll-factors" style="display:none">
      <!-- factors are dynamically inserted here -->
    </div>

    <div id="mfa-enroll-question" style="display: none">
      <label for="questions">Choose a question:</label>
      <select name="questions">
        <!-- questions are dynamically inserted here -->
      </select>
      <label for="answer">Answer:</label>
      <input name="answer" type="text" class="pure-u-1-1" autocomplete="off"/>
    </div>

    <div id="mfa-enroll-phone" style="display: none">
      <label for="phone">Enter your phone number:<label>
      <input name="phone" type="text" class="pure-u-1-1" />
      <p>Include the country code, like: <b>+1-555-415-1337</b></p>
    </div>

  </div>
  
  {{#if authn}}
  <div id="mfa-enroll-activate" style="display: none">
    <div id="mfa-enroll-activate-okta-verify" style="display: none">
      <label for="qrcode">Open the Okta Verify app and scan this QR code</label>
      <div name="qrcode" class="qrcode panel">
        <!-- image is appended dynamically-->
      </div>
      <label for="passcode">Enter the code from the app:</label>
      <input name="passcode" type="text" autocomplete="off"/>
    </div>
    <div id="mfa-enroll-activate-phone" style="display: none">
      <label for="passcode">Enter the code:</label>
      <input name="passcode" type="text" autocomplete="off"/>
    </div>
  </div>
  {{/if}}

  {{#if authn}}
  <div id="mfa-required" style="display:none">
    <div id="mfa-required-factors" style="display: none">
      <!-- factors are dynamically inserted here -->
    </div>
  </div>
  {{/if}}
  
  <div id="mfa-challenge" style="display:none">
    <div id="mfa-challenge-okta-verify" style="display: none">
      <label for="passcode">Enter the code from the Okta Verify app:</label>
      <input name="passcode" type="text" autocomplete="off"/>
    </div>

    <div id="mfa-challenge-phone" style="display: none">
      <label for="passcode">Enter the code:</label>
      <input name="passcode" type="text" autocomplete="off"/>
    </div>

    <div id="mfa-challenge-question" style="display: none">
      <p><b class="question"><!-- questionText is set dynamically --></b></p>
      <label for="answer">Answer:</label><br/>
      <input name="answer" type="text" autocomplete="off" /><br/>
    </div>

    <div id="mfa-challenge-email" style="display: none">
      <label for="passcode">Enter the code:</label>
      <input name="passcode" type="text" autocomplete="off"/>
    </div>

  </div>

  <div id="authenticator-verification-data" style="display: none">
    <div id="authenticator-verification-data-phone" style="display: none">
      <label for="methodType">Select a method type:</label>
      <select name="methodType">
        <!-- methodTypes are dynamically inserted here -->
      </select>
    </div>
  </div>

  <div id="new-password-form" style="display: none">
    <label for="new-password">Enter new password:</label>
    <input id="new-password" name="new-password" type="password">
  </div>

  <div class="footer pure-controls">
    <a id="mfa-prev" href="/" onclick="_prevMfa(event)" class="pure-button">Go Back</a>
    <a id="mfa-cancel" href="/" onclick="_cancelMfa(event)" class="pure-button">Cancel</a>
    <a id="mfa-submit" href="/" style="display: none" onclick="_submitMfa(event)" class="pure-button pure-button-primary">Submit</a>
  </div>
</div>