fix: check offensive word

Services/client/src/components/FolderForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -10,10 +10,15 @@ const props = withDefaults(
   }>(),
   {
     open: false,
-  },
+  }
 )
 
 const emit = defineEmits(['update:open', 'update:name', 'submit'])
+const offensiveWord = ref<boolean>(false)
+
+function checkOffensiveWord(input: string) {
+  return /[\\?%:|"<>#]/.test(input)
+}
 
 function reset() {
   emit('update:name', undefined)
@@ -66,19 +71,33 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
           dense
           icon="close"
           color="red"
-          @click="() => $emit('update:open', !open)"
+          @click="
+            () => {
+              offensiveWord = false
+              $emit('update:open', !open)
+            }
+          "
         />
       </q-toolbar>
 
       <section class="q-mb-md">
         <span class="text-weight-bold">ชื่อ{{ tree }}</span>
         <q-input
+          ref="nameInput"
           outlined
           dense
           class="q-my-sm"
           placeholder="กรอกชื่อ"
           :model-value="name"
-          @update:model-value="(v) => $emit('update:name', v)"
+          error-message="คำต้องห้านจะเปลี่ยนเป็น - เมื่อกดสร้าง"
+          :error="offensiveWord"
+          @update:model-value="
+            (v:string) => {
+              $emit('update:name', v)
+            
+              offensiveWord = checkOffensiveWord(v)
+            }
+          "
         />
       </section>
 
@@ -89,7 +108,12 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
           type="reset"
           color="primary"
           flat
-          @click="() => ($emit('update:open', false), reset())"
+          @click="
+            () => {
+              offensiveWord = false
+              $emit('update:open', false), reset()
+            }
+          "
         />
       </section>
     </q-form>