From 6ad5f7c24d4e96db784c022b593f7c8334f9c02d Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 21 Feb 2020 17:14:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E5=AF=86=E7=A0=81?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20&=20=E5=85=B6=E4=BB=96=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.修改密码功能实现
2.取消dc cabinet 的修改链接、按钮
3.翻译内容修改
4.取消header - asset的复选显示效果
---
 .../src/components/common/header.vue          |  32 +++--
 .../src/components/common/language/en.js      |  20 ++-
 .../src/components/page/asset/asset.vue       |  42 +++---
 .../components/page/asset/assetAddUnit.vue    |  56 ++++----
 .../components/page/asset/assetEditUnit.vue   |  56 ++++----
 .../src/components/page/config/changePwd.vue  | 124 ++++++++++++++++++
 6 files changed, 242 insertions(+), 88 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/config/changePwd.vue

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 6eb14993e..198507991 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -57,15 +57,16 @@
         </template>
         <template v-for="(item, index) in assetData">
           <el-menu-item :index="'3-' + index">
-            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
+<!--            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">-->
+            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
               <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">
-                <template v-slot:optionZone>
-                  <div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">
-                    <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
-                  </div>
-                </template>
-              </idc-config-box>
+<!--              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">-->
+<!--                <template v-slot:optionZone>-->
+<!--                  <div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">-->
+<!--                    <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>-->
+<!--                  </div>-->
+<!--                </template>-->
+<!--              </idc-config-box>-->
             </div>
           </el-menu-item>
         </template>
@@ -106,6 +107,9 @@
           <div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
         </el-menu-item>
         <el-menu-item index="6-3">
+          <div @click="showPwdDialog">{{$t('overall.changePwd')}}</div>
+        </el-menu-item>
+        <el-menu-item index="6-4">
           <div @click="logout">{{$t('overall.signOut')}}</div>
         </el-menu-item>
       </el-submenu>
@@ -121,13 +125,16 @@
     <asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
                     @sendStateData="closeAsset"></asset-add-unit>
     <alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
+    <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
 <script>
   import bus from '../../libs/bus';
