Hi, I wanted to separate login and signup pages from custom login page. Currently the page looks something like this.
Hello,
To separate the login and signup screens, you could use Javascript to switch between the screens. Please have a look at this example template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</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">
<style>body,html{height:100%;background-color:#f9f9f9}.login-container{position:relative;height:100%}.login-box{position:absolute;top:50%;transform:translateY(-50%);padding:15px;background-color:#fff;box-shadow:0 5px 5px #ccc;border-radius:5px;border-top:1px solid #e9e9e9}.login-header{text-align:center}.login-header img{width:75px}#login-error-message,#signup-error-message{display:none;white-space:break-spaces}#signup-box{display:none}</style>
</head>
<body>
<div id="login-box" class="login-container">
<div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
<div class="login-header">
<img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg" />
<h3>Welcome</h3>
<h5>PLEASE LOG IN</h5>
</div>
<div id="login-error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<div class="form-group">
<label for="name">Email</label>
<input type="email" class="form-control" id="login-email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" class="form-control" id="login-password" placeholder="Enter your password">
</div>
<div class="captcha-container form-group"></div>
<button type="submit" id="btn-login" class="btn btn-primary btn-block">
Log In
</button>
<button type="submit" id="btn-login-switch" class="btn btn-default btn-block">
Sign Up
</button>
</form>
</div>
</div>
<div id="signup-box" class="login-container">
<div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
<div class="login-header">
<img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg" />
<h3>Welcome</h3>
<h5>PLEASE SIGN UP</h5>
</div>
<div id="signup-error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<div class="form-group">
<label for="name">Email</label>
<input type="email" class="form-control" id="signup-email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" class="form-control" id="signup-password" placeholder="Enter your password">
</div>
<div class="captcha-container form-group"></div>
<button type="button" id="btn-signup" class="btn btn-primary btn-block">
Sign Up
</button>
<button type="submit" id="btn-signup-switch" class="btn btn-default btn-block">
Log In
</button>
</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.18/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 leeway = config.internalOptions.leeway;
if (leeway) {
var convertedLeeway = parseInt(leeway);
if (!isNaN(convertedLeeway)) {
config.internalOptions.leeway = convertedLeeway;
}
}
var params = Object.assign({
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.authorizationServer.issuer
},
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: 'code'
}, config.internalOptions);
var webAuth = new auth0.WebAuth(params);
var databaseConnection = 'Username-Password-Authentication';
var captcha = webAuth.renderCaptcha(
document.querySelector('.captcha-container')
);
function login(e) {
e.preventDefault();
var button = this;
var username = document.getElementById('login-email').value;
var password = document.getElementById('login-password').value;
button.disabled = true;
webAuth.login({
realm: databaseConnection,
username: username,
password: password,
captcha: captcha.getValue()
}, function (err) {
if (err) displayLoginError(err);
button.disabled = false;
});
}
function signup() {
var button = this;
var email = document.getElementById('signup-email').value;
var password = document.getElementById('signup-password').value;
button.disabled = true;
webAuth.redirect.signupAndLogin({
connection: databaseConnection,
email: email,
password: password,
captcha: captcha.getValue()
}, function (err) {
if (err) displaySignupError(err);
button.disabled = false;
});
}
function displayLoginError(err) {
captcha.reload();
var errorMessage = document.getElementById('login-error-message');
errorMessage.innerHTML = err.policy || err.description;
errorMessage.style.display = 'block';
}
function displaySignupError(err) {
captcha.reload();
var errorMessage = document.getElementById('signup-error-message');
errorMessage.innerHTML = err.policy || err.description;
errorMessage.style.display = 'block';
}
function switchScreenSignup() {
document.getElementById('signup-box').style.display = "block";
document.getElementById('login-box').style.display = "none";
}
function switchScreenLogin() {
document.getElementById('signup-box').style.display = "none";
document.getElementById('login-box').style.display = "block";
}
document.getElementById('btn-login').addEventListener('click', login);
document.getElementById('btn-login-switch').addEventListener('click', switchScreenSignup);
document.getElementById('btn-signup').addEventListener('click', signup);
document.getElementById('btn-signup-switch').addEventListener('click', switchScreenLogin);
});
</script>
</body>
</html>
Thanks for the help @art.stupels, this is exactly what I needed. Thanks for the full working code too. Just want to ask one more question, can I add another a confirm password input field. Any docs of that would be helpful.
