From 72cfafc6363749ab5777bc34851a1cea6e625dc5 Mon Sep 17 00:00:00 2001
From: gzezFISHER <fisher070305@163.com>
Date: Fri, 14 Aug 2020 15:47:11 +0800
Subject: [PATCH 1/4] add change password

---
 src/components/lib/problemTag.vue      |   2 +-
 src/components/user/changePassword.vue | 135 +++++++++++++++++++++++++
 2 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 src/components/user/changePassword.vue

diff --git a/src/components/lib/problemTag.vue b/src/components/lib/problemTag.vue
index d6acc6c0..74d51631 100644
--- a/src/components/lib/problemTag.vue
+++ b/src/components/lib/problemTag.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="tag" :style="style">
-    <i :v-if="icon" :class="'el-icon-' + icon_detail"></i>{{content}}
+    <i v-if="icon" :class="'el-icon-' + icon_detail"></i>{{content}}
   </span>
 </template>
 
diff --git a/src/components/user/changePassword.vue b/src/components/user/changePassword.vue
new file mode 100644
index 00000000..bdb9a917
--- /dev/null
+++ b/src/components/user/changePassword.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <el-form :model="ldata" ref="ChangePasswordForm" :rules="rules">
+      <div class="icon-lable">
+        <i class="el-icon-lock" />
+        New Password
+      </div>
+      <el-form-item prop="newpassword">
+        <el-input type="password" v-model="ldata.newpassword"></el-input>
+      </el-form-item>
+      <div class="icon-lable">
+        <i class="el-icon-lock" />
+        Repeat New Password
+      </div>
+      <el-form-item prop="newpasswdrepeat">
+        <el-input type="password" v-model="ldata.newpasswdrepeat"></el-input>
+      </el-form-item>
+      <div v-if="old_password_required">
+        <div class="icon-lable">
+          <i class="el-icon-lock" />
+          Old Password
+        </div>
+        <el-form-item prop="oldpassword">
+          <el-input type="password" v-model="ldata.oldpassword"></el-input>
+        </el-form-item>
+      </div>
+      <el-form-item>
+        <el-button
+          type="primary"
+          v-on:click="onSubmit();"
+          :loading="buttonLoading"
+        >
+          Change
+        </el-button>
+        <el-button v-on:click="reset();">Reset</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'UserChangePassword',
+  data() {
+    let validatePasswd = (rule, value, callback) => {
+      if (value === '' || value === this.ldata.newpassword) {
+        callback();
+      } else {
+        callback(new Error('Password mismatch'));
+      }
+    };
+    let validateOldPasswd = (rule, value, callback) => {
+      this.$axios
+        .post(apiurl('/account/password'), {
+          password: this.ldata.oldpassword
+        })
+        .then(() => {
+          callback();
+        })
+        .catch(err => {
+          console.log(err.request.status);
+          callback(new Error('Old Password Wrong'));
+        });
+    };
+    return {
+      ldata: {
+        oldpassword: '',
+        newpassword: '',
+        newpasswdrepeat: ''
+      },
+      rules: {
+        newpassword: [
+          { required: true, message: 'Input your password', trigger: 'blur' },
+          { min: 6, message: 'No less than 6 characters', trigger: 'blur' }
+        ],
+        newpasswdrepeat: [
+          { required: true, message: 'Repeat your password', trigger: 'blur' },
+          { validator: validatePasswd, trigger: 'blur' }
+        ],
+        oldpassword: [
+          { validator: validateOldPasswd, trigger: 'blur' }
+        ]
+      },
+      old_password_required: false,
+      buttonLoading: false
+    };
+  },
+  methods: {
+    submit() {
+      this.buttonLoading = true;
+      this.$axios
+        .patch(apiurl('/account/password'), {
+          password: this.ldata.newpassword
+        })
+        .then(() => {
+          this.buttonLoading = false;
+          this.$SegmentMessage.success(this, 'Changed successfully');
+        })
+        .catch(err => {
+          console.table(err);
+          if (err.request.status === 401) {
+            this.$SegmentMessage.error(this, 'Please login first');
+            this.$store.state.user.showlogin = true;
+          }
+          if (err.request.status === 403) {
+            this.$SegmentMessage.error(this, 'Please enter your old password');
+            this.old_password_required = true;
+          }
+          this.buttonLoading = false;
+        });
+    },
+    onSubmit() {
+      this.$refs['ChangePasswordForm'].validate((valid) => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    reset() {
+      this.$refs['ChangePasswordForm'].resetFields();
+      this.old_password_required = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.icon-lable {
+    margin-bottom: 5px;
+}
+</style>

From 89f462dc6bf44ef9a8269c1e75b883d775d344fb Mon Sep 17 00:00:00 2001
From: gzezFISHER <fisher070305@163.com>
Date: Fri, 14 Aug 2020 15:51:19 +0800
Subject: [PATCH 2/4] remove console

---
 src/components/user/changePassword.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/user/changePassword.vue b/src/components/user/changePassword.vue
index bdb9a917..7b8e3844 100644
--- a/src/components/user/changePassword.vue
+++ b/src/components/user/changePassword.vue
@@ -60,7 +60,6 @@ export default {
           callback();
         })
         .catch(err => {
-          console.log(err.request.status);
           callback(new Error('Old Password Wrong'));
         });
     };
@@ -99,7 +98,6 @@ export default {
           this.$SegmentMessage.success(this, 'Changed successfully');
         })
         .catch(err => {
-          console.table(err);
           if (err.request.status === 401) {
             this.$SegmentMessage.error(this, 'Please login first');
             this.$store.state.user.showlogin = true;

From 35a2bee85948de7ac4362b2f1e92ed479ce742aa Mon Sep 17 00:00:00 2001
From: gzezFISHER <fisher070305@163.com>
Date: Fri, 14 Aug 2020 16:02:14 +0800
Subject: [PATCH 3/4] add unkown error

---
 src/components/user/changePassword.vue | 6 +++++-
 src/components/user/register.vue       | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/user/changePassword.vue b/src/components/user/changePassword.vue
index 7b8e3844..7642ef69 100644
--- a/src/components/user/changePassword.vue
+++ b/src/components/user/changePassword.vue
@@ -60,7 +60,11 @@ export default {
           callback();
         })
         .catch(err => {
-          callback(new Error('Old Password Wrong'));
+          if(err.request.status === 403) {
+            callback(new Error('Old Password Wrong'));
+          } else {
+            callback(new Error('Unkown Error'));
+          }
         });
     };
     return {
diff --git a/src/components/user/register.vue b/src/components/user/register.vue
index 01860066..4423ba7b 100644
--- a/src/components/user/register.vue
+++ b/src/components/user/register.vue
@@ -85,6 +85,9 @@ export default {
       }
     };
     let validateUsername = (rule, value, callback) => {
+      if(value === '') {
+        callback();
+      }
       this.$axios
         .get(apiurl('account/username/accessibility/' + value))
         .then(() => {
@@ -94,7 +97,7 @@ export default {
           if (err.request.status === 409) {
             callback(new Error('The user name is already in use'));
           } else {
-            callback();
+            callback(new Error('Unkown Error'));
           }
         });
     };

From a9e87ad00abc9c50ad9452dfd1de9307ac27d945 Mon Sep 17 00:00:00 2001
From: gzezFISHER <fisher070305@163.com>
Date: Fri, 14 Aug 2020 16:08:13 +0800
Subject: [PATCH 4/4] router

---
 src/router.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/router.js b/src/router.js
index 2c2c22c8..3b9d61d9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,9 @@ let router = new Router({
   routes: [{
     path: '/',
     component: () => import('./components/home/page.vue')
+  }, {
+    path: '/account/password',
+    component: () => import('./components/user/changePassword.vue')
   }, {
     path: '/account/:id',
     component: () => import('./components/user/content.vue')