Skip to content

Instantly share code, notes, and snippets.

@jkhowland

jkhowland/gist:0f3d35934d932fd1711088033027a303

Created August 12, 2019 22:25
Show Gist options
  • Save jkhowland/0f3d35934d932fd1711088033027a303 to your computer and use it in GitHub Desktop.
Save jkhowland/0f3d35934d932fd1711088033027a303 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign in to Wired In</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body, html {
height: 100%;
background-color: #f9f9f9;
}
.btn-black {
background: black;
color: white;
}
.hr-label {
position: relative;
margin-top: 20px;
margin-bottom: 5px;
text-align: center;
clear: both;
overflow: hidden;
}
.hr-label::before {
right: 0.5em;
margin-left: -50%;
}
.hr-label::after {
left: 0.5em;
margin-right: -50%;
}
.hr-label::before,
.hr-label::after {
content: '';
position: relative;
width: 50%;
background-color: rgba(0,0,0,0.2);
display: inline-block;
height: 1px;
vertical-align: middle;
}
.login-container {
position: relative;
height: 100%;
}
.login-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 15px;
background-color: #fff;
box-shadow: 0px 5px 5px #ccc;
border-radius: 5px;
border-top: 1px solid #e9e9e9;
}
.login-header img {
width: 75px;
}
/* EXAMPLE 8 - Center on mobile*/
@media only screen and (max-width : 768px){
.example-8 .navbar-brand {
padding: 0px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.example-8 .navbar-brand>img {
height: 100%;
width: auto;
padding: 7px 14px;
}
}
.navbar {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
/* EXAMPLE 8 - Center Background */
.example-8 .navbar-brand {
background: url(https://wearewired.in/img/logo.png) center / contain no-repeat;
width: 200px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
#error-message {
display: none;
}
</style>
<body>
<nav class="navbar navbar-static-top example-8">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar8">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-hide" href="#">Wired In
</a>
</div>
<div id="navbar8" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://wearewired.in">Home</a></li>
<li class="active"><a href="https://store.wearewired.in">Store</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="login-container">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 login-box">
<div class="login-header">
<h3 style="float: left;">Sign In</h3><h6 style="float: right; vertical-align: bottom; padding-top: 20px;">or create an account</h6>
</div>
<div id="error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<button
type="button"
id="btn-google"
class="btn btn-primary btn-block">
Log in with Google
</button>
<button
type="button"
id="btn-github"
class="btn btn-black btn-block">
Log in with GitHub
</button>
<div class="form-group">
</div>
</form>
</div>
</div>
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/polyfills/1.0/base64.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/auth0/9.2/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
window.addEventListener('load', function() {
var config = JSON.parse(
decodeURIComponent(escape(window.atob('@@config@@')))
);
var params = Object.assign({
/* additional configuration needed for use of custom domains
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: 'YOUR_CUSTOM_DOMAIN'
}, */
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: 'code'
}, config.internalOptions);
var webAuth = new auth0.WebAuth(params);
var databaseConnection = 'Username-Password-Authentication';
function login(e) {
e.preventDefault();
var username = document.getElementById('email').value;
var password = document.getElementById('password').value;
webAuth.login({
realm: databaseConnection,
username: username,
password: password
}, function(err) {
if (err) {
displayError(err)
} else {
close();
}
});
}
function signup() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
webAuth.redirect.signupAndLogin({
connection: databaseConnection,
email: email,
password: password
}, function(err) {
if (err) {
displayError(err)
} else {
close();
}
});
}
function loginWithGithub() {
webAuth.authorize({
connection: 'github'
}, function(err) {
if (err) {
displayError(err)
} else {
close();
}
});
}
function loginWithGoogle() {
webAuth.authorize({
connection: 'google-oauth2'
}, function(err) {
if (err) {
displayError(err)
} else {
close();
}
});
}
function displayError(err) {
var errorMessage = document.getElementById('error-message');
errorMessage.innerHTML = err.description;
errorMessage.style.display = 'block';
}
document.getElementById('btn-github').addEventListener('click', loginWithGithub);
document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment