@okta-dfuhriman/okta-auth-js
Version:
The Okta Auth SDK
93 lines (83 loc) • 2.74 kB
HTML
<html>
<head>
<!-- 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 class="web-app landing">
<div id="root">
<strong>Server-side Login Form</strong>
<div id="form">
<form method="POST" action="/login">
<label for="username">Username:</label><input name="username" id="username" placeholder="username" type="email"/><br/>
<label for="password">Password:</label><input name="password" id="password" placeholder="password" type="password"/><br/>
<label for="issuer">Issuer:</label><input name="issuer" id="issuer" placeholder="issuer" type="text"/><br/>
<label for="clientId">Client ID (web app):</label><input name="clientId" id="clientId" placeholder="clientId" type="text"/><br/>
<label for="clientSecret">Client Secret (should be stored server-side):</label><input name="clientSecret" id="clientSecret" placeholder="clientSecret" type="text"/><br/>
<input id="submitBtn" type="submit"/>
</form>
</div>
<div id="results">
<div class="box">
<strong>Status</strong><br/>
<div id="status"></div>
</div>
<div class="box">
<strong>Session Token</strong><br/>
<div id="sessionToken" style="color: green"></div>
</div>
<div class="box">
<strong>Error</strong><br/>
<div id="error" style="color: red"></div>
</div>
</div>
</div>
<!-- client-side script -->
<script src="/client.js" type="text/javascript"></script>
<a href="/">Home</a>
</body>
</html>