Creating & Managing Users with Google Firebase + Domain Validator
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
<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.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='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' id='register-link'>Register</a></h3>
</form>
<!-- Registration -->
<form id='register-form' method='post' onsubmit="return false">
<input type="text" placeholder="Email" id="register_email" required>
<input type="password" placeholder="Password" id="register_pwd" required>
<input type="password"...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%;
display: flex;
...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
firebase.auth().signInWithEmailAndPassword(email, pwd).then(function(user)...