jtdavis247 / codepen-loginsignup-clone

The start of the Codepen Login/Signup clone project

codepen-loginsignup-clone

The start of the Codepen Login/Signup clone project

###Notes: This is obviously a fake server, and no data will persist. What this means is that if you 'signup' a user, they won't be there if you leave the page and come back or do a refresh.

For more practice on the use of objects, take a look at the server.js file and examine how the response objects are being built/used.

#Objectives

##1. Set up forms correctly In order for our sign up/sign in forms to work, you'll need to first hide the form that's not currently being used. Use the Sign up/Login links at the top of the container to determine which form to show. (Only one form should be showing at a time).

##2. Implement the login functionality The codepen server (fake) has two API methods, detailed in the comments at the top of script.js. The codepen.api.login needs to be implemented for the login form.

Details:

• When the user clicks "Login", your code should submit a user object to the codepen.api.login method.
• The method will return a response (see the comments as to how it will look). Handle the response appropriately, by either showing a success or failure message of your choosing.
• If the response is a failure, you should show the user the error so they know what went wrong

##3. Implement the signup functionality You need to create a way for users to signup to the service as well. Use the codepen.api.signup method to do this.

#Part Deux

##4. Make your user class into a reusable object for your entire application. There are many uses for the user object you created, including relating user objects to one another, looking at another user's profile, friending a user, etc.

Make your user into a application-wide reusable object by doing the following:

• Create a new namespace for your user object (ex. codepen.objects.User)
• Build your user object in that namespace codepen.objects.User = { (... code here ...) }
• When the user signs up or logs in, create a new instance of your user object with Object.create, then send it to the same API calls as before.

##5. Add a is_logged_in property to your user object that returns whether or not the user has logged in

##6. Extend the user class.

Pretend that your user object is now being used across the entire website. But you have a new requirement for signups. You need to deprecate (not use anymore) out the name field and use two new fields: firstname and lastname. You don't want to break the code that already exists (or mess up other people on your team's code), so you'll leave your current user object alone. But you're going to extend that object so that you can still use it to your benefit.

Details:

• Create a new object in the codepen namespace (ex. codepen.objects.NewUser)
• Use Object.create so that this object inherits all of the properties from User, but also adds the firstname/lastname properties
• Remove the "name" field from the signup form and replace it with two fields, firstname and lastname
• Send instances of the NewUser object to the signup API method

##6. (Black Diamond) Migrate server validation methods to the client side.

Having the server do all of the validation work is great, but it's not the best for the user experience. It would be nice if the fields could be validated before the request is sent to the server.

Ideally, each field could be validated after it loses focus.

Details:

• Take a look at the signup method in server.js. Couldn't we do all this before we send the data to the server?
• Refactor the validation code out of the server's signup method and into a new validate method on your User object.
• Have the validate method accept a parameter, the field that is to be validated. Have the method return a boolean for if the field is valid, false if it isn't.
• Every time a user clicks on a new field, validate the field they were just on (research blur and focus events in jQuery to learn more about this)
• If the field is invalid, tell the user.
• If you want to go even further, have the validate method return a validation object with two properties: valid: true/false and error: (string) so you can display an error-specific message for each validation error on each field.