Show current user's icon and name in the navbar

mbarton · Sep 20, 2012 · 62521f1 · 62521f1
1 parent 25d7938
commit 62521f1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/static/js/fb.js b/static/js/fb.js
@@ -7,7 +7,31 @@ window.fbAsyncInit = function() {
     xfbml      : true  // parse XFBML
   });
 
-  // Additional initialization code here
+  user_info_el   = document.getElementById('user_info'),
+  update_user_info = function(response) {
+    if (response.status != 'connected') {
+      user_info_el.innerHTML = '';
+      return;
+    }
+
+    FB.api(
+      {
+        method: 'fql.query',
+        query: 'SELECT name, pic_square FROM user WHERE uid=' + response.authResponse.userID
+      },
+      function(response) {
+        user_info_el.innerHTML = (
+          '<img src="' + response[0].pic_square + '" width="32px" height="32px"> ' +
+          response[0].name
+        );
+      }
+    );
+  };
+
+  FB.Event.subscribe('auth.login', update_user_info);
+  FB.Event.subscribe('auth.logout', update_user_info);
+  FB.getLoginStatus(update_user_info);
+
 };
 
 // Load the SDK Asynchronously

diff --git a/templates/room.html b/templates/room.html
@@ -31,6 +31,7 @@
         		<span class="label label-important"></span>
         	</a>
           <ul class="nav pull-right">
+            <li> <a id="user_info"></a> </li>
             <li> <div class="fb-login-button brand" autologoutlink="true"/> </li>
           </ul>
         </div>