pure js Authentification FireBase

by polinux

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/v0/firebase-auth-client.js"></script>
	<div id="page-wrap">
	
	<h1>Authentification FireBase</h1>
	<div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">S'enregistrer</label>
           
           <div class="content">
			<form name='register'>
				<fieldset>
					<label for="email">Email</label>
					<input type="text" name="email" />
					<label for="password">Password</label>
					<input type="password" name="password" value="" />
					<button id='bt-register'>OK</button>
				</fieldset>
			</form>
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1" />
           <label for="tab-2">Login</label>
           <div class="content">
			<form name='login'>
				<fieldset>
					<label for="email">Email</label>
					<input type="text" name="email" />
					<label for="password">Password</label>
					<input type="password" name="password" value=""  />
					<button id='bt-login'>OK</button>
				</fieldset>
			</form>
           </div> 
       </div>
        
        <div class="tab">
            <input type="radio" id="tab-3" name="tab-group-1">
          <label for="tab-3">Stuff</label>
          <div class="content">
           
 			<form name='info'>
				<fieldset>
					<output name="email"></output>
					<label for="userID:">Id</label>
					<input type="text" name="userID" value="" />
					<label for="provider">provider</label>
					<input type="text" name="provider" value="" />
					<button id='bt-logout'>DĂ©connexion</button> 
				</fieldset>
			</form>
           </div> 
       </div>
        
    </div>
    </div>

CSS

body {
    color: #353535;
    font-family: Helvetica,sans-serif;
}
h1 {
	font-size:18px;
    line-height: 1.3em;
}

#page-wrap {
	width:320px;
}
/* tab */
.tabs {
  position: relative;   
  min-height: 260px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  padding: 16px;
  border: 1px solid #ccc; 
  
  overflow: hidden;
}
.content > * {
  opacity: 0;
  
  -webkit-transform: translate3d(0, 0, 0);

  -webkit-transform: translateX(-100%);
  -moz-transform:    translateX(-100%);
  -ms-transform:     translateX(-100%);
  -o-transform:      translateX(-100%);
  
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -ms-transition:     all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
[type=radio]:disabled ~ label {
  opacity: .5;
}

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
  font-weight:bold;
  opacity: 1;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
  opacity: 1;
  
  -webkit-transform: translateX(0);
  -moz-transform:    translateX(0);
  -ms-transform:     translateX(0);
  -o-transform:      translateX(0);
}

/* login */
.tab fieldset {
	border:none;
	background-color:#ddd;
	border-radius:6px;
}

.tab fieldset label {
	border:none;
	display:block;
  background: transparent; 
  padding: 0px; 
  position: relative;
  left: 12px;
  bottom:-8px;
font-size:.8em;
}

.tab fieldset input {
  margin: 6px 4px; 
	width:96%;
}

JavaScript

var ref = new Firebase("https://YOURBASE.firebaseio.com");

// global user (is this a good thing?)
myUser = -1;

document.getElementById('bt-login').addEventListener( 'click', function(e){
	var f = document.forms.login;
	
	e.preventDefault();
	e.stopPropagation();
	
	return doLogin(f.email.value, f.password.value );
});
	
document.getElementById('bt-register').addEventListener( 'click', function(e){
	var f = document.forms.register;

	e.preventDefault();
	e.stopPropagation();
	
	return doregister(f.email.value, f.password.value );
});
	
document.getElementById('bt-logout').addEventListener( 'click', function(e){

	e.preventDefault();
	e.stopPropagation();
	authClient.logout();
			document.getElementById('tab-1').disabled =  false;
			document.getElementById('tab-1').checked =  true;
			document.getElementById('tab-2').disabled =  false;
			document.getElementById('tab-3').disabled =  true;
	return ;
});

function doregister(email, password) {
	authClient.createUser(email, password, function (error, user) {
		if (!error) {
			console.log('logging new registered user');
			doLogin(email, password);
		} else {
			alert(error);
		}
	});
};

function doLogin(email, password) {
    authClient.login('password', {
        email: email,
        password: password
    });
};

var authClient = new FirebaseSimpleLogin(ref, function(error, user) {

	var f = document.forms.info;
	
	f.email.value = '';
	f.userID.value = '';
	f.provider.value = '';
	
	if (error) {
    // an error occurred while attempting login
        alert(error);
	} else {
		if (user) {
			
			f.email.value = user.email;
			f.userID.value = user.id;
			f.provider.value = user.provider;

			document.getElementById('tab-1').disabled =  true;
			document.getElementById('tab-2').disabled =  true;
			document.getElementById('tab-3').disabled =  false;
			document.getElementById('tab-3').checked =  true;
		} else {
			// user is logged out

			document.getElementById('tab-1').disabled = ...