From 4c18320da19cbe8dbe5f98a9db25e57d22d58219 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Fri, 17 Aug 2018 08:29:58 +0200
Subject: [PATCH] example: Update example to make it easier to understand

---
 examples/auth-jwt/package.json     |  2 +-
 examples/auth-jwt/pages/index.vue  | 26 ++++++++++++++++++++++++++
 examples/auth-jwt/pages/login.vue  |  7 ++++---
 examples/auth-jwt/pages/secret.vue |  5 ++++-
 examples/auth-jwt/store/index.js   | 14 +++++++++-----
 5 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 examples/auth-jwt/pages/index.vue

diff --git a/examples/auth-jwt/package.json b/examples/auth-jwt/package.json
index f1b96ac390..bd883642e0 100644
--- a/examples/auth-jwt/package.json
+++ b/examples/auth-jwt/package.json
@@ -10,4 +10,4 @@
     "build": "nuxt build",
     "start": "nuxt start"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/auth-jwt/pages/index.vue b/examples/auth-jwt/pages/index.vue
new file mode 100644
index 0000000000..0a316c44b6
--- /dev/null
+++ b/examples/auth-jwt/pages/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div v-if="$store.state.auth">
+      <p>You are authenticated. You can see the
+        <nuxt-link to="/secret">secret page</nuxt-link>!
+      </p>
+      <button @click="logout">Logout</button>
+    </div>
+    <p v-else>Please
+      <nuxt-link to="/login">login</nuxt-link>.
+    </p>
+  </div>
+</template>
+
+<script>
+const Cookie = process.browser ? require('js-cookie') : undefined
+
+export default {
+  methods: {
+    logout() {
+      Cookie.remove('auth')
+      this.$store.commit('setAuth', null)
+    }
+  }
+}
+</script>
diff --git a/examples/auth-jwt/pages/login.vue b/examples/auth-jwt/pages/login.vue
index d3956f597d..a4c40e4e8a 100644
--- a/examples/auth-jwt/pages/login.vue
+++ b/examples/auth-jwt/pages/login.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <h1>login view</h1>
+    <h1>Sign in to access the secret page</h1>
     <div>
       <label for="email">
         <input id="email" type="email" value="test">
@@ -9,12 +9,13 @@
         <input id="password" type="password" value="test">
       </label>
       <button @click="postLogin">login</button>
+      <p>The crendentials are not verified for the example purpose.</p>
     </div>
   </div>
 </template>
 
 <script>
-import Cookie from 'js-cookie'
+const Cookie = process.browser ? require('js-cookie') : undefined
 
 export default {
   middleware: 'notAuthenticated',
@@ -24,7 +25,7 @@ export default {
         const auth = {
           accessToken: 'someStringGotFromApiServiceWithAjax'
         }
-        this.$store.commit('update', auth) // mutating to store for client rendering
+        this.$store.commit('setAuth', auth) // mutating to store for client rendering
         Cookie.set('auth', auth) // saving token in cookie for server rendering
         this.$router.push('/')
       }, 1000)
diff --git a/examples/auth-jwt/pages/secret.vue b/examples/auth-jwt/pages/secret.vue
index d6b876fe7c..9f2aacd528 100644
--- a/examples/auth-jwt/pages/secret.vue
+++ b/examples/auth-jwt/pages/secret.vue
@@ -1,5 +1,8 @@
 <template>
-  <h1>this is secret page.</h1>
+  <div>
+    <h1>This is secret page.</h1>
+    <nuxt-link to="/">Back home</nuxt-link>
+  </div>
 </template>
 
 <script>
diff --git a/examples/auth-jwt/store/index.js b/examples/auth-jwt/store/index.js
index 44f3d1ad90..8754193c40 100644
--- a/examples/auth-jwt/store/index.js
+++ b/examples/auth-jwt/store/index.js
@@ -8,18 +8,22 @@ const createStore = () => {
       auth: null
     },
     mutations: {
-      update(state, data) {
-        state.auth = data
+      setAuth(state, auth) {
+        state.auth = auth
       }
     },
     actions: {
       nuxtServerInit({ commit }, { req }) {
-        let accessToken = null
+        let auth = null
         if (req.headers.cookie) {
           const parsed = cookieparser.parse(req.headers.cookie)
-          accessToken = JSON.parse(parsed.auth)
+          try {
+            auth = JSON.parse(parsed.auth)
+          } catch (err) {
+            // No valid cookie found
+          }
         }
-        commit('update', accessToken)
+        commit('setAuth', auth)
       }
     }
   })