Feature: Add logout

pinry-spa/src/components/PHeader.vue

@@ -20,10 +20,12 @@
             <a class="navbar-item">
               BookmarkLet
             </a>
-            <a class="navbar-item">
+            <a class="navbar-item" v-show="user.loggedIn">
               Create Pin
             </a>
-            <div class="navbar-item has-dropdown is-hoverable">
+            <div
+              v-show="user.loggedIn"
+              class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
                 My Collections
               </a>
@@ -57,12 +59,22 @@
           <div class="navbar-end">
             <div class="navbar-item">
               <div class="buttons">
-                <a class="button is-primary">
+                <a
+                  v-show="!user.loggedIn"
+                  class="button is-primary">
                   <strong>Sign up</strong>
                 </a>
-                <a class="button is-light">
+                <a
+                  v-show="!user.loggedIn"
+                  class="button is-light">
                   Log in
                 </a>
+                <a
+                  v-show="user.loggedIn"
+                  v-on:click="logOut"
+                  class="button is-light">
+                  Log out
+                </a>
               </div>
             </div>
           </div>
@@ -73,18 +85,47 @@
 </template>
 
 <script>
+import api from './api';
+
 export default {
   name: 'p-header',
   data() {
     return {
       active: false,
+      user: {
+        loggedIn: false,
+        meta: {},
+      },
     };
   },
   methods: {
     toggleMenu() {
-      console.log(this.active);
       this.active = !this.active;
     },
+    logOut() {
+      api.User.logOut().then(
+        () => {
+          this.$router.push('/');
+        },
+      );
+    },
+    initializeUser() {
+      const self = this;
+      api.User.fetchUserInfo().then(
+        (user) => {
+          if (user === null) {
+            self.user.loggedIn = false;
+            self.user.meta = {};
+          } else {
+            self.user.meta = user;
+            self.user.loggedIn = true;
+          }
+        },
+      );
+    },
+  },
+  beforeMount() {
+    this.initializeUser();
   },
 };
 </script>

pinry-spa/src/components/api.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import storage from './utils/storage';
 
 const API_PREFIX = '/api/v2/';
 
@@ -32,7 +33,51 @@ function fetchPinsForBoard(boardId) {
   );
 }
 
+const User = {
+  storageKey: 'pinry.user',
+  logOut() {
+    const self = this;
+    return new Promise(
+      (resolve) => {
+        axios.get('/api-auth/logout/?next=/api/v2/').then(
+          () => {
+            storage.set(self.storageKey, null, 1);
+            resolve();
+          },
+        );
+      },
+    );
+  },
+  fetchUserInfo() {
+    /* returns null if user not logged in */
+    const self = this;
+    const userInfo = storage.get(self.storageKey);
+    if (userInfo !== null) {
+      return new Promise(
+        resolve => resolve(userInfo),
+      );
+    }
+    const url = `${API_PREFIX}users/`;
+    return new Promise(
+      (resolve) => {
+        axios.get(url).then(
+          (resp) => {
+            const users = resp.data;
+            if (users.length === 0) {
+              return resolve(null);
+            }
+            const value = users[0];
+            storage.set(self.storageKey, value, 60 * 5 * 1000);
+            return resolve(users[0]);
+          },
+        );
+      },
+    );
+  },
+};
+
 export default {
   fetchPins,
   fetchPinsForBoard,
+  User,
 };

pinry-spa/src/components/utils/storage.js

@@ -0,0 +1,20 @@
+/* from https://github.com/liesislukas/localstorage-ttl/blob/master/index.js */
+const storage = {
+  set(key, value, ttlMs) {
+    const data = { value, expires_at: new Date().getTime() + ttlMs / 1 };
+    localStorage.setItem(key.toString(), JSON.stringify(data));
+  },
+  get(key) {
+    const data = JSON.parse(localStorage.getItem(key.toString()));
+    if (data !== null) {
+      if (data.expires_at !== null && data.expires_at < new Date().getTime()) {
+        localStorage.removeItem(key.toString());
+      } else {
+        return data.value;
+      }
+    }
+    return null;
+  },
+};
+
+export default storage;