Skip to content

Instantly share code, notes, and snippets.

@yangli-io
Created November 18, 2015 09:42
Show Gist options
  • Select an option

  • Save yangli-io/0f69bde353d9bae49b34 to your computer and use it in GitHub Desktop.

Select an option

Save yangli-io/0f69bde353d9bae49b34 to your computer and use it in GitHub Desktop.
Login page
$('#register').submit(function(event){
event.preventDefault();
var data = {
username: $('#username').val(),
password: $('#password').val(),
email: $('#email').val()
}
$.post('https://fewd20.herokuapp.com/register', data, function(data){
$('#login').show();
$('#register').hide();
}).fail(function(data){
$('#register .error').show();
});
})
$('#login').submit(function(event){
event.preventDefault();
var data = {
username: $('#username-login').val(),
password: $('#password-login').val()
}
$.post('https://fewd20.herokuapp.com/login', data, function(data){
$('#details').show();
$('#login').hide();
$('#username-details').text(data.username);
$('#email-details').text(data.email);
}).fail(function(data){
$('#login .error').show();
});
})
$('#open-reigster').click(function(){
$('#register').show();
$('#login').hide();
});
<!doctype html>
<html>
<head>
<link href="./style.css" rel="stylesheet"/>
</head>
<body>
<form id="register">
<p>Register form</p>
<input id="username" />
<br/>
<input id="password" type="password" />
<br/>
<input id="email" />
</br>
<button>Submit</button>
<p class="error">Error</p>
</form>
<form id="login">
<p>Login form</p>
<input id="username-login" />
<br/>
<input id="password-login" type="password" />
<br/>
<button>Submit</button><button type="button" id="open-reigster">Register</button>
<p class="error">Error</p>
</form>
<div id="details">
<p>You have successfully logged in</p>
<p>Welcome <span id="username-details"></span></p>
<p>Your email is <span id="email-details"></span></p>
</div>
<script src="../../static/jQuery.js"></script>
<script src="app.js"></script>
</body>
</html>
.success{
color: green;
display: none;
}
.error{
color: red;
display: none;
}
#register {
display: none;
}
#details {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment