Auth

dashboard/settings.jade

@@ -6,8 +6,8 @@ html(lang="en")
     include header.jade
     section
       h1 Settings
-      p some text
+      button#logout log out
 
-    script(src="/src/js/dashboard.js")
+    script(src="/src/js/settings.js")
     script(src="/src/js/scripts.js")
     include ../includes/foot.jade

login/index.jade

@@ -0,0 +1,24 @@
+doctype html
+html(lang="en")
+  - var stylesheet = '/src/css/login.css'
+  include ../includes/head.jade
+  body.dev
+    h1 Welcome to punchtime
+
+    p Punchtime allows you to track the time of your employees in a simple way. Log in or create an account here, or #[a(href="/") learn more].
+
+    form
+      fieldset#login
+        legend log in
+        input(type="button", value="login with facebook")#facebook
+        input(type="button", value="login with google")#google
+        input(type="button", value="login with twitter")#twitter
+        fieldset#login-email
+          label(for="email") email
+          input(type="email", name="email", placeholder="[email protected]")#email
+          label(for="password") password
+          input(type="password", name="password", placeholder="your password")#password
+          input(type="button", value="login with email")#email-button
+    script(src="/src/js/login.js")
+    script(src="/src/js/scripts.js")
+    include ../includes/foot.jade

src/js/dashboard.js

@@ -1,7 +1,15 @@
-// todo: require d3 and d3-timeline
 let Firebase = require('firebase');
 let base = new Firebase('https://scorching-inferno-1467.firebaseio.com/');
 
+let auth = base.getAuth();
+
+if (auth) {
+  console.log('logged in with: '+auth.uid);
+} else {
+  console.warn('not logged in');
+  location.href = '/login/';
+}
+
 let company = {
   "name": "my-company",
   "id": "-KBdSPf90dvJCeH3J8m7"
@@ -73,7 +81,7 @@ let drawChart = () => {
     [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
 
   chart.draw(dataTable);
-}
+};
 google.charts.load('current', {'packages':['timeline']});
 google.charts.setOnLoadCallback(drawChart);
 

src/js/login.js

@@ -0,0 +1,108 @@
+let Firebase = require('firebase');
+let base = new Firebase('https://scorching-inferno-1467.firebaseio.com/');
+
+let auth = base.getAuth();
+
+if (auth) {
+  console.log('logged in with: '+auth.uid);
+  history.go(-1);
+} else {
+  console.log('not logged in');
+}
+
+/**
+ * logging in and out
+ */
+(()=>{
+
+  /**
+   * get name from authData
+   */
+  let getName = authData => {
+    switch(authData.provider) {
+      case 'password':
+        return authData.password.email.replace(/@.*/, '');
+      case 'twitter':
+        return authData.twitter.displayName;
+      case 'facebook':
+        return authData.facebook.displayName;
+      case 'google':
+        return authData.google.displayName;
+    }
+  };
+
+  /**
+   * logging in with any service
+   * @param {string} service the auth service [google,twitter,facebook]
+   */
+  let auth = service => {
+    console.log('logging in');
+    base.authWithOAuthPopup(service, function(error, authData) {
+      if (error) {
+        console.warn('Login Failed!', error);
+      } else {
+        // make a new account if it didn't exist yet
+        base.child('users').child(authData.uid).once('value', snapshot=>{
+          if (!snapshot.exists()) {
+            base.child('users').child(authData.uid).set({
+              provider: authData.provider,
+              name: getName(authData)
+            });
+          }
+        });
+      }
+    });
+  };
+
+  /**
+   * adding event listeners to the log in buttons
+   */
+  document.getElementById('google').addEventListener('click',()=>{
+    auth('google');
+  });
+  document.getElementById('facebook').addEventListener('click',()=>{
+    auth('facebook');
+  });
+  document.getElementById('twitter').addEventListener('click',()=>{
+    auth('twitter');
+  });
+
+  document.getElementById('email-button').addEventListener('click',()=>{
+    base.authWithPassword({
+      email    : document.querySelector('[name="email"]').value,
+      password : document.querySelector('[name="password"]').value
+    },(error)=> {
+      if (error) {
+        console.log('Login Failed!', error);
+        base.createUser({
+          email    : document.querySelector('[name="email"]').value,
+          password : document.querySelector('[name="password"]').value
+        },(error)=> {
+          if (error) {
+            console.log('User creation failed!', error);
+          } else {
+            base.authWithPassword({
+              email    : document.querySelector('[name="email"]').value,
+              password : document.querySelector('[name="password"]').value
+            },(error, authData)=> {
+              if (error) {
+                console.log('Login Failed!', error);
+              } else {
+                // make a new account if it didn't exist yet
+                base.child('users').child(authData.uid).once('value', snapshot=>{
+                  if (!snapshot.exists()) {
+                    base.child('users').child(authData.uid).set({
+                      provider: authData.provider,
+                      name: getName(authData)
+                    });
+                  }
+                });
+              }
+            });
+          }
+        });
+      } else {}
+    });
+  });
+
+})();

src/js/settings.js

@@ -0,0 +1,16 @@
+let Firebase = require('firebase');
+let base = new Firebase('https://scorching-inferno-1467.firebaseio.com/');
+
+let auth = base.getAuth();
+
+if (auth) {
+  console.log('logged in with: '+auth.uid);
+} else {
+  console.warn('not logged in');
+  location.href = '/login/';
+}
+
+document.getElementById('logout').addEventListener('click',()=>{
+  base.unauth();
+  location.href = '/login/';
+});

src/scss/generic.scss

@@ -41,6 +41,7 @@ button, input[type=button], input[type=submit] {
   user-select: none;
   border-radius:.2em;
   padding: .2em;
+  margin: .2em;
   transition: all ease .2s;
 
   &:active {

src/scss/login.scss

@@ -0,0 +1,33 @@
+/**
+ * Styles for the firebase page.
+ */
+
+@import 'development';
+
+body {
+  text-align: center;
+  margin: 0 auto;
+  max-width: 30em ;
+}
+
+h1 {
+  margin: 2em;
+  transition: margin .2s ease;
+  @media (max-height: 600px) {
+    margin: 1em;
+  }
+}
+
+form, fieldset {
+  border: none;
+  display: flex;
+  margin: 2em auto;
+  transition: margin .2s ease;
+  @media (max-height: 600px) {
+    margin: 1em auto;
+  }
+
+  [type=button] {
+    margin: .2em auto;
+  }
+}