Week 14: Lab #28
Cookie Login
DUE: Tuesday, 4/25 @ 5pm
You will be creating a page that has two different behaviors depending on the state of a cookie being set. When the user visits the page without the cookie being set, it will behave as a login page. When the user visits the page after the cookie has been set, it will behave as a welcome page.
The
login version of the page must contain:
- A text input field for "username".
- A password input field for "password".
- A submit button.
- A blue background (any shade).
When the user enters their information and hits the submit button, a JavaScript event should be triggered which:
- Saves the username to a cookie called "username".
- Checks to see if the password is correct (this should just be a hardcoded string in your JavaScript).
- If the password is correct, set a cookie called "login" to "true".
- If the password is incorrect, set a cookie called "login" to "false".
- The page refreshes.
The
welcome version of the page must contain:
- If the "login" cookie is "true":
- A green background (any shade).
- A positive message welcoming them to the site.
- A logout button, that when pressed will:
- Clear the cookies for the site.
- Refresh the page returning the user to its login state.
- If the "login" cookie is false:
- Redisplay the login page.
- This time with an error message at the top saying access denied.
- Have a red background (any shade).
Upload your completed lab by the due date specified above and make sure that you add a working link to it on your class page, otherwise it will not be reviewed and you will not receive credit.