fix(profile): add profile key length verification(#45)

Author: codeacme17

app/src/store/profile.ts

@@ -3,12 +3,12 @@ import { PROFILE_API } from '@/apis'
 import { useFetch } from '@/hooks'
 import { useMessageStore } from './message'
 
-type State = {
-  profile: Record<Key, ProfileItem>
+export type ProfileState = {
+  profile: Record<ProfileKey, ProfileItem>
   confirmLoading: boolean
 }
 
-type Key =
+export type ProfileKey =
   | 'questionAmount'
   | 'currentRole'
   | 'currentModel'
@@ -25,13 +25,13 @@ type Key =
 
 type Model = 'OpenAI' | 'Azure'
 
-type ProfileItem = {
+export type ProfileItem = {
   value: string | Model
   show?: boolean // show or hide key
   error?: boolean // error field
 }
 
-const state: State = {
+const state: ProfileState = {
   profile: {
     questionAmount: {
       value: '',
@@ -104,7 +104,7 @@ export const useProfileStore = defineStore('profileStore', {
 
       for (const key in data) {
         if (Object.prototype.hasOwnProperty.call(this.$state.profile, key)) {
-          const profileKey = key as Key
+          const profileKey = key as ProfileKey
           this.$state.profile[profileKey].value = data[key]
         }
       }
@@ -116,7 +116,7 @@ export const useProfileStore = defineStore('profileStore', {
 
       const data: any = {}
       for (const key in this.$state.profile) {
-        const profileKey = key as Key
+        const profileKey = key as ProfileKey
         data[key] = this.$state.profile[profileKey].value || ''
       }
 
@@ -183,7 +183,7 @@ export const useProfileStore = defineStore('profileStore', {
       const { profile } = this.$state
       for (const key in profile) {
         if (Object.prototype.hasOwnProperty.call(profile, key)) {
-          const profileKey = key as Key
+          const profileKey = key as ProfileKey
           if (profile[profileKey].error) profile[profileKey].error = false
         }
       }

app/src/views/Profile.vue

@@ -112,6 +112,7 @@
             label="KEY"
             variant="outlined"
             density="compact"
+            :counter="51"
             :append-inner-icon="
               formData.openaiKey.show ? 'mdi-eye' : 'mdi-eye-off'
             "
@@ -132,6 +133,7 @@
             label="ORGANIZATION"
             variant="outlined"
             density="compact"
+            :counter="28"
             :append-inner-icon="
               formData.openaiOrganization.show ? 'mdi-eye' : 'mdi-eye-off'
             "
@@ -196,6 +198,7 @@
             label="KEY"
             variant="outlined"
             density="compact"
+            :counter="32"
             :append-inner-icon="
               formData.azureKey.show ? 'mdi-eye' : 'mdi-eye-off'
             "
@@ -280,7 +283,9 @@
           elevation="0"
           :block="true"
           :loading="PROFILE_STORE.confirmLoading"
-          :disabled="PROFILE_STORE.confirmLoading || !isUpdateFormData"
+          :disabled="
+            PROFILE_STORE.confirmLoading || !isUpdateFormData || isFormError
+          "
           @click="handleConfirm"
         >
           {{ $t('button.submit') }}
@@ -301,7 +306,8 @@ import { ref, onUnmounted } from 'vue'
 import { watchDeep } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { orangeBgColor, greenBgColor } from '@/utils'
-import { useProfileStore } from '@/store'
+import { useProfileStore, ProfileItem, ProfileKey } from '@/store'
+import { computed } from 'vue'
 
 const { locale } = useI18n()
 const PROFILE_STORE = useProfileStore()
@@ -316,12 +322,35 @@ const handleConfirm = async () => {
   await PROFILE_STORE.setProfile()
   isUpdateFormData.value = false
 }
+const isFormError = computed(() => {
+  for (const key in formData) {
+    if (Object.prototype.hasOwnProperty.call(formData, key)) {
+      const profileKey = key as ProfileKey
+      const element: ProfileItem = formData[profileKey]
+      if (element.error !== undefined && element.error === true) return true
+    }
+  }
+  return false
+})
 watchDeep(formData, () => {
   isUpdateFormData.value = true
+  // Valid openai key length
+  if (formData.openaiKey.value && formData.openaiKey.value.length !== 51)
+    formData.openaiKey.error = true
+  else formData.openaiKey.error = false
+  // Valid openai organization length
+  if (
+    formData.openaiOrganization.value &&
+    formData.openaiOrganization.value.length !== 28
+  )
+    formData.openaiOrganization.error = true
+  else formData.openaiOrganization.error = false
+  // Valid azure key length
+  if (formData.azureKey.value && formData.azureKey.value.length !== 32)
+    formData.azureKey.error = true
+  else formData.azureKey.error = false
 
-  if (formData.notionKey) {
-    PROFILE_STORE.profile.notionKey.error = false
-  }
+  if (formData.notionKey) PROFILE_STORE.profile.notionKey.error = false
 })
 
 onUnmounted(() => {
@@ -344,4 +373,7 @@ onUnmounted(() => {
   margin: 0px 5px 0px -5px;
   padding-right: 13px !important;
 }
+:deep(.v-counter) {
+  font-size: 10px !important;
+}
 </style>