RegisterForm 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 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>

<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.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 src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCJ_bzHJtVVuN-er-lhVPZyUk29bxGsVCA",
    authDomain: "livesquad-9522f.firebaseapp.com",
    databaseURL: "https://livesquad-9522f-default-rtdb.firebaseio.com",
    projectId: "livesquad-9522f",
    storageBucket: "livesquad-9522f.appspot.com",
    messagingSenderId: "655565503104",
    appId: "1:655565503104:web:ba5f6aed1b8f89fa058465",
    measurementId: "G-TP3XVXFPSN"
  };
  firebase.initializeApp(config);

</script>




<div class="container">
  <div class="nav-wrapper">
    <div class="left-side">
      <div class="nav-link-wrapper">
        <a href="index.html">Home</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="about.html">About</a>
      </div>
    </div>

    <div class="right-side">
      <div class="nav-link-wrapper">
        <div>My Account</div>
      </div>
    </div>
  </div>
</div>
<div class="header">
  <center>

    <img src="https://lh3.googleusercontent.com/W4N3yxX7EP6i87K1D4wpTz8IMQVKquZNDNZlA6HA0fGlVBOvIFjjYa9-Qe65xTKnxUvR8n6taGeR_8iB8I6btmAcaw8OzXdw_hD9QZX93Wlc0VX2ixNBDgKzpXaLmOdiYqt3wSIIOFc" style="width:506px; height:72px;" />
    <img src="https://lh4.googleusercontent.com/atGT2jRr72diHvlBM6KmRKBoZGzmBCiTmnkydp63dtZwkp5nD3CSyf0yeFuZUcTF3VVKT5kajOIkdM4kjy9Y5LvaP23kK2OSicHo_s10" style="width:100px; height:100px;" />

  </center>
</div>
<link...

CSS

/* Master Styles*/

.container {
    display: grid;
}

/*Nav Styles*/

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 38px;
    font-family: 'Noto Serif JP', serif;
}

.left-side {
    display: flex;
}

.nav-wrapper > .left-side > div {
    margin-right: 20px;
    font-size: 0.9em;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
    font-family: 'Noto Serif JP', serif;
}

nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

nav-link-wrapper a:hover {
    color: black;
}

.nav-wrapper > .right-side > div {
    font-family: 'Noto Serif JP', serif;
    color: #8a8a8a;
    margin-right: 20px;
    font-size: 0.9em;
}

.header {
    background-color: transparent;
    max-height: 500px;
    font-family: 'Noto Serif JP', serif;
    color: #fff;
    text-align: center;
    font-size: 300%;
    text-shadow: 0px 5px 15px #000;
}

body {
    
    margin: 10px;
    font-family: 'Noto Serif JP', serif;
    background-size: 100%;
}

h1, h2, h3, h4, h5, h6, a {
    margin: 0;
    padding: 0;
}

.login {
    margin: 0 auto;
    max-width: 500px;
}

.login-header {
    color: #fff;
    text-align: center;
    font-size: 150%;
}
 

.login-form {
    border: .5px solid #fff;
    background: whitesmoke;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #000;
    font-family: 'Noto Serif JP', serif;
}

    .login-form h3 {
        text-align: left;
        margin-left: 40px;
        color: black;
        font-family: 'Noto Serif JP', serif;
    }

.login-form {
    box-sizing: border-box;
    padding-top: 15px;
    padding-bottom: 10%;
    margin: 5% auto;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
}

.login input[type="text"],
.login input[type="password"] {
    max-width: 400px;
    width: 80%;
    line-height: 3em;
    font-family: 'Noto Serif JP', serif;
    margin: 1em 2em;
    border-radius: 5px;
    border: 2px solid #f2f2f2;
    outline: none;
   ...

JavaScript

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

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

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


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

//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)  
    $('#login-content').toggle();
    //Reset/hide other forms and div's so the login page displays right.
    $('#register-form').hide();
    $('#before-reset').hide();
    $("#after-reset").hide();
    $("#if-error").hide();
    $('#login-form').show();
  } else {
    // Sign out the current user
    firebase.auth().signOut().then(function() {
      // Sign-out successful.
      console.log("Signed out " + user.email)
    }).catch(function(error) {
      // An error happened.
      alert("Something went wrong.");
    });
    $("#auth-text").text("Log In");
  }
}

//This listens for a submit event on the login form. For more on this type of event, see https://api.jquery.com/submit/. It then passes the inputs to the function you see below it. 
$('#login-form').submit(function() {
  // pass the login email and pwd to our login handler function (below)
  login_user($('#login_email').val(), $('#login_pwd').val());
});

function login_user(email, pwd) {
  console.log("attempting to login user " + email);

  // use the Firebase API to sign in the user
 ...