feat(gui-v2): add crete project form validation

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/pages/projects/index/create.vue

@@ -11,15 +11,29 @@ const valid = ref(false)
 const { $api, $toast } = useNuxtApp()
 
 const nameValidationRules = [
-  (v: string) => !!v || 'Title is required',
-  (v: string) => v.length <= 50 || 'Project name exceeds 50 characters',
+  {
+    required: true,
+    message: 'Title is required',
+  },
+  {
+    validator(rule: any, value: any, callback: (errMsg?: string) => void) {
+      if (value?.length > 50) {
+        callback('Project name exceeds 50 characters')
+      }
+      callback()
+    },
+  },
 ]
 
+const formState = reactive({
+  title: '',
+})
+
 const createProject = async () => {
   loading.value = true
   try {
     const result = await $api.project.create({
-      title: name.value,
+      title: formState.title,
     })
 
     await navigateTo(`/nc/${result.id}`)
@@ -28,71 +42,23 @@ const createProject = async () => {
   }
   loading.value = false
 }
-
-const formState = reactive({
-  username: '',
-  password: '',
-  remember: true,
-})
-const onFinish = (values: any) => {
-  console.log('Success:', values)
-}
-
-const onFinishFailed = (errorInfo: any) => {
-  console.log('Failed:', errorInfo)
-}
 </script>
 
 <template>
-  <a-card class="w-[500px] mx-auto mt-10">
-
-    <h3 class="text-3xl text-center"> {{ $t('activity.createProject') }}</h3>
+  <a-card class="w-[500px] mx-auto !mt-100px">
+    <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form
-      :model="formState"
-      name="basic"
-      layout="vertical"
-      autocomplete="off"
-      @finish="onFinish"
-      @finishFailed="onFinishFailed"
-    >
-      <a-form-item
-        :label="$t('labels.projName')"
-        name="title"
-        :rules="[{ required: true, message: 'Please input your username!' }]"
-      >
-        <a-input  class="nc-metadb-project-name" v-model:value="formState.username" />
+    <a-form :model="formState" name="basic" layout="vertical" autocomplete="off">
+      <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10">
+        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
-      <a-form-item style="text-align: center">
+      <a-form-item style="text-align: center" class="mt-2">
         <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
-          <MaterialSymbolsRocketLaunchOutline class="mr-1" /> <span> {{ $t('general.create') }} </span></a-button
+          <MaterialSymbolsRocketLaunchOutline class="mr-1" />
+          <span> {{ $t('general.create') }} </span></a-button
         >
       </a-form-item>
     </a-form>
   </a-card>
-  <!--    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
-      <v-container fluid class="flex justify-center items-center h-3/4">
-        <v-card max-width="500">
-          <v-container class="pb-10 px-12">
-            <h1 class="my-4 prose-lg text-center">
-              {{ $t('activity.createProject') }}
-            </h1>
-            <div class="mx-auto" style="width: 350px">
-              <v-text-field
-                v-model="name"
-                class="nc-metadb-project-name"
-                :rules="nameValidationRules"
-                :label="$t('labels.projName')"
-              />
-            </div>
-            <v-btn class="mx-auto" large :loading="loading" color="primary" @click="createProject">
-              <MaterialSymbolsRocketLaunchOutline class="mr-1" />
-              <span> {{ $t('general.create') }} </span>
-            </v-btn>
-          </v-container>
-        </v-card>
-      </v-container>
-    </v-form>
-  </NuxtLayout> -->
 </template>