You created a registration feature for management but the data is not stored anywhere. For this assignment store the user registration information in web storage. The best approach would be to create a User object to store the data and use the email address as the key and the user object as the value. Create a login button on the homepage and take the user to a login page. Prompt them for their username and password and compare it to the username and password stored for them in web storage. If it matches, display an alert that says "Logged In" If it does not match, display a message on the page that the username or password does not match and try again. At the bottom of the login form, add a reset password link. Take the user to a reset password page that prompts them for their username and password and changes the password in web storage.

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

You created a registration feature for management but the data is not stored anywhere. For this assignment store the user registration information in web storage. The best approach would be to create a User object to store the data and use the email address as the key and the user object as the value.

Create a login button on the homepage and take the user to a login page. Prompt them for their username and password and compare it to the username and password stored for them in web storage. If it matches, display an alert that says "Logged In" If it does not match, display a message on the page that the username or password does not match and try again.

At the bottom of the login form, add a reset password link. Take the user to a reset password page that prompts them for their username and password and changes the password in web storage.

Existing Code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titan Sports Store</title>

<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
Titan Sports Store
</header>
<div class="banner">
<div class="previous">&lt;</div>
<div class="next">&gt;</div>
</div>
<main class="content">The Titans Sports Store serves as the forefront store to get merch to rep your favorite school. St. Peterburg College
and their sports teams have a wide variety of merch to choose from and show your support with.</main>
<footer>Titan Sports and Apparel LLC Copyright &copy; 2021 &nbsp; <a href="subscribe.html">Subscribe to our newsletter</a> &nbsp; <a href="register.html">Register here</a></footer>

<script src="./js/app.js"></script>
</body>
</html>

Register.js

function validateData() {

var outputTable = "<table>";
var validInformation = true;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if (document.getElementById('email').value.match(mailformat)) {
outputTable += "<tr><td>EMAIL </td><td>" + document.getElementById('email').value + "</td></tr>";

} else {
outputTable += "<tr><td>EMAIL </td><td>Invalid email</td></tr>";
validInformation = false;
}

var regx = /^[6-9]\d{9}$/;
if (regx.test(document.getElementById("phone").value)) {
outputTable += "<tr><td>phonenumber </td><td>" + document.getElementById('phone').value + "</td></tr>";
} else {
outputTable += "<tr><td>phonenumber </td><td> Invalid phone </td></tr>";
validInformation = false;
}

if (document.getElementById('address').value != "") {
outputTable += "<tr><td>address </td><td>" + document.getElementById('address').value + "</td></tr>";
} else {
outputTable += "<tr><td>address </td><td>Address cannot be empty</td></tr>";
validInformation = false;
}

if (document.getElementById('city').value != "") {
outputTable += "<tr><td>city </td><td>" + document.getElementById('city').value + "</td></tr>";
} else {
outputTable += "<tr><td>address </td><td>city cannot be empty</td></tr>";
validInformation = false;
}

if (/^\d{5}(-\d{4})?$/.test(document.getElementById('zip').value)) {
outputTable += "<tr><td>zip </td><td>" + document.getElementById('zip').value + "</td></tr>";
} else {
outputTable += "<tr><td>zip </td><td> Invalid zip</td></tr>";
validInformation = false;
}

if (document.getElementById('contact').checked == true) {
outputTable += "<tr><td>contact</td><td>" + document.getElementById('contact').value + "</td></tr>";
} else {
outputTable += "<tr><td>contact</td><td>Not set</td></tr>";
validInformation = false;

}
if (document.getElementById('terms').checked) {
outputTable += "<tr><td>Terms and condtion</td><td>Accepted</td></tr>";
} else {
outputTable += "<tr><td>Terms and condtion</td><td>Not Accepted</td></tr>";
validInformation = false;

}
outputTable += "</table>";

if (validInformation) {
document.getElementById('results').hidden = true;
alert("The users account has been registered");

} else {
document.getElementById('results').innerHTML = outputTable;
}

const User = {
email: document.getElementById('email'),
phone: document.getElementById('phone'),
address: document.getElementById('address'),
city: document.getElementById('city'),
state: document.getElementById('state'),
zip: document.getElementById('zip'),
conatct: document.getElementById('contact').value,
TandC: document.getElementById('terms').checked ? "Accepted" : "Not Accpeted"
}
storeData(User);
}

function storeData(User) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem(User.email, User);
} else {
console.log("Sorry, your browser does not support Web Storage...");
}
}

Expert Solution
steps

Step by step

Solved in 5 steps

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY