I am using WebStorage to make a simple login system with username/password. (I don't know if this is the best way.)
It is working, but the problem is, it only works with one username and password. How do I make it so that it can store multiple usernames/passwords? Or perhaps I should be using a different system to do this?
Code:
<html>
<head>
</head>
<body>
<input type="text" placeholder="input username here" id="textbox">
<input type="text" placeholder="input password here" id="textbox2">
<input type="button" value="sign up" onclick="signup()">
<br>
<input type="text" placeholder="input username here" id="textbox3">
<input type="text" placeholder="input password here" id="textbox4">
<input type="button" value="login" onclick="login()">
<p id="result"></p>
<br>
<br>
<div id="settings">
<h1>Settings</h1>
<br>
<input type="text" placeholder="background color" id="bgc">
<br>
<input type="button" onclick="changeSettings()" value="Change settings">
</div>
<script>
function changeSettings() {
if(loggedIn == true) {
if(typeof(Storage)!= "undefined") {
var backg = document.getElementById("bgc").value;
if(backg!="") {
localStorage.setItem("backgroundColor", backg);
document.body.style.background = localStorage.getItem("backgroundColor");
} else {
alert("Enter a color.")
}
} else {
alert("No support.")
}
} else {
alert("You must be logged in to do that.")
}
}
function loadSettings() {
if(typeof(Storage)!="undefined") {
document.body.style.background = localStorage.getItem("backgroundColor");
} else {
alert("No support.")
}
}
function signup() {
if(typeof(Storage)!= "undefined") {
var username = document.getElementById("textbox").value;
var password = document.getElementById("textbox2").value;
if(username!="" && password!="") {
localStorage.setItem("username", username);
localStorage.setItem("password", password);
} else {
alert("Please enter a valid username and password.")
}
} else {
alert("No support.")
}
}
function login() {
if(typeof(Storage)!= "undefined") {
var username = localStorage.getItem("username");
var password = localStorage.getItem("password");
var usernameInput = document.getElementById("textbox3").value;
var passwordInput = document.getElementById("textbox4").value;
if(usernameInput!="" && passwordInput!="") {
if(usernameInput == username && passwordInput == password) {
document.getElementById("result").innerHTML = "Logged in!";
loggedIn = true;
loadSettings();
} else {
document.getElementById("result").innerHTML = "Wrong password/username!";
}
} else {
alert("Please enter a valid username and password.")
}
} else {
alert("No support.")
}
}
</script>
</body>
</html>
ps: sorry if it's messy :p
You should probably be using SQL if you want to store user inputs such as Usernames and Passwords.
Hashing & Password Storage
Good video to watch if your trying to learn Databases!
:)
Not a good way to store the plain username/password in localStorage. anyone can change those value. Since you check the login using
localStorage.setItem("username", username);
localStorage.setItem("password", password);
var username = localStorage.getItem("username");
var password = localStorage.getItem("password");
usernameInput == username && passwordInput == password
This login condition can make true using different ways.
Found this article from the Google, Hope you'll get some idea to do in
secure way :)
Related
I want validation through jQuery. I have two fields name and email. email blank field validation is not working.
Here is my code,
<form>
Name : <input type="text" name="name" id="name"><br>
<span id="nameSpan"></span>
<br>
Email:<input type="email" name="email" id="email1"><br>
<span id="emailSpan"></span>
<br>
<input type="submit" id="submitBtn">
</form>
javascript
$(document).ready(function(){
var name = $("#name").val();
var email1 = $("#email1").val();
$("#submitBtn").on("click", function(){
if(name == '')
{
$("#nameSpan").html('Name is required');
return false;
}
else
{
$("#nameSpan").html('');
}
if(email1 == '')
{
$("#emailSpan").html('Email is required');
return false;
}
else
{
$("#emailSpan").html('');
}
});
});
Please guide me where am I wrong. Thanks in advance
You are checking values of inputs only once while page load. We need to check them everytime so lets move this part into onclick function.
$(document).ready(function(){
$("#submitBtn").on("click", function(){
var name = $("#name").val();
var email1 = $("#email1").val();
if(name == '')
{
$("#nameSpan").html('Name is required');
return false;
}
else
{
$("#nameSpan").html('');
}
if(email1 == '')
{
$("#emailSpan").html('Email is required');
return false;
}
else
{
$("#emailSpan").html('');
}
});
});
I just made a registration form which will tell you in red(CSS) letters if something is wrong. However I want this text to go away as soon as the user writes it correctly. How do I do that?
<script>
function validateForm2() {
var usrnm2 = document.getElementById("usrnm2").value;
var passw2 = document.getElementById("passw2").value;
var cnfpassw2 = document.getElementById("cnfpassw2").value;
var age = document.getElementById("age").value;
if (usrnm2 == null || usrnm2 == "") {
document.getElementById("error1").innerHTML = "You must enter a username";
return false;
}
else if (passw2 == null || passw2 == "") {
document.getElementById("error2").innerHTML = "You must enter a password";
return false;
}
else if (cnfpassw2 !== passw2) {
document.getElementById("error3").innerHTML = "Password does not match";
return false;
}
else if (age < 18) {
document.getElementById("error4").innerHTML = "You are not old enough to enter this site"
return false;
}
else {
alert("Congratulations, you have registered successfully!")
}
}
</script>
<script>
function register2() {
validateForm2()
}
</script>
<form>
Username:
<input id="usrnm2" type="text" name="username"><p id="error1"></p>
Password
<input id="passw2" type="password" name="password"><p id="error2"></p>
Confirm Password
<input id="cnfpassw2" type="password" name="confirmpw2"><p id="error3"></p>
Age
<input id="age" type="number" name="age"><p id="error4"></p><br />
<input id="bttn2" type="button" value="Register!" onclick="register2()"><br />
</form>
Separate the validation conditions into single block if statements, and then include a handler for returning the fields to normal when they are entered correctly:
if (field is entered incorrectly) {
document.getElementById("error").innerHTML = "You must enter correctly";
return false;
}
else {
document.getElementById("error").innerHTML = "";
}
...
alert("Congratulations, you have registered successfully!");
You simply need to place the alert after all of the statements - it will execute as long as none of the conditions fail and thus return.
I am a new to Javascript programming. I have developed the below script and encountering the below issues. Request the expert to help to resolve the issues.
Issues are
when both username and password are filled (username not equal to password) the javascript message displays and the form automatically reloads removing the message.
when username or password is left empty, the message being displayed is "Invalid username or password". The correct javascript message is not being displayed.
when both the fields are not filled the script executes successfully and "Welcome" is printed. If condition in javascript not being executed to display the correct message. Also have used "required" attribute to display the error "this field is required" but still "welcome' is being printed.
<!DOCTYPE html>
<html>
<head>
<script>
function verify() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ((typeof username) == undefined) {
document.getElementById("message").innerHTML = "Username Required.";
}
if ((typeof password) == undefined) {
document.getElementById("message").innerHTML = "password Required.";
}
if (username == password) {
document.write("Welcome");
}
else {
document.getElementById("message").innerHTML = "Invalid Username or password";
}
}
</script>
</head>
<body>
<h1 style="text-align:center">Welcome to MEPC World!!</h1>
<br>
<form style="margin:auto;max-width:60%" >
<fieldset style="border:groove;border-width:5px;border-color:lightgrey;text-align:center">
<legend><b>Login</b></legend>
<p id="message" style="color:red;text-align:left"></p>
<br>
Username :
<input id="username" type="text" placeholder="username (e.g. XYZ)" autocomplete="off" required="required"> </input>
<br>
<br>
Password :
<input id="password" type="password" placeholder="password" required="required"> </input>
<br><br>
<input type="submit" value="Submit" onclick="verify()">
</fieldset>
</form>
<p><b>Note:</b> Username and password are case-sensitive.</p>
</body>
</html>
This is how you should be doing it. Or the message gets overridden because you have multiple if statements instead of an if/elseif/else which will only allow one to be true.
function verify() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === undefined || username === '') {
document.getElementById("message").innerHTML = "Username Required.";
}
else if (password == undefined || password === '') {
document.getElementById("message").innerHTML = "password Required.";
}
// This doesn't make sense at all fyi
else if (username === password) {
document.write("Welcome");
}
else {
document.getElementById("message").innerHTML = "Invalid Username or password";
}
}
To prevent the form from submitting you have to do this:
<input type="submit" value="Submit" onclick="return verify()">
i need to make an html page when you put a password to. whenever the user insert the correct password he will be sent out to a website. if the user won't insert the correct password he will get a an error.(i need to do it with only javaScript.no jquery and stuff like that) this is what i did -
<form>
Write the password here:
<input type="text" id="putPass" name="go2" /> <br />
<input type="button" value="click here" id="press" onclick="pass()" />
</form>
<script type="text/javascript">
var password = ["1234","abcd","0000","1111","4321"]
function pass()
document.getElementById("putPass").value. //it says it has a syntax error and i dont know why...
if (this == password[])
{
document.write("good job!");
}
else
{
alert("try again!");
}
</script>
thank you.
You can try to do that using this code.
http://jsfiddle.net/VAK3N/
<form>
<input type="text" id="putPass" name="go2" />
<br />
<input type="button" value="click here" id="press" />
</form>
<script type="text/javascript">
var password = ["1234", "abcd", "0000", "1111", "4321"];
document.getElementById('press').onclick = function () {
var p = document.getElementById("putPass").value;
if (password.indexOf(p) > -1) {
alert("good job!");
} else {
alert("try again!");
}
}
</script>
Try this
<script type="text/javascript">
var password = ["1234","abcd","0000","1111","4321"];
function pass(){
var userPass = document.getElementById("putPass").value;
if (in_array(userPass, password)){
document.write("good job!");
}
else {
alert("try again!");
}
}
function in_array(needle, haystack){
for(var key in haystack)
{
if(needle === haystack[key])
{
return true;
}
}
return false;
}
</script>
var pass = document.getElementById("putPass").value;
var correct = false;
for (var i=0;i<password[].length;i++){
if (password[i] == pass){
correct = true;
break;
}
}
if (correct){
document.write("good job!");
} else {
alert("try again!");
}
Not sure if that exact code will work, but I think that you need to check each password individually in a for loop, you can't compare strings with entire arrays.
I didn't see first that you dont want to use jQuery. So then here is the working code for you.
JS:
var password = ["1234","abcd","0000","1111","4321"]
function pass(){
var input = document.getElementById('putPass').value;
var accepted= false;
for(var pass in password){
if(password[pass] == input ){
accepted= true;
}
}
if(accepted){
alert('good job!');
}else{
alert('try again!');
}
}
HTML:
<form>
<input type="text" id="putPass" name="go2" /> <br />
<input type="button" value="click here" onClick="pass();" id="passSender"/>
</form>
I have a login form that, when completed, sends users to a page with a JavaScript generated URL (allowing me to pass a JavaScript variable to my PHP script using $_GET). However, in order to do that, the Login button is currently 'type="button"'. While everything works, it means that users cannot login by hitting Enter; they must actually click the Login button. Is there a way I can "Submit" the form, while still having it point to the JavaScript generated URL?
This seems like a pretty basic concept, which tells me I might be approaching it the wrong way to begin with. Any guidance is appreciated.
HTML:
<form name="login">
Username: <input type="text" name="user_id"/>
Password: <input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
</form>
JavaScript:
function check(form) {
var userCredentials = [["jsmith", "smithpassword", "John Smith"], ["jdoe", "doepassword", "Jane Doe"]];
var credCheck = 0;
for (var i = 0; i < userCredentials.length; i++) {
if (userCredentials[i][0] == form.user_id.value) {
credCheck += 1;
var displayName = userCredentials[i][2];
if (userCredentials[i][1] == form.pswrd.value) {
window.open("home.php?display_name=" + displayName, "_self");
} else {
alert('The username and password do not match.');
return false;
}
}
}
if (credCheck == 0) {
alert('The username entered is not valid.');
return false;
} else {
return true;
}
}
Instead of opening php page via javascript, you need to change the form action dynamically to point to your generated url.
HTML:
<form name="login">
Username: <input type="text" name="user_id"/>
Password: <input type="password" name="pswrd"/>
<input type="submit" onclick="check(this.form)" value="Login"/>
</form>
JavaScript: (line 9 & 10 changed)
function check(form) {
var userCredentials = [["jsmith", "smithpassword", "John Smith"], ["jdoe", "doepassword", "Jane Doe"]];
var credCheck = 0;
for (var i = 0; i < userCredentials.length; i++) {
if (userCredentials[i][0] == form.user_id.value) {
credCheck += 1;
var displayName = userCredentials[i][2];
if (userCredentials[i][1] == form.pswrd.value) {
form.action = "home.php?display_name=" + displayName;
return true;
} else {
alert('The username and password do not match.');
return false;
}
}
}
if (credCheck == 0) {
alert('The username entered is not valid.');
return false;
} else {
return true;
}
}
You could try:
<form name="login" onsubmit="check(this)">
Username: <input type="text" name="user_id"/>
Password: <input type="password" name="pswrd"/>
<input type="submit" value="Login"/>
</form>