jkhowland/gist:0f3d35934d932fd1711088033027a303

## 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>
	<!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>