I'm trying to make it so that when I user clicks the submit button on my sign in form, they will be signed in as an anonymous user in Firebase. I know my submit button is triggering the jQuery submit event because the alert in it is being displayed. However, even though the submit button triggers the jQuery submit event, the signInAnonymously method is not being called for some reason. I've also tried using a putting the signInAnonymously call in a separate function and using the form onsubmit attribute but that did not work either. Here is my code (I've omitted my config details for security purposes):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Escape Room</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<!-- jQuery -->
<script src="resources/jquery/jquery-3.1.1.slim.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
//Initialize authentication
var auth = firebase.auth();
// Handle authenticated users
auth.onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var isAnonymous = user.isAnonymous;
var uid = user.uid;
// ...
} else {
// User is signed out.
// ...
}
// ...
});
// When the DOM has loaded
$(document).ready(function(e) {
$('#signIn').submit(function(e) {
// Prevent the page from refreshing
e.preventDefault();
alert("test");
// Authenticate user
auth.signInAnonymously().catch(function(error) {
alert('test2');
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.error(error);
});
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<form id="signIn">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<label for="vest">Vest Number</label>
<input type="text" class="form-control" placeholder="Vest Number">
</div>
<button type="submit" class="btn btn-primary">Start</button>
</form>
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="resources/jquery/jquery-3.1.1.slim.min.js"></script>
<script src="resources/tether/js/tether.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I'm relatively new to Firebase and this has got me baffled, so any help would be greatly appreciated!
I found out what was going wrong. Since I never called firebase.auth().signOut() it was keeping me logged in as the same user so it did not create a new user each time I submitted the form because I was already logged in as a user. I added window.onload = auth.signOut(); to the script in my head and now a new user is created each time I press the submit button.
Related
Email and password are in firestore which is coming from application my job is to create admin panel in js and that admin panel has login page, whenever someone enter there email and password my job is to check email and password, if it matches to the email and password of the firestore email and password then show him/her admin panel otherwise show a pop up that you are not authenticated.
form.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>Form</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-analytics.js"></script>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-2"></div>
<div class="col-lg-6 col-md-8 login-box">
<div class="col-lg-12 ">
</div>
<div class="col-lg-12 login-title">
ADMIN PANEL
</div>
<div class="col-lg-12 login-form">
<div class="col-lg-12 login-form">
<form>
<div class="form-group">
<label class="form-control-label">EMAIL</label>
<input type="text" class="form-control email" name="email" id="email" >
</div>
<div class="form-group">
<label class="form-control-label">COMPANY NAME</label>
<input type="text" class="form-control" name="companyname" id="companyname">
</div>
<div class="form-group">
<label class="form-control-label">PASSWORD</label>
<input type="password" class="form-control" name="password" id="password" >
</div>
<div class="col-lg-12 loginbttm">
<div class="col-lg-6 login-btm login-text">
</div>
<div class="col-lg-6 login-btm login-button" style='float: right'>
<button class="btn btn-outline-primary" onclick="login()">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="from.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCBFPUeRkDtvB9oUYHKH18co6n8sVkktd0",
authDomain: "insurance-app-515f9.firebaseapp.com",
projectId: "insurance-app-515f9",
storageBucket: "insurance-app-515f9.appspot.com",
messagingSenderId: "507922592990",
appId: "1:507922592990:web:6ab80539593fc46ea43e4f",
measurementId: "G-85KC0RZSV8"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const db = firebase.firestore();
db.setting({ timestampsInSnapshots: true });
</script>
<script src="../assets/js/plugins/sweetalert2.js"></script>
</body>
</html>
form.js
function login() {
// var getId=localStorage.getItem("getId");
var useremail = document.getElementById("email").value;
var companyname = document.getElementById("companyname").value;
var password = document.getElementById("password").value;
db.collection('Companies List').where("CompanyEmail", "==", useremail, "CompanyPassword", "==", password);
Swal.fire({
title:'Match!',
text: 'Welcome to the dashboard',
type: 'success',
}).then(function() {
window.location = "dashboard.html";
});
}
Your query seems to be correct for your requirement. You just need to check if any document has matched the data provided by user. You can do by checking if the snapshot returned is empty or has a matching document
const docRef = db.collection('Companies List')
.where("CompanyEmail", "==", useremail)
.where("CompanyPassword", "==", password);
// ^ separate .where()
docRef.get().then((snapshot) => {
if (snapshot.empty) {
// no docs matched
console.log("Invalid Credentials")
} else {
console.log(snapshot.docs[0].data())
Swal.fire({
title:'Match!',
text: 'Welcome to the dashboard',
type: 'success',
}).then(function() {
window.location = "dashboard.html";
});
}
})
Just a note, ideally you should avoid using Firestore or any database directly for authentication. You could log users in using Firebase Authentication and then store UIDs of users in the respective company document.
I'm trying to store some user information in firebase cloud store.
The problem is I created a form to enforce the user to fill all the fields and to make the email property works well. when I put them in a form I got this error:
Uncaught TypeError: btnSubmit is not a function
at HTMLButtonElement.onclick
when I remove the form tag it works well, but the user can submit the form without filling it, which is not good.
This is my code:
//firestore code
var db = firebase.firestore();
function btnSubmit(){
var inputText = document.getElementById("fname").value;
var email = document.getElementById("email").value;
// Add a new document in collection
db.collection("users").doc().set({
name: inputText,
email: email
})
.then(() => {
console.log("Document successfully written!");
})
.catch((error) => {
console.error("Error writing document: ", error);
});
}
<html>
<head>
<title> exam.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="form-container">
<div class="form-container-in">
</div>
<div class="row">
<div class="left-divider"></div>
<div class="col-md-6">
<div class="form-group">
<h2 >your Information </h2>
</div>
<div class="form-group">
<form>
<label for="fname"><b> name </b></label>
<input type="text" placeholder="name " name="fname" id="fname" required>
<div class="form-group">
<label for="email"><b> email</b></label>
<input type="email" placeholder="email " name="email" id="email" required><br>
<button onclick="btnSubmit()" id="btnSubmit">go </button>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "---",
authDomain: "--",
databaseURL: "---",
projectId: "--",
storageBucket: "--",
messagingSenderId: "--",
appId: "--",
measurementId: "--"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="app.js"></script>
</body>
</html>
This is one of the many reasons not to use onxyz-attribute-style event handlers: Those kinds of handlers can only call global functions. Apparently, your btnSubmit isn't a global. (It would be if the code you've shown for it appeared at the top level of a non-module script, as it appears to in your question, but presumably the code in the question is an excerpt from a larger function, and not at the top-level scope of it.)
The normal error you'd get for this would be a ReferenceError because trying to read the value of an undeclared identifier causes that kind of error. The reason you're not getting that is you have id="btnSubmit" on your button element, which creates an automatic global with that name that refers to the button.
Instead, hook up your handler with modern event handling:
document.getElementById("btnSubmit").addEventListener("click", function() {
// Your handler code here
});
You can still declare the function separately if you want to, without it being a global. If you do that, hook it up from code in a scope where your btnSubmit function exists (for instance, just after it), like this:
function btnSubmit() {
// Your handler code here
}
document.getElementById("btnSubmit").addEventListener("click", btnSubmit);
I came across a challenge and I kindly needed your help. I was developing form input with one of the fields being address / location. I wanted to harness Google Maps API, with services such as AutoComplete and Address Geocoding. I have HTML and JS files. My main issue is that I wanted to tap invalid addresses that users might type and alert them that it is an error. Like for instance, if someone types an address that has not been suggested or types incomplete address, I should be able to tell them that it is not a valid address. This works but only when I press enter, and not submit. If I press submit, it submits the form and doesn't notify.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places">
function initMap() {
const input = document.getElementById("location-input");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
//window.alert("No details available for input: '" + place.name + "'");
swal("Please fill all the *Required fields","Click okay to continue", "warning");
return;
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="form.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" defer></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<title>Document</title>
</head>
<body>
<form action="" id="mform">
<div class="container">
<div class="row">
<!--Address Section-->
<div id="pac-container">
<input id="location-input" type="text" placeholder="Enter a location" />
</div>
<!--End of Address Section-->
<!--Form Submit Section-->
<div class="row fill-form">
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
</div>
<!--End of Form Submit Section-->
</div>
</div>
<script src="places.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</form>
</body>
</html>
I have tried adding an submit event listener, but I cannot get what I expect
You need to first prevent the form from submitting and check place.geometry the way you check it on place_changed event. Show that nice swal message and then do whatever you want to if it's valid.
Here below is your own codes edited and checked before submit.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places">
function initMap() {
const input = document.getElementById("location-input");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
//window.alert("No details available for input: '" + place.name + "'");
swal("Please fill all the *Required fields","Click okay to continue", "warning");
return;
}
});
//Check before submit
document.getElementById('mform').addEventListener('submit', function(e){
e.preventDefault(); //prevent form submit
const place = autocomplete.getPlace(); //get place from autocomplete
if (!place.geometry) { //check if valid location
swal("Please fill all the *Required fields","Click okay to continue", "warning");
return;
}
});
}
could you please help me find out what's wrong? After login, it is supposed to redirect you to another page, but nothing happens. The user name is: Joshua and the password is: Joshua#123.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Joshua" && password == "Joshua#123") {
alert("Login successfully");
location.replace("www.youtube.com"); // Redirecting to other page.
} else {
attempt--; // Decrementing by one.
alert("You have " + attempt + " attempt left;");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
</script>
<script src="js/login.js"></script>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<button type="submit" value="Login" id="submit" onclick="validate()" />
</form>
<b><i>Submit</i></b>
</div>
</div>
</body>
</html>
Try this:
window.location.replace("https://www.youtube.com")
You can move code inside window.addEventListener('load' or you can move script after dom at the end
Suggestion: use the entire URL with HTTP or HTTPS.
location.replace("https://www.youtube.com");
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3; // Variable to count number of attempts.
/// code here
});
</script>
As leonardofmed mentioned, better place your script just befor </body> closing tag,
because you need to load html first, so script can see elements, otherwise at it's start there is no elements yet, so this will cause error, as for redirecting you can use:
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");
use <form><button type="button" ... instead
<form><button type="submit" ... has its own logic ("magic"), which is doing the problem.
use protocol in url location.replace("https://www.youtube.com"), otherwise it's relative path
BTW never validate password on client!!!
I'm following the Firebase examples that uses web authentication, and I'm not able to login if I use the textboxes and buttons inside a html form element.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script>
</head>
<body>
<form id="app">
<input type="email" id="txtEmail" placeholder="Email">
<input type="password" id="txtPassword" placeholder="Password">
<button id="btnLogin">Login</button>
<button id="btnSignUp">SignUp</button>
<button id="btnLogout">Logout</button>
</form>
</body>
<script src="app.js"></script>
</html>
And the js:
(function() {
// Initialize Firebase
const config = {
apiKey: "MyData",
authDomain: "MyData",
databaseURL: "MyData",
projectId: "MyData",
storageBucket: "MyData",
messagingSenderId: "MyData"
};
firebase.initializeApp(config);
const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSignUp = document.getElementById('btnSignUp');
const btnLogout = document.getElementById('btnLogout');
btnLogin.addEventListener('click', e => {
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
const promise = auth.signInWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
});
btnSignUp.addEventListener('click', e => {
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
const promise = auth.createUserWithEmailAndPassword(email, pass);
promise
.catch(e => console.log(e.message));
});
btnLogout.addEventListener('click', e => {
firebase.auth().signOut();
});
firebase.auth().onAuthStateChanged(firebaseUser => {
if(firebaseUser){
console.log(firebaseUser);
btnLogout.style.display = 'block';
} else {
console.log('not logged in');
btnLogout.style.display = 'none';
}
});
}());
When I try to login, the console log rises the following message:
"It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the CDN builds, these are available in the following manner
(replace with the name of a component - i.e. auth, database, etc):
https://www.gstatic.com/firebasejs/5.0.0/firebase-.js"
If I move the inputs and buttons outside the form element, the login works perfectly.
What am I missing?
For your case best thing is to use firebase UI with CDN instead of npm and bower
No worries and no confusion, no errors (I mean less depends on our skill)
Add Firebase Authentication to your web application.
Include FirebaseUI via CDN:
Include the following script and CSS file in the tag of your page, below the initialization snippet:
<script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
In the Firebase console, open the Authentication section and enable email and password authentication.
ui.start('#firebaseui-auth-container', {
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Other config options...
});
Other Providers:
ui.start('#firebaseui-auth-container', {
signInOptions: [
// List of OAuth providers supported.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID
],
// Other config options...
});
For more info, please follow this link : https://firebase.google.com/docs/auth/web/firebaseui
Look at this index.html file, this way I can login perfectly, because I commented the form element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script>
</head>
<body>
<!-- <form id="app"> -->
<input type="email" id="txtEmail" placeholder="Email">
<input type="password" id="txtPassword" placeholder="Password">
<button id="btnLogin">Login</button>
<button id="btnSignUp">SignUp</button>
<button id="btnLogout">Logout</button>
<!-- </form> -->
</body>
<script src="app.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script>
</head>
<body>
<form id="app">
<input type="email" id="txtEmail" placeholder="Email">
<input type="password" id="txtPassword" placeholder="Password">
<button id="btnLogin">Login</button>
<button id="btnSignUp">SignUp</button>
<button id="btnLogout">Logout</button>
</form>
</body>
<script src="app.js"></script>
</html>
But using the html like the one I posted initially (using form element) rises the following error to the console:
"A network error (such as timeout, interrupted connection or unreachable host) has occurred."