fix: disable illegal characters for renaming connection group

frontend/src/components/dialogs/GroupDialog.vue

@@ -3,7 +3,7 @@ import { computed, reactive, ref, watch } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
-import { isEmpty } from 'lodash'
+import { every, get, includes, isEmpty } from 'lodash'
 
 /**
  * Dialog for create or rename group
@@ -13,6 +13,24 @@ const editGroup = ref('')
 const groupForm = reactive({
     name: '',
 })
+const groupFormRef = ref(null)
+
+const formRules = computed(() => {
+    const requiredMsg = i18n.t('dialogue.field_required')
+    const illegalChars = ['/', '\\']
+    return {
+        name: [
+            { required: true, message: requiredMsg, trigger: 'input' },
+            {
+                validator: (rule, value) => {
+                    return every(illegalChars, (c) => !includes(value, c))
+                },
+                message: i18n.t('dialogue.illegal_characters'),
+                trigger: 'input',
+            },
+        ],
+    }
+})
 
 const isRenameMode = computed(() => !isEmpty(editGroup.value))
 
@@ -30,6 +48,13 @@ watch(
 const i18n = useI18n()
 const onConfirm = async () => {
     try {
+        await groupFormRef.value?.validate((errs) => {
+            const err = get(errs, '0.0.message')
+            if (err != null) {
+                $message.error(err)
+            }
+        })
+
         const { name } = groupForm
         if (isRenameMode.value) {
             const { success, msg } = await connectionStore.renameGroup(editGroup.value, name)
@@ -47,9 +72,11 @@ const onConfirm = async () => {
             }
         }
     } catch (e) {
-        $message.error(e.message)
+        const msg = get(e, 'message')
+        if (!isEmpty(msg)) {
+            $message.error(msg)
+        }
     }
-    onClose()
 }
 
 const onClose = () => {
@@ -77,8 +104,14 @@ const onClose = () => {
         transform-origin="center"
         @positive-click="onConfirm"
         @negative-click="onClose">
-        <n-form :model="groupForm" :show-label="false" :show-require-mark="false" label-placement="top">
-            <n-form-item :label="$t('dialogue.group.name')" required>
+        <n-form
+            ref="groupFormRef"
+            :model="groupForm"
+            :rules="formRules"
+            :show-label="false"
+            :show-require-mark="false"
+            label-placement="top">
+            <n-form-item :label="$t('dialogue.group.name')" path="name" required>
                 <n-input v-model:value="groupForm.name" placeholder="" />
             </n-form-item>
         </n-form>

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -2,7 +2,7 @@
 import { computed, h, reactive, ref, watch } from 'vue'
 import { types, typesColor } from '@/consts/support_redis_type.js'
 import useDialog from 'stores/dialog'
-import { isEmpty, keys, map } from 'lodash'
+import { get, isEmpty, keys, map } from 'lodash'
 import NewStringValue from '@/components/new_value/NewStringValue.vue'
 import NewHashValue from '@/components/new_value/NewHashValue.vue'
 import NewListValue from '@/components/new_value/NewListValue.vue'
@@ -103,13 +103,20 @@ const renderTypeLabel = (option) => {
 const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 const onAdd = async () => {
-    await newFormRef.value?.validate().catch((err) => {
-        $message.error(err.message)
+    await newFormRef.value?.validate((errs) => {
+        const err = get(errs, '0.0.message')
+        if (err != null) {
+            $message.error(err)
+        }
+    })
+    await subFormRef.value?.validate((errs) => {
+        const err = get(errs, '0.0.message')
+        if (err != null) {
+            $message.error(err)
+        } else {
+            $message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('dialogue.field.element') }))
+        }
     })
-    if (subFormRef.value?.validate && !subFormRef.value?.validate()) {
-        $message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('dialogue.field.element') }))
-        return false
-    }
     try {
         const { server, db, key, type, ttl } = newForm
         let { value } = newForm
@@ -132,7 +139,10 @@ const onAdd = async () => {
             $message.error(msg)
         }
         dialogStore.closeNewKeyDialog()
-    } catch (e) {}
+    } catch (e) {
+        return false
+    }
+    return true
 }
 
 const onClose = () => {