PLP Web UI design - Sign Up functionality

[tusharpandit18]

• Adding custom sign up functionality to the web application
• Form elements may include and are not restricted to Fullname, Email, Password, School/Organization, Gender, DateOfBirth, ContactNo, AlternateNo, ProfilePhoto, etc.
• Adding validations to the above fields
• Providing user-friendly navigations between the signUp and signIn forms
• Making the form responsive, so that it is properly rendered on all browsers

[tusharpandit18]

Until Feb 1:

• Designed the sign up form
• Implemented page navigations between Sign In and Sign Up pages

[tusharpandit18]

Feb 2:

• Researched on implementing Facebook login functionality
• Created an account on developers.facebook.com
• Trying to fetch other user details as well (their DateOfBirth, CurrentOrganization, Profile Picture, etc), so that the users will not have to manually fill it in the system

[tusharpandit18]

• Implemented basic validations for sign up functionality.
• Incorporated bootstrap modals to display the error messages To do:
• Implement advanced validations like checking Password/Confirm password, Password length, email validation and so on

[tusharpandit18]

• Created Document for PLP UI specifications (PLPTool6/Docs/PLP_UISpecifications.docx)
• Worked on finalizing signup UI components Note: The document is preliminary, will be modifying it as I progress.

[tusharpandit18]

• Revised sign up with gmail functionality
• Fetched Email, FullName and Profile Picture from Gmail login API
• Stored those fields in session variables
• Displayed profile picture
• Segregated javascript and css for index, signup and homepage files

[tobielf]

The specification document looks good to me, and yes it requires more refinement. You need to add a design document once you're finished your specification document.

In your design document, you can put the interaction flow chart, UI prototype, exception handling, etc. Use some UI prototyping tools like mockplus; you can find a lot of tools online. Then you need to show your UI design to the client(Dr. Sohoni). The client agreed on the UI design, you put everything into the document and implement it.

The advantage of using the prototyping tool is you don't need to write the code and it's drag and change tool just like Photoshop makes the change of UI very easy. You can produce hundreds of versions of the UI design and let the client choose

[tusharpandit18]

Implemented login with Yahoo functionality.

• Created a new yahoo account (will share credentials with the team soon)
• Created developers account and a new App
• Used Oauth for authenticating users
• Response contains name, profile image, etc. Issue: Not able to pull email address in the response. Looking into how to resolve this. To-Do : Create mockups of the Sign up form (As discussed with Dr. Sohoni, will review the existing UI with the team on Monday and incorporate any changes)