Login Manager

After several months of development, a big tech company is on the verge of introducing a login
management system in its groundbreaking upcoming browser. Login Manager will be presented as Proof
of Concept (POC) to stakeholders. This project has been divided into two versions: Login Manager
Version 1 and Login Manager Version 2. At the moment, Version 1 development is mandatory and
Version 2 is optional.

A login has the following fields: Id, Url, Username, and Password.

You have been briefed with the following requirements:

Login Manager Version 1:

• The logins should be saved locally using IndexedDB.
Login Manager Version 2 (optional):
• The logins should be saved in a cloud online storage. This is the provided cloud endpoint:
o http://sandboxserver-001-site1.atempurl.com/SimpleLogin
• Whenever you call an endpoint, your student number should be provided, for example:
http://sandboxserver-001-site1.atempurl.com/SimpleLogin/GetList?studentNumber=YOUR_STUDENT_NUMBER
http://sandboxserver-001-site1.atempurl.com/SimpleLogin/Save?studentNumber=YOUR_STUDENT_NUMBER
http://sandboxserver-001-site1.atempurl.com/SimpleLogin/Delete?studentNumber=YOUR_STUDENT_NUMBER
Common features in both versions:
• The usage of jQuery is mandatory.
• Common CSS rules that will be used in Version 1 and Version 2 should be in
evaluations/final_project/css/login_manager.css.
• The Id field should be auto-incremented and the user should not have access to change it.
• To add a login, the application should open a pop-up window. In this pop-up, the user should
inform the same password twice in two distinct password text boxes as shown in the provided
Layout. Both passwords should match. Use <input type="password" /> to create a password text
box.
• All fields are required. Users cannot add or update logins with any blank field.
• Users should be able to add, update, remove, and list all logins. The application should ask for
confirmation before removing a login.
• The real password values should never be displayed.
• When listing the logins:
o The Url column should display a clickable link to the respective address. When clicked,
open the link in a new tab.
o The Username column should display a <span>
o The Password column should just display a <span> having *** (3 asterisks) regardless of
the number of characters in the password.
• When clicking the edit button :
o The Url column should hide the clickable link and it should display a text box.
o The Username column should hide the <span> and display a text box.
o The Password column should stay the same.
• When clicking the reset password button :
o The Password column should hide the <span> that has *** (3 asterisks) and it should
display two <input type="password" /> elements as shown in the provided Layout.
o Both password fields should be blank.
o The Url and Username columns should stay the same.
• When clicking the save button , all fields must be informed. If you are resetting a password
then both password text boxes should match.
• Whenever a password confirmation does not match you should display “The password does not
match in both fields (password and password repeat)” and abort the process of adding or editing.
• Design the application according to the provided Layout.
Final Project requirements:
• Your job is to design and implement all necessary HTML, CSS,
and JavaScript code under the final_project folder as shown in
the picture on the right.
• WARNING: THIS IS AN INDIVIDUAL EVALUATION AND IT
JUST BE DEVELOPED ONLY BY YOU. ANY ATTEMPT TO
SEND OR RECEIVE CODE FROM A CLASSMATE OR A THIRD
PARTY IS CONSIDERED PLAGIARISM, AND ALL INVOLVED
PARTIES WILL RECEIVE A GRADE OF ZERO
• Adjust the Course Workspace home page (index.html) to include
links pointing to:
o evaluations/final_project/login_manager_v1/index.html
o evaluations/final_project/login_manager_v2/index.html
(only if you are going to implement version 2)

Optional features – research and integrate:

• Email and Url validation.
• Password Strength Checker (examples).
• Password Generator (example).
• Anything you believe that can improve the security.
Layout: