coins-logon-widget
Version:
COINS Logon Widget. Injectable utility to manage browser authorization with COINS
278 lines (271 loc) • 11.7 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>COINS Logon Widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
background: #fcfcfc;
color: #333;
font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 1em;
}
h1 {
font-size: 250%;
font-weight: 300;
line-height: 1;
margin: 0 0 .5em;
}
h2 {
border-bottom: thin solid #666;
font-size: 125%;
font-weight: 400;
line-height: 1.25;
margin: 1.5em 0 1em;
padding: 0 0 .25em;
}
@media (min-width: 600px) {
body {
max-width: 65em;
margin: 0 auto;
padding: 2em;
}
h2 {
margin: 3.5em 0 2.5em;
}
}
/** Example */
.example {
margin: .75em 0 1.5em;
}
.example-horizontal .example-form > * {
max-width: 600px;
}
.example-form {
margin-bottom: 1em;
}
.example-form > * {
max-width: 300px;
}
.example-code pre {
background: #fff;
box-sizing: border-box;
border: thin solid #dadada;
border-radius: 5px;
color: #000;
font-family: Menlo, 'Courier New', monospace;
font-size: 70%;
display: block;
line-height: 1.5;
height: auto;
min-height: 4.5em;
resize: vertical;
padding: .75em;
outline: none;
overflow-x: auto;
width: 100%;
}
.example-code textarea:focus {
box-shadow: 0 0 0 .125em #000;
}
@media (min-width: 600px) {
.example {
margin: 1.5em -2em 3.5em;
}
.example:before,
.example:after {
content: ' ';
display: table;
}
.example:after {
clear: both;
}
.example-form,
.example-code {
box-sizing: border-box;
float: left;
padding: 0 2em;
}
.example-form {
margin-bottom: 0;
width: 55%;
}
.example-code {
width: 45%;
}
.example-code textarea {
font-size: 80%;
min-height: 10em;
padding: 1.5em;
}
}
</style>
<link rel="stylesheet" href="../dist/coins-logon-widget.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../dist/coins-logon-widget.js"></script>
</head>
<body>
<h1>COINS Logon Widget</h1>
<h2>Regular Form</h2>
<div class="example">
<div class="example-form">
<div id="regular-form"></div>
<script>
(function() {
'use strict';
var myWidget = new CoinsLogonWidget({
el: document.getElementById('regular-form'),
baseUrl: 'coins-api-root',
authCookieName: 'coins-cookie-nom-noms',
});
})();
</script>
</div>
<div class="example-code">
<pre>
var myWidget = new CoinsLogonWidget({
el: document.getElementById('regular-form'),
baseUrl: 'coins-api-root',
authCookieName: 'coins-cookie-nom-noms',
})</pre>
</div>
</div><!-- .example -->
<h2>Hidden Labels Form</h2>
<div class="example">
<div class="example-form">
<div id="hidden-labels-form"></div>
<script>
(function() {
'use strict';
var myWidget = new CoinsLogonWidget({
el: document.getElementById('hidden-labels-form'),
hiddenLabels: true,
baseUrl: 'coins-api-root',
authCookieName: 'coins-cookie-nom-noms',
});
})();
</script>
</div>
<div class="example-code">
<pre>
var myWidget = new CoinsLogonWidget({
el: document.getElementById('hidden-labels-form'),
hiddenLabels: true
baseUrl: 'coins-api-root',
authCookieName: 'coins-cookie-nom-noms',
});</pre>
</div>
</div><!-- .example -->
<h2>Horizontal Form</h2>
<div class="example example-horizontal">
<div class="example-form">
<div id="horizontal-form"></div>
<script>
(function() {
'use strict';
var myWidget = new CoinsLogonWidget({
el: document.getElementById('horizontal-form'),
horizontal: true,
baseUrl: 'coins-api-root',
authCookieName: 'coins-cookie-nom-noms',
});
})();
</script>
</div>
<div class="example-code">
<pre>
var myWidget = new CoinsLogonWidget({
el: document.getElementById('horizontal-form'),
horizontal: true,
baseUrl: 'coins-api-root',
authCookieName: 'coins-cookie-nom-noms',
});</pre>
</div>
</div><!-- .example -->
<h2>Form with States</h2>
<div class="example">
<div class="example-form">
<div class="coins-logon-form">
<form method="post" action="/" novalidate class="coins-logon-widget-form">
<div class="coins-logon-widget-notification coins-logon-widget-notification-success" role="alert">
<strong>Hooray!</strong> There was great success.
</div>
<div class="coins-logon-widget-notification coins-logon-widget-notification-error" role="alert">
<strong>Uh-oh.</strong> There was an error.
</div>
<div class="coins-logon-widget-form-group coins-logon-widget-username-wrapper coins-logon-widget-form-group-success">
<label for="coins-logon-widget-username" class="coins-logon-widget-label coins-logon-widget-visuallyhidden">Username:</label>
<input
type="text"
name="uname"
value="hello"
placeholder="Username"
id="coins-logon-widget-username"
class="coins-logon-widget-input coins-logon-widget-username">
<span class="coins-logon-widget-icon" aria-hidden="true"></span>
<span class="coins-logon-widget-input-message">Great username</span>
</div>
<div class="coins-logon-widget-form-group coins-logon-widget-password-wrapper coins-logon-widget-form-group-error">
<label for="coins-logon-widget-password" class="coins-logon-widget-label coins-logon-widget-visuallyhidden">Password</label>
<input
type="password"
name="pwd"
placeholder="Password"
id="coins-logon-widget-password"
class="coins-logon-widget-input coins-logon-widget-password">
<span class="coins-logon-widget-icon" aria-hidden="true"></span>
<span class="coins-logon-widget-input-message">Empty password</span>
</div>
<button type="submit" class="coins-logon-widget-button coins-logon-widget-button-primary coins-logon-widget-right">Log In</button>
</form>
</div>
</div><!-- .example-form -->
</div><!-- .example -->
<div class="example">
<div class="example-form">
<div class="coins-logon-widget">
<form method="post" action="/" novalidate class="coins-logon-widget-form">
<div class="coins-logon-widget-form-group coins-logon-widget-username-wrapper">
<label for="coins-logon-widget-username" class="coins-logon-widget-label">Username:</label>
<input
type="text"
name="uname"
value="hello"
placeholder="Username"
id="coins-logon-widget-username"
class="coins-logon-widget-input coins-logon-widget-username">
</div>
<div class="coins-logon-widget-form-group coins-logon-widget-password-wrapper coins-logon-widget-form-group-error">
<label for="coins-logon-widget-password" class="coins-logon-widget-label">Password</label>
<input
type="password"
name="pwd"
placeholder="Password"
id="coins-logon-widget-password"
class="coins-logon-widget-input coins-logon-widget-password">
<span class="coins-logon-widget-icon" aria-hidden="true"></span>
<span class="coins-logon-widget-input-message">Password required</span>
</div>
<button type="submit" class="coins-logon-widget-button coins-logon-widget-button-primary coins-logon-widget-right">Log In</button>
</form>
</div>
</div><!-- .example-form -->
</div><!-- .example -->
<h2>Status/Log Out</h2>
<div class="login-form">
<div data-coins-logon-widget="">
<form method="post" action="/" novalidate class="coins-logon-widget-form">
<p class="coins-logon-widget-status">Logged in as <strong>Pat Smith</strong></p>
<button type="submit" class="coins-logon-widget-button coins-logon-widget-button-secondary">Log Out</button>
</form>
</div>
</div><!-- .login-form -->
</body>
</html>