Creating & Managing Users with Google Firebase (Plain JS)
This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable
by Alex Cowan
HTML
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<!-- Add Firebase products that you want to use: in this sample we're just using the auth module -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBX_hyilSvXt0bE5fn3kUae-MJzU8qBuzI",
authDomain: "fir-case-prototype.firebaseapp.com",
databaseURL: "https://fir-case-prototype.firebaseio.com",
projectId: "fir-case-prototype",
storageBucket: "",
messagingSenderId: "474114067786"
};
firebase.initializeApp(config);
</script>
<div class="top-bar">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
</ul>
<div id="search-box">
<input type="text" name="parts-search" placeholder="Mfg., Model, or Part Number" size=30>
</div>
<div id="auth-control">
<img src="https://www.alexandercowan.com/wp-content/uploads/2018/04/login-icon.png" alt="auth" style="width:30px;float: left;">
<ul class="nav-list">
<li id="login-trigger"><a href="#" id="auth-text">Log In</a></li>
</ul>
<div id="login-content">
<!-- On Forms: -->
<!-- onsubmit="return false" will stop the form submission but allow us to pick up the submission in JQuery with $('#login-form').submit(), otherwise JSFiddle can break. -->
<!-- allows us to easily switch between login and registration //removed for new approach -->
<!-- <input type='checkbox' id='form-switch'> -->
<!-- Login -->
<form id='loginForm' onsubmit="return false">
<input type="text" placeholder="Email" id="login_email" required>
<input type="password" placeholder="Password" id="login_pwd" required>
<button type='submit'>Log In</button>
<a id='forgotten-link'>Forgot Password?</a>
<h3><a class='auth-link'...CSS
.top-bar, #search-box, .nav-list li, .nav-list a {
background-color: #002D45;
font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
font-weight: bold;
font-size: 110%;
color: #ffffff;
}
.top-bar {
color: #FFFFFF;
height: 40px;
margin: 0px;
padding: 10px;
display: flex;
align-items: center;
}
.nav-list {
list-style-type: none;
padding: 0;
display: inline;
}
.nav-list li {
float: left;
}
.nav-list a {
display: inline;
padding: 8px;
text-decoration: none;
}
#search-box {
margin-left: auto;
margin-right: 0;
padding: 10px;
}
#login-content {
display: none;
position: absolute;
margin-right: 10px;
top: 60px;
right: 0;
left: 1000;
z-index: 999;
background: #ffffff;
padding: 15px;
border: 1px solid #CCC;
width: 200px;
}
/* Keeps this in sync w/ the login-content div */
#login-form {
display: none;
}
#login-content input {
margin-bottom: 3px;
padding: 10px;
width: 90%;
border: 1px solid #CCC;
}
#login-content label {
cursor: pointer;
font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
color: #002D45;
}
#login-content #register-form {
display: none;
}
#login-content #forgotten-form {
display: none;
}
#login-content, #after-reset, #if-error, #if-reg-error {
display: none;
}
#login-content .auth-link {
cursor: pointer;
font-family: Proxima Nova,helvetica neue,helvetica, sans-serif;
color: #002D45;
}
#forgotten-link, #reset-response, #after-reset, #login-link-modal, #if-error, #if-reg-error {
cursor: pointer;
font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
color: #002D45;
font-size: 80%;
}
#login-link-modal {
font-size: 120%;
}
#toggle-search {
position: relative;
padding: 5px 0px;
height: 100%;
width: 100%;
}
#toggle-search img {
margin-left: 94%;
}
#search-controls {
background-color: #ffffff;
padding: 5px 15px 15px 15px;
font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
font-size: 70%;
...JavaScript
//Code That Deals with Transitioning the State of the Log In/Auth Pane
document.getElementById('login-trigger').addEventListener('click', authUser);
function authUser() {
handle_auth();
}
document.getElementById('register-link').addEventListener('click', onReg);
function onReg() {
document.getElementById('loginForm').style.display = "none";
document.getElementById('registerForm').style.display = "block";
}
document.getElementById('forgotten-link').addEventListener('click', onForget);
function onForget() {
document.getElementById('forgottenForm').style.display = "block";
document.getElementById('before-reset').style.display = "block";
document.getElementById('loginForm').style.display = "none";
}
//Code that deals with initial display for modal pane that deals with authentication and, for a user that's logged in, logging them out.
function handle_auth() {
//The function below lets us know if/who is logged in- you can read more about it here: https://firebase.google.com/docs/auth/web/manage-users.
var user = firebase.auth().currentUser;
console.log("dealing with " + user);
if (!user) {
//If there's no user (user var is null)
ltState = document.getElementById('login-content').style.display;
console.log(ltState);
if (ltState == "block") {
//the model is showing, so hide it
document.getElementById('login-content').style.display = "none";
} else {
//the model is hiding, so show it
document.getElementById('login-content').style.display = "block";
//and whatever form they were seeing, it's reset and so will show log in again
document.getElementById('registerForm').style.display = "none";
document.getElementById('before-reset').style.display = "none";
document.getElementById('after-reset').style.display = "none";
document.getElementById('if-error').style.display = "none";
document.getElementById('loginForm').style.display = "block";
}
} else {
//else, if...