新增 用户密码初始化框

Author: yumao233

src/app/views/Overview.vue

@@ -205,11 +205,14 @@
       </el-row>
     </template>
   </Panel>
+
+  <UserInit v-model:visible="initUserVisible"></UserInit>
 </template>
 
 <script>
 import * as echarts from "echarts";
 import Panel from "../../components/Panel";
+import UserInit from "../../components/UserInit";
 // import LineLabel from "../../components/LineLabel";
 import { request } from "../service/protocol";
 import { API_OVERVIEW } from "../service/common";
@@ -220,6 +223,7 @@ import {
 } from "../service/chart_option";
 import ValueCard from "../../components/ValueCard";
 export default {
+  components: { Panel, ValueCard, UserInit },
   data() {
     return {
       loading: true,
@@ -253,7 +257,10 @@ export default {
         totalLogin: 0,
         failedLogin: 0,
         Logined: 0
-      }
+      },
+
+      // 初始化用户密码窗口
+      initUserVisible: false
     };
   },
   methods: {
@@ -480,7 +487,6 @@ export default {
       this.setSystemChart();
     }
   },
-  components: { Panel, ValueCard },
   async mounted() {
     this.loading = true;
     const data = await this.request();
@@ -489,6 +495,13 @@ export default {
     this.loading = false;
     this.manualLink = window.onlineMCSManagerNotice ? window.onlineMCSManagerNotice() : null;
     this.startInterval();
+
+    setTimeout(() => {
+      const { isInit, permission } = this.$store.state.userInfo;
+      if (isInit === false && permission === 10) {
+        this.initUserVisible = true;
+      }
+    }, 1000);
   },
   beforeUnmount() {
     this.stopInterval();

src/components/Dialog.vue

@@ -28,7 +28,7 @@
             <template #title>
               <div class="flex flex-space-between flex-align-items-center" style="width: 100%">
                 <slot name="title"></slot>
-                <div class="component-dialog-close-button" @click="close">
+                <div class="component-dialog-close-button" @click="close" v-if="canClose">
                   <i class="el-icon-close"></i>
                 </div>
               </div>
@@ -52,7 +52,11 @@ export default {
   props: {
     modelValue: Boolean,
     cancel: Function,
-    style: String
+    style: String,
+    canClose: {
+      type: Boolean,
+      default: true
+    }
   },
   emits: ["update:modelValue"],
   data: function () {

src/components/UserInit.vue

@@ -0,0 +1,103 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<!--
+  Copyright (C) 2022 Suwings <[email protected]>
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+  
+  According to the AGPL, it is forbidden to delete all copyright notices, 
+  and if you modify the source code, you must open source the
+  modified source code.
+
+  版权所有 (C) 2022 Suwings <[email protected]>
+
+  该程序是免费软件，您可以重新分发和/或修改据 GNU Affero 通用公共许可证的条款，
+  由自由软件基金会，许可证的第 3 版，或（由您选择）任何更高版本。
+
+  根据 AGPL 与用户协议，您必须保留所有版权声明，如果修改源代码则必须开源修改后的源代码。
+  可以前往 https://mcsmanager.com/ 阅读用户协议，申请闭源开发授权等。
+-->
+
+<template>
+  <Dialog v-model="visible" :canClose="false">
+    <template #title>请更改密码</template>
+    <template #default>
+      <div class="content">
+        <div class="sub-title">
+          <div class="sub-title-title require-field">重置最高级别账号密码</div>
+          <div class="sub-title-info">
+            为确保面板安全，第一次登录必须重设密码，密码必须由大写字母，小写字母和数字组成，长度为
+            12 到 36 位
+          </div>
+          <div class="row-mt">
+            <el-input
+              type="text"
+              v-model="passWord"
+              autocomplete="off"
+              placeholder="请输入您要设置的新密码"
+            />
+            <div style="text-align: right">
+              <el-button size="small" class="row-mt" @click="submit()" type="danger" plain
+                >重置密码</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import { API_USER_UPDATE } from "../app/service/common";
+import { request } from "../app/service/protocol";
+import Dialog from "./Dialog";
+
+export default {
+  components: { Dialog },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      passWord: ""
+    };
+  },
+  mounted() {},
+  methods: {
+    async submit() {
+      try {
+        await request({
+          method: "PUT",
+          url: API_USER_UPDATE,
+          data: {
+            passWord: this.passWord,
+            isInit: true
+          }
+        });
+        this.$message({ message: "已设置密码，欢迎使用", type: "success" });
+        this.$emit("update:visible", false);
+      } catch (error) {
+        this.$message({
+          message: error,
+          type: "error"
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.content {
+  max-width: 500px;
+}
+.title {
+  margin: 8px 0px;
+}
+</style>