Login, logout and simple routing

8 files changed, 54 insertions, 45 deletions

diff --git a/client/button.js b/client/button.js
index 8dc64a5..bc3828b 100644
--- a/client/button.js
+++ b/client/button.js
@@ -1,13 +1,20 @@
-Session.setDefault('counter', 0);
+Template.layout.events({
+  'click .logout': function (event) {
+    Meteor.logout();
+    Router.go('login');
+  }
+})
 
-Template.hello.helpers({
-  counter: function () {
-    return Session.get('counter');
+Template.login.events({
+  'click .login-instagram': function (event) {
+    Meteor.loginWithInstagram({}, function (err) {
+      if (err)
+        Session.set('errorMessage', err.reason || 'Unknown error');
+    });
+    return false;
   }
 });
 
-Template.hello.events({
-  'click button': function () {
-    Session.set('counter', Session.get('counter') + 1);
-  }
-});
\ No newline at end of file
+Accounts.onLogin(function() {
+  Router.go('one');
+});
diff --git a/client/colors.css b/client/colors.css
index c18dec8..db0e6f8 100644
--- a/client/colors.css
+++ b/client/colors.css
@@ -1,39 +1,39 @@
 /* Base styles */
-#login-buttons-instagram {
+.login-instagram {
   font-size: 1.2em;
   font-family: sans-serif;
   color:#333;
 	text-shadow:1px 1px #fff;
 	text-decoration: none;
-	display:inline-block; 
+	display:inline-block;
 	padding:0.5em 1.75em 0.5em 1em;
 	border-radius: 0.25em;
 	background: #f8f8f8;
 	border:1px solid #ccc;
 	border-right:0.25em solid #00558D; /* blue stripe */
 	position: relative;
-	margin:0 0 1px; 
+	margin:0 0 1px;
 }
 
-#login-buttons-instagram:before, #login-buttons-instagram:after {
+.login-instagram:before, .login-instagram:after {
 	content:'';
 	display:block;
 	position: absolute;
 }
 
 /* Add Stripes */
-#login-buttons-instagram:before {
+.login-instagram:before {
 	width:0.25em;
 	height: 100%;
-	background:#FBB03B; /* yellow stripe */ 
-	border-left:0.25em solid #D4145A; /* red stripe */ 
-	border-right:0.25em solid #00A99D; /* green stripe */ 
+	background:#FBB03B; /* yellow stripe */
+	border-left:0.25em solid #D4145A; /* red stripe */
+	border-right:0.25em solid #00A99D; /* green stripe */
 	top:0;
 	right:0;
 }
 
 /* Add Hightlights */
-#login-buttons-instagram:after {
+.login-instagram:after {
 	width:100%;
 	height: 100%;
 	top: 0;
@@ -54,7 +54,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', e
 
 
 /* Animate - Fade */
-#login-buttons-instagram, #login-buttons-instagram:before {
+.login-instagram, .login-instagram:before {
     -webkit-transition-property: background, border;
     -webkit-transition: 0.1s ease-in;
     -moz-transition-property: background, border;
@@ -67,21 +67,21 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', e
 }
 
 /* Hover / Focus */
-#login-buttons-instagram:hover, #login-buttons-instagram:focus  {
+.login-instagram:hover, .login-instagram:focus  {
 	background: #fff;
 }
 
-#login-buttons-instagram:hover {
+.login-instagram:hover {
 	border-right:0.25em solid #09c;
 }
 
-#login-buttons-instagram:hover:before {
-	background:#fc6; /* yellow stripe */ 
-	border-left:0.25em solid #f06; /* red stripe */ 
-	border-right:0.25em solid #0cc; /* green stripe */ 
+.login-instagram:hover:before {
+	background:#fc6; /* yellow stripe */
+	border-left:0.25em solid #f06; /* red stripe */
+	border-right:0.25em solid #0cc; /* green stripe */
 }
 
-#login-buttons-instagram:hover:after {
+.login-instagram:hover:after {
 background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(49%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05)));
 background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
@@ -93,6 +93,6 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', e
 }
 
 /* Active */
-#login-buttons-instagram:active {
-	margin:1px 0 0; 
-}
\ No newline at end of file
+.login-instagram:active {
+	margin:1px 0 0;
+}
diff --git a/client/colors.html b/client/colors.html
deleted file mode 100644
index d679971..0000000
--- a/client/colors.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<head>
-  <title>colors</title>
-</head>
-
-<body>
-  <h1>Welcome to Meteor!</h1>
-
-  {{> loginButtons}}
-
-  {{> hello}}
-</body>
-
-<template name="hello">
-  <button>Click Me</button>
-  <p>You've pressed the button {{counter}} times.</p>
-</template>
diff --git a/client/templates/layout.html b/client/templates/layout.html
new file mode 100644
index 0000000..b9678a3
--- /dev/null
+++ b/client/templates/layout.html
@@ -0,0 +1,5 @@
+<template name="layout">
+  <h1>Colors</h1>
+  <button class="logout">logout</button>
+{{> yield}}
+</template>
diff --git a/client/templates/login.html b/client/templates/login.html
new file mode 100644
index 0000000..1f42513
--- /dev/null
+++ b/client/templates/login.html
@@ -0,0 +1,4 @@
+<template name="login">
+  <h2>Welcome</h2>
+  <button class="login-instagram">Sign in with Instagram</button>
+</template>
diff --git a/client/templates/main.html b/client/templates/main.html
new file mode 100644
index 0000000..afd997f
--- /dev/null
+++ b/client/templates/main.html
@@ -0,0 +1,3 @@
+<head>
+  <title>Colors</title>
+</head>
diff --git a/client/templates/one.html b/client/templates/one.html
new file mode 100644
index 0000000..740ade0
--- /dev/null
+++ b/client/templates/one.html
@@ -0,0 +1,3 @@
+<template name="one">
+  <h1>one</h1>
+</template>
diff --git a/client/templates/two.html b/client/templates/two.html
new file mode 100644
index 0000000..4e46932
--- /dev/null
+++ b/client/templates/two.html
@@ -0,0 +1,3 @@
+<template name="two">
+  <h1>two</h1>
+</template>