Previous PR broke example, fixing them.

client/components/Headbar.vue

@@ -11,11 +11,11 @@
           </div>
         </el-col>
         <el-col :offset="11" :span="3">
-          <p v-if="authUser">
-            <el-tooltip :content="authUser.user_name">
-              <img src="~/assets/img/avatar.svg"></img>
+          <p v-if="!!displayName">
+            <el-tooltip :content="displayName">
+              <img src="~/assets/img/avatar.svg" />
             </el-tooltip>
-            <span> {{authUser.user_name}}</span>
+            <span> {{displayName}}</span>
           </p>
         </el-col>
         <el-col :span="3">
@@ -50,6 +50,7 @@ import Component, { Getter } from 'class-component'
 export default class Headbar extends Vue {
   @Getter isMenuHidden
   @Getter authUser
+  @Getter displayName
   async logout () {
     await this.$store.dispatch('logout', async () => {
       await this.$router.push('/login')

client/components/examples/activity/NewActivity.vue

@@ -180,6 +180,7 @@ export default class NewActivity extends Vue {
 
     this.$refs[formName].validate((valid) => {
       if (valid) {
+        this.$store.dispatch('examples/activity/add', this.formData)
         this.$message.success(this.$t('activity.success'))
         if (formName === 'popForm') {
           this.popVisible = false

client/locales/examples/en.json

@@ -1,8 +1,4 @@
 {
-  "login": {
-    "userPlaceholder": "User Name",
-    "pwdPlaceholder": "Password"
-  },
   "activity": {
     "title": {
       "create": "Create Activity"

client/locales/examples/fr.json

@@ -1,8 +1,4 @@
 {
-  "login": {
-    "userPlaceholder": "Nom d’utilisateur",
-    "pwdPlaceholder": "Mot de passe"
-  },
   "activity": {
     "title": {
       "create": "Créer une activité"

client/locales/examples/zh.json

@@ -1,8 +1,4 @@
 {
-  "login": {
-    "userPlaceholder": "请输入用户名",
-    "pwdPlaceholder": "请输入密码"
-  },
   "activity": {
     "title": {
       "create": "创建活动"

client/middleware/check-auth.js

@@ -1,12 +1,23 @@
-import { user as getUser } from '@/utils/auth'
-
-export default function ({ store, req, route, redirect }) {
+export default async ({
+  redirect,
+  route,
+  store,
+  req,
+  $axios
+}) => {
   // If nuxt generate, pass this middleware
   if (process.static) return
-  const user = getUser(process.server ? req : null)
-  if (user && !store.state.authUser) {
-    store.commit('SET_USER', user)
-  } else if (!user && route.name !== 'login') {
+  const maybeReq = process.server ? req : null
+  const hasSession = maybeReq !== null && !!maybeReq.session
+  let maybeAuthenticated = await store.getters.authenticated
+  if (hasSession === true && maybeAuthenticated === false) {
+    const { data } = await $axios.get('/hpi/auth/whois')
+    store.commit('SET_USER', data)
+    maybeAuthenticated = data.authenticated || false
+  }
+  const currentPath = route.path
+  const isNotLogin = currentPath !== '/login'
+  if (isNotLogin && maybeAuthenticated === false) {
     redirect('/login', { page: route.fullPath })
   }
 }

client/pages/examples/activity/create.vue

@@ -16,7 +16,7 @@ import Vue from 'vue'
 import NewActivity from '@/components/examples/activity/NewActivity'
 import Component, { Getter, namespace } from 'class-component'
 
-const ActivityGetter = namespace('examples/activity/index', Getter)
+const ActivityGetter = namespace('examples/activity', Getter)
 
 @Component({
   components: {

client/pages/examples/activity/index.vue

@@ -91,7 +91,8 @@ export default class Example extends Vue {
   selections = []
 
   async asyncData () {
-    let {data: activities} = await axios.get('/hpi/examples/activities')
+    // TODO figure out how mapMutations work with Vuex class.
+    const {data: activities} = await axios.get('/hpi/examples/activities')
     return {activities}
   }
 

client/pages/login.vue

@@ -45,7 +45,6 @@
 
 <script>
 import Vue from 'vue'
-import axios from 'axios'
 import debounce from '@/utils/debounce'
 import Component from 'class-component'
 
@@ -56,6 +55,7 @@ export default class Login extends Vue {
     password: '',
     captcha: ''
   }
+  authenticated = false // #WatchHowDoWe ... How do we?
   rules = {}
   captchaSvg = ''
   // keepPwd = false
@@ -67,31 +67,57 @@ export default class Login extends Vue {
     this.getCaptcha()
   }
   async login () {
+    const goBackTo = this.$route.query.page || '/'
     this.logging = true
-    this.$refs.user.validate(async (valid) => {
-      try {
-        if (valid) {
-          await this.$store.dispatch('login', this.user)
-          this.$router.push(this.$route.query.page || '/')
-        }
-      } catch (e) {
-        this.$message.warning(e.message)
-      } finally {
-        this.logging = false
+    const valid = this.$refs.user.validate()
+    try {
+      if (valid) {
+        await this.$store.dispatch('login', this.user)
+        this.authenticated = await this.$store.getters.authenticated
+      }
+    } catch (e) {
+      this.$message.warning(e.message)
+    } finally {
+      if (this.authenticated) {
+        this.redirect(goBackTo)
+      } else {
+        const message = 'Not authenticated'
+        this.$message.warning(message)
       }
-    })
+    }
+    this.logging = false
   }
-  async getCaptcha () {
+  redirect (goTo) {
+    this.$router.push(goTo)
+  }
+  getCaptcha () {
     const params = {}
     if (this.$refs.captcha) {
       params.width = this.$refs.captcha.$el.clientWidth || 150
       params.height = this.$refs.captcha.$el.clientHeight || 36
     }
-    const {data: captcha} = await axios.get('/hpi/auth/captcha', { params })
-    this.captchaSvg = captcha
+    this.captchaSvg = this.$axios.get('/hpi/auth/captcha', { params })
+      .then(response => {
+        // #WatchHowDoWe
+        // Just passing through :|
+        // TODO, improve this, figure out how @watch works
+        const authenticated = this.$store.getters.authenticated
+        if (authenticated) {
+          this.redirect('/')
+        }
+        const data = response.data
+        return data
+      })
+      .then(captcha => {
+        this.captchaSvg = captcha
+      })
+      .catch(error => {
+        const errorMessage = error.toString()
+        this.captchaSvg = `<small style="line-height:1em;display:block;">${errorMessage}</small>`
+      })
   }
 
-  refreshCaptcha = debounce(this.getCaptcha, 500)
+  refreshCaptcha = debounce(this.getCaptcha, 500) // Note to you, reader, does this still work?
 }
 </script>
 

client/store/examples/activity.js

@@ -0,0 +1,40 @@
+export const state = () => ({
+  activities: [
+    {
+      'account': '0',
+      'date': '2018-01-01',
+      'type': 'price',
+      'region': '北京',
+      'priority': '高',
+      'organizer': '市场部',
+      'desc': 'Activity 0, as a default Vuex activity entry'
+    }
+  ]
+})
+
+export const mutations = {
+  SET_ACTIVITIES (
+    state,
+    values
+  ) {
+    for (const activity of values) {
+      state.activities.push(Object.assign({}, activity))
+    }
+  }
+}
+
+export const actions = {
+  add ({ commit }, activity) {
+    const payload = [activity]
+    commit('SET_ACTIVITIES', payload)
+  }
+}
+
+export const getters = {
+  activities (state) {
+    return state.activities
+  },
+  title (state) {
+    return 'activity.title.create'
+  }
+}

client/store/examples/index.js

@@ -104,6 +104,24 @@ export const state = () => ({
   }]
 })
 
+export const getters = {
+  city (state) {
+    return state.city
+  },
+  organizers (state) {
+    return state.organizers
+  },
+  cities (state) {
+    return state.cities
+  },
+  foods (state) {
+    return state.foods
+  },
+  labels (state) {
+    return state.labels
+  }
+}
+
 export const mutations = {
   SET_CITY (state, city) {
     state.city = city || null