From 82398cf03fbc77133ee6073ac43fb2b90339fa2b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 19 Jul 2022 20:30:46 +0200
Subject: [PATCH 01/10] refactor(gui-v2): replace vuetify form with ant form

---
 packages/nc-gui-v2/app.vue                    |  4 +-
 packages/nc-gui-v2/assets/style-v2.scss       |  5 +-
 .../nc-gui-v2/components/general/NocoIcon.vue |  2 +-
 packages/nc-gui-v2/pages/signin.vue           | 54 +++++++++----------
 4 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index e2164852f5..d7c8c12b19 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -16,7 +16,7 @@ const signOut = () => {
 const toggleSidebar = useToggle($state.sidebarOpen)
 
 const sidebarOpen = computed({
-  get: () => !($state.sidebarOpen.value ?? true),
+  get: () => !$state.sidebarOpen.value,
   set: (val) => toggleSidebar(val),
 })
 </script>
@@ -87,7 +87,7 @@ const sidebarOpen = computed({
     <a-layout>
       <a-layout-sider
         v-model:collapsed="sidebarOpen"
-        width="300"
+        :width="sidebarOpen ? 300 : 0"
         collapsed-width="0"
         class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
         :trigger="null"
diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 6a3ee6df58..924885aea2 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -49,8 +49,8 @@ a {
   @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  @apply text-black dark:(text-white);
+h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
+  @apply dark:(!text-white);
 }
 
 .v-field__field {
@@ -68,3 +68,4 @@ h1, h2, h3, h4, h5, h6 {
 :root {
   --header-height: 64px;
 }
+
diff --git a/packages/nc-gui-v2/components/general/NocoIcon.vue b/packages/nc-gui-v2/components/general/NocoIcon.vue
index 229f521f9f..ac73078821 100644
--- a/packages/nc-gui-v2/components/general/NocoIcon.vue
+++ b/packages/nc-gui-v2/components/general/NocoIcon.vue
@@ -8,7 +8,7 @@ const { width = 90, height = 90 } = defineProps<Props>()
 </script>
 
 <template>
-  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height * 0.6}px` }" class="absolute rounded-lg bg-primary">
+  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height * 0.6}px` }" class="absolute rounded-lg !bg-primary">
     <img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index b5c3fa084b..9f69bca447 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -30,8 +30,6 @@ let error = $ref<string | null>(null)
 
 const valid = ref()
 
-const formValidator = ref()
-
 const form = reactive({
   email: '',
   password: '',
@@ -71,11 +69,11 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
-      ref="formValidator"
-      v-model="valid"
+    <a-form
+      v-model="form"
+      layout="vertical"
       class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @submit.prevent="signIn"
+      @finish="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
@@ -91,29 +89,25 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password"
-            v-model="form.password"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.password"
-            :label="$t('labels.password')"
-            :placeholder="$t('labels.password')"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input
+              v-model="form.email"
+              size="large"
+              class="bg-white dark:!bg-gray-900"
+              :placeholder="$t('labels.email')"
+              @focus="resetError"
+            />
+          </a-form-item>
+
+          <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
+            <a-input
+              v-model="form.password"
+              size="large"
+              class="bg-white dark:!bg-gray-900"
+              :placeholder="$t('labels.password')"
+              @focus="resetError"
+            />
+          </a-form-item>
 
           <div class="hidden md:block self-end mx-8">
             <nuxt-link class="prose-sm" to="/forgot-password">
@@ -147,6 +141,6 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>

From 46289fa8b7317fde336dd23cb3773c14c07a81eb Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 19 Jul 2022 20:54:44 +0200
Subject: [PATCH 02/10] chore(gui-v2,deps-dev): upgrade to latest
 ant-design-vue version

---
 packages/nc-gui-v2/components.d.ts   |  4 ++++
 packages/nc-gui-v2/package-lock.json | 26 +++++++++++++++-----------
 packages/nc-gui-v2/package.json      |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index f62537956d..49767446cb 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -9,6 +9,10 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 2e36b612fb..028e82b809 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@vueuse/core": "^8.7.5",
         "@vueuse/integrations": "^8.9.1",
-        "ant-design-vue": "^3.0.0-beta.8",
+        "ant-design-vue": "^3.1.0-rc.6",
         "dayjs": "^1.11.3",
         "jwt-decode": "^3.1.2",
         "nocodb-sdk": "file:../nocodb-sdk",
@@ -3399,13 +3399,14 @@
       }
     },
     "node_modules/ant-design-vue": {
-      "version": "3.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.0.0-beta.8.tgz",
-      "integrity": "sha512-3fgfg0pfIqvQ7VN5nKKZayqMH8V1T8nn+e3hWOz6QYdYa7gNydgm5GH+r8ZyhQitkmiAIYXbNDakcqrUdOPXOA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.10.tgz",
+      "integrity": "sha512-aqa0kjJzVQ74MfVw5w7rTOdJQL2JN9V/O6Ro+VQQMq/tY7q91JiomhI9TRKAK3tFdBDXJpUoBCVOsosbbxMzRw==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-vue": "^6.0.0",
+        "@ant-design/icons-vue": "^6.1.0",
         "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.4.0",
         "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^4.0.0",
@@ -3420,13 +3421,15 @@
         "vue-types": "^3.0.0",
         "warning": "^4.0.0"
       },
+      "engines": {
+        "node": ">=12.22.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/ant-design-vue"
       },
       "peerDependencies": {
-        "@vue/compiler-sfc": ">=3.1.0",
-        "vue": ">=3.1.0"
+        "vue": ">=3.2.0"
       }
     },
     "node_modules/anymatch": {
@@ -16537,13 +16540,14 @@
       }
     },
     "ant-design-vue": {
-      "version": "3.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.0.0-beta.8.tgz",
-      "integrity": "sha512-3fgfg0pfIqvQ7VN5nKKZayqMH8V1T8nn+e3hWOz6QYdYa7gNydgm5GH+r8ZyhQitkmiAIYXbNDakcqrUdOPXOA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.10.tgz",
+      "integrity": "sha512-aqa0kjJzVQ74MfVw5w7rTOdJQL2JN9V/O6Ro+VQQMq/tY7q91JiomhI9TRKAK3tFdBDXJpUoBCVOsosbbxMzRw==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-vue": "^6.0.0",
+        "@ant-design/icons-vue": "^6.1.0",
         "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.4.0",
         "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^4.0.0",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 4491432557..d5d19b89bf 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@vueuse/core": "^8.7.5",
     "@vueuse/integrations": "^8.9.1",
-    "ant-design-vue": "^3.0.0-beta.8",
+    "ant-design-vue": "^3.1.0-rc.6",
     "dayjs": "^1.11.3",
     "jwt-decode": "^3.1.2",
     "nocodb-sdk": "file:../nocodb-sdk",

From b597e282c1da37220f2f8446c986af40ab8cc36c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 19 Jul 2022 21:19:10 +0200
Subject: [PATCH 03/10] chore(gui-v2): update form rules for ant form

---
 packages/nc-gui-v2/assets/style-v2.scss |  8 ---
 packages/nc-gui-v2/pages/signin.vue     | 86 ++++++++++++++-----------
 2 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 924885aea2..c86dad1642 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -53,14 +53,6 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   @apply dark:(!text-white);
 }
 
-.v-field__field {
-  @apply bg-white dark:(!bg-gray-900 text-white);
-
-  input {
-    @apply bg-white dark:(!bg-gray-700) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
-  }
-}
-
 .nc-icon {
   @apply color-transition;
 }
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 9f69bca447..b6be5c9f49 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -16,19 +16,8 @@ definePageMeta({
   title: 'title.headLogin',
 })
 
-useHead({
-  meta: [
-    {
-      hid: t('msg.info.loginMsg'),
-      name: t('msg.info.loginMsg'),
-      content: t('msg.info.loginMsg'),
-    },
-  ],
-})
-
 let error = $ref<string | null>(null)
-
-const valid = ref()
+const valid = $ref(false)
 
 const form = reactive({
   email: '',
@@ -38,17 +27,27 @@ const form = reactive({
 const formRules = {
   email: [
     // E-mail is required
-    (v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
+    { required: true, message: t('msg.error.signUpRules.emailReqd') },
     // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (isEmail(v)) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.emailInvalid')))
+        })
+      },
+      message: t('msg.error.signUpRules.emailInvalid'),
+    },
   ],
   password: [
     // Password is required
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
   ],
 }
 
 const signIn = async () => {
+  if (!valid) return
+
   error = null
   try {
     const { token } = await $api.auth.signin(form)
@@ -70,10 +69,13 @@ const resetError = () => {
 <template>
   <NuxtLayout>
     <a-form
-      v-model="form"
+      ref="formValidator"
+      :model="form"
       layout="vertical"
-      class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @finish="signIn"
+      class="signin h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      @finish="valid = true"
+      @finish-failed="valid = false"
+      @submit.prevent="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
@@ -90,20 +92,14 @@ const resetError = () => {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input
-              v-model="form.email"
-              size="large"
-              class="bg-white dark:!bg-gray-900"
-              :placeholder="$t('labels.email')"
-              @focus="resetError"
-            />
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
           </a-form-item>
 
           <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
-            <a-input
-              v-model="form.password"
+            <a-input-password
+              v-model:value="form.password"
               size="large"
-              class="bg-white dark:!bg-gray-900"
+              class="password"
               :placeholder="$t('labels.password')"
               @focus="resetError"
             />
@@ -116,16 +112,7 @@ const resetError = () => {
           </div>
 
           <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-            <button
-              :disabled="!valid"
-              :class="[
-                !valid
-                  ? '!opacity-50 !cursor-default'
-                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
-              ]"
-              class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
-              type="submit"
-            >
+            <button class="submit" type="submit">
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
             </button>
             <div class="text-end prose-sm">
@@ -144,3 +131,26 @@ const resetError = () => {
     </a-form>
   </NuxtLayout>
 </template>
+
+<style lang="scss">
+.signin {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none;
+    }
+
+    .ant-input-password-icon {
+      @apply dark:!text-white;
+    }
+  }
+}
+
+.submit {
+  @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+}
+</style>

From 9f34821268b1ceaea8417399165f82ab2e6cd55e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 19 Jul 2022 21:22:07 +0200
Subject: [PATCH 04/10] fix(gui-v2): hide sidebar when not signed in

---
 packages/nc-gui-v2/app.vue                       | 2 +-
 packages/nc-gui-v2/composables/useGlobalState.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index d7c8c12b19..25db1fe8c4 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -87,7 +87,7 @@ const sidebarOpen = computed({
     <a-layout>
       <a-layout-sider
         v-model:collapsed="sidebarOpen"
-        :width="sidebarOpen ? 300 : 0"
+        width="300"
         collapsed-width="0"
         class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
         :trigger="null"
diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState.ts
index 137876ba85..fbcb9baf6f 100644
--- a/packages/nc-gui-v2/composables/useGlobalState.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState.ts
@@ -67,9 +67,6 @@ export const useGlobalState = (): GlobalState => {
   /** State */
   const initialState: StoredState = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode }
 
-  /** is sidebar open */
-  const sidebarOpen = ref(breakpoints.greater('md').value)
-
   /** saves a reactive state, any change to these values will write/delete to localStorage */
   const storage = $(useStorage<StoredState>(storageKey, initialState))
 
@@ -88,6 +85,9 @@ export const useGlobalState = (): GlobalState => {
     () => !!(!!token && token !== '' && payload && payload.exp && payload.exp > timestamp / 1000),
   )
 
+  /** is sidebar open */
+  const sidebarOpen = ref(signedIn.value && breakpoints.greater('md').value)
+
   /** Actions */
   /** Sign out by deleting the token from localStorage */
   const signOut: Actions['signOut'] = () => {

From 23f74bb343f981fb851faa2816cb2229ae24aa84 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 19 Jul 2022 21:25:08 +0200
Subject: [PATCH 05/10] chore(gui-v2): remove important prefix

---
 packages/nc-gui-v2/app.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 25db1fe8c4..d4947e6b12 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -23,7 +23,7 @@ const sidebarOpen = computed({
 
 <template>
   <a-layout>
-    <a-layout-header class="flex !bg-primary items-center text-white !px-4">
+    <a-layout-header class="flex !bg-primary items-center text-white px-4 shadow-md">
       <MaterialSymbolsMenu
         v-if="$state.signedIn.value"
         class="text-xl cursor-pointer"

From 0e7c1ae289d139943cec9cb184b216200aecdc16 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Jul 2022 08:37:16 +0200
Subject: [PATCH 06/10] refactor(gui-v2): replace v-form with a-form on signup
 page

---
 packages/nc-gui-v2/pages/signin.vue |   2 +-
 packages/nc-gui-v2/pages/signup.vue | 135 ++++++++++++++++------------
 2 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index b6be5c9f49..26002f7745 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { definePageMeta, useHead } from '#imports'
+import { definePageMeta } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo, useNuxtApp } from '#app'
 import { isEmail } from '~/utils/validation'
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 3c886d3f62..4fbf660fa8 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -14,7 +14,7 @@ definePageMeta({
   requiresAuth: false,
 })
 
-const valid = ref()
+const valid = $ref()
 let error = $ref<string | null>(null)
 
 const form = reactive({
@@ -26,22 +26,42 @@ const form = reactive({
 const formRules = {
   email: [
     // E-mail is required
-    (v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
+    { required: true, message: t('msg.error.signUpRules.emailReqd') },
     // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (isEmail(v)) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.emailInvalid')))
+        })
+      },
+      message: t('msg.error.signUpRules.emailInvalid'),
+    },
   ],
   password: [
     // Password is required
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
-    (v: string) => v.length >= 8 || t('msg.error.signUpRules.passwdLength'),
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
+    { min: 8, message: t('msg.error.signUpRules.passwdLength') },
   ],
   passwordRepeat: [
+    // PasswordRepeat is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
     // Passwords match
-    (v: string) => v === form.password || t('msg.error.signUpRules.passwdMismatch'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (form.password === form.passwordRepeat) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
+        })
+      },
+      message: t('msg.error.signUpRules.passwdMismatch'),
+    },
   ],
 }
 
 const signUp = async () => {
+  if (!valid) return
+
   error = null
   try {
     const { token } = await $api.auth.signup(form)
@@ -61,10 +81,13 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
+    <a-form
       ref="formValidator"
-      v-model="valid"
-      class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      :model="form"
+      layout="vertical"
+      class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      @finish="valid = true"
+      @finish-failed="valid = false"
       @submit.prevent="signUp"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
@@ -81,53 +104,32 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password"
-            v-model="form.password"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.password"
-            :label="$t('labels.password')"
-            :placeholder="$t('labels.password')"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password_repeat"
-            v-model="form.passwordRepeat"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.passwordRepeat"
-            :label="`Repeat ${$t('labels.password')}`"
-            :placeholder="`Repeat ${$t('labels.password')}`"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+          </a-form-item>
+
+          <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
+            <a-input-password
+              v-model:value="form.password"
+              size="large"
+              class="password"
+              :placeholder="$t('labels.password')"
+              @focus="resetError"
+            />
+          </a-form-item>
+
+          <a-form-item :label="`Repeat ${$t('labels.password')}`" name="password" :rules="formRules.passwordRepeat">
+            <a-input-password
+              v-model:value="form.passwordRepeat"
+              size="large"
+              class="password"
+              :placeholder="`Repeat ${$t('labels.password')}`"
+              @focus="resetError"
+            />
+          </a-form-item>
 
           <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-            <button
-              :disabled="!valid"
-              :class="[
-                !valid
-                  ? '!opacity-50 !cursor-default'
-                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
-              ]"
-              class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
-              type="submit"
-            >
+            <button class="submit" type="submit">
               <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
             </button>
             <div class="text-end prose-sm">
@@ -137,6 +139,29 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>
+
+<style lang="scss">
+.signup {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none;
+    }
+
+    .ant-input-password-icon {
+      @apply dark:!text-white;
+    }
+  }
+}
+
+.submit {
+  @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+}
+</style>

From a8408ce3e2051f0fafe3a20b4b8073a48a91bbe5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Jul 2022 08:40:55 +0200
Subject: [PATCH 07/10] refactor(gui-v2): replace v-form with a-form on
 forgot-password page

---
 packages/nc-gui-v2/pages/forgot-password.vue | 65 +++++++++++---------
 packages/nc-gui-v2/pages/signin.vue          |  6 +-
 packages/nc-gui-v2/pages/signup.vue          |  6 +-
 3 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index 00a32ecb03..57bb46b7f2 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -20,7 +20,7 @@ definePageMeta({
 let error = $ref<string | null>(null)
 let success = $ref(false)
 
-const valid = ref()
+const valid = $ref()
 
 const formValidator = ref()
 
@@ -31,13 +31,23 @@ const form = reactive({
 const formRules = {
   email: [
     // E-mail is required
-    (v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
+    { required: true, message: t('msg.error.signUpRules.emailReqd') },
     // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (isEmail(v)) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.emailInvalid')))
+        })
+      },
+      message: t('msg.error.signUpRules.emailInvalid'),
+    },
   ],
 }
 
 const resetPassword = async () => {
+  if (!valid) return
+
   error = null
   try {
     await $api.auth.passwordForgot(form)
@@ -57,10 +67,13 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
+    <a-form
       ref="formValidator"
-      v-model="valid"
-      class="h-full min-h-[600px] flex justify-center items-center"
+      layout="vertical"
+      :model="form"
+      class="forgot-password h-full min-h-[600px] flex justify-center items-center"
+      @finish="valid = true"
+      @finish-failed="valid = false"
       @submit.prevent="resetPassword"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
@@ -91,29 +104,12 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+          </a-form-item>
 
           <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-            <button
-              :disabled="!valid"
-              :class="[
-                !valid
-                  ? '!opacity-50 !cursor-default'
-                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
-              ]"
-              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
-              type="submit"
-            >
+            <button class="submit" type="submit">
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('activity.sendEmail') }}</span>
             </button>
             <div class="text-end prose-sm">
@@ -123,6 +119,19 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>
+
+<style lang="scss">
+.forgot-password {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 26002f7745..d999dbce60 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -148,9 +148,9 @@ const resetError = () => {
       @apply dark:!text-white;
     }
   }
-}
 
-.submit {
-  @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
 }
 </style>
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 4fbf660fa8..f80c72ade9 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -159,9 +159,9 @@ const resetError = () => {
       @apply dark:!text-white;
     }
   }
-}
 
-.submit {
-  @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
 }
 </style>

From 65cc4c83554b900b0a24a82727f691141f88fbcd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Jul 2022 08:58:46 +0200
Subject: [PATCH 08/10] fix(gui-v2): prevent having to submit twice

---
 packages/nc-gui-v2/pages/forgot-password.vue | 7 ++-----
 packages/nc-gui-v2/pages/signin.vue          | 8 ++++----
 packages/nc-gui-v2/pages/signup.vue          | 7 +++----
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index 57bb46b7f2..3a8ecbec32 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -20,8 +20,6 @@ definePageMeta({
 let error = $ref<string | null>(null)
 let success = $ref(false)
 
-const valid = $ref()
-
 const formValidator = ref()
 
 const form = reactive({
@@ -46,6 +44,7 @@ const formRules = {
 }
 
 const resetPassword = async () => {
+  const valid = formValidator.value.validate()
   if (!valid) return
 
   error = null
@@ -72,9 +71,7 @@ const resetError = () => {
       layout="vertical"
       :model="form"
       class="forgot-password h-full min-h-[600px] flex justify-center items-center"
-      @finish="valid = true"
-      @finish-failed="valid = false"
-      @submit.prevent="resetPassword"
+      @finish="resetPassword"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index d999dbce60..80215ed898 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -16,8 +16,9 @@ definePageMeta({
   title: 'title.headLogin',
 })
 
+const formValidator = ref()
+
 let error = $ref<string | null>(null)
-const valid = $ref(false)
 
 const form = reactive({
   email: '',
@@ -46,6 +47,7 @@ const formRules = {
 }
 
 const signIn = async () => {
+  const valid = formValidator.value.validate()
   if (!valid) return
 
   error = null
@@ -73,9 +75,7 @@ const resetError = () => {
       :model="form"
       layout="vertical"
       class="signin h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @finish="valid = true"
-      @finish-failed="valid = false"
-      @submit.prevent="signIn"
+      @finish="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index f80c72ade9..95e44aad1c 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -14,7 +14,7 @@ definePageMeta({
   requiresAuth: false,
 })
 
-const valid = $ref()
+const formValidator = ref()
 let error = $ref<string | null>(null)
 
 const form = reactive({
@@ -60,6 +60,7 @@ const formRules = {
 }
 
 const signUp = async () => {
+  const valid = formValidator.value.validate()
   if (!valid) return
 
   error = null
@@ -86,9 +87,7 @@ const resetError = () => {
       :model="form"
       layout="vertical"
       class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @finish="valid = true"
-      @finish-failed="valid = false"
-      @submit.prevent="signUp"
+      @finish="signUp"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div

From c6b8f7762d92f73c74aa92f675c14c483e48183a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Jul 2022 09:31:21 +0200
Subject: [PATCH 09/10] feat(gui-v2): implement user-settings page

---
 packages/nc-gui-v2/app.vue                    |  13 +-
 packages/nc-gui-v2/pages/index/index.vue      |   4 +-
 packages/nc-gui-v2/pages/index/user/index.vue |  51 +++----
 .../pages/index/user/index/index.vue          | 142 ++++++++----------
 packages/nc-gui-v2/pages/signup.vue           |   2 +-
 5 files changed, 99 insertions(+), 113 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index d4947e6b12..a032e792c9 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -6,6 +6,9 @@ import MaterialSymbolsMenu from '~icons/material-symbols/menu'
 import { navigateTo } from '#app'
 
 const { $state } = useNuxtApp()
+
+const sidebar = ref<HTMLDivElement>()
+
 const email = computed(() => $state.user?.value?.email ?? '---')
 
 const signOut = () => {
@@ -62,19 +65,19 @@ const sidebarOpen = computed({
 
             <template #overlay>
               <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
-                <a-menu-item key="0" class="!rounded">
+                <a-menu-item key="0" class="!rounded-t">
                   <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                     <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
-                    <span class="prose">{{ email }}</span>
+                    <span class="prose group-hover:text-black">{{ email }}</span>
                   </nuxt-link>
                 </a-menu-item>
 
                 <a-menu-divider class="!m-0" />
 
-                <a-menu-item key="1" class="!rounded">
+                <a-menu-item key="1" class="!rounded-b">
                   <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
                     <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
-                    <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
+                    <span class="prose font-semibold text-gray-500 group-hover:text-black">{{ $t('general.signOut') }}</span>
                   </div>
                 </a-menu-item>
               </a-menu>
@@ -93,7 +96,7 @@ const sidebarOpen = computed({
         :trigger="null"
         collapsible
       >
-        <div id="sidebar" class="w-full h-full" />
+        <div id="sidebar" ref="sidebar" class="w-full h-full" />
       </a-layout-sider>
 
       <NuxtPage />
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 6897f07ac6..6bd1526ea7 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -97,11 +97,11 @@ const visible = ref(true)
           </v-menu>
         </div>
 
-        <a-menu class="mx-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+        <a-menu class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
           <a-menu-item
             v-for="(option, index) in navDrawerOptions"
             :key="index"
-            class="f!rounded-r-lg"
+            class="!rounded-r-lg"
             @click="activePage = option.title"
           >
             <div class="flex items-center gap-4">
diff --git a/packages/nc-gui-v2/pages/index/user/index.vue b/packages/nc-gui-v2/pages/index/user/index.vue
index 799f8fb2af..bea2158e55 100644
--- a/packages/nc-gui-v2/pages/index/user/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index.vue
@@ -2,39 +2,38 @@
 import { useNuxtApp, useRoute } from '#app'
 import MdiAccountCog from '~icons/mdi/account-cog'
 
-const { $api, $state } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const route = useRoute()
+
+const navDrawerOptions = [
+  {
+    title: 'Settings',
+    icon: MdiAccountCog,
+  },
+]
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <v-navigation-drawer v-model="$state.sidebarOpen.value" :border="0">
-        <div class="flex flex-col h-full">
-          <div class="advance-menu flex-1">
-            <v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'secondary' : 'primary'">
-              <v-list-item
-                :active="route.name === 'index-user-index'"
-                class="flex items-center gap-4 !rounded-r-lg"
-                :value="$t('activity.settings')"
-              >
-                <MdiAccountCog />
-
-                <span class="font-semibold">
-                  {{ $t('activity.settings') }}
-                </span>
-              </v-list-item>
-            </v-list>
-          </div>
-
-          <v-divider />
-
-          <general-social />
-
-          <general-sponsors :nav="true" />
-        </div>
-      </v-navigation-drawer>
+      <div class="flex flex-col h-full">
+        <a-menu :selected-keys="[0]" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+          <a-menu-item v-for="(option, index) in navDrawerOptions" :key="index" class="!rounded-r-lg">
+            <div class="flex items-center gap-4">
+              <component :is="option.icon" />
+
+              <span class="font-semibold">
+                {{ option.title }}
+              </span>
+            </div>
+          </a-menu-item>
+        </a-menu>
+
+        <general-social />
+
+        <general-sponsors :nav="true" />
+      </div>
     </template>
 
     <NuxtPage />
diff --git a/packages/nc-gui-v2/pages/index/user/index/index.vue b/packages/nc-gui-v2/pages/index/user/index/index.vue
index e25a1db7ef..1e446deb0e 100644
--- a/packages/nc-gui-v2/pages/index/user/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index/index.vue
@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { navigateTo, useNuxtApp } from '#app'
-import { isEmail } from '~/utils/validation'
+import { useNuxtApp } from '#app'
 import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 import { reactive, ref } from '#imports'
 
-const { $api, $state } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const { t } = useI18n()
 
-const valid = ref()
+const formValidator = ref()
 let error = $ref<string | null>(null)
 
 const form = reactive({
@@ -22,22 +21,34 @@ const form = reactive({
 
 const formRules = {
   currentPassword: [
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
-    // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    // Current password is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
   ],
   password: [
     // Password is required
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
-    (v: string) => v.length >= 8 || t('msg.error.signUpRules.passwdLength'),
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
+    { min: 8, message: t('msg.error.signUpRules.passwdLength') },
   ],
   passwordRepeat: [
+    // PasswordRepeat is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
     // Passwords match
-    (v: string) => v === form.password || t('msg.error.signUpRules.passwdMismatch'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (form.password === form.passwordRepeat) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
+        })
+      },
+      message: t('msg.error.signUpRules.passwdMismatch'),
+    },
   ],
 }
 
 const passwordChange = async () => {
+  const valid = formValidator.value.validate()
+  if (!valid) return
+
   error = null
   try {
     const { msg } = await $api.auth.passwordChange(form)
@@ -55,86 +66,59 @@ const resetError = () => {
 </script>
 
 <template>
-  <v-form
-    ref="formValidator"
-    v-model="valid"
-    class="h-[calc(100%_+_180px)] min-h-[600px] flex justify-center items-center"
-    @submit.prevent="passwordChange"
-  >
-    <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
-      <div
-        class="dark:(md:bg-gray-900 !text-white) md:relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-      >
-        <div
-          style="left: -moz-calc(50% - 45px); left: -webkit-calc(50% - 45px); left: calc(50% - 45px)"
-          class="absolute top-12 md:top-[-10%] rounded-lg bg-primary"
-        >
-          <img width="90" height="90" src="~/assets/img/icons/512x512-trans.png" />
-        </div>
+  <a-form ref="formValidator" layout="vertical" :model="form" class="change-password h-full w-full" @finish="passwordChange">
+    <div class="md:relative flex flex-col gap-2 w-full h-full p-8 max-w-1/2">
+      <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
 
-        <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signUp') }}</h1>
-
-        <Transition name="layout">
-          <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
-            <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
-          </div>
-        </Transition>
+      <Transition name="layout">
+        <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+          <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
+        </div>
+      </Transition>
 
-        <v-text-field
-          id="email"
-          v-model="form.email"
-          class="bg-white dark:!bg-gray-900"
-          :rules="formRules.email"
-          :label="$t('labels.email')"
-          :placeholder="$t('labels.email')"
-          :persistent-placeholder="true"
-          type="text"
+      <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.password">
+        <a-input-password
+          v-model:value="form.password"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.current')"
           @focus="resetError"
         />
+      </a-form-item>
 
-        <v-text-field
-          id="password"
-          v-model="form.password"
-          class="bg-white dark:!bg-gray-900"
-          :rules="formRules.password"
-          :label="$t('labels.password')"
-          :placeholder="$t('labels.password')"
-          :persistent-placeholder="true"
-          type="password"
+      <a-form-item :label="$t('placeholder.password.new')" name="newPassword" :rules="formRules.password">
+        <a-input-password
+          v-model:value="form.password"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.new')"
           @focus="resetError"
         />
+      </a-form-item>
 
-        <v-text-field
-          id="password_repeat"
-          v-model="form.passwordRepeat"
-          class="bg-white dark:!bg-gray-900"
-          :rules="formRules.passwordRepeat"
-          :label="`Repeat ${$t('labels.password')}`"
-          :placeholder="`Repeat ${$t('labels.password')}`"
-          :persistent-placeholder="true"
-          type="password"
+      <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
+        <a-input-password
+          v-model:value="form.passwordRepeat"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.confirm')"
           @focus="resetError"
         />
+      </a-form-item>
 
-        <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-          <button
-            :disabled="!valid"
-            :class="[
-              !valid
-                ? '!opacity-50 !cursor-default'
-                : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
-            ]"
-            class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
-            type="submit"
-          >
-            <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
-          </button>
-          <div class="text-end prose-sm">
-            {{ $t('msg.info.signUp.alreadyHaveAccount') }}
-            <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
-          </div>
-        </div>
+      <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
+        <button class="submit" type="submit">
+          <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('activity.changePwd') }}</span>
+        </button>
       </div>
     </div>
-  </v-form>
+  </a-form>
 </template>
+
+<style lang="scss">
+.change-password {
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 95e44aad1c..376a8d918b 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -117,7 +117,7 @@ const resetError = () => {
             />
           </a-form-item>
 
-          <a-form-item :label="`Repeat ${$t('labels.password')}`" name="password" :rules="formRules.passwordRepeat">
+          <a-form-item :label="`Repeat ${$t('labels.password')}`" name="passwordRepeat" :rules="formRules.passwordRepeat">
             <a-input-password
               v-model:value="form.passwordRepeat"
               size="large"

From 286ae2d164561be10778f4778bf130a0768c9dda Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 20 Jul 2022 09:36:14 +0200
Subject: [PATCH 10/10] chore(gui-v2): fix icon style

---
 packages/nc-gui-v2/pages/index/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 6bd1526ea7..aeab0930b6 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -59,6 +59,7 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
+console.log(route.name)
 const visible = ref(true)
 </script>
 
@@ -128,12 +129,12 @@ const visible = ref(true)
 
         <div class="self-end flex text-4xl mb-1">
           <MaterialSymbolsGridView
-            :class="route.name === 'index-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            :class="route.name === 'index-index' ? '!text-primary dark:(!text-secondary/75)' : ''"
             class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/')"
           />
           <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'index-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            :class="route.name === 'index-index-list' ? '!text-primary dark:(!text-secondary/75)' : ''"
             class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/list')"
           />