9 files changed, 419 insertions, 0 deletions
diff --git a/app/.eslintrc b/app/.eslintrc
new file mode 100644
index 0000000..bd14a19
--- /dev/null
+++ b/app/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}
diff --git a/app/components/login.js b/app/components/login.js
new file mode 100644
index 0000000..d900c72
--- /dev/null
+++ b/app/components/login.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import AuthService from '../services/auth';
+
+const internals = {};
+
+export default internals.LoginComponent = Vue.component('login', {
+  template: '<div class="login-container">' +
+      '<p>{{message}}</p>' +
+      '</div>',
+
+  props: ['oAuthToken', 'oAuthVerifier'],
+
+  data() {
+
+    return {
+      message: 'Logging you in... Wait a sec.',
+      authService: new AuthService()
+    };
+  },
+  methods: {
+    login() {
+
+      if (this.authService.authenticated) {
+        return this.$router.push('/');
+      }
+
+      return this.authService.getUserObject(this.oAuthToken, this.oAuthVerifier).then((response) => {
+
+        console.log(response);
+
+        return this.authService.login(response.user, response.token, response.expiresAt);
+      }).then(() => {
+
+        this.$router.push('/');
+      }).catch((err) => {
+
+        console.error(err);
+        this.message = 'Oh no! There was a problem logging you in.';
+      });
+    }
+  },
+  mounted: function mounted() {
+
+    this.login();
+  }
+});
diff --git a/app/components/post_form.js b/app/components/post_form.js
new file mode 100644
index 0000000..cee17b0
--- /dev/null
+++ b/app/components/post_form.js
@@ -0,0 +1,57 @@
+import Axios from 'axios';
+import Vue from 'vue';
+import AuthService from '../services/auth';
+
+const internals = {};
+
+internals.kPostsRoute = '/api/posts';
+
+export default internals.PostFormComponent = Vue.component('post-form', {
+  template: '<div class="post-form-container">' +
+      '<h1>sup.</h1>' +
+      '<textarea :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
+      '<p v-show="message" class="post-form-error">{{message}}</p>' +
+      '<button :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
+      '</div>',
+
+  data() {
+
+    return {
+      content: '',
+      message: '',
+      submitting: false,
+      authService: new AuthService()
+    };
+  },
+
+  methods: {
+    submit() {
+
+      this.submitting = true;
+
+      return Axios({
+        method: 'post',
+        headers: {
+          Authorization: `Bearer ${this.authService.token}`
+        },
+        data: {
+          content: this.content
+        },
+        url: internals.kPostsRoute
+      }).then((response) => {
+
+        this.$emit('post-submitted', response.data);
+        this.content = '';
+        this.message = '';
+        this.submitting = false;
+      }).catch((err) => {
+
+        console.error(err.stack);
+        this.submitting = false;
+        this.message = 'Error while creating the post...';
+      });
+    }
+  }
+});
+
+
diff --git a/app/components/posts.js b/app/components/posts.js
new file mode 100644
index 0000000..c41707f
--- /dev/null
+++ b/app/components/posts.js
@@ -0,0 +1,77 @@
+import Axios from 'axios';
+import Vue from 'vue';
+import AuthService from '../services/auth';
+
+import PostFormComponent from './post_form';
+import DatetimeFilter from '../filters/datetime';
+import UsertimeFilter from '../filters/usertime';
+
+const internals = {};
+
+internals.kPostsRoute = '/api/posts';
+
+export default internals.PostsComponent = Vue.component('posts', {
+  template: '<div class="posts-container">' +
+      '<post-form v-on:post-submitted="addPost"></post-form>' +
+      '<h1>Posts.</h1>' +
+      '<p v-show="message" class="posts-error">{{message}}</p>' +
+      '<article class="post" v-for="post in posts">' +
+      '<aside class="post-meta">' +
+      '<img :src="post.userImage" v-bind:alt="\'Avatar for @\' + post.userId">' +
+      '<a v-bind:href="\'https://twitter.com/\' + post.userId">{{post.userName}}</a> said on ' +
+      '<time v-bind:datetime="post.timestamp | datetime">{{post.timestamp | usertime}}</time>' +
+      '</aside>' +
+      '<div class="post-content">{{post.content}}</div>' +
+      '</article>' +
+      '</div>',
+
+  data() {
+
+    return {
+      message: '',
+      authService: new AuthService(),
+      posts: []
+    };
+  },
+
+  methods: {
+    fetchPosts() {
+
+      return Axios({
+        method: 'get',
+        headers: {
+          Authorization: `Bearer ${this.authService.token}`
+        },
+        url: internals.kPostsRoute
+      }).then((response) => {
+
+        this.posts = response.data;
+      }).catch((err) => {
+
+        console.err(err.stack);
+        this.message = 'Error while loading the posts...';
+      });
+    },
+
+    addPost(post) {
+
+      this.posts.unshift(post);
+    }
+  },
+
+  components: {
+    postForm: PostFormComponent,
+    datetime: DatetimeFilter,
+    usertime: UsertimeFilter
+  },
+
+  mounted: function mounted() {
+
+    if (!this.authService.authenticated) {
+      return this.$router.push('/login');
+    }
+
+    return this.fetchPosts();
+  }
+});
+
diff --git a/app/components/welcome.js b/app/components/welcome.js
new file mode 100644
index 0000000..4fcee0f
--- /dev/null
+++ b/app/components/welcome.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import AuthService from '../services/auth';
+
+/* global window */
+
+const internals = {};
+
+export default internals.WelcomeComponent = Vue.component('welcome', {
+  template: '<div class="welcome-container">' +
+      '<p>{{message}}</p>' +
+      '<a href="#" v-on:click=initiateLogin v-if=!loggingIn>Login</a>' +
+      '</div>',
+
+  data() {
+
+    return {
+      message: 'Welcome to Dasein, a social network with posts that disappear when the conversation stops',
+      loggingIn: false,
+      authService: new AuthService()
+    };
+  },
+
+  methods: {
+    initiateLogin() {
+
+      this.message = 'Logging you in...';
+      this.loggingIn = true;
+
+      this.authService.initiateLogin().then((authData) => {
+
+        window.location.href = authData.loginUrl;
+      }).catch((err) => {
+
+        console.error(err);
+        this.message = 'Oh no! There was a problem logging you in.';
+      });
+    }
+  }
+});
diff --git a/app/dasein.js b/app/dasein.js
new file mode 100644
index 0000000..6b3fd95
--- /dev/null
+++ b/app/dasein.js
@@ -0,0 +1,90 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import AuthService from './services/auth';
+
+import LoginComponent from './components/login';
+import WelcomeComponent from './components/welcome';
+import PostsComponent from './components/posts';
+
+/* global window */
+
+const internals = {};
+
+export default internals.Dasein = {
+
+  start() {
+
+    this._setupVue();
+
+    internals.authService = new AuthService();
+
+    this.vm = new Vue({
+      router: this._setupRouter(),
+      el: '#dasein',
+      components: {
+        login: LoginComponent,
+        welcome: WelcomeComponent
+      },
+      data: {
+        message: 'Hello Vue!'
+      },
+      methods: {
+        authenticated() {
+
+          return internals.authService.authenticated;
+        }
+      }
+    });
+
+  },
+
+  // Initializes vue options
+
+  _setupVue() {
+
+    Vue.use(VueRouter);
+  },
+
+  // Sets up the routes
+
+  _setupRouter() {
+
+    const routes = [
+      {
+        path: '/login',
+        component: WelcomeComponent
+      },
+      {
+        path: '/',
+        component: PostsComponent
+      },
+      {
+        path: '/login-callback',
+        component: LoginComponent,
+        props: (route) => {
+
+          return {
+            oAuthToken: route.query.oauth_token,
+            oAuthVerifier: route.query.oauth_verifier
+          };
+        }
+      }
+    ];
+
+    const router = new VueRouter({
+      mode: 'history',
+      routes
+    });
+
+    return router;
+  }
+};
+
+
+internals.run = function () {
+
+  internals.Dasein.start();
+};
+
+window.addEventListener('load', internals.run);
diff --git a/app/filters/datetime.js b/app/filters/datetime.js
new file mode 100644
index 0000000..e4bf432
--- /dev/null
+++ b/app/filters/datetime.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+
+const internals = {};
+
+export default internals.DatetimeFilter = Vue.filter('datetime', (timestamp) => {
+
+  const date = new Date(parseInt(timestamp));
+
+  return date.toISOString();
+});
diff --git a/app/filters/usertime.js b/app/filters/usertime.js
new file mode 100644
index 0000000..de67894
--- /dev/null
+++ b/app/filters/usertime.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+
+const internals = {};
+
+export default internals.UsertimeFilter = Vue.filter('usertime', (timestamp) => {
+
+  const date = new Date(parseInt(timestamp));
+
+  const dateString = date.toISOString();
+
+  const dateComponents = dateString.split('T');
+  const dateFragment = dateComponents[0];
+  const timeComponents = dateComponents[1].split(':');
+
+  const hourFragment = timeComponents[0];
+  const minuteFragment = timeComponents[1];
+
+  return `${dateFragment} ${hourFragment}:${minuteFragment}`;
+});
+
diff --git a/app/services/auth.js b/app/services/auth.js
new file mode 100644
index 0000000..32db321
--- /dev/null
+++ b/app/services/auth.js
@@ -0,0 +1,75 @@
+import Axios from 'axios';
+
+const internals = {};
+
+/* global localStorage */
+
+internals.kInitiateLoginRoute = '/api/auth/login';
+internals.kHandleCallbackRoute = '/api/auth/callback';
+
+export default internals.AuthService = class AuthService {
+
+  constructor() {
+
+    this.authenticated = false;
+
+    // Bootstrap from local storage.
+    if (localStorage.hasOwnProperty('user') && localStorage.hasOwnProperty('token')
+        && localStorage.hasOwnProperty('expiresAt')) {
+
+      if (parseInt(localStorage.getItem('expiresAt')) > Date.now()) {
+        this.expiresAt = localStorage.getItem('expiresAt');
+        this.user = JSON.parse(localStorage.getItem('user'));
+        this.token = localStorage.getItem('token');
+        this.authenticated = true;
+      }
+    }
+  }
+
+  // Initiates the login process. Resolves to an object that contains the URL
+  // to redirect to to continue processing.
+  initiateLogin() {
+
+    return Axios.get(internals.kInitiateLoginRoute).then((response) => {
+
+      return response.data;
+    });
+  }
+
+  // Posts the oAuthToken and verifier to the API to get back a user object
+  // and a signed JWT
+  getUserObject(oAuthToken, oAuthVerifier) {
+
+    return Axios.post(internals.kHandleCallbackRoute, {
+      oAuthToken,
+      oAuthVerifier
+    }).then((response) => {
+
+      return response.data;
+    });
+  }
+
+  // Logs in the user by setting the user and token
+  login(user, token, expiresAt) {
+
+    localStorage.setItem('user', JSON.stringify(user));
+    localStorage.setItem('token', token);
+    localStorage.setItem('expiresAt', expiresAt);
+    this.user = user;
+    this.token = token;
+    this.expiresAt = expiresAt;
+    this.authenticated = true;
+  }
+
+  // Logs a user out by removing the user and token
+  logout() {
+
+    localStorage.removeItem('user');
+    localStorage.removeItem('token');
+    localStorage.removeItem('expiresAt');
+    delete this.user;
+    delete this.token;
+    delete this.expiresAt;
+    this.authenticated = false;
+  }
+};