Signup and login using Parse Javascript

Question

I am trying to create a sign up and log in with Parse using JavaScript, but is having issues achieving it. Essentially a user would login using his email address (not username) and password, and at the same time has other information recorded (such as first name, last name, password, date of birth, etc).

This is what I have written in the body of the html code

    <form class="login-form" id="registration">
      <h2>Log In</h2>
      <div class="error" style="display:none"></div>
      <input type="text" id="email" placeholder="Email" />
      <input type="password" id="password" placeholder="Password" />
      <button>Log In</button>
    </form>

    <form class="signup-form" id="registration">
      <h2>New?</h2>
      <div class="error" style="display:none"></div>
      <input type="text" id="fname" placeholder="First name" />
            <input type="text" id="lname" placeholder="Last name" />
                  <input type="email" id="email" placeholder="Email address" />
                        <input type="password" id="password" placeholder="Password" />
                  <input type="text" id="date" placeholder="Date of Birth" />

      <button>Sign Up</button>
    </form>

Below is what I have written in the js function document:

$(function() {

  Parse.$ = jQuery;

  // Initialize Parse with your Parse application javascript keys
Parse.initialize("ID",
                   "ID");

$(document).ready(function(){
$(document).on("submit", "#registration", function(e) {
    e.preventDefault();
  var email = document.getElementById('email').value;     
  var password = document.getElementById('password').value;
  var fname = document.getElementById('fname').value;
  var lname = document.getElementById('lname').value;
  var date = document.getElementById('date').value;


  var user = new Parse.User();
  user.set("email", email);
  user.set("password", password);
  user.set("first_name", fname);
  user.set("last_name", lname);
  user.set("date", date);


  user.signUp(null, {
  success: function(user) {
    // Hooray! Let them use the app now.
  },
  error: function(user, error) {
    // Show the error message somewhere and let the user try again.
    alert("Error: " + error.code + " " + error.message);
  }


Parse.User.logIn(email,  password {
  success: function(user) {
    // Do stuff after successful login.
  },
  error: function(user, error) {
    // The login failed. Check error to see why.
  }
});
});
});
   };
});
});

My issue is as follow:

1) I am not sure how I would relate the function to the html form code (so that it can record the information that user enters in the text field and recorded it to parse upon submit)

2) I am not sure if the code is properly written

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan E

Jonathan E

Signup and login using Parse Javascript