Complete update password

src/api/user.js

@@ -19,4 +19,15 @@ userApi.updateProfile = updatedUserProfile => {
   })
 }
 
+userApi.updatePassword = (oldPassword, newPassword) => {
+  return service({
+    url: `${baseUrl}/profile/password`,
+    method: 'put',
+    data: {
+      oldPassword: oldPassword,
+      newPassword: newPassword
+    }
+  })
+}
+
 export default userApi

src/utils/service.js

@@ -53,7 +53,7 @@ service.interceptors.response.use(
 
       message.error(data.message)
     } else {
-      message.error('Unkown reason')
+      message.error('Server unavailable')
     }
 
     return Promise.reject(error)

src/views/user/Profile.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="page-header-index-wide page-header-wrapper-grid-content-main">
     <a-row :gutter="24">
-      <a-col :md="24" :lg="10">
+      <a-col
+        :md="24"
+        :lg="10"
+      >
         <a-card :bordered="false">
           <div class="profile-center-avatarHolder">
             <div class="avatar">
@@ -12,17 +15,20 @@
           </div>
           <div class="profile-center-detail">
             <p>
-              <a-icon type="mail"/>
+              <a-icon type="mail" />
               {{ user.email }}
             </p>
             <p>
-              <a-icon type="calendar"/>
+              <a-icon type="calendar" />
               {{ counts.establishDays || 0 }} 天
             </p>
           </div>
-          <a-divider/>
+          <a-divider />
           <div class="general-profile">
-            <a-list itemLayout="horizontal" :loading="countsLoading">
+            <a-list
+              itemLayout="horizontal"
+              :loading="countsLoading"
+            >
               <a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章。</a-list-item>
               <a-list-item>累计创建了 {{ counts.linkCount || 0 }} 个标签。</a-list-item>
               <a-list-item>累计获得了 {{ counts.commentCount || 0 }} 条评论。</a-list-item>
@@ -33,42 +39,72 @@
           </div>
         </a-card>
       </a-col>
-      <a-col :md="24" :lg="14">
-        <a-card :bordered="false" title="个人资料" :bodyStyle="{ padding: '0' }">
+      <a-col
+        :md="24"
+        :lg="14"
+      >
+        <a-card
+          :bordered="false"
+          title="个人资料"
+          :bodyStyle="{ padding: '0' }"
+        >
           <div class="card-container">
             <a-tabs type="card">
-              <a-tab-pane tab="基本资料" key="1">
+              <a-tab-pane
+                tab="基本资料"
+                key="1"
+              >
                 <a-form layout="vertical">
                   <a-form-item label="用户名：">
-                    <a-input v-model="user.username"/>
+                    <a-input v-model="user.username" />
                   </a-form-item>
                   <a-form-item label="昵称：">
-                    <a-input v-model="user.nickname"/>
+                    <a-input v-model="user.nickname" />
                   </a-form-item>
                   <a-form-item label="邮箱：">
-                    <a-input v-model="user.email"/>
+                    <a-input v-model="user.email" />
                   </a-form-item>
                   <a-form-item label="个人说明：">
-                    <a-input type="textarea" :autosize="{ minRows: 5 }" v-model="user.description"/>
+                    <a-input
+                      type="textarea"
+                      :autosize="{ minRows: 5 }"
+                      v-model="user.description"
+                    />
                   </a-form-item>
                   <a-form-item>
                     <a-button type="primary">保存</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
-              <a-tab-pane tab="密码" key="2">
+              <a-tab-pane
+                tab="密码"
+                key="2"
+              >
                 <a-form layout="vertical">
                   <a-form-item label="原密码：">
-                    <a-input type="password"/>
+                    <a-input
+                      v-model="passwordParam.oldPassword"
+                      type="password"
+                    />
                   </a-form-item>
                   <a-form-item label="新密码：">
-                    <a-input type="password"/>
+                    <a-input
+                      v-model="passwordParam.newPassword"
+                      type="password"
+                    />
                   </a-form-item>
                   <a-form-item label="确认密码：">
-                    <a-input type="password"/>
+                    <a-input
+                      v-model="passwordParam.confirmPassword"
+                      type="password"
+                    />
                   </a-form-item>
                   <a-form-item>
-                    <a-button type="primary">保存</a-button>
+                    <a-button
+                      type="primary"
+                      :disabled="passwordUpdateButtonDisabled"
+                      @click="updatePassword"
+                    >确认更改</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
@@ -88,11 +124,21 @@ export default {
   data() {
     return {
       countsLoading: true,
-      user: [],
-      counts: []
+      user: {},
+      counts: {},
+      passwordParam: {
+        oldPassword: null,
+        newPassword: null,
+        confirmPassword: null
+      }
     }
   },
-  mounted() {
+  computed: {
+    passwordUpdateButtonDisabled() {
+      return !(this.passwordParam.oldPassword && this.passwordParam.newPassword)
+    }
+  },
+  created() {
     this.loadUser()
     this.getCounts()
   },
@@ -108,6 +154,15 @@ export default {
         this.counts = response.data.data
         this.countsLoading = false
       })
+    },
+    updatePassword() {
+      // Check confirm password
+      if (this.passwordParam.newPassword !== this.passwordParam.confirmPassword) {
+        this.$message.error('确认密码和新密码不匹配')
+        return
+      }
+
+      userApi.updatePassword(this.passwordParam.oldPassword, this.passwordParam.newPassword).then(response => {})
     }
   }
 }