+  import changePwd from "../page/config/changePwd";
   export default {
     name: "Header",
+    components: {'change-password':changePwd},
     data() {
       return {
         username: sessionStorage.getItem("nz-username"),
@@ -213,7 +220,8 @@
         idcUserData: '',
         IDCOptionData: [],
         addUnitShow: false,
-        userDatas:[]
+        userDatas:[],
+        showChangePwd:false,
       }
     },
     methods: {
@@ -418,6 +426,12 @@
       refreshLang() {
         this.language = localStorage.getItem("nz-language-" + this.username);
         this.$i18n.locale = this.language;
+      },
+      showPwdDialog:function(){
+        this.showChangePwd=true;
+      },
+      dialogClosed:function(){
+        this.showChangePwd=false;
       }
     },
     created() {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 2ee04efa7..d39cf00c5 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -34,7 +34,8 @@ const en = {
     query: 'Query', //查询
     back: 'Back', //返回
     unavailable: 'Unavailable',
-    available: 'Available'
+    available: 'Available',
+   changePwd:'Change Password',//修改密码
   },
   dashboard:{
     title:'Dashboard',
@@ -157,7 +158,7 @@ const en = {
     refreshLater:'Refresh later'//'请稍后刷新'
   },
   asset:{
-    asset: 'Asset',//'资产'
+    asset: 'Assets',//'资产'
     EditAsset:'Edit asset',//'编辑资产'
     pingActive: 'active',//可ping通
     pingInactive:'inactive',
@@ -340,7 +341,16 @@ const en = {
       createAccount: 'New account',//"新增用户"
       editAccount: 'Edit account',//"编辑用户"
       notCurrentlySupport: 'Not available',//'暂不支持'
-      password: 'Password'//'密码'
+      password: 'Password',//'密码'
+      oldPwd:'Old Password',
+      inputOldPwd:'Please input old password',
+      newPwd:'New password',
+      inputNewPwd:'Please input new password',
+      confirmPwd:'Confirm Password',
+      inputConfirmPwd:'Please input confirm password',
+      invalidPwd:'invalide password,the length at least 6',
+      confirmPwdErr:'The two passwords are inconsistent',
+      reinputPwd:'Enter password again'
     },
     promServer: {
       promServerList: 'Prometheus server',//"Prometheus Server"
@@ -353,10 +363,10 @@ const en = {
     },
   },
   alert: {
-    alert: 'Alert',//"告警"
+    alert: 'Alerts',//"告警"
     message: 'Message',//'信息'
     rule: 'Rule',//'规则'
-    alertList: 'Alert information',//"告警信息"
+    alertList: 'Alert message',//"告警信息"
     alertConfig: 'Alert rule',//"告警规则"
     alertName: 'Alert name',//"告警名称"
     severity: 'Level',//"等级"
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 5d1eed226..9f3aeda12 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="asset" ref="asset">
     <div class="content-left">
-      <div class="sidebar-title">Asset</div>
+      <div class="sidebar-title">{{$t('asset.asset')}}</div>
       <div class="sidebar-info">
         <!--<div class="sidebar-info-header">ALL</div>-->
         <el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
@@ -17,13 +17,13 @@
               <span v-else>{{item.name}}</span>
             </div>
 
-            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">
-              <template v-slot:optionZone>
-                <span @click="closeAllPop">
-                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>
-                </span>
-              </template>
-            </idc-config-box>
+<!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
+<!--              <template v-slot:optionZone>-->
+<!--                <span @click="closeAllPop">-->
+<!--                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
+<!--                </span>-->
+<!--              </template>-->
+<!--            </idc-config-box>-->
           </el-checkbox>
         </el-checkbox-group>
       </div>
@@ -107,20 +107,22 @@
               <span v-else class="unclickable">{{scope.row.alertNum}}</span>
             </template>
             <div v-if="item.prop=='dataCenter'">
-              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">
-                <template v-slot:optionZone>
-<!--                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
-                  <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>
-                </template>
-              </idc-config-box>
+<!--              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
+<!--                <template v-slot:optionZone>-->
+<!--&lt;!&ndash;                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>&ndash;&gt;-->
+<!--                  <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
+<!--                </template>-->
+<!--              </idc-config-box>-->
+              <span  >{{scope.row.idc.name}}</span>
             </div>
             <template v-if="item.prop=='cabinet'">
-              <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox"  placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))"  @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">
-<!--                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>-->
-                <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>
-              </cabinet-config-box>
-              <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>
-
+<!--              <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='&#45;&#45;'" ref="cabinetConfigBox"  placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))"  @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">-->
+<!--&lt;!&ndash;                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>&ndash;&gt;-->
+<!--                <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>-->
+<!--              </cabinet-config-box>-->
+              <span   v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
+<!--              <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>-->
+              <span v-else >{{returnData(scope.row.cabinet)}}</span>
             </template>
             <div v-if="item.prop=='model'">
               <span>{{scope.row.model.name}}</span>
diff --git a/nezha-fronted/src/components/page/asset/assetAddUnit.vue b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
index be13c5326..759b89460 100644
--- a/nezha-fronted/src/components/page/asset/assetAddUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
@@ -256,7 +256,8 @@
           <div class="line-100 asset-line"></div>
           <!------------------------------------------IDC---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
-            <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
+<!--            <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
+            <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData"  placeholder="">
               <el-option
                 :id="'asset-add-idc-op'+item.key"
                 v-for="item in IDCOptionData"
@@ -265,22 +266,22 @@
                 :value="item.id"
               >
                 <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                <div class="config-dropdown-label-icons">
-                  <span class="config-dropdown-btn config-dropdown-btn-delete"
-                        @click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i
-                    class="el-icon-delete"></i></span>
-                  <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
-                    <template v-slot:optionZone>
-                      <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
-                    </template>
-                  </idc-config-box>
-                </div>
+<!--                <div class="config-dropdown-label-icons">-->
+<!--                  <span class="config-dropdown-btn config-dropdown-btn-delete"-->
+<!--                        @click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i-->
+<!--                    class="el-icon-delete"></i></span>-->
+<!--                  <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">-->
+<!--                    <template v-slot:optionZone>-->
+<!--                      <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>-->
+<!--                    </template>-->
+<!--                  </idc-config-box>-->
+<!--                </div>-->
               </el-option>
             </el-select>
-            <div class="right-box-row-btn right-box-row-btn-small">
-              <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
+<!--            <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
 
-            </div>
+<!--            </div>-->
           </el-form-item>
           <el-form-item :label="this.$t('asset.createAssetTab.location')">
             <span>{{idcSelectedData.location}}</span>
@@ -294,7 +295,8 @@
           <div class="line-100 asset-line"></div>
           <!------------------------------------------cabinet---------------------------------------------->
           <el-form-item :label="this.$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
-            <el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
+<!--            <el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
+            <el-select v-model="assetData.cabinetId" clearable popper-class="asset-dropdown"
                        :disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
                        @change="getSingleCabinetData">
               <el-option
@@ -305,21 +307,21 @@
                 :value="item.id"
               >
                 <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                <div class="config-dropdown-label-icons">
-                  <span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"
-                        @click.stop="deleteData('cabinet',item.id)">
-                    <i class="el-icon-delete"></i>
-                  </span>
-                  <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
-                    <i slot="optionZone" class="nz-icon nz-icon-edit"></i>
-                  </cabinet-config-box>
-                </div>
+<!--                <div class="config-dropdown-label-icons">-->
+<!--                  <span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"-->
+<!--                        @click.stop="deleteData('cabinet',item.id)">-->
+<!--                    <i class="el-icon-delete"></i>-->
+<!--                  </span>-->
+<!--                  <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">-->
+<!--                    <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
+<!--                  </cabinet-config-box>-->
+<!--                </div>-->
               </el-option>
             </el-select>
 
-            <div class="right-box-row-btn right-box-row-btn-small">
-              <cabinet-config-box placement="left"  :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
-            </div>
+<!--            <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <cabinet-config-box placement="left"  :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>-->
+<!--            </div>-->
           </el-form-item>
           <el-form-item :label="this.$t('asset.createAssetTab.uSize')">
             <span>{{cabinetSelectedData.uSize}}</span>
diff --git a/nezha-fronted/src/components/page/asset/assetEditUnit.vue b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
index 67e1a1069..46442983b 100644
--- a/nezha-fronted/src/components/page/asset/assetEditUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
@@ -297,7 +297,8 @@
           <!------------------------------------------IDC---------------------------------------------->
           <el-form-item :label="this.$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
             <template v-if="!tabView">
-              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
+<!--              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
+              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData"  placeholder="">
                 <el-option
                   :id="'asset-edit-idc-op-'+item.id"
                   v-for="item in IDCOptionData"
@@ -306,21 +307,21 @@
                   :value="item.id"
                 >
                   <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                  <div class="config-dropdown-label-icons">
-                    <span class="config-dropdown-btn config-dropdown-btn-delete"
-                          @click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i
-                      class="el-icon-delete"></i></span>
-                    <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
-                      <template v-slot:optionZone>
-                        <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
-                      </template>
-                    </idc-config-box>
-                  </div>
+<!--                  <div class="config-dropdown-label-icons">-->
+<!--                    <span class="config-dropdown-btn config-dropdown-btn-delete"-->
+<!--                          @click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i-->
+<!--                      class="el-icon-delete"></i></span>-->
+<!--                    <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">-->
+<!--                      <template v-slot:optionZone>-->
+<!--                        <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>-->
+<!--                      </template>-->
+<!--                    </idc-config-box>-->
+<!--                  </div>-->
                 </el-option>
               </el-select>
-              <div class="right-box-row-btn right-box-row-btn-small">
-                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
-              </div>
+<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
+<!--              </div>-->
             </template>
             <span v-if="tabView">{{assetViewData.idcName}}</span>
           </el-form-item>
@@ -339,7 +340,8 @@
           <!------------------------------------------cabinet---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
             <template v-if="!tabView">
-              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
+<!--              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
+              <el-select clearable v-model="assetData.cabinetId" clearable  popper-class="asset-dropdown"
                          :disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
                          @change="getSingleCabinetData">
                 <el-option
@@ -350,21 +352,21 @@
                   :value="item.id"
                 >
                   <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                  <div class="config-dropdown-label-icons">
-                    <span class="config-dropdown-btn config-dropdown-btn-delete"
-                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">
-                      <i class="el-icon-delete"></i>
-                    </span>
-                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
-                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>
-                    </cabinet-config-box>
-                  </div>
+<!--                  <div class="config-dropdown-label-icons">-->
+<!--                    <span class="config-dropdown-btn config-dropdown-btn-delete"-->
+<!--                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">-->
+<!--                      <i class="el-icon-delete"></i>-->
+<!--                    </span>-->
+<!--                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">-->
+<!--                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
+<!--                    </cabinet-config-box>-->
+<!--                  </div>-->
                 </el-option>
               </el-select>
 
-              <div class="right-box-row-btn right-box-row-btn-small">
-                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>
-              </div>
+<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>-->
+<!--              </div>-->
             </template>
             <span v-if="tabView">{{assetViewData.cabinetName}}</span>
           </el-form-item>
diff --git a/nezha-fronted/src/components/page/config/changePwd.vue b/nezha-fronted/src/components/page/config/changePwd.vue
new file mode 100644
index 000000000..49b7c22a2
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/changePwd.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-dialog :title="$t('overall.changePwd')" :visible.sync="visible"  @open="dialogOpened"  :modal-append-to-body='false' @closed="dialogClosed" width="600px" :show-close="false" >
+      <el-form :model="user" label-position="right" label-width="135px" :rules="rules" ref="changePwdForm" size="mini">
+        <el-form-item :label="$t('config.account.account')" prop="username">
+          <el-input type="text" autocomplete="false" v-model="user.username" disabled></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.account.oldPwd')" prop="pwd">
+          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.pwd" maxlength="20" :placeholder="$t('config.account.inputOldPwd')"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.account.newPwd')" prop="newPwd">
+          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPwd" maxlength="20" :placeholder="$t('config.account.inputNewPwd')"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.account.confirmPwd')" prop="confirmPwd">
+          <el-input type="password" autocomplete="false"  :show-password="true" v-model="user.confirmPwd" maxlength="20" :placeholder="$t('config.account.inputConfirmPwd')"></el-input>
+        </el-form-item>
+      </el-form>
+      <!--底部按钮-->
+      <template slot="footer">
+        <div class="right-box-bottom-btns" >
+          <button @click="close" id="account-esc"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+            <span>{{$t('overall.cancel')}}</span>
+          </button>
+          <button  @click="changePwd" id="account-save"
+                   class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+            <span>{{$t('overall.save')}}</span>
+          </button>
+        </div>
+      </template>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: "changePwd",
+      props:{
+        curUser:{type:String},
+        showDialog:{type:Boolean,default:false}
+      },
+      data(){
+        let temp=this;
+        var validatePass = (rule, value, callback) => {
+          if(value && value != '' && value.length >= 6){
+            callback();
+          }else{
+            callback(new Error(temp.$t('config.account.invalidPwd')))
+          }
+        };
+        var validateConfirmPass=(rule,value,callback) => {
+          if(value && value != '' && value == temp.user.newPwd){
+            callback();
+          }else{
+            callback(new Error(temp.$t('config.account.confirmPwdErr')))
+          }
+        }
+        return {
+          user:{
+            username:'',
+            pwd:'',
+            newPwd:'',
+            confirmPwd:''
+          },
+          rules:{
+            pwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'}],
+            newPwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'},{validator:validatePass,trigger: 'blur'}],
+            confirmPwd:[{required:true,message: this.$t('config.account.reinputPwd'), trigger: 'blur'},{validator:validateConfirmPass,trigger: 'blur'}]
+          },
+          visible:false,
+        }
+      },
+      created() {
+        this.user.username=this.curUser && this.curUser != ''?this.curUser:sessionStorage.getItem("nz-username");
+      },
+      methods:{
+        dialogOpened:function(){
+          if(this.$refs.changePwdForm){
+            this.$refs.changePwdForm.resetFields();
+          }
+        },
+        dialogClosed:function(){
+          this.$emit('dialogClosed')
+        },
+        close:function(){
+          this.visible=false;
+        },
+        changePwd:function(){
+          this.$refs.changePwdForm.validate((valid)=>{
+            if(valid){
+              let paramObj={
+                password:this.user.pwd,
+                newPassword:this.user.newPwd
+              }
+              this.$get('/sys/user/password?password='+paramObj.password+"&newPassword="+paramObj.newPassword).then(response=>{
+                if(response && response.code == 200){
+                  this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.close();
+                }else{
+                  this.$message.error(response.msg);
+                }
+              })
+            }
+          })
+        }
+      },
+      watch:{
+        showDialog:function(n,o){
+          this.visible=n;
+        }
+      }
+    }
+</script>
+
+<style >
+  .el-dialog__footer {
+    margin-top: 30px;
+    padding: 10px 20px 20px;
+    text-align: right;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+</style>