javascripthtmlweb-sql

how can i verify if the username and password exists in my websql database for login page?

here's my login page code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="C:\Users\Si Mohamed\Desktop\projects\game shop\jv.js">          
</script>
<title>E-keys Store</title>
</head>
<script>
function verify() {

var usrname = document.getElementById("usrname").values;
var pass = document.getElementById("pass").values;



if (usrname2 == usrname && pass2 == pass) {
alert("logged in successfully");

}else {

alert("account doesnt exist");
}
}

</script>
<body>
<form class="sign" action="index.html" method="post">


<div class="sign_in">
<p class="title">SIGN IN</p>
<p class="mailtitle">Email or Username <br><input class="inp1" type="text" name="Username" 
id="usrname2" value=""></p>
<p class="passtitle">Password<br><input type="password" name="Password" id="pass2"    
class="inp2"></p>
<input type="checkbox" class="check1">
<div class="txt1">Remember</div>
<div class="txt2">Me</div>
<img src="signinbtn.svg" class="signinbtn" onclick="verify();" >
<a href="http://127.0.0.1:3000/Sign%20Up/index2.html" class="link1"><p>You don't have an  
account? Sign up </p></a>
<a href="" class="link2"><p>Forgot your password?</p></a>
</div>
 </form>
<aside class="bg">
<img src="bgblue.svg">
</aside>
 </body>
</html>

and here's my code for the js linked to both login and sign up page :

var mydb = openDatabase("accounts", "0.1", "Testing  Database", 1024 * 1024);
if (window.openDatabase) {



//create the  table using SQL for the database using a transaction
mydb.transaction(function(t) {
t.executeSql("CREATE TABLE IF NOT EXISTS mydb (id INTEGER PRIMARY KEY, mailusr VARCHAR(50),
usrname VARCHAR(50), pass VARCHAR(100))");
});

} else {
alert("WebSQL is not supported by your browser!");
}


//function to output the list of cars in the database
function updateDrafts(transaction, results) {
//initialise the listitems variable
var listitems = "";
//get the list holder ul
var listholder = document.getElementById("drafts");

//clear the list of drafts ul
listholder.innerHTML = "";

var i;
//Iterate through the results
for (i = 0; i < results.rows.length; i++) {
//Get the current row from database
var row = results.rows.item(i);

listholder.innerHTML += "<li>" + row.mailusr + " - " + row.usrname + " - " + row.pass + "(<a   
href='javascript:void(0);' onclick='deleteDraft(" + row.id + ");'>Delete this account</a>)";
}
}

//function to get the list of accounts from the database

function outputDrafts() {
//check to ensure the mydb object has been created
if (mydb) {

mydb.transaction(function(t) {
t.executeSql("SELECT * FROM mydb", [], updateDrafts);
});
} else {
alert("db not found, your browser does not support web sql!");
}
}
//function to add account

function addDraft() {
//check to ensure the mydb object has been created
if (mydb) {
//get the values of user and pass text inputs
var mailusr = document.getElementById("mailusr").value;
var usrname = document.getElementById("usrname").value;
var pass = document.getElementById("pass").value;
var pass1 = document.getElementById("pass1").value;

//Test to ensure that the user has filled all the form
if (mailusr !== "" && usrname !== "" && pass !== "" && pass == pass1) {
//Insert the user entered details into database
mydb.transaction(function(t) {
t.executeSql("INSERT INTO mydb (mailusr, usrname, pass) VALUES (?, ?, ?)", [mailusr, usrname,  
pass]);
outputDrafts();
});
} else if (mailusr !== "" && usrname !== "" && pass !== "" && pass !== pass1) {
alert("Your password does not match with your confirmation");
}
else{
alert("You need to fill all fields");
}

}}
var link = document.getElementById("adduser");

link.onclick = function () { alert(1)
addDraft();

};
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML +=  msg;

for (i = 0; i < len; i++) {
alert(results.rows.item(i).log );
}

}, null);
});

i can't somehow extract value by id in login page it said index.html:12 Uncaught TypeError: Cannot read property 'values' of null at verify (index.html:12) ! i need to manage somehow to get the database details like username and password to verify if the account of the user or not in the database created in sign up page thanks in advance. Im a beginner in javascript and websql :D .

Solution

  • There are a few issues in your code:

    Good luck