@okta-dfuhriman/okta-auth-js
Version:
The Okta Auth SDK
344 lines (315 loc) • 15.3 kB
HTML
<html>
<head>
<!-- signin widget CSS, served locally from node_modules -->
<link rel="stylesheet" href="/css/okta-sign-in.min.css">
<!-- app styles -->
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* margin can cause issues in e2e tests, when the elements move slightly */
/*body, hr, pre {
margin: 0;
}
div {
padding: 4px;
}
input {
margin-bottom: 10px;
}
input[type=text] {
width: 600px;
}
input[type=submit] {
background: #007dc1;
color: white;
}*/
#nav {
background: #eee;
}
#error {
color: red;
}
#mfa-required {
padding: 20px;
}
.header {
font-weight: bold;
border-bottom: 1px #ccc solid;
}
.footer {
line-height: 40px;
}
.panel {
border: 1px #ccc solid;
padding: 10px;
margin: 10px;
}
.scroll-container {
overflow: scroll;
}
</style>
</head>
<body>
<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">
<form id="form" class="pure-form pure-form-aligned" target="/" method="GET" onsubmit="_onSubmitForm(event)" onformdata="_onFormData(event)">
<div class="pure-control-group">
<label for="issuer">Issuer</label>
<input id="issuer" name="issuer" type="text" class="pure-input-1-2" />
</div>
<div class="pure-control-group">
<label for="clientId">Client ID (SPA App)</label>
<input id="clientId" name="clientId" type="text" class="pure-input-1-2" />
</div>
<div class="pure-control-group">
<label for="scopes">Scopes</label>
<input id="scopes" name="scopes" type="text" class="pure-input-1-2" />
</div>
<div class="pure-control-group">
<label for="authMethod">Authentication Method</label>
<select id="authMethod" name="authMethod" onchange="_onChangeAuthMethod(event)">
<option value="redirect">Redirect to Okta</option>
<option value="widget">Okta Sign-in Widget</option>
<option value="form">Custom forms</option>
<!-- Other login flows can be added -->
</select>
</div>
<div class="pure-control-group field-useDynamicForm">
<label for="useDynamicForm">Use dynamic sign-in form (interaction code flow only)</label>
<input id="useDynamicForm-on" name="useDynamicForm" type="radio" value="true"/> YES
<input id="useDynamicForm-off" name="useDynamicForm" type="radio" value="false"/> NO
</div>
<div class="pure-control-group field-idps">
<label for="idps">IDPs (in format "type:id" space-separated, example: "Facebook:111aaa Google:222bbb")</label>
<input id="idps" name="idps" type="text" />
</div>
<div class="pure-control-group">
<label for="requireUserSession">Require Okta SSO session</label>
<input id="requireUserSession-on" name="requireUserSession" type="radio" value="true"/> ON
<input id="requireUserSession-off" name="requireUserSession" type="radio" value="false"/> OFF
</div>
<div class="pure-control-group">
<label for="storage">Token storage</label>
<select id="storage" name="storage">
<option value="localStorage">localStorage</option>
<option value="sessionStorage">sessionStorage</option>
<option value="cookie">cookie</option>
<option value="memory">memory</option>
</select>
</div>
<div class="pure-control-group">
<label for="startService">Start service for active auto-renew & cross-tab storage sync</label>
<input id="startService-on" name="startService" type="radio" value="true"/> YES
<input id="startService-off" name="startService" type="radio" value="false"/> NO
</div>
<div class="pure-control-group">
<label for="useInteractionCodeFlow">Use Okta Identity Engine (interaction code flow)</label>
<input id="useInteractionCodeFlow-on" name="useInteractionCodeFlow" type="radio" value="true"/> YES
<input id="useInteractionCodeFlow-off" name="useInteractionCodeFlow" type="radio" value="false"/> NO
</div>
<div class="pure-controls">
<input id="login-submit" type="submit" value="Update Config" class="pure-button pure-button-primary"/>
<a href="/" onclick="_returnHome(event)" class="pure-button">Cancel</a>
</div>
</form>
</div>
<!-- authMethod: redirect -->
<div id="authMethod-redirect" style="display: none">
<a id="login-redirect" href="#" onclick="_loginRedirect(event)">Click to login.</a>
</div>
<!-- authMethod: widget -->
<div id="authMethod-widget" class="panel" style="display: none">
<div class="header">Sign-in Widget</div>
<div id="signin-widget"></div>
</div>
<!-- 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>
<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>
<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>
<div id="mfa-required" style="display:none">
<div id="mfa-required-factors" style="display: none">
<!-- factors are dynamically inserted here -->
</div>
</div>
<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>
<!-- 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>
<!-- main app webpack bundle -->
<script src="/app-bundle.js" type="text/javascript"></script>
</body>
</html>