add updatePassword tab

README.md

@@ -6,15 +6,16 @@ Record work income
 
 做一个记账小程序
 
-- [ ] 账号系统
+- [x] 账号系统
   - [x] 登录/注册
   - [x] 持久登录
-  - [ ] 用户信息页
+  - [x] 用户信息页
+  - [x] 修改密码
+  - [ ] 第三方登陆与绑定（GitHub）
 - [x] 路由鉴权
 - 账单图表
 - 增删改查
 - [PWA](https://pwa.nuxtjs.org/)
-- 第三方登陆与绑定（GitHub）
 - 国际化
 - [x] Travis CI 持续集成
 - 变量配置分离
@@ -409,6 +410,7 @@ API-URL: users/me
 | createdAt | | | |
 | email | | | |
 | emailVerified | | false | |
+| mobilePhoneNumber | | | |
 | mobilePhoneVerified | | false | |
 | objectId | | | |
 | sessionToken | | | |

components/User/LoginForm.vue

@@ -62,6 +62,7 @@ export default {
               type: 'success',
               message: '登录成功！'
             })
+            this.$store.commit('SET_OBJECT_ID', res.data.objectId)
             this.$store.commit('SET_USER', res.data.username)
             this.$store.commit('SET_SESSION_TOKEN', res.data.sessionToken)
             this.$router.push('/users/' + res.data.username)

components/User/SignupForm.vue

@@ -116,7 +116,6 @@ export default {
       }
       this.$axios.post('users', signupInfo).then(
         res => {
-          console.log(res)
           if (res.status === 201) {
             // 201 Created 请求已被实现
             this.$message({

components/User/UpdatePassword.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-form 
+    ref="updatePasswordForm" 
+    :model="updatePasswordForm" 
+    :rules="rule"
+    label-position="top"
+    @keyup.enter.native="submitForm('updatePasswordForm')">
+    <el-form-item 
+      prop="old_password"
+      label="Old password">
+      <el-input 
+        v-model="updatePasswordForm.old_password"
+        type="password"/>
+    </el-form-item>
+    <el-form-item 
+      prop="new_password"
+      label="New password">
+      <el-input 
+        v-model="updatePasswordForm.new_password"
+        type="password"/>
+    </el-form-item>
+    <el-form-item 
+      prop="check_new_password"
+      label="Input new password again">
+      <el-input 
+        v-model="updatePasswordForm.check_new_password"
+        type="password"/>
+    </el-form-item>
+    <el-form-item>
+      <el-button 
+        type="primary" 
+        @click="submitForm('updatePasswordForm')">Update password</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+
+<script>
+export default {
+  data() {
+    let validateOldPassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('Please input old password'))
+      } else {
+        if (this.updatePasswordForm.new_password !== '') {
+          this.$refs.updatePasswordForm.validateField('new_password')
+        }
+        callback()
+      }
+    }
+    let validateNewPassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('Please input new password'))
+      } else if (value === this.updatePasswordForm.old_password) {
+        callback(new Error('The two passwords can not be same!'))
+      } else {
+        callback()
+      }
+    }
+    let validateCheckNewPassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('Please input new password again'))
+      } else if (value !== this.updatePasswordForm.new_password) {
+        callback(new Error('The two passwords do not match!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      updatePasswordForm: {
+        old_password: '',
+        new_password: '',
+        check_new_password: ''
+      },
+      rule: {
+        old_password: [{ validator: validateOldPassword, trigger: 'blur' }],
+        new_password: [{ validator: validateNewPassword, trigger: 'blur' }],
+        check_new_password: [
+          { validator: validateCheckNewPassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.updatePassword()
+        } else {
+          return false
+        }
+      })
+    },
+    updatePassword() {
+      let { old_password, new_password } = this.updatePasswordForm
+      this.$axios
+        .put('users/' + this.$store.state.objectId + '/updatePassword', {
+          old_password,
+          new_password
+        })
+        .then(
+          res => {
+            if (res.status === 200) {
+              this.$message({
+                type: 'success',
+                message:
+                  'Password updated successfully.' +
+                  '<br><br>' +
+                  'Please login again.',
+                dangerouslyUseHTMLString: true
+              })
+              this.$store.dispatch('logout')
+              this.$router.push('/login')
+            } else {
+              this.$message.error(res.data.info)
+            }
+          },
+          err => {
+            this.$message({
+              type: 'error',
+              message: err.response.data.error
+            })
+          }
+        )
+    }
+  }
+}
+</script>

