Move login button code from todos into new login buttons package.

examples/todos/.meteor/packages

@@ -8,3 +8,4 @@ backbone
 accounts
 accounts-facebook
 accounts-google
+login-buttons

examples/todos/client/todos.css

@@ -259,24 +259,6 @@ h3 {
     width: 80px;
 }
 
-/* XXX remove once we have the login-buttons package */
-.fb-login, #logout {
-    cursor: pointer;
-    margin: 5px 10px 5px 5px;
-    padding: 2px 7px;
-    font-size: 80%;
-    color: white;
-
-    background: #3B5998;
-    margin-top: 10px;
-
-    border: 1px solid #777;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-}
-
 .toggle-privacy-wrapper {
     float: right;
     width: 110px;

examples/todos/client/todos.html

@@ -112,17 +112,7 @@
       </div>
     {{/each}}
     <div style="float: right">
-      {{> login}}
+      {{> login_buttons}}
     </div>
   </div>
 </template>
-
-<template name="login">
-  {{#if user}}
-    <div id="logout">logout</div>
-  {{else}}
-    <div id="fb-login">login using facebook</div>
-    <div id="google-login">login using google</div>
-  {{/if}}
-</template>
-

examples/todos/client/todos.js

@@ -299,36 +299,6 @@ Template.tag_filter.events = {
   }
 };
 
-////////// Login //////////
-
-Template.login.events = {
-  'click #fb-login': function () {
-    try {
-      Meteor.loginWithFacebook();
-    } catch (e) {
-      if (e instanceof Meteor.accounts.facebook.SetupError)
-        alert("You haven't set up your Facebook app details. See fb-app.js and server/fb-secret.js");
-      else
-        throw e;
-    }
-  },
-
-  'click #google-login': function () {
-    try {
-      Meteor.loginWithGoogle();
-    } catch (e) {
-      if (e instanceof Meteor.accounts.google.SetupError)
-        alert("You haven't set up your Google API details. See google-api.js and server/google-secret.js");
-      else
-        throw e;
-    };
-  },
-
-  'click #logout': function() {
-    Meteor.logout();
-  }
-};
-
 ////////// Tracking selected list in URL //////////
 
 var TodosRouter = Backbone.Router.extend({

packages/login-buttons/login-buttons.css

@@ -0,0 +1,18 @@
+.login-button {
+    float:left;
+
+    cursor: pointer;
+    margin: 5px 10px 5px 5px;
+    padding: 2px 7px;
+    font-size: 80%;
+    color: white;
+
+    background: #3B5998;
+    margin-top: 10px;
+
+    border: 1px solid #777;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -o-border-radius: 4px;
+}

packages/login-buttons/login-buttons.html

@@ -0,0 +1,10 @@
+<template name="login_buttons">
+  <div id="login-buttons">
+    {{#if user}}
+      <div class="login-button" id="login-buttons-logout">logout</div>
+    {{else}}
+      <div class="login-button" id="login-buttons-fb-login">login using facebook</div>
+      <div class="login-button" id="login-buttons-google-login">login using google</div>
+    {{/if}}
+  </div>
+</template>

packages/login-buttons/login-buttons.js

@@ -0,0 +1,31 @@
+(function () {
+
+  Template.login_buttons.events = {
+    'click #login-buttons-fb-login': function () {
+      try {
+        Meteor.loginWithFacebook();
+      } catch (e) {
+        if (e instanceof Meteor.accounts.facebook.SetupError)
+          alert("You haven't set up your Facebook app details. See fb-app.js and server/fb-secret.js");
+        else
+          throw e;
+      }
+    },
+
+    'click #login-buttons-google-login': function () {
+      try {
+        Meteor.loginWithGoogle();
+      } catch (e) {
+        if (e instanceof Meteor.accounts.google.SetupError)
+          alert("You haven't set up your Google API details. See google-api.js and server/google-secret.js");
+        else
+          throw e;
+      };
+    },
+
+    'click #login-buttons-logout': function() {
+      Meteor.logout();
+    }
+  };
+
+})();

packages/login-buttons/package.js

@@ -0,0 +1,12 @@
+Package.describe({
+  summary: "Simple template to add login buttons to an app."
+});
+
+Package.on_use(function (api) {
+  api.use(['accounts', 'underscore', 'liveui', 'templating'], 'client');
+
+  api.add_files([
+    'login-buttons.css',
+    'login-buttons.html',
+    'login-buttons.js'], 'client');
+});