8000 Merge branch 'master' of https://github.com/firebase/quickstart-js · cloudwizard/quickstart-js@c924449 · GitHub
[go: up one dir, main page]
Skip to content

Commit c924449

Browse files
author
Nicolas Garnier
committed
2 parents 9e0c8c0 + 28c1e7a commit c924449

File tree

3 files changed

+25
-9
lines changed

3 files changed

+25
-9
lines changed

‎database/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ <h3 class="logo">Database Web Quickstart</h3>
7474

7575
<div class="mdl-layout__header-row titlebar">
7676
<h3 class="logo">Database Web Quickstart</h3>
77+
<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>
7778
</div>
7879

7980
<!-- Navigation Bar -->

‎database/main.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,10 @@ h3 {
126126
margin-left: 10px;
127127
color: inherit;
128128
}
129+
#sign-out-button {
130+
margin: 10px;
131+
color: inherit;
132+
}
129133
.mdl-button .material-icons {
130134
margin-top: -2px;
131135
}

‎database/scripts/main.js

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ var messageForm = document.getElementById('message-form');
2020
var messageInput = document.getElementById('new-post-message');
2121
var titleInput = document.getElementById('new-post-title');
2222
var signInButton = document.getElementById('sign-in-button');
23+
var signOutButton = document.getElementById('sign-out-button');
2324
var splashPage = document.getElementById('page-splash');
2425
var addPost = document.getElementById('add-post');
2526
var addButton = document.getElementById('add');
@@ -34,14 +35,15 @@ var myTopPostsMenuButton = document.getElementById('menu-my-top-posts');
3435
* Saves a new post to the Firebase DB.
3536
*/
3637
// [START write_fan_out]
37-
function writeNewPost(uid, username, title, body) {
38+
function writeNewPost(uid, username, picture, title, body) {
3839
// A post entry.
3940
var postData = {
4041
author: username,
4142
uid: uid,
4243
body: body,
4344
title: title,
44-
starCount: 0
45+
starCount: 0,
46+
authorPic: picture
4547
};
4648

4749
// Get a key for a new Post.
@@ -82,7 +84,7 @@ function toggleStar(postRef, uid) {
8284
/**
8385
* Creates a post element.
8486
*/
85-
function createPostElement(postId, title, text, author, authorId) {
87+
function createPostElement(postId, title, text, author, authorId, authorPic) {
8688
var uid = firebase.auth().currentUser.uid;
8789

8890
var html =
@@ -128,7 +130,8 @@ function createPostElement(postId, title, text, author, authorId) {
128130
// Set values.
129131
postElement.getElementsByClassName('text')[0].innerText = text;
130132
postElement.getElementsByClassName('mdl-card__title-text')[0].innerText = title;
131-
postElement.getElementsByClassName('username')[0].innerText = author;
133+
postElement.getElementsByClassName('username')[0].innerText = author || 'Anonymous';
134+
postElement.getElementsByClassName('avatar')[0].style.backgroundImage = `url("${authorPic || './silhouette.jpg'}")`;
132135

133136
// Listen for comments.
134137
// [START child_event_listener_recycler]
@@ -218,7 +221,7 @@ function addCommentElement(postElement, id, text, author) {
218221
comment.classList.add('comment-' + id);
219222
comment.innerHTML = '<span class="username"></span><span class="comment"></span>';
220223
comment.getElementsByClassName('comment')[0].innerText = text;
221-
comment.getElementsByClassName('username')[0].innerText = author;
224+
comment.getElementsByClassName('username')[0].innerText = author || 'Anonymous';
222225

223226
var commentsContainer = postElement.getElementsByClassName('comments-container')[0];
224227
commentsContainer.appendChild(comment);
@@ -256,9 +259,10 @@ function startDatabaseQueries() {
256259

257260
var fetchPosts = function(postsRef, sectionElement) {
258261
postsRef.on('child_added', function(data) {
262+
var author = data.val().author || 'Anonymous';
259263
var containerElement = sectionElement.getElementsByClassName('posts-container')[0];
260264
containerElement.insertBefore(
261-
createPostElement(data.key, data.val().title, data.val().body, data.val().author, data.val().uid),
265+
createPostElement(data.key, data.val().title, data.val().body, author, data.val().uid, data.val().authorPic),
262266
containerElement.firstChild);
263267
});
264268
};
@@ -272,10 +276,11 @@ function startDatabaseQueries() {
272276
* Writes the user's data to the database.
273277
*/
274278
// [START basic_write]
275-
function writeUserData(userId, name, email) {
279+
function writeUserData(userId, name, email, imageUrl) {
276280
firebase.database().ref('users/' + userId).set({
277281
username: name,
278-
email: email
282+
email: email,
< 9E88 /td>283+
profile_picture : imageUrl
279284
});
280285
}
281286
// [END basic_write]
@@ -288,11 +293,16 @@ window.addEventListener('load', function() {
288293
firebase.auth().signInWithPopup(provider);
289294
});
290295

296+
// Bind Sign out button.
297+
signOutButton.addEventListener('click', function() {
298+
firebase.auth().signOut();
299+
});
300+
291301
// Listen for auth state changes
292302
firebase.auth().onAuthStateChanged(function(user) {
293303
if (user) {
294304
splashPage.style.display = 'none';
295-
writeUserData(user.uid, user.displayName, user.email);
305+
writeUserData(user.uid, user.displayName, user.email, user.photoURL);
296306
startDatabaseQueries();
297307
} else {
298308
splashPage.style.display = '';
@@ -311,6 +321,7 @@ window.addEventListener('load', function() {
311321
var username = snapshot.val().username;
312322
// [START_EXCLUDE]
313323
writeNewPost(firebase.auth().currentUser.uid, firebase.auth().currentUser.displayName,
324+
firebase.auth().currentUser.photoURL,
314325
titleInput.value, postText).then(function() {
315326
myPostsMenuButton.click();
316327
});

0 commit comments

Comments
 (0)
0