I am trying to build my own workout tracking tool. I have built my front end with bootstrap studio. I am figuring out how to use firebase and its authentication tool. Its working but only in a plain html file. The one I created with BSStudio doesnt want to work. I hope somebody can help me out.
First I used a js file for every page, but I handle it now from just one file.
Its called backend.js. :
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// User is signed in.
alert("logged in")
document.getElementById("user_div").style.display = "block";
document.getElementById("login_div").style.display = "none";
document.getElementById("logoutsucceed").style.display = "none";
document.getElementById("logoutfailed").style.display = "block";
var user = firebase.auth().currentUser;
if (user != null) {
var email_id = user.email;
document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;
}
} else {
// No user is signed in.
alert("logged out")
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
document.getElementById("logoutsucceed").style.display = "block";
document.getElementById("logoutfailed").style.display = "none";
}
});
document.getElementById('btlogin').onclick = function () {
login();
};
document.getElementById('btlogout').onclick = function () {
logout();
};
function login() {
alert("try to login")
var userEmail = document.getElementById("email_field").value;
var userPass = document.getElementById("password_field").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error : " + errorMessage);
// ...
});
}
function logout() {
alert("logged out")
firebase.auth().signOut();
href = "index.html"
}
function register() {
alert("register command")
}
Here is my working page:
<html>
<head>
<title>Firebase Login</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="login_div" class="main-div">
<h3>Firebase Web login Example</h3>
<input type="email" placeholder="Email..." id="email_field" />
<input type="password" placeholder="Password..." id="password_field" />
<button id="btlogin">Login to Account</button>
</div>
<button onclick="window.location.href = 'homepage.html';">Hier klicken</button>
<div>
</div>
<div id="user_div" class="loggedin-div">
<h3>Welcome User</h3>
<p id="user_para">Welcome to Firebase web login Example. You're currently logged in.</p>
<button id="btlogout">Logout</button>
</div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
[config from firebase]
};
firebase.initializeApp(config);
</script>
<script src="assets/js/backend.js">
</script>
</body>
</html>
And my bsstudio created page (which doesnt work). I have 100% put the same firebase config, so thats not the problem:
<!DOCTYPE html>
<html>
<head>
login()
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Login - FitBy</title>
<meta name="description" content="A gym website by Kevin Kumar. Providing various gym tools from workout tracking to informative blogs.">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/beautiful-danger-alert.css">
<link rel="stylesheet" href="assets/css/beautiful-success-alert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Profile-Card.css">
<link rel="stylesheet" href="assets/css/smoothproducts.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar" style="margin-bottom: 0;">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1" style="float: right;"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="text-left align-self-start order-1" style="position: absolute;float: left;margin-bottom: 0px;"></div>
<div class="collapse navbar-collapse" id="navcol-1"><span class="navbar-text" style="min-width: 220px;"><a class="navbar-brand logo" href="#" style="margin-right: 0;">FitBy</a><a class="navbar-brand logo" href="#"
style="transform: scale(-1,1);margin-right: 0;margin-left: 0px;padding: 0;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#"
style="margin-right: 0;margin-left: -2px;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#" style="margin-left: 2;padding: 0;margin-right: 0;">nowledge</a></span>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/features.html">Features</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/forum.html">Forum</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/blog-post-list.html">Blog</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/about-us.html">About Us</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/contact-us.html">Contact Us</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true" href="#">my account</a>
<div class="dropdown-menu show" role="menu">
<div class="col"><img id="userprofileimg" src="assets/img/scenery/image1.jpg" style="margin: 0;padding: 0px;background-position: 100%;margin-left: auto;margin-right: auto;"></div>
<h6 class="dropdown-header" role="presentation">Overview</h6><a class="dropdown-item" role="presentation" href="/userpage.html">My Information</a><a class="dropdown-item #lblogout" role="presentation"
href="/login.html">Login</a><a class="dropdown-item" role="presentation" id="lbregister" href="registration.html">Register</a><a class="dropdown-item" role="presentation" id="lbLogout" href="logout.html">Logout</a>
<h6 class="dropdown-header" role="presentation">Tracking</h6><a class="dropdown-item" role="presentation" href="tracking-dashboard.html">Tracking Dashboard</a><a class="dropdown-item" role="presentation" href="#">Create
Workout</a><a class="dropdown-item" role="presentation" href="#">Excercises</a>
<h6 class="dropdown-header" role="presentation">Blog</h6><a class="dropdown-item" role="presentation" href="#">My Posts</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<main class="page login-page">
<section class="clean-block clean-form dark">
<div class="container">
<div class="block-heading">
<h2 class="text-info">Log In</h2>
<p>Welcome!</p>
</div>
<div id="login_div">
<form>
<div class="form-group"><label for="email">Email</label><input class="form-control item" type="email" id="email"></div>
<div class="form-group"><label for="password">Password</label><input class="form-control" type="password" id="password"></div>
<div class="form-group">
<div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox"><label class="form-check-label" for="checkbox">Remember me</label></div>
</div><button class="btn btn-primary btn-block" id="btlogin" type="button">Log In</button>
</form>
</div>
</div>
<div id="user_div">
<div class="alert alert-success beautiful" role="alert" id="succeed"><Strong>Success!</Strong> You are logged in! To add more details just open your Overview (link)</div>
</div>
</section>
</main>
<footer class="page-footer dark">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Get started</h5>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="registration.html">Sign up</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>About us</h5>
<ul>
<li><a href="#">Company Information</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li><a href="/faq.html">FAQ</a></li>
<li><a href="/contact-us.html">Help desk</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<p>© 2020 Copyright Text</p>
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="assets/js/smoothproducts.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/backend.js"></script>
</body>
</html>
The input fields - email and password, have different id in HTML and bsstudio.
In backend.js change var userEmail = document.getElementById("email").value and var userPass = document.getElementById("password").value; and run with bsstudio. Ideally it should work. If it doesn't do post your output( even if it gives error).