fixed https://github.com/crawlab-team/crawlab/issues/811

frontend/src/i18n/zh.js

@@ -502,6 +502,7 @@ export default {
   'Log Errors': '日志错误',
   'No Expire': '不过期',
   'Log Expire Duration': '日志过期时间',
+  'Change Password': '更改密码',
 
   // 挑战
   'Challenge': '挑战',
@@ -677,6 +678,8 @@ export default {
   'Enabled successfully': '成功启用',
   'Disabled successfully': '成功禁用',
   'Request Error': '请求错误',
+  'Changed password successfully': '成功修改密码',
+  'Two passwords do not match': '两次密码不匹配',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

frontend/src/views/setting/Setting.vue

@@ -48,9 +48,6 @@
           <el-form-item prop="username" :label="$t('Username')">
             <el-input v-model="userInfo.username" disabled />
           </el-form-item>
-          <el-form-item prop="password" :label="$t('Password')">
-            <el-input v-model="userInfo.password" type="password" :placeholder="$t('Password')" />
-          </el-form-item>
           <el-form-item :label="$t('Allow Sending Statistics')">
             <el-switch
               v-model="isAllowSendingStatistics"
@@ -78,6 +75,32 @@
       </el-tab-pane>
       <!--./通用-->
 
+      <!--更改密码-->
+      <el-tab-pane :label="$t('Change Password')" name="change-password">
+        <el-form
+          ref="change-password-form"
+          :model="userInfo"
+          class="change-password-form"
+          label-width="200px"
+          inline-message
+        >
+          <el-form-item prop="password" :label="$t('Password')" required>
+            <el-input v-model="userInfo.password" type="password" :placeholder="$t('Password')" />
+          </el-form-item>
+          <el-form-item prop="confirm_password" :label="$t('Confirm Password')" required>
+            <el-input v-model="userInfo.confirm_password" type="password" :placeholder="$t('Confirm Password')" />
+          </el-form-item>
+          <el-form-item>
+            <div style="text-align: right">
+              <el-button type="success" size="small" @click="changePassword">
+                {{ $t('Save') }}
+              </el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <!--./更改密码-->
+
       <!--消息通知-->
       <el-tab-pane :label="$t('Notifications')" name="notify">
         <el-form
@@ -517,28 +540,51 @@
         input.select()
         document.execCommand('copy')
         this.$message.success(this.$t('Token copied'))
+      },
+      changePassword() {
+        this.$refs['change-password-form'].validate(async valid => {
+          if (!valid) return
+          if (this.userInfo.password !== this.userInfo.confirm_password) {
+            this.$message.error(this.$t('Two passwords do not match'))
+            return
+          }
+          if (this.userInfo.password.length < 5) {
+            this.$message.error(this.$t('Password length should be no shorter than 5'))
+            return
+          }
+          const res = await this.$request.post(`/me/change-password`, {
+            password: this.userInfo.password
+          })
+          if (!res.data.error) {
+            this.$message.success(this.$t('Changed password successfully'))
+          }
+        })
       }
     }
   }
 </script>
 
 <style scoped>
-  .setting-form {
+  .setting-form,
+  .change-password-form {
     width: 600px;
   }
 
-  .setting-form .buttons {
+  .setting-form .buttons,
+  .change-password-form .buttons {
     text-align: right;
   }
 
-  .setting-form .icon {
+  .setting-form .icon,
+  .change-password-form .icon {
     top: calc(50% - 14px / 2);
     right: 14px;
     position: absolute;
     color: #DCDFE6;
   }
 
-  .setting-form >>> .el-form-item__label {
+  .setting-form >>> .el-form-item__label,
+  .change-password-form >>> .el-form-item__label {
     height: 40px;
   }