Creating & Managing Users with Google Firebase

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 sk8wt

HTML

<script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCEEGiBJVlsaPflcJmksyyywavpqz-kYfI",
    authDomain: "fir-case-7dfa9.firebaseapp.com",
    databaseURL: "https://fir-case-7dfa9.firebaseio.com",
    projectId: "fir-case-7dfa9",
    storageBucket: "fir-case-7dfa9.appspot.com",
    messagingSenderId: "634252260722"
  };
  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>

  <ul class="nav-list">
    <li id="profile-trigger"><a href="#" id="profile-text"> </a></li>
  </ul>

  <div id="profile-content">
    <form id='profile-form' method='post' onsubmit="return false">
      <input type="text" placeholder="Name" id="user-name">
      <input type="text" placeholder="Email" id="user-email">
      <input type="text" placeholder="Employee ID" id="user-id">
      <button type='submit'>Update</button>
    </form>
  </div>

  <div id="search-box">
    <input type="text" name="parts-search" placeholder="Mfg., Model, or Part Number" size=20>
  </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='login-form' method='post' onsubmit="return false">
        <input type="text" placeholder="Email" id="login_email" required>
       ...

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;
}

#profile-form {
  display: none;
}

#profile-content {
  display: none;
  position: absolute;
  margin-left: 10px;
  top: 60px;
  right: 5;
  left: 1000;
  z-index: 999;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #CCC;
  width: 200px;
}

#profile-content input {
  margin-bottom: 3px;
  padding: 10px;
  width: 90%;
  border: 1px solid #CCC
}

#profile-content label {
  cursor: pointer;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  color: #002D45;
}

#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:...

JavaScript

//Code That Deals with Transitioning the State of the Log In/Auth Pane
$('#register-link').click(function() {
  $('#login-form').toggle();
  $('#register-form').toggle();
  $('#profile-form').hide();
});

$('#forgotten-link').click(function() {
  $('#forgotten-form').show();
  $('#before-reset').show();
  $('#login-form').hide();
});

$('#login-link-modal').click(function() {
  $("#after-reset").hide();
  $('#login-form').show();
  $('#profile-form').hide();
});


$('#login-trigger').click(function() {
  handle_auth();
});


$('#profile-trigger').click(function() {
  $('#profile-content').toggle();
  $('#profile-form').toggle();
});


//This listens for an update event on the profile form. It then passes the inputs to the function you see below it. 
$('#profile-form').submit(function() {
  // pass the updated name, email, and employeeID to our profile handler function (below)
  update_profile($('#user-name').val(), $('#user-email').val(), $('#user-id').val());

  //configure when the forms show 
  $('#profile-content').toggle();
  $('#profile-form').toggle();

});

//function that takes the information passed from the above function and uses it to update the firebase data
function update_profile(user_name, user_email, user_ID) {

  //creates references to the current user and database location where data needs to be writen
  var user = firebase.auth().currentUser;
  const db = firebase.firestore();
  var docRef = db.collection("hvac-roles").doc(user.uid);


  //if statements allow a user to submit null values for other fields without having it impact the existing data in the database
  if (!isNaN(user_ID)) {
    //declaration is used to update user information not stored in the firebase auth user profile
    docRef.update({
        employeeID: parseInt(user_ID, 10)
      })
      .then(function() {
        //Data was updated succesfully. Updates the user's employee ID in the textbox for them to view
        docRef.get().then(function(doc) {
          //check to...