components/User/UserInfo.vue

@@ -2,16 +2,20 @@
   <el-form 
     ref="userInfoForm" 
     :model="userInfo" 
-    label-width="80px"
     label-position="left">
+    <el-form-item label="Username">
+      <el-input 
+        v-model="userInfo.username"
+        disabled=""/>
+    </el-form-item>
     <el-form-item label="Email">
       <el-input 
         v-model="userInfo.email" 
         disabled=""/>
     </el-form-item>
-    <el-form-item label="Username">
+    <el-form-item label="Phone">
       <el-input 
-        v-model="userInfo.username"/>
+        v-model="userInfo.mobilePhoneNumber"/>
     </el-form-item>
     <el-form-item label="Bio">
       <el-input 
@@ -32,18 +36,39 @@
 export default {
   data() {
     return {
-      userInfo: {}
+      userInfo: {
+        username: '',
+        email: '',
+        mobilePhoneNumber: '',
+        bio: ''
+      }
     }
   },
-  async beforeCreate() {
-    this.userInfo = await this.$axios.$get('users/me')
-    console.log(this.userInfo)
+  beforeCreate() {
+    this.$axios.get('users/me').then(
+      res => {
+        if (res.status === 200) {
+          this.userInfo = res.data
+        } else {
+          this.$message.error(res.data.info)
+        }
+      },
+      err => {
+        this.$message({
+          type: 'error',
+          message: err.response.data.error
+        })
+      }
+    )
   },
   methods: {
     updateProfile() {
-      let { bio, username } = this.userInfo
+      let { bio, mobilePhoneNumber } = this.userInfo
       this.$axios
-        .put('users/' + this.userInfo.objectId, { bio, username })
+        .put('users/' + this.userInfo.objectId, {
+          bio,
+          mobilePhoneNumber
+        })
         .then(
           res => {
             if (res.status === 200) {
@@ -62,7 +87,6 @@ export default {
             })
           }
         )
-      // $message
     }
   }
 }

middleware/status.js

@@ -12,4 +12,10 @@ export default function({ $axios, store }) {
       store.commit('SET_USER', username)
     }
   }
+  if (!store.state.objectId) {
+    if (sessionStorage.getItem('objectId') !== null) {
+      let objectId = sessionStorage.getItem('objectId')
+      store.commit('SET_OBJECT_ID', objectId)
+    }
+  }
 }

pages/help.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Maybe you need help?</h1>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

pages/users/profile.vue

@@ -20,27 +20,29 @@
 <script>
 import axios from 'axios'
 import UserInfo from '~/components/User/UserInfo.vue'
+import UpdatePassword from '~/components/User/UpdatePassword.vue'
 
 export default {
   middleware: 'auth',
   components: {
-    UserInfo
+    UserInfo,
+    UpdatePassword
   },
   data() {
     return {
       tabPosition: 'left',
       tabItems: [
         {
-          index: 'Info',
+          index: 'userInfo',
           label: '用户信息',
           component: 'UserInfo'
         },
         {
-          index: 'modifyPassword',
-          label: '修改密码'
+          index: 'updatePassword',
+          label: '修改密码',
+          component: 'UpdatePassword'
         }
-      ],
-      userInfo: {}
+      ]
     }
   }
 }

store/index.js

@@ -1,9 +1,18 @@
 export const state = () => ({
+  objectId: null,
   username: null,
   sessionToken: null
 })
 
 export const mutations = {
+  SET_OBJECT_ID: function(state, objectId) {
+    state.objectId = objectId
+    if (objectId) {
+      sessionStorage.setItem('objectId', objectId)
+    } else {
+      sessionStorage.removeItem('objectId')
+    }
+  },
   SET_SESSION_TOKEN: function(state, sessionToken) {
     state.sessionToken = sessionToken
     if (sessionToken) {
@@ -26,5 +35,6 @@ export const actions = {
   logout({ commit }) {
     commit('SET_USER', null)
     commit('SET_SESSION_TOKEN', null)
+    commit('SET_OBJECT_ID', null)
   }
 }