Merge pull request firebase#33 from LukeSchlangen/master

nicolasgarnier · web-flow · commit 28c1e7a41dc0 · 2016-07-05T15:43:02.000+02:00
feat(log out): Adding log out button to database project
diff --git a/database/index.html b/database/index.html
@@ -74,6 +74,7 @@ <h3 class="logo">Database Web Quickstart</h3>
 
     <div class="mdl-layout__header-row titlebar">
       <h3 class="logo">Database Web Quickstart</h3>
+      <button id="sign-out-button" class="mdl-button--raised mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign out</button>
     </div>
 
     <!-- Navigation Bar -->
diff --git a/database/main.css b/database/main.css
@@ -126,6 +126,10 @@ h3 {
     margin-left: 10px;
     color: inherit;
 }
+#sign-out-button {
+    margin: 10px;
+    color: inherit;
+}
 .mdl-button .material-icons {
     margin-top: -2px;
 }
diff --git a/database/scripts/main.js b/database/scripts/main.js
@@ -20,6 +20,7 @@ var messageForm = document.getElementById('message-form');
 var messageInput = document.getElementById('new-post-message');
 var titleInput = document.getElementById('new-post-title');
 var signInButton = document.getElementById('sign-in-button');
+var signOutButton = document.getElementById('sign-out-button');
 var splashPage = document.getElementById('page-splash');
 var addPost = document.getElementById('add-post');
 var addButton = document.getElementById('add');
@@ -292,6 +293,11 @@ window.addEventListener('load', function() {
     firebase.auth().signInWithPopup(provider);
   });
 
+  // Bind Sign out button.
+  signOutButton.addEventListener('click', function() {
+    firebase.auth().signOut();
+  });
+
   // Listen for auth state changes
   firebase.auth().onAuthStateChanged(function(user) {
     if (user) {

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,10 @@ h3 {`
`126`	`126`	`margin-left: 10px;`
`127`	`127`	`color: inherit;`
`128`	`128`	`}`
	`129`	`+#sign-out-button {`
	`130`	`+ margin: 10px;`
	`131`	`+ color: inherit;`
	`132`	`+}`
`129`	`133`	`.mdl-button .material-icons {`
`130`	`134`	`margin-top: -2px;`
`131`	`135`	`}`