Unable to store user input in session storage using JavaScript Module
0
I am trying to use JavaScript modules to retrieve user input (i.e., email address & password) from a registration form and set it to session storage. I have tried several different approaches and still unable to store in session storage and not receiving any errors in dev tools in Chrome. Also, need to validate the email is correct in the registration script. Here is the project details to give an idea.
- We need to allow our users to register for access to our application. To do so, we need to store our user information so it can be retrieved. Create a UserStore module that should store the users username and password in session storage.
The UserStore module should have the followings methods available:
a. Get: Retrieves a user object given the email address.
b. Save: Stores a user object in session storage
We also need a registration form for our users to sign up. So create a page
registration.html and link to it from your home page. The submit for this page should validate that the user has entered a valid email address and if so should save the user information with the UserStore.Finally modify, your login.js script to now retrieve the user object from the UserStore to use for logging in the user.
Any suggestions or help is much appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/userStore.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
<a href="index.html">Home</a>
<a href="Login.html">Login</a>
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return handleReg()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
UserStore Module
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (password) {
var userEml = sessionStorage.getItem("userName", userName);
var userPwd = sessionStorage.getItem("password", password);
return userEml;
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
//Email Validation
var App = window.App || {};
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
};
App.Validation = Validation;
window.App = App;
}(window);
javascript html node-modules
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
add a comment |
0
I am trying to use JavaScript modules to retrieve user input (i.e., email address & password) from a registration form and set it to session storage. I have tried several different approaches and still unable to store in session storage and not receiving any errors in dev tools in Chrome. Also, need to validate the email is correct in the registration script. Here is the project details to give an idea.
- We need to allow our users to register for access to our application. To do so, we need to store our user information so it can be retrieved. Create a UserStore module that should store the users username and password in session storage.
The UserStore module should have the followings methods available:
a. Get: Retrieves a user object given the email address.
b. Save: Stores a user object in session storage
We also need a registration form for our users to sign up. So create a page
registration.html and link to it from your home page. The submit for this page should validate that the user has entered a valid email address and if so should save the user information with the UserStore.Finally modify, your login.js script to now retrieve the user object from the UserStore to use for logging in the user.
Any suggestions or help is much appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/userStore.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
<a href="index.html">Home</a>
<a href="Login.html">Login</a>
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return handleReg()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
UserStore Module
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (password) {
var userEml = sessionStorage.getItem("userName", userName);
var userPwd = sessionStorage.getItem("password", password);
return userEml;
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
//Email Validation
var App = window.App || {};
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
};
App.Validation = Validation;
window.App = App;
}(window);
javascript html node-modules
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
add a comment |
0
0
0
I am trying to use JavaScript modules to retrieve user input (i.e., email address & password) from a registration form and set it to session storage. I have tried several different approaches and still unable to store in session storage and not receiving any errors in dev tools in Chrome. Also, need to validate the email is correct in the registration script. Here is the project details to give an idea.
- We need to allow our users to register for access to our application. To do so, we need to store our user information so it can be retrieved. Create a UserStore module that should store the users username and password in session storage.
The UserStore module should have the followings methods available:
a. Get: Retrieves a user object given the email address.
b. Save: Stores a user object in session storage
We also need a registration form for our users to sign up. So create a page
registration.html and link to it from your home page. The submit for this page should validate that the user has entered a valid email address and if so should save the user information with the UserStore.Finally modify, your login.js script to now retrieve the user object from the UserStore to use for logging in the user.
Any suggestions or help is much appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/userStore.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
<a href="index.html">Home</a>
<a href="Login.html">Login</a>
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return handleReg()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
UserStore Module
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (password) {
var userEml = sessionStorage.getItem("userName", userName);
var userPwd = sessionStorage.getItem("password", password);
return userEml;
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
//Email Validation
var App = window.App || {};
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
};
App.Validation = Validation;
window.App = App;
}(window);
javascript html node-modules
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
I am trying to use JavaScript modules to retrieve user input (i.e., email address & password) from a registration form and set it to session storage. I have tried several different approaches and still unable to store in session storage and not receiving any errors in dev tools in Chrome. Also, need to validate the email is correct in the registration script. Here is the project details to give an idea.
- We need to allow our users to register for access to our application. To do so, we need to store our user information so it can be retrieved. Create a UserStore module that should store the users username and password in session storage.
The UserStore module should have the followings methods available:
a. Get: Retrieves a user object given the email address.
b. Save: Stores a user object in session storage
We also need a registration form for our users to sign up. So create a page
registration.html and link to it from your home page. The submit for this page should validate that the user has entered a valid email address and if so should save the user information with the UserStore.Finally modify, your login.js script to now retrieve the user object from the UserStore to use for logging in the user.
Any suggestions or help is much appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/userStore.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
<a href="index.html">Home</a>
<a href="Login.html">Login</a>
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return handleReg()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
UserStore Module
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (password) {
var userEml = sessionStorage.getItem("userName", userName);
var userPwd = sessionStorage.getItem("password", password);
return userEml;
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
//Email Validation
var App = window.App || {};
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
};
App.Validation = Validation;
window.App = App;
}(window);
javascript html node-modules
javascript html node-modules
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
asked Nov 27 '18 at 0:05
S MorrisS Morris
156
156
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
I ended up revising the code and now it works.
UserStore
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
sessionStorage.setItem("admin@tissue.com", "admin123");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem(userName, password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (userName) {
var userPwd = sessionStorage.getItem(userName);
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
var userStore = new App.UserStore();
userStore.save(userName, password);
//Email Validation
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
}
}
window.onload = function() {
document.getElementById("regForm").onsubmit = handleReg;
}
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490909%2funable-to-store-user-input-in-session-storage-using-javascript-module%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I ended up revising the code and now it works.
UserStore
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
sessionStorage.setItem("admin@tissue.com", "admin123");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem(userName, password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (userName) {
var userPwd = sessionStorage.getItem(userName);
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
var userStore = new App.UserStore();
userStore.save(userName, password);
//Email Validation
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
}
}
window.onload = function() {
document.getElementById("regForm").onsubmit = handleReg;
}
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
add a comment |
0
I ended up revising the code and now it works.
UserStore
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
sessionStorage.setItem("admin@tissue.com", "admin123");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem(userName, password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (userName) {
var userPwd = sessionStorage.getItem(userName);
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
var userStore = new App.UserStore();
userStore.save(userName, password);
//Email Validation
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
}
}
window.onload = function() {
document.getElementById("regForm").onsubmit = handleReg;
}
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
add a comment |
0
0
0
I ended up revising the code and now it works.
UserStore
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
sessionStorage.setItem("admin@tissue.com", "admin123");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem(userName, password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (userName) {
var userPwd = sessionStorage.getItem(userName);
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
var userStore = new App.UserStore();
userStore.save(userName, password);
//Email Validation
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
}
}
window.onload = function() {
document.getElementById("regForm").onsubmit = handleReg;
}
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
I ended up revising the code and now it works.
UserStore
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
sessionStorage.setItem("admin@tissue.com", "admin123");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem(userName, password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (userName) {
var userPwd = sessionStorage.getItem(userName);
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Registration function
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
var userStore = new App.UserStore();
userStore.save(userName, password);
//Email Validation
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email);
}
}
}
window.onload = function() {
document.getElementById("regForm").onsubmit = handleReg;
}
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
answered Nov 27 '18 at 3:48
S MorrisS Morris
156
156
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490909%2funable-to-store-user-input-in-session-storage-using-javascript-module%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
