Jeff Atwood wrote a great post on creating the simplest login page. Read it!
Let`s use JQueryMobile for the widgests and Parse for the backed.
Insert this html to the JQueryMobile page:
<h3>Login/Register</h3>
<label for="usrnm" class="ui-hidden-accessible">Email:</label>
<input type="text" name="user" id="loginEmail" placeholder="Email">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" data-inline="true" name="passw" id="loginPassword" placeholder="Password">
<input type="submit" data-inline="true" onclick="myForgotPassword();" value="reset pass">
<label id="loginMessage" style="color:red"></label>
<input type="submit" data-inline="true" onclick="myLogin();" value="Log in">
<input type="submit" data-inline="true" onclick="myRegister();" value="Create new account">
Use JQuery to extract user values and fill login message ($("#input_id".val() , or $(#message_id").text("new text")
We will use Parse user.signUp , Parse.User.logIn and Parse.User.requestUserPassword methods for the backend.
function myRegister() {
console.log("myRegister");
$('#loginMessage').text(""); //clean
var email = $('#loginEmail').val();
var password= $('#loginPassword').val();
var user= new Parse.User();
user.set("username",email);
user.set("email" , email);
user.set("password", password);
user.signUp(null, {
success: function(user) {
console.log("register success");
$('#loginMessage').text("success");
},
error: function(user,error) {
console.log("register failed "+ error.code +" " +error.message );
$('#loginMessage').text("failed "+error.message);
}
});
}
function myLogin() {
console.log("myLogin");
$('#loginMessage').text(""); //clean
var email = $('#loginEmail').val();
var password= $('#loginPassword').val();
Parse.User.logIn(email, password, {
success: function(user) {
$('#loginMessage').text("login success");
},
error: function(user,error) {
$('#loginMessage').text("login failed "+error.message);
}
});
}
function myForgotPassword() {
console.log("myLogin");
var email = $('#loginEmail').val();
Parse.User.requestPasswordReset(email , {
success: function() {
$('#loginMessage').text("password reset sent");
},
error: function(error) {
$('#loginMessage').text("failed to reset password "+ error.message);
}
});
}
