In some places I've read:
It's Impossible To Completely Hide localStorage From Developer Tools.
But if I don't Figure out a way to hide my array of objects (but still save them somewhere), somebody might just find someone's username and password and hack into their account.
Are there any other ways besides localStorage for this scenario?
I am also willing to go server side if necessary.
Here is some of my code:
HTML:
<div id="all">
<div id="login" class="move">
<h2>Login To Your Account</h2>
<input type="text" id="usernameLogin" placeholder="username..." autocomplete="off" />
<br>
<input type="text" id="passwordLogin" placeholder="password..." autocomplete="off" />
<br>
<input type="text" id="emailLogin" placeholder="your email..." autocomplete="off" />
<br>
<button id="submitLogin" onclick="getInfo()">Login</button>
<br>
<a href="#">Create An Account</a>
</div>
<div id="register" class="move">
<h2>Create An Account</h2>
<input type="text" id="username" placeholder="username..." autocomplete="off" />
<br>
<input type="text" id="password" placeholder="password..." autocomplete="off" />
<br>
<input type="text" id="friendCode" placeholder="your friend code..." autocomplete="off" />
<br>
<button id="gene">New FC</button>
<br>
<input type="text" id="email" placeholder="your email..." autocomplete="off" />
<br>
<button id="submit" onclick="setInfo()">Create Account</button>
<br>
<a href="#">Login Instead</a>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('#all a').click(function() {
$('.move').animate({height: "toggle", opacity: "toggle"});
});
</script>
<script src="./script.js"></script>
</body>
JavaScript:
var usernameLogin = document.getElementById('usernameLogin');
var passwordLogin = document.getElementById('passwordLogin');
var submitLogin = document.getElementById('submitLogin');
var username = document.getElementById('username');
var password = document.getElementById('password');
var submit = document.getElementById('submit');
var friendCode = document.getElementById('friendCode');
var email = document.getElementById('email');
var gene = document.getElementById('gene');
var emailLogin = document.getElementById('emailLogin');
gene.onclick = function() {
var randomNum = Math.floor(Math.random() * 500000000) + 100000;
friendCode.value = randomNum;
}
var accounts = JSON.parse(localStorage.getItem('session')) || [{
email: "someone@example.com",
friendCode: "none",
password: "Account",
username: "Guest"
}];
console.log(accounts);
friendCode.disabled = true;
function getInfo() {
for (let i = 0; i < accounts.length; i++) {
if (usernameLogin.value == accounts[i].username && passwordLogin.value == accounts[i].password && emailLogin.value == accounts[i].email) {
alert('Welcome, ' + usernameLogin.value + '!');
console.log(accounts[i].friendCode);
console.log(accounts[i].email);
usernameLogin.value = '';
passwordLogin.value = '';
emailLogin.value = '';
return;
}
}
alert('you have an incorrect username/email or password');
}
function setInfo() {
for (let i = 0; i < accounts.length; i++) {
if (friendCode.value == accounts[i].friendCode) {
alert('sorry, that friend code is already being used. please generate a new code');
return;
}
else if (email.value == accounts[i].email) {
alert('sorry, that email is already in our system');
return;
}
}
if (username.value.length < 4 || password.value.length < 8 || friendCode.value.length < 6 || email.value.length < 8) {
alert('something is too short in characters. username > 3; password > 7; friend code > 5; email > 7');
return;
}
if (username.value.length > 3 && password.value.length > 7 && friendCode.value.length > 5 && email.value.length > 7) {
alert('Welcome To Our Site, ' + username.value + '!');
accounts.push({username: username.value, password: password.value, friendCode: friendCode.value, email: email.value});
localStorage.setItem('session', JSON.stringify(accounts));
username.value = '';
password.value = '';
friendCode.value = '';
email.value = '';
}
}
