Solution- 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 -->
<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' id='register-link'>Register</a></h3>
     ...

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

// Add an event listener to the login trigger button to handle user authentication
document.getElementById("login-trigger").addEventListener("click", authUser)

function authUser() {
  // Call the handle_auth function to manage login/logout
  handle_auth()
}

// Add an event listener to the register link to switch to the registration form
document.getElementById("register-link").addEventListener("click", onReg)

function onReg() {
  // Hide the login form
  document.getElementById("loginForm").style.display = "none"
  // Show the registration form
  document.getElementById("registerForm").style.display = "block"
}

// Add an event listener to the "forgot password" link to display the recovery form
document.getElementById("forgotten-link").addEventListener("click", onForget)

function onForget() {
  // Show the password recovery form and additional sections
  document.getElementById("forgottenForm").style.display = "block"
  document.getElementById("before-reset").style.display = "block"
  // Hide the login form
  document.getElementById("loginForm").style.display = "none"
}

// Manage the authentication modal and handle login/logout functionality
function handle_auth() {
  // Check if a user is currently logged in using Firebase Auth
  var user = firebase.auth().currentUser
  console.log("dealing with " + user)

  if (!user) {
    // No user logged in
    ltState = document.getElementById("login-content").style.display
    console.log(ltState)
    if (ltState == "block") {
      // If login modal is open, close it
      document.getElementById("login-content").style.display = "none"
    } else {
      // Otherwise, open the login modal and reset all forms
      document.getElementById("login-content").style.display = "block"
      document.getElementById("registerForm").style.display = "none"
      document.getElementById("before-reset").style.display = "none"
      document.getElementById("after-reset").style.display = "none"
     ...