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

The Okta Auth SDK

<div id="nav" class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <!-- the href will be changed to config.appUri -->
      <a id="home-link" href="/" class="pure-menu-link">Return Home</a>
    </li>
    <li class="pure-menu-item">
      <!-- if the URL does not contain valid params a form will be shown -->
      <a id="options-link" href="/" class="pure-menu-link">Edit Config</a>
    </li>
  </ul>
</div>
<div id="content" class="pure-g">

  <div class="pure-u-2-3">
    <div id="error" class="panel" style="display: none"></div>
    <!-- config is loaded from URL query parameters. This form sets params in the URL using the GET method-->
    <div id="config-form" style="display: none" class="panel">
      {{> spa/form.html }}
    </div>
    <!-- authMethod: redirect -->
    <div id="authMethod-redirect" style="display: none">
      <a id="login-redirect" href="#" onclick="_loginRedirect(event)">Click to login.</a>
    </div>
    {{#if signinWidget}}
    <!-- authMethod: widget -->
    <div id="authMethod-widget" class="panel" style="display: none">
      <div class="header">Sign-in Widget</div>
      <div id="signin-widget"></div>
    </div>
    {{/if}}
    {{#if signinForm}}
    <!-- authMethod: form -->
    <!-- static signin form (authn and oie)-->
    <div id="static-signin-form" style="display: none" class="panel pure-form pure-form-aligned">
      <div class="pure-control-group">
        <label for="username">Username</label>
        <input name="username" type="email" autocomplete="username">
      </div>
      <div class="pure-control-group">
        <label for="password">Password</label>
        <input name="password" type="password" autocomplete="password">
      </div>
      <div class="pure-controls">
        <p><a href="/" data-se="recover-password" onclick="_showRecoverPassword(event)">Forgot your password?</a></p>
        <a class="pure-button pure-button-primary" href="/" data-se="submit" onclick="_submitStaticSigninForm(event)">Signin</a>
      </div>
    </div>
    <!-- dynamic signin form (oie only)-->
    <div id="dynamic-signin-form" style="display: none" class="panel pure-form pure-form-aligned">
      <div class="pure-control-group field-username">
        <label for="username">Username</label>
        <input name="username" type="email" autocomplete="username">
      </div>
      <div class="pure-control-group field-password">
        <label for="password">Password</label>
        <input name="password" type="password" autocomplete="password">
      </div>
      <div class="pure-controls">
        <p><a class="link-recover-password" href="/" data-se="recover-password" onclick="_showRecoverPassword(event)">Forgot your password?</a></p>
        <a class="link-signin pure-button pure-button-primary" href="/" data-se="submit" onclick="_submitDynamicSigninForm(event)">Signin</a>
      </div>
    </div>
    <div id="recover-password-form" style="display: none" class="panel pure-form pure-form-aligned">
      <div class="pure-control-group">
        <label for="recover-username">Enter username:</label>
        <input id="recover-username" name="recover-username" type="email">
      </div>
      <div class="pure-controls">
        <a href="/" id="submit-recover-password-form" onclick="_submitRecoverPasswordForm(event)" class="pure-button pure-button-primary">Submit</a>
      </div>
      <p><a href="/" onclick="_showSigninForm(event)">Back to sign-in</a></p>
    </div>
    <div id="recovery-challenge" style="display: none" class="panel">
      <p>An email has been sent to your account with instructions on how to reset your password.</p>
      <p><a href="/" onclick="_showSigninForm(event)">Back to sign-in</a></p>
    </div>
    {{#if mfa}}
    {{> spa/mfa.html }}
    {{/if}}
    {{/if}}
    <!-- authenticated -->
    <div id="auth" style="display: none" class="panel">
      <div class="header">Welcome back</div>
      <div class="pure-menu">
        <a id="logout-redirect" class="pure-menu-link" href=#" onclick="_logout(event)">Logout</a>
        <a id="renew-token" class="pure-menu-link" href="#" onclick="_renewToken(event)">Renew Access Token</a>
        <!-- tests for a valid Okta SSO session -->
        <a id="profile-button" class="pure-menu-link" href="/" onclick="_getUserInfo(event)">Get user info</a>
      </div>
      <div class="panel">
        <div class="header">User Info</div>
        <div id="userInfo"></div>
      </div>
      <div class="panel">
        <div class="header">Access Token</div>
        <div class="scroll-container">
          <div id="accessToken"></div>
        </div>
      </div>
    </div>
    <!-- loading -->
    <div id="loading" style="display: none">
      Loading...
    </div>
  </div>

  <div class="pure-u-1-3">
    <div class="panels">
    <div id="config-section" class="panel">
      <div class="header">Config</div>
      <div class="scroll-container">
        <pre><code id="config"></code></pre>
      </div>
    </div>
    <div id="authState-section" class="panel">
      <div class="header">Auth state</div>
      <div class="scroll-container">
        <pre><code id="authState"></code></pre>
      </div>
    </div>
    <div id="appState-section" class="panel">
      <div class="header">App state</div>
      <div class="scroll-container">
        <pre><code id="appState"></code></pre>
      </div>
    </div>
  </div>
  </div>
</div>