perf: 密码验证样式优化

1Panel-dev · Oct 17, 2024 · a242242 · a242242
1 parent 01e775d
commit a242242
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 83 deletions.
diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
@@ -390,11 +390,12 @@ const updatePlatformStatus: (application_id: string, data: any) => Promise<Resul
 /**
  * 验证密码
  */
-const validatePassword: (application_id: string, password: string) => Promise<Result<any>> = (
-  application_id,
-  password
-) => {
-  return get(`/application/${application_id}/auth/${password}`, undefined)
+const validatePassword: (
+  application_id: string,
+  password: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, password, loading) => {
+  return get(`/application/${application_id}/auth/${password}`, undefined, loading)
 }
 
 export default {

diff --git a/ui/src/stores/modules/application.ts b/ui/src/stores/modules/application.ts
@@ -1,10 +1,9 @@
 import { defineStore } from 'pinia'
 import applicationApi from '@/api/application'
 import applicationXpackApi from '@/api/application-xpack'
-import { type Ref, type UnwrapRef } from 'vue'
+import { type Ref } from 'vue'
 
 import useUserStore from './user'
-import type { ApplicationFormType } from '@/api/type/application'
 
 const useApplicationStore = defineStore({
   id: 'application',
@@ -123,7 +122,7 @@ const useApplicationStore = defineStore({
     async validatePassword(id: string, password: string, loading?: Ref<boolean>) {
       return new Promise((resolve, reject) => {
         applicationApi
-          .validatePassword(id, password)
+          .validatePassword(id, password, loading)
           .then((data) => {
             resolve(data)
           })

diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
@@ -2,31 +2,28 @@
   <div class="chat-embed layout-bg" v-loading="loading">
     <el-dialog
       v-model="isPasswordDialogVisible"
-      width="480px"
-      height="236px"
-      title="输入密码打开链接"
+      width="480"
+      title="请输入密码打开链接"
       custom-class="no-close-button"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       :show-close="false"
       center
       :modal="true"
     >
-      <el-input
-        style="width: 400px; height: 40px"
-        v-model="password"
-        :placeholder="$t('login.ldap.passwordPlaceholder')"
-        show-password
-      />
-      <span class="input-error" v-if="passwordError">{{ passwordError }}</span>
-      <el-button
-        type="primary"
-        @click="validatePassword"
-        style="width: 400px; height: 40px; margin-top: 24px"
-        >确定</el-button
-      >
+      <el-form ref="FormRef" :model="form" :rules="rules" v-loading="validateLoading">
+        <el-form-item prop="password">
+          <el-input
+            v-model="form.password"
+            :placeholder="$t('login.ldap.passwordPlaceholder')"
+            show-password
+          />
+        </el-form-item>
+        <el-button class="w-full mt-8" type="primary" @click="submitHandle(FormRef)"
+          >确定</el-button
+        >
+      </el-form>
     </el-dialog>
-
     <div v-if="isAuthenticated">
       <div class="chat-embed__header" :class="!isDefaultTheme ? 'custom-header' : ''">
         <div class="chat-width flex align-center">
@@ -131,6 +128,7 @@
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { isAppIcon } from '@/utils/application'
+import type { FormInstance, FormRules } from 'element-plus'
 import useStore from '@/stores'
 const route = useRoute()
 const {
@@ -150,11 +148,47 @@ const applicationDetail = ref<any>({})
 const applicationAvailable = ref<boolean>(true)
 const chatLogeData = ref<any[]>([])
 const show = ref(false)
+
+const FormRef = ref()
+
 const isPasswordDialogVisible = ref(false)
-const password = ref('')
-const passwordError = ref('')
+const validateLoading = ref(false)
+
+const form = ref({
+  password: ''
+})
+
 const isAuthenticated = ref(false)
 
+const validateName = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('密码不能为空'))
+  } else {
+    application
+      .validatePassword(applicationDetail?.value.id, form.value.password, validateLoading)
+      .then((res: any) => {
+        if (res?.data.is_valid) {
+          callback()
+        } else {
+          callback(new Error('密码错误'))
+        }
+      })
+  }
+}
+const rules = reactive({
+  password: [{ required: true, validator: validateName, trigger: 'blur' }]
+})
+
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      isAuthenticated.value = true
+      isPasswordDialogVisible.value = false
+    }
+  })
+}
+
 const paginationConfig = reactive({
   current_page: 1,
   page_size: 20,
@@ -204,20 +238,6 @@ function newChat() {
   currentRecordList.value = []
   currentChatId.value = 'new'
 }
-function validatePassword() {
-  if (!password.value) {
-    passwordError.value = '密码不能为空'
-    return // 终止后续执行
-  }
-  application.validatePassword(applicationDetail?.value.id, password.value).then((res: any) => {
-    if (res?.data.is_valid) {
-      isAuthenticated.value = true
-      isPasswordDialogVisible.value = false
-    } else {
-      passwordError.value = '密码错误'
-    }
-  })
-}
 
 function getAccessToken(token: string) {
   application

diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
@@ -2,29 +2,27 @@
   <div class="chat-pc layout-bg" :class="classObj" v-loading="loading">
     <el-dialog
       v-model="isPasswordDialogVisible"
-      width="480px"
-      height="236px"
-      title="输入密码打开链接"
+      width="480"
+      title="请输入密码打开链接"
       custom-class="no-close-button"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       :show-close="false"
       center
       :modal="true"
     >
-      <el-input
-        style="width: 400px; height: 40px"
-        v-model="password"
-        :placeholder="$t('login.ldap.passwordPlaceholder')"
-        show-password
-      />
-      <span class="input-error" v-if="passwordError">{{ passwordError }}</span>
-      <el-button
-        type="primary"
-        @click="validatePassword"
-        style="width: 400px; height: 40px; margin-top: 24px"
-        >确定</el-button
-      >
+      <el-form ref="FormRef" :model="form" :rules="rules" v-loading="validateLoading">
+        <el-form-item prop="password">
+          <el-input
+            v-model="form.password"
+            :placeholder="$t('login.ldap.passwordPlaceholder')"
+            show-password
+          />
+        </el-form-item>
+        <el-button class="w-full mt-8" type="primary" @click="submitHandle(FormRef)"
+          >确定</el-button
+        >
+      </el-form>
     </el-dialog>
 
     <div v-if="isAuthenticated">
@@ -160,8 +158,6 @@ import useStore from '@/stores'
 import useResize from '@/layout/hooks/useResize'
 import type { FormInstance, FormRules } from 'element-plus'
 import { t } from '@/locales'
-import authApi from '@/api/auth-setting'
-import { MsgSuccess } from '@/utils/message'
 useResize()
 
 const route = useRoute()
@@ -176,12 +172,48 @@ const isDefaultTheme = computed(() => {
   return user.isDefaultTheme()
 })
 
+const FormRef = ref()
+
 const isCollapse = ref(false)
 const isPasswordDialogVisible = ref(false)
-const password = ref('')
-const passwordError = ref('')
+const validateLoading = ref(false)
+
+const form = ref({
+  password: ''
+})
+
 const isAuthenticated = ref(false)
 
+const validateName = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('密码不能为空'))
+  } else {
+    application
+      .validatePassword(applicationDetail?.value.id, form.value.password, validateLoading)
+      .then((res: any) => {
+        if (res?.data.is_valid) {
+          callback()
+        } else {
+          callback(new Error('密码错误'))
+        }
+      })
+  }
+}
+const rules = reactive({
+  password: [{ required: true, validator: validateName, trigger: 'blur' }]
+})
+
+
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      isAuthenticated.value = true
+      isPasswordDialogVisible.value = false
+    }
+  })
+}
+
 const classObj = computed(() => {
   return {
     mobile: common.isMobile(),
@@ -376,21 +408,6 @@ async function exportHTML(): Promise<void> {
   saveAs(blob, suggestedName)
 }
 
-function validatePassword() {
-  if (!password.value) {
-    passwordError.value = '密码不能为空'
-    return // 终止后续执行
-  }
-  application.validatePassword(applicationDetail?.value.id, password.value).then((res: any) => {
-    if (res?.data.is_valid) {
-      isAuthenticated.value = true
-      isPasswordDialogVisible.value = false
-    } else {
-      passwordError.value = '密码错误'
-    }
-  })
-}
-
 onMounted(() => {
   user.changeUserType(2)
   getAccessToken(accessToken)
@@ -510,8 +527,4 @@ onMounted(() => {
     }
   }
 }
-.input-error {
-  color: red;
-  display: block;
-}
 </style>
diff --git a/ui/src/views/team/component/PermissionSetting.vue b/ui/src/views/team/component/PermissionSetting.vue
@@ -45,12 +45,12 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="使用" align="center" width="80" fixed="right">
+      <el-table-column label="查看" align="center" width="80" fixed="right">
         <template #header>
           <el-checkbox
             :disabled="props.manage"
             v-model="allChecked[TeamEnum.USE]"
-            label="使用"
+            label="查看"
             @change="handleCheckAllChange($event, TeamEnum.USE)"
           />
         </template>

diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue
@@ -320,7 +320,7 @@ onMounted(() => {
     border-bottom: none !important;
     :deep(.el-collapse-item__header) {
       border-bottom: none !important;
-      padding: 10px 0 10px 16px;
+      padding-left: 16px;
       font-size: 14px;
       &:hover {
         background: var(--app-text-color-light-1);