From 2930add85f5d27cf1ce93865d1c7c2d5b01e495f Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Fri, 10 Feb 2023 16:29:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9IP=E3=80=81=E5=AD=90=E7=BD=91?=
 =?UTF-8?q?=E6=8E=A9=E7=A0=81=E7=9A=84=E6=A0=A1=E9=AA=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/ValidationUtil.ts                  |  59 ++
 src/components/AdvancedIpAddressDialog.vue    |  19 +-
 src/components/CenterControlButtonDialog.vue  |  18 +-
 src/components/CenterControlDialog.vue        |   8 +-
 .../EditJointActionEquipmentDialog.vue        |  11 +-
 src/components/SystemSettingDialog.vue        |  21 +-
 .../SystenSettingAdvancedNetworkDialog.vue    |  12 +-
 src/i18n/en-US/index.ts                       |  22 +-
 src/i18n/zh-CN/index.ts                       |  21 +-
 src/pad/Login.vue                             |  10 +-
 src/pages/Login.vue                           | 964 +++++++++---------
 11 files changed, 594 insertions(+), 571 deletions(-)
 create mode 100644 src/common/ValidationUtil.ts

diff --git a/src/common/ValidationUtil.ts b/src/common/ValidationUtil.ts
new file mode 100644
index 0000000..4e1a7b5
--- /dev/null
+++ b/src/common/ValidationUtil.ts
@@ -0,0 +1,59 @@
+export default class ValidationUtil {
+  static isIpAddress(str: string): boolean {
+    return (
+      str == "localhost" ||
+      /^([1-9]|[1-9][0-9]|1\d\d|2[0-2][0-3])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])\.([1-9]|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-4])$/.test(
+        str
+      )
+    );
+  }
+
+  static isHost(str: string): boolean {
+    return (
+      str == "localhost" ||
+      /^([1-9]|[1-9][0-9]|1\d\d|2[0-2][0-3])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])\.([1-9]|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-4])$/.test(
+        str
+      ) ||
+      /^([1-9]|[1-9][0-9]|1\d\d|2[0-2][0-3])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])\.([1-9]|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-4])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test(
+        str
+      )
+    );
+  }
+
+  static isMacAddress(str: string): boolean {
+    return /([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}/.test(str);
+  }
+
+  static isMaskAddress(str: string): boolean {
+    return /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/.test(
+      str
+    );
+  }
+
+  static isHexStr(str: string): boolean {
+    if (str != null && str != undefined && typeof str == "string") {
+      str = str.trim();
+      if (str.length == 0) {
+        return true;
+      }
+      for (const item of str.split(" ")) {
+        if (item.length > 4) {
+          return false;
+        }
+        if (!/^0[xX][A-Fa-f0-9]{1,2}/.test(item)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+
+  static isResolution(str: string): boolean {
+    return /([0-9]{1,5})[x|X]([0-9]{1,5}@[0-9]{1,3}$)/.test(str);
+  }
+
+  static isEnglishOrNum(str: string): boolean {
+    return /^[0-9a-zA-Z_\-]+$/.test(str);
+  }
+}
diff --git a/src/components/AdvancedIpAddressDialog.vue b/src/components/AdvancedIpAddressDialog.vue
index 6664c8a..6b1abec 100644
--- a/src/components/AdvancedIpAddressDialog.vue
+++ b/src/components/AdvancedIpAddressDialog.vue
@@ -88,7 +88,8 @@
                     (val) =>
                       (val && val.length > 0) || $t('Please type something'),
                     (val) =>
-                      isIpAddress(val) || $t('Please input vaild ip address'),
+                      isMaskAddress(val) ||
+                      $t('Please input vaild netmask address'),
                   ]"
                   lazy-rules
                 />
@@ -162,12 +163,12 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, ref, Ref, reactive } from "vue";
+import { defineComponent, ref } from "vue";
 import { useStore } from "src/store";
-import { useQuasar, copyToClipboard, uid } from "quasar";
+import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
-import GlobalData from "src/common/GlobalData";
 import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
+import ValidationUtil from "src/common/ValidationUtil";
 
 export default defineComponent({
   name: "ComponentSystenSettingAdvancedNetworkDialog",
@@ -267,12 +268,10 @@ export default defineComponent({
         } catch {}
       },
       isIpAddress(str: string) {
-        return (
-          str == "localhost" ||
-          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-            str
-          )
-        );
+        return ValidationUtil.isIpAddress(str);
+      },
+      isMaskAddress(str: string) {
+        return ValidationUtil.isMaskAddress(str);
       },
       checkFilterListIp(str: string) {
         if (Array.isArray(ip_filter_list)) {
diff --git a/src/components/CenterControlButtonDialog.vue b/src/components/CenterControlButtonDialog.vue
index b4f6452..8817b80 100644
--- a/src/components/CenterControlButtonDialog.vue
+++ b/src/components/CenterControlButtonDialog.vue
@@ -139,6 +139,7 @@ import { useQuasar, copyToClipboard } from "quasar";
 import { useI18n } from "vue-i18n";
 
 import { ExternalControlTableEntity } from "src/entities/ExternalControlTableEntity";
+import ValidationUtil from "src/common/ValidationUtil";
 
 export default defineComponent({
   name: "ComponentCenterControlButtonDialog",
@@ -246,22 +247,7 @@ export default defineComponent({
         show_dialog.value = false;
       },
       isHexStr(val: string) {
-        if (val != null && val != undefined && typeof val == "string") {
-          val = val.trim();
-          if (val.length == 0) {
-            return true;
-          }
-          for (const item of val.split(" ")) {
-            if (item.length > 4) {
-              return false;
-            }
-            if (!/^0[xX][A-Fa-f0-9]{1,2}/.test(item)) {
-              return false;
-            }
-          }
-          return true;
-        }
-        return false;
+        return ValidationUtil.isHexStr(val);
       },
     };
   },
diff --git a/src/components/CenterControlDialog.vue b/src/components/CenterControlDialog.vue
index faaa642..1bbc577 100644
--- a/src/components/CenterControlDialog.vue
+++ b/src/components/CenterControlDialog.vue
@@ -406,6 +406,7 @@ import {
   SerialPortConfigEntity,
 } from "src/entities/SerialPortConfigEntity";
 import { Protocol } from "src/entities/WSProtocol";
+import ValidationUtil from "src/common/ValidationUtil";
 
 export default defineComponent({
   name: "ComponentCenterControlDialog",
@@ -733,12 +734,7 @@ export default defineComponent({
         }
       },
       isIpAddress(str: string) {
-        return (
-          str == "localhost" ||
-          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-            str
-          )
-        );
+        return ValidationUtil.isIpAddress(str);
       },
     };
   },
diff --git a/src/components/EditJointActionEquipmentDialog.vue b/src/components/EditJointActionEquipmentDialog.vue
index f8d9466..cdd4574 100644
--- a/src/components/EditJointActionEquipmentDialog.vue
+++ b/src/components/EditJointActionEquipmentDialog.vue
@@ -152,6 +152,7 @@ import { api } from "boot/axios";
 import { HttpProtocol } from "src/entities/HttpProtocol";
 import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import ValidationUtil from "src/common/ValidationUtil";
 
 export default defineComponent({
   name: "ComponentEditJointActionEquipmentDialog",
@@ -330,15 +331,7 @@ export default defineComponent({
         }
       },
       isHost(str: string) {
-        return (
-          str == "localhost" ||
-          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-            str
-          ) ||
-          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test(
-            str
-          )
-        );
+        return ValidationUtil.isHost(str);
       },
     };
   },
diff --git a/src/components/SystemSettingDialog.vue b/src/components/SystemSettingDialog.vue
index 1c7603a..dffb4b1 100644
--- a/src/components/SystemSettingDialog.vue
+++ b/src/components/SystemSettingDialog.vue
@@ -190,8 +190,8 @@
                               (val && val.length > 0) ||
                               $t('Please type something'),
                             (val) =>
-                              isIpAddress(val) ||
-                              $t('Please input vaild ip address'),
+                              isMaskAddress(val) ||
+                              $t('Please input vaild netmask address'),
                           ]"
                           lazy-rules
                         />
@@ -1454,7 +1454,7 @@ import TimingTaskDialog from "src/components/TimingTaskDialog.vue";
 
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
-import { HttpProtocol } from "src/entities/HttpProtocol";
+import ValidationUtil from "src/common/ValidationUtil";
 import { date } from "quasar";
 import { Protocol } from "src/entities/WSProtocol";
 import TimingTaskEntity, {
@@ -2512,20 +2512,17 @@ export default defineComponent({
         }
       },
       isIpAddress(str: string) {
-        return (
-          str == "localhost" ||
-          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-            str
-          )
-        );
+        return ValidationUtil.isIpAddress(str);
       },
       isMacAddress(str: string) {
-        return /([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}/.test(str);
+        return ValidationUtil.isMacAddress(str);
+      },
+      isMaskAddress(str: string) {
+        return ValidationUtil.isMaskAddress(str);
       },
       checkResolution(str: string) {
-        const reg = /([0-9]{1,5})[x|X]([0-9]{1,5}@[0-9]{1,3}$)/;
         return (
-          reg.test(str) ||
+          ValidationUtil.isResolution(str) ||
           $t.t("the resolution format is incorrect,") +
             $t.t("for example: ") +
             "1920x1080@60"
diff --git a/src/components/SystenSettingAdvancedNetworkDialog.vue b/src/components/SystenSettingAdvancedNetworkDialog.vue
index 68902b0..2bf3115 100644
--- a/src/components/SystenSettingAdvancedNetworkDialog.vue
+++ b/src/components/SystenSettingAdvancedNetworkDialog.vue
@@ -294,6 +294,7 @@ import AdvancedIpAddressDialog from "src/components/AdvancedIpAddressDialog.vue"
 import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
 import { api } from "src/boot/axios";
 import { HttpProtocol } from "src/entities/HttpProtocol";
+import ValidationUtil from "src/common/ValidationUtil";
 
 export default defineComponent({
   name: "ComponentSystenSettingAdvancedNetworkDialog",
@@ -353,15 +354,6 @@ export default defineComponent({
 
     const advance_ip_rows: Ref<AdvancedIpAddressEntity[]> = ref([]);
 
-    const isIpAddress = (str: string) => {
-      return (
-        str == "localhost" ||
-        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-          str
-        )
-      );
-    };
-
     let _resolove: any = null;
 
     return {
@@ -629,7 +621,7 @@ export default defineComponent({
         });
       },
       isEnglishOrNum(str: string) {
-        return /^[0-9a-zA-Z_\-]+$/.test(str);
+        return ValidationUtil.isEnglishOrNum(str);
       },
     };
   },
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 190c6fe..2914a8b 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -57,7 +57,7 @@ export default {
   Accept: "Accept",
   "move speed": "Move Speed",
   "y offset": "Y Offset",
-  "the number must be greater than 0":"the number must be greater than 0",
+  "the number must be greater than 0": "the number must be greater than 0",
   "pos x": "X Position",
   "pos y": "Y Position",
   width: "Width",
@@ -434,14 +434,14 @@ export default {
   "verify key length is 6": "Verify Key Length Is 6",
   server: "Server",
   "set cloud server setting": "Set Cloud Server Setting",
-  "set magic wall":"Set Magic wall",
-  "update magic wall":"Update Magic Wall",
-  "magic wall":"Magic Wall",
-  "angle":"Angle",
-  "topology diagram":"Topology Diagram",
-  "physical central location":"Central Location",
-  "monitors list":"Monitors List",
-  "resize":"Resize",
-  "export magic":"Export",
-  "raster graph":"Raster Graph"
+  "set magic wall": "Set Magic wall",
+  "update magic wall": "Update Magic Wall",
+  "magic wall": "Magic Wall",
+  angle: "Angle",
+  "topology diagram": "Topology Diagram",
+  "physical central location": "Central Location",
+  "monitors list": "Monitors List",
+  resize: "Resize",
+  "export magic": "Export",
+  "raster graph": "Raster Graph",
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 01cc120..6c3a6a4 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -123,6 +123,7 @@ export default {
   "local disk": "本地磁盘",
   usb: "U盘",
   "Please input vaild ip address": "请输入合法的IP地址",
+  "Please input vaild netmask address": "请输入合法的掩码地址",
   "Please input vaild mac address": "请输入合法的MAC地址",
   "server ip address": "服务器地址",
   "please input server ip address": "请输入服务器地址",
@@ -701,14 +702,14 @@ export default {
   "verify key length is 6": "校验码长度必须为6",
   server: "服务",
   "set cloud server setting": "设置云服务器",
-  "set magic wall":"设置魔墙",
-  "update magic wall":"更新魔墙",
-  "magic wall":"魔墙",
-  "angle":"角度",
-  "topology diagram":"拓扑图",
-  "physical central location":"物理中心位置",
-  "monitors list":"显示器",
-  "resize":"缩放",
-  "export magic":"导出",
-  "raster graph":"栅格图"
+  "set magic wall": "设置魔墙",
+  "update magic wall": "更新魔墙",
+  "magic wall": "魔墙",
+  angle: "角度",
+  "topology diagram": "拓扑图",
+  "physical central location": "物理中心位置",
+  "monitors list": "显示器",
+  resize: "缩放",
+  "export magic": "导出",
+  "raster graph": "栅格图",
 };
diff --git a/src/pad/Login.vue b/src/pad/Login.vue
index 69a3db7..0cd4934 100644
--- a/src/pad/Login.vue
+++ b/src/pad/Login.vue
@@ -68,11 +68,7 @@
                           (val && val.length > 0) ||
                           $t('Please type something'),
                         (val) =>
-                          val == 'localhost' ||
-                          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-                            val
-                          ) ||
-                          $t('Please input vaild ip address'),
+                          isHost(val) || $t('Please input vaild ip address'),
                       ]"
                       @keydown="
                         (evt) => {
@@ -363,6 +359,7 @@ import Initializer from "src/common/Initializer";
 import { api } from "src/boot/axios";
 import { HttpProtocol } from "src/entities/HttpProtocol";
 import { Plugins as CapacitorPlugins } from "@capacitor/core";
+import ValidationUtil from "src/common/ValidationUtil";
 
 class _Data {
   user_name: string | null = null;
@@ -699,6 +696,9 @@ export default defineComponent({
           }
         }
       },
+      isHost(str: string) {
+        return ValidationUtil.isHost(str);
+      },
     };
   },
 });
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index c19d5a6..02c8add 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,482 +1,482 @@
-<template>
-  <q-layout view="hHh lpR fFf">
-    <img
-      v-if="landspace"
-      src="login/login_background.png"
-      class="fit"
-      style="position: fixed"
-    />
-    <q-page-container>
-      <q-page
-        class="row items-center"
-        style="position: ; /*fixed*/"
-        :class="landspace ? '' : 'justify-evenly'"
-        :style="landspace ? { left: '50%' } : {}"
-      >
-        <q-card :style="{ width: (landspace ? 34 : 70) + 'vw' }">
-          <q-card-section class="text-center text-h6">
-            {{ $t("login") }}
-          </q-card-section>
-          <q-separator />
-          <q-card-section class="fit">
-            <q-form ref="login_form" @submit="onSubmit" @reset="onReset">
-              <q-list class="fit">
-                <q-item v-if="$store.state.advanced_debug">
-                  <q-item-section>
-                    <q-input
-                      :autofocus="!data.ip_address"
-                      outlined
-                      :loading="data.loading"
-                      :disable="data.loading"
-                      v-model="data.ip_address"
-                      :label="$t('server ip address')"
-                      :hint="$t('please input server ip address')"
-                      lazy-rules
-                      :rules="[
-                        (val) =>
-                          (val && val.length > 0) ||
-                          $t('Please type something'),
-                        (val) =>
-                          val == 'localhost' ||
-                          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-                            val
-                          ) ||
-                          $t('Please input vaild ip address'),
-                      ]"
-                      @keydown="
-                        (evt) => {
-                          if (evt.keyCode == 13) {
-                            $refs?.user_name?.focus();
-                          }
-                        }
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="public" class="background" />
-                      </template>
-                      <template v-if="data.ip_address" v-slot:append>
-                        <q-icon
-                          name="cancel"
-                          @click.stop="data.ip_address = null"
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </q-item-section>
-                </q-item>
-
-                <q-item>
-                  <q-item-section>
-                    <q-input
-                      :autofocus="!data.user_name"
-                      outlined
-                      ref="user_name"
-                      :loading="data.loading"
-                      :disable="data.loading"
-                      v-model="data.user_name"
-                      :label="$t('user name')"
-                      :hint="$t('please input user name')"
-                      lazy-rules
-                      :rules="[
-                        (val) =>
-                          (val && val.length > 0) ||
-                          $t('Please type something'),
-                      ]"
-                      @keydown="
-                        (evt) => {
-                          if (evt.keyCode == 13) {
-                            $refs?.password_input?.focus();
-                          }
-                        }
-                      "
-                    >
-                      <template v-slot:prepend >
-                        <q-icon name="account_circle" class="background"  />
-                      </template>
-                      <template v-if="data.user_name" v-slot:append>
-                        <q-icon
-                          name="cancel"
-                          @click.stop="data.user_name = null"
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </q-item-section>
-                </q-item>
-
-                <q-item>
-                  <q-item-section>
-                    <q-input
-                      outlined
-                      ref="password_input"
-                      :loading="data.loading"
-                      :disable="data.loading"
-                      :type="data.show_password ? '' : 'password'"
-                      v-model="data.password"
-                      :label="$t('password')"
-                      :hint="$t('please input password')"
-                      lazy-rules
-                      :rules="[
-                        (val) =>
-                          (val && val.length > 0) ||
-                          $t('Please type something'),
-                      ]"
-                      @keydown="
-                        (evt) => {
-                          if (evt.keyCode == 13) {
-                            $refs?.login_button?.click();
-                          }
-                        }
-                      "
-                    >
-                      <template v-slot:prepend >
-                        <q-icon name="key" class="background" />
-                      </template>
-                      <template v-if="data.password" v-slot:append>
-                        <q-icon
-                          :name="
-                            data.show_password ? 'visibility' : 'visibility_off'
-                          "
-                          class="cursor-pointer"
-                          @click="data.show_password = !data.show_password"
-                        />
-                        <q-icon
-                          name="cancel"
-                          @click.stop="data.password = null"
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </q-item-section>
-                </q-item>
-                <q-item class="q-mt-md">
-                  <q-item-section>
-                    <q-checkbox
-                      :label="$t('remember password')"
-                      v-model="remember_password"
-                      :disable="data.loading"
-                    />
-                  </q-item-section>
-                  <q-item-section>
-                    <q-checkbox
-                      :label="$t('auto login')"
-                      v-model="auto_login"
-                      @update:model-value="remember_password = true"
-                      :disable="data.loading"
-                    />
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-form>
-          </q-card-section>
-          <q-card-actions class="q-px-lg">
-            <q-btn
-              ref="login_button"
-              class="full-width text-h6"
-              :loading="data.loading"
-              :label="$t('login')"
-              no-caps
-              style="
-                background: #273de4;
-                box-shadow: 0 4px 6px 0px rgb(39 60 228 / 40%);
-              "
-              text-color="white"
-              @click="$refs?.login_form?.submit()"
-            />
-          </q-card-actions>
-        </q-card>
-      </q-page>
-    </q-page-container>
-  </q-layout>
-</template>
-
-<style scoped>
-.background{
-  color: #3f69fd;
-}
-</style>
-
-<script lang="ts">
-import { defineComponent, onMounted, reactive, ref, Ref, computed } from "vue";
-
-import GlobalData from "src/common/GlobalData";
-import { Cookies, LocalStorage, SessionStorage, useQuasar } from "quasar";
-import ClientConnection from "src/common/ClientConnection";
-import PermissionLevel from "src/entities/PermissionLevel";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
-import EventBus, { EventNamesDefine } from "src/common/EventBus";
-import { useStore } from "src/store";
-import { Md5 } from "ts-md5";
-import Initializer from "src/common/Initializer";
-import { api } from "src/boot/axios";
-import { HttpProtocol } from "src/entities/HttpProtocol";
-
-class _Data {
-  user_name: string | null = null;
-  password: string | null = null;
-  loading = false;
-  ip_address = window.location.hostname;
-  show_password = false;
-
-  constructor() {
-    let temp = LocalStorage.getItem("default_ip_address");
-    if (temp) {
-      this.ip_address = temp.toString();
-    } else {
-      this.ip_address = window.location.hostname;
-    }
-
-    temp = LocalStorage.getItem("default_user_name");
-    if (temp) {
-      this.user_name = temp.toString();
-    }
-
-    temp = LocalStorage.getItem("default_password");
-    if (temp) {
-      this.password = temp.toString();
-    }
-  }
-}
-
-export default defineComponent({
-  name: "PageLogin",
-
-  components: {},
-
-  setup() {
-    const $q = useQuasar();
-    const $t = useI18n();
-    const $route = useRouter();
-    const $store = useStore();
-    const data = reactive(new _Data());
-
-    try {
-      (window as any).setPcTheme();
-    } catch {}
-
-    const login_form: Ref<any> = ref(null);
-
-    const remember_password = ref(false);
-    const auto_login = ref(false);
-    let cache_password: string | null = null;
-
-    let web_socket: ClientConnection | null = null;
-    let is_pwa = ["fullscreen", "standalone", "minimal-ui"].some(
-      (displayMode) =>
-        window.matchMedia("(display-mode: " + displayMode + ")").matches
-    );
-
-    const landspace = computed({
-      get: () => $store.state.landspace,
-      set: (val) => null,
-    });
-
-    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
-      landspace.value = window.innerHeight < window.innerWidth;
-    });
-
-    onMounted(() => {
-      console.log((<any>window).user_search);
-      if ((<any>window).user_search?.user && (<any>window).user_search?.pwd) {
-        if ((<any>window).user_search?.host) {
-          data.ip_address = (<any>window).user_search?.host;
-        }
-        data.user_name = (<any>window).user_search?.user;
-        data.password = (<any>window).user_search?.pwd;
-        login_form.value.submit();
-      } else {
-        if (auto_login.value) {
-          login_form.value.submit();
-        }
-      }
-    });
-
-    try {
-      remember_password.value = JSON.parse(
-        Cookies.get("remember_password")
-      ) as boolean;
-      auto_login.value = JSON.parse(Cookies.get("auto_login")) as boolean;
-      if (
-        typeof remember_password.value == "undefined" ||
-        remember_password.value == null
-      ) {
-        remember_password.value = false;
-      }
-
-      if (typeof auto_login.value == "undefined" || auto_login.value == null) {
-        auto_login.value = false;
-      }
-
-      if (remember_password.value) {
-        data.user_name = Cookies.get("user_name") ?? data.user_name;
-        cache_password = Cookies.get("password");
-        if (
-          typeof cache_password != "undefined" &&
-          cache_password != null &&
-          cache_password.length == 32
-        ) {
-          data.password = cache_password;
-        } else {
-          cache_password = null;
-        }
-      }
-    } catch {}
-
-    return {
-      login_form,
-      data,
-      remember_password,
-      auto_login,
-      landspace,
-      is_pwa,
-      async onSubmit() {
-        data.loading = true;
-        return new Promise((resolve) => {
-          try {
-            let global_data = GlobalData.getInstance();
-            api
-              .get(HttpProtocol.RequestPathGetWebscoketPort)
-              .then((response) => {
-                let final_ws_port = GlobalData.kDefaultWebsocektPort;
-                if (response && typeof response.data != "undefined") {
-                  if (typeof response.data != "number") {
-                    const temp_port = parseInt(response.data);
-                    if (!isNaN(temp_port) && temp_port != Infinity) {
-                      final_ws_port = temp_port;
-                    }
-                  } else {
-                    final_ws_port = response.data;
-                  }
-                  const url =
-                    "ws://" +
-                    data.ip_address +
-                    ":" +
-                    final_ws_port.toString() +
-                    GlobalData.kWebsocketResource;
-                  web_socket = new ClientConnection(
-                    url,
-                    data.user_name,
-                    data.password == cache_password
-                      ? data.password
-                      : Md5.hashStr(data.password ?? "admin")
-                  );
-                  let timer = setTimeout(() => {
-                    web_socket?.destory();
-                    web_socket = null;
-                    $q.notify({
-                      color: "negative",
-                      icon: "warning",
-                      message:
-                        $t.t("login fail!") +
-                        $t.t("connect time out!") +
-                        $t.t(
-                          "please check server state, or check server ip address!"
-                        ),
-                      position: "center",
-                      timeout: 1500,
-                    });
-                    SessionStorage.set("auth", PermissionLevel.None);
-                    resolve(false);
-                    data.loading = false;
-                  }, 5000);
-                  web_socket.login_callback = (is_login) => {
-                    clearTimeout(timer);
-                    if (is_login && web_socket) {
-                      global_data.addClient(data.ip_address, web_socket);
-                      global_data.setCurrentClientName(data.ip_address);
-
-                      SessionStorage.set("auth", PermissionLevel.Root);
-                      SessionStorage.set("url", url);
-                      SessionStorage.set("name", data.ip_address);
-                      SessionStorage.set("user_name", data.user_name);
-                      SessionStorage.set(
-                        "password",
-                        data.password == cache_password
-                          ? data.password
-                          : Md5.hashStr(data.password ?? "admin")
-                      );
-
-                      // TODO add self to setConnects
-
-                      if (remember_password.value) {
-                        Cookies.set("remember_password", JSON.stringify(true), {
-                          expires: 15,
-                        });
-                        Cookies.set(
-                          "auto_login",
-                          JSON.stringify(auto_login.value),
-                          {
-                            expires: 15,
-                          }
-                        );
-                        Cookies.set("user_name", data.user_name ?? "admin", {
-                          expires: 15,
-                        });
-                        Cookies.set(
-                          "password",
-                          data.password == cache_password
-                            ? data.password ?? Md5.hashStr("admin")
-                            : Md5.hashStr(data.password ?? "admin"),
-                          {
-                            expires: 15,
-                          }
-                        );
-                      } else {
-                        Cookies.remove("remember_password");
-                        Cookies.remove("auto_login");
-                        Cookies.remove("name");
-                        Cookies.remove("user_name");
-                        Cookies.remove("password");
-                      }
-
-                      $store.commit("setDeviceIpAddress", data.ip_address);
-
-                      setTimeout(() => {
-                        new Initializer({
-                          $t,
-                          $store,
-                          $q,
-                        })
-                          .initialize()
-                          .then(() => {
-                            $store.commit("setInitialized");
-                          });
-                      }, 0);
-
-                      $route.push("/");
-                    } else {
-                      $q.notify({
-                        color: "negative",
-                        icon: "warning",
-                        message:
-                          $t.t("login fail!") + $t.t("user or password error!"),
-                        position: "center",
-                        timeout: 1500,
-                      });
-                      SessionStorage.set("auth", PermissionLevel.None);
-                    }
-                    resolve(true);
-                    data.loading = false;
-                  };
-                }
-              })
-              .catch(() => {
-                resolve(true);
-                data.loading = false;
-              });
-          } catch {
-            resolve(true);
-            data.loading = false;
-          }
-        });
-      },
-      onReset() {
-        data.user_name = null;
-        data.password = null;
-        remember_password.value = false;
-      },
-    };
-  },
-});
-</script>
+<template>
+  <q-layout view="hHh lpR fFf">
+    <img
+      v-if="landspace"
+      src="login/login_background.png"
+      class="fit"
+      style="position: fixed"
+    />
+    <q-page-container>
+      <q-page
+        class="row items-center"
+        style="position: ; /*fixed*/"
+        :class="landspace ? '' : 'justify-evenly'"
+        :style="landspace ? { left: '50%' } : {}"
+      >
+        <q-card :style="{ width: (landspace ? 34 : 70) + 'vw' }">
+          <q-card-section class="text-center text-h6">
+            {{ $t("login") }}
+          </q-card-section>
+          <q-separator />
+          <q-card-section class="fit">
+            <q-form ref="login_form" @submit="onSubmit" @reset="onReset">
+              <q-list class="fit">
+                <q-item v-if="$store.state.advanced_debug">
+                  <q-item-section>
+                    <q-input
+                      :autofocus="!data.ip_address"
+                      outlined
+                      :loading="data.loading"
+                      :disable="data.loading"
+                      v-model="data.ip_address"
+                      :label="$t('server ip address')"
+                      :hint="$t('please input server ip address')"
+                      lazy-rules
+                      :rules="[
+                        (val) =>
+                          (val && val.length > 0) ||
+                          $t('Please type something'),
+                        (val) =>
+                          isHost(val) || $t('Please input vaild ip address'),
+                      ]"
+                      @keydown="
+                        (evt) => {
+                          if (evt.keyCode == 13) {
+                            $refs?.user_name?.focus();
+                          }
+                        }
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="public" class="background" />
+                      </template>
+                      <template v-if="data.ip_address" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop="data.ip_address = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section>
+                    <q-input
+                      :autofocus="!data.user_name"
+                      outlined
+                      ref="user_name"
+                      :loading="data.loading"
+                      :disable="data.loading"
+                      v-model="data.user_name"
+                      :label="$t('user name')"
+                      :hint="$t('please input user name')"
+                      lazy-rules
+                      :rules="[
+                        (val) =>
+                          (val && val.length > 0) ||
+                          $t('Please type something'),
+                      ]"
+                      @keydown="
+                        (evt) => {
+                          if (evt.keyCode == 13) {
+                            $refs?.password_input?.focus();
+                          }
+                        }
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="account_circle" class="background" />
+                      </template>
+                      <template v-if="data.user_name" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop="data.user_name = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section>
+                    <q-input
+                      outlined
+                      ref="password_input"
+                      :loading="data.loading"
+                      :disable="data.loading"
+                      :type="data.show_password ? '' : 'password'"
+                      v-model="data.password"
+                      :label="$t('password')"
+                      :hint="$t('please input password')"
+                      lazy-rules
+                      :rules="[
+                        (val) =>
+                          (val && val.length > 0) ||
+                          $t('Please type something'),
+                      ]"
+                      @keydown="
+                        (evt) => {
+                          if (evt.keyCode == 13) {
+                            $refs?.login_button?.click();
+                          }
+                        }
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="key" class="background" />
+                      </template>
+                      <template v-if="data.password" v-slot:append>
+                        <q-icon
+                          :name="
+                            data.show_password ? 'visibility' : 'visibility_off'
+                          "
+                          class="cursor-pointer"
+                          @click="data.show_password = !data.show_password"
+                        />
+                        <q-icon
+                          name="cancel"
+                          @click.stop="data.password = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </q-item-section>
+                </q-item>
+                <q-item class="q-mt-md">
+                  <q-item-section>
+                    <q-checkbox
+                      :label="$t('remember password')"
+                      v-model="remember_password"
+                      :disable="data.loading"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-checkbox
+                      :label="$t('auto login')"
+                      v-model="auto_login"
+                      @update:model-value="remember_password = true"
+                      :disable="data.loading"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-lg">
+            <q-btn
+              ref="login_button"
+              class="full-width text-h6"
+              :loading="data.loading"
+              :label="$t('login')"
+              no-caps
+              style="
+                background: #273de4;
+                box-shadow: 0 4px 6px 0px rgb(39 60 228 / 40%);
+              "
+              text-color="white"
+              @click="$refs?.login_form?.submit()"
+            />
+          </q-card-actions>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style scoped>
+.background {
+  color: #3f69fd;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive, ref, Ref, computed } from "vue";
+
+import GlobalData from "src/common/GlobalData";
+import { Cookies, LocalStorage, SessionStorage, useQuasar } from "quasar";
+import ClientConnection from "src/common/ClientConnection";
+import PermissionLevel from "src/entities/PermissionLevel";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { useStore } from "src/store";
+import { Md5 } from "ts-md5";
+import Initializer from "src/common/Initializer";
+import { api } from "src/boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import ValidationUtil from "src/common/ValidationUtil";
+
+class _Data {
+  user_name: string | null = null;
+  password: string | null = null;
+  loading = false;
+  ip_address = window.location.hostname;
+  show_password = false;
+
+  constructor() {
+    let temp = LocalStorage.getItem("default_ip_address");
+    if (temp) {
+      this.ip_address = temp.toString();
+    } else {
+      this.ip_address = window.location.hostname;
+    }
+
+    temp = LocalStorage.getItem("default_user_name");
+    if (temp) {
+      this.user_name = temp.toString();
+    }
+
+    temp = LocalStorage.getItem("default_password");
+    if (temp) {
+      this.password = temp.toString();
+    }
+  }
+}
+
+export default defineComponent({
+  name: "PageLogin",
+
+  components: {},
+
+  setup() {
+    const $q = useQuasar();
+    const $t = useI18n();
+    const $route = useRouter();
+    const $store = useStore();
+    const data = reactive(new _Data());
+
+    try {
+      (window as any).setPcTheme();
+    } catch {}
+
+    const login_form: Ref<any> = ref(null);
+
+    const remember_password = ref(false);
+    const auto_login = ref(false);
+    let cache_password: string | null = null;
+
+    let web_socket: ClientConnection | null = null;
+    let is_pwa = ["fullscreen", "standalone", "minimal-ui"].some(
+      (displayMode) =>
+        window.matchMedia("(display-mode: " + displayMode + ")").matches
+    );
+
+    const landspace = computed({
+      get: () => $store.state.landspace,
+      set: (val) => null,
+    });
+
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      landspace.value = window.innerHeight < window.innerWidth;
+    });
+
+    onMounted(() => {
+      console.log((<any>window).user_search);
+      if ((<any>window).user_search?.user && (<any>window).user_search?.pwd) {
+        if ((<any>window).user_search?.host) {
+          data.ip_address = (<any>window).user_search?.host;
+        }
+        data.user_name = (<any>window).user_search?.user;
+        data.password = (<any>window).user_search?.pwd;
+        login_form.value.submit();
+      } else {
+        if (auto_login.value) {
+          login_form.value.submit();
+        }
+      }
+    });
+
+    try {
+      remember_password.value = JSON.parse(
+        Cookies.get("remember_password")
+      ) as boolean;
+      auto_login.value = JSON.parse(Cookies.get("auto_login")) as boolean;
+      if (
+        typeof remember_password.value == "undefined" ||
+        remember_password.value == null
+      ) {
+        remember_password.value = false;
+      }
+
+      if (typeof auto_login.value == "undefined" || auto_login.value == null) {
+        auto_login.value = false;
+      }
+
+      if (remember_password.value) {
+        data.user_name = Cookies.get("user_name") ?? data.user_name;
+        cache_password = Cookies.get("password");
+        if (
+          typeof cache_password != "undefined" &&
+          cache_password != null &&
+          cache_password.length == 32
+        ) {
+          data.password = cache_password;
+        } else {
+          cache_password = null;
+        }
+      }
+    } catch {}
+
+    return {
+      login_form,
+      data,
+      remember_password,
+      auto_login,
+      landspace,
+      is_pwa,
+      async onSubmit() {
+        data.loading = true;
+        return new Promise((resolve) => {
+          try {
+            let global_data = GlobalData.getInstance();
+            api
+              .get(HttpProtocol.RequestPathGetWebscoketPort)
+              .then((response) => {
+                let final_ws_port = GlobalData.kDefaultWebsocektPort;
+                if (response && typeof response.data != "undefined") {
+                  if (typeof response.data != "number") {
+                    const temp_port = parseInt(response.data);
+                    if (!isNaN(temp_port) && temp_port != Infinity) {
+                      final_ws_port = temp_port;
+                    }
+                  } else {
+                    final_ws_port = response.data;
+                  }
+                  const url =
+                    "ws://" +
+                    data.ip_address +
+                    ":" +
+                    final_ws_port.toString() +
+                    GlobalData.kWebsocketResource;
+                  web_socket = new ClientConnection(
+                    url,
+                    data.user_name,
+                    data.password == cache_password
+                      ? data.password
+                      : Md5.hashStr(data.password ?? "admin")
+                  );
+                  let timer = setTimeout(() => {
+                    web_socket?.destory();
+                    web_socket = null;
+                    $q.notify({
+                      color: "negative",
+                      icon: "warning",
+                      message:
+                        $t.t("login fail!") +
+                        $t.t("connect time out!") +
+                        $t.t(
+                          "please check server state, or check server ip address!"
+                        ),
+                      position: "center",
+                      timeout: 1500,
+                    });
+                    SessionStorage.set("auth", PermissionLevel.None);
+                    resolve(false);
+                    data.loading = false;
+                  }, 5000);
+                  web_socket.login_callback = (is_login) => {
+                    clearTimeout(timer);
+                    if (is_login && web_socket) {
+                      global_data.addClient(data.ip_address, web_socket);
+                      global_data.setCurrentClientName(data.ip_address);
+
+                      SessionStorage.set("auth", PermissionLevel.Root);
+                      SessionStorage.set("url", url);
+                      SessionStorage.set("name", data.ip_address);
+                      SessionStorage.set("user_name", data.user_name);
+                      SessionStorage.set(
+                        "password",
+                        data.password == cache_password
+                          ? data.password
+                          : Md5.hashStr(data.password ?? "admin")
+                      );
+
+                      // TODO add self to setConnects
+
+                      if (remember_password.value) {
+                        Cookies.set("remember_password", JSON.stringify(true), {
+                          expires: 15,
+                        });
+                        Cookies.set(
+                          "auto_login",
+                          JSON.stringify(auto_login.value),
+                          {
+                            expires: 15,
+                          }
+                        );
+                        Cookies.set("user_name", data.user_name ?? "admin", {
+                          expires: 15,
+                        });
+                        Cookies.set(
+                          "password",
+                          data.password == cache_password
+                            ? data.password ?? Md5.hashStr("admin")
+                            : Md5.hashStr(data.password ?? "admin"),
+                          {
+                            expires: 15,
+                          }
+                        );
+                      } else {
+                        Cookies.remove("remember_password");
+                        Cookies.remove("auto_login");
+                        Cookies.remove("name");
+                        Cookies.remove("user_name");
+                        Cookies.remove("password");
+                      }
+
+                      $store.commit("setDeviceIpAddress", data.ip_address);
+
+                      setTimeout(() => {
+                        new Initializer({
+                          $t,
+                          $store,
+                          $q,
+                        })
+                          .initialize()
+                          .then(() => {
+                            $store.commit("setInitialized");
+                          });
+                      }, 0);
+
+                      $route.push("/");
+                    } else {
+                      $q.notify({
+                        color: "negative",
+                        icon: "warning",
+                        message:
+                          $t.t("login fail!") + $t.t("user or password error!"),
+                        position: "center",
+                        timeout: 1500,
+                      });
+                      SessionStorage.set("auth", PermissionLevel.None);
+                    }
+                    resolve(true);
+                    data.loading = false;
+                  };
+                }
+              })
+              .catch(() => {
+                resolve(true);
+                data.loading = false;
+              });
+          } catch {
+            resolve(true);
+            data.loading = false;
+          }
+        });
+      },
+      onReset() {
+        data.user_name = null;
+        data.password = null;
+        remember_password.value = false;
+      },
+      isHost(str: string) {
+        return ValidationUtil.isHost(str);
+      },
+    };
+  },
+});
+</script>