Login Page 2.0

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: "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 id="auth-control">

  <ul class="nav-list">
    <li id="login-trigger"><a href="#" id="auth-text"> Sign In</a></li>
  </ul>


    <div class="imgcontainer">
      <img src="https://www.dropbox.com/s/2pqewvvplqr4enw/logo-transparent.png?dl=0&raw=1" alt="F5 Fantasy">
    </div>



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

img{
    float: left;
    height: 300px;
}



 
.imgcontainer {
  margin: auto;
  width: 50%;
  padding: 10px;
}
.nav-list {
  margin: auto;
  width: 50%;
  padding: 10px
  }
 
 .nav-list {
  background-color: #DDFEE4;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-left: 100px;
}

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

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("Sign 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)
  console.log("the login form was clicked ");
  login_user($('#login_email').val(), $('#login_pwd').val());
});

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

  // use...