From 9404d08a49e3af051f9167e972e0910a7953133a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 18:22:24 +0200
Subject: [PATCH 01/10] refactor(nc-gui): move user page

---
 packages/nc-gui/pages/index/index.vue      |   2 +-
 packages/nc-gui/pages/index/index/user.vue | 150 +++++++++++++++++++++
 packages/nc-gui/pages/index/user/index.vue | 142 -------------------
 3 files changed, 151 insertions(+), 143 deletions(-)
 create mode 100644 packages/nc-gui/pages/index/index/user.vue

diff --git a/packages/nc-gui/pages/index/index.vue b/packages/nc-gui/pages/index/index.vue
index 0a2b51b770..3fa074746e 100644
--- a/packages/nc-gui/pages/index/index.vue
+++ b/packages/nc-gui/pages/index/index.vue
@@ -9,7 +9,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 <template>
   <NuxtLayout>
     <div
-      class="min-h-[calc(100vh_-_var(--header-height))] h-auto bg-primary bg-opacity-5 flex flex-col lg:flex-row flex-wrap gap-6 py-6 px-12 pt-65px"
+      class="min-h-[calc(100vh_-_var(--header-height))] bg-primary bg-opacity-5 flex flex-wrap justify-between xl:flex-nowrap gap-6 py-6 px-4 pt-65px md:(px-12)"
     >
       <div class="flex-1 justify-end hidden xl:(flex)">
         <div>
diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
new file mode 100644
index 0000000000..21b771f13b
--- /dev/null
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports'
+
+const router = useRouter()
+
+const { api, error, isLoading } = useApi({ useGlobalInstance: true })
+
+const { t } = useI18n()
+
+const { signOut } = useGlobal()
+
+const formValidator = ref()
+
+const form = reactive({
+  currentPassword: '',
+  password: '',
+  passwordRepeat: '',
+})
+
+const formRules = {
+  currentPassword: [
+    // Current password is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
+  ],
+  password: [
+    // Password is required
+    { 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
+    {
+      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.value = null
+
+  await api.auth.passwordChange({
+    currentPassword: form.currentPassword,
+    newPassword: form.password,
+  })
+
+  message.success(t('msg.success.passwordChanged'))
+
+  signOut()
+
+  navigateTo('/signin')
+}
+
+const resetError = () => {
+  if (error.value) error.value = null
+}
+</script>
+
+<template>
+  <div class="bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)">
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
+
+    <div
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      @click="() => router.back()"
+    >
+      <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
+    </div>
+
+    <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.changePwd') }}</h1>
+
+    <a-form
+      ref="formValidator"
+      layout="vertical"
+      class="change-password lg:max-w-3/4 w-full !mx-auto"
+      no-style
+      :model="form"
+      @finish="passwordChange"
+    >
+      <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>
+
+      <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
+        <a-input-password
+          v-model:value="form.currentPassword"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.current')"
+          @focus="resetError"
+        />
+      </a-form-item>
+
+      <a-form-item :label="$t('placeholder.password.new')" name="password" :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>
+
+      <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="text-center">
+        <button class="scaling-btn" type="submit">
+          <span class="flex items-center gap-2">
+            <MdiKeyChange />
+            {{ $t('activity.changePwd') }}
+          </span>
+        </button>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<style lang="scss">
+.change-password {
+  .create {
+    .ant-input-affix-wrapper,
+    .ant-input {
+      @apply !appearance-none my-1 border-1 border-solid rounded;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/pages/index/user/index.vue b/packages/nc-gui/pages/index/user/index.vue
index 3bb6013ecd..e69de29bb2 100644
--- a/packages/nc-gui/pages/index/user/index.vue
+++ b/packages/nc-gui/pages/index/user/index.vue
@@ -1,142 +0,0 @@
-<script lang="ts" setup>
-import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports'
-
-const { api, error } = useApi({ useGlobalInstance: true })
-
-const { t } = useI18n()
-
-const { signOut } = useGlobal()
-
-const formValidator = ref()
-
-const form = reactive({
-  currentPassword: '',
-  password: '',
-  passwordRepeat: '',
-})
-
-const formRules = {
-  currentPassword: [
-    // Current password is required
-    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
-  ],
-  password: [
-    // Password is required
-    { 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
-    {
-      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.value = null
-
-  await api.auth.passwordChange({
-    currentPassword: form.currentPassword,
-    newPassword: form.password,
-  })
-
-  message.success(t('msg.success.passwordChanged'))
-
-  signOut()
-
-  navigateTo('/signin')
-}
-
-const resetError = () => {
-  if (error.value) error.value = null
-}
-</script>
-
-<template>
-  <NuxtLayout>
-    <div class="mt-4 w-1/2 mx-auto">
-      <a-form ref="formValidator" layout="vertical" :model="form" class="change-password" @finish="passwordChange">
-        <div class="md:relative flex flex-col gap-2 w-full h-full p-8 w-full">
-          <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</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>
-
-          <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
-            <a-input-password
-              v-model:value="form.currentPassword"
-              size="large"
-              class="password"
-              :placeholder="$t('placeholder.password.current')"
-              @focus="resetError"
-            />
-          </a-form-item>
-
-          <a-form-item :label="$t('placeholder.password.new')" name="password" :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>
-
-          <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="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
-            <button class="scaling-btn bg-opacity-100" type="submit">
-              <span class="flex items-center gap-2">
-                <MdiKeyChange />
-                {{ $t('activity.changePwd') }}
-              </span>
-            </button>
-          </div>
-        </div>
-      </a-form>
-    </div>
-  </NuxtLayout>
-</template>
-
-<style lang="scss">
-.change-password {
-  @apply border-1 shadow-md rounded;
-
-  .ant-input-affix-wrapper,
-  .ant-input {
-    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
-  }
-
-  .password {
-    input {
-      @apply !border-none;
-    }
-  }
-}
-</style>

From 4fee0396d2f76ddaf1e6832ae62b489c725ec41b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 18:37:58 +0200
Subject: [PATCH 02/10] chore(nc-gui): remove unused page styles

---
 packages/nc-gui/composables/useProject.ts             | 4 ++--
 packages/nc-gui/pages/index/index/[projectId].vue     | 8 +++++---
 packages/nc-gui/pages/index/index/create-external.vue | 8 ++++----
 packages/nc-gui/pages/index/index/create.vue          | 4 ++--
 packages/nc-gui/pages/index/index/index.vue           | 5 +++--
 packages/nc-gui/pages/index/index/user.vue            | 6 +++---
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 98b47567be..64c301656e 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -79,7 +79,7 @@ const [setup, use] = useInjectionState(() => {
     }
   }
 
-  async function loadProject() {
+  async function loadProject(withTheme = true) {
     if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
@@ -102,7 +102,7 @@ const [setup, use] = useInjectionState(() => {
 
     await loadTables()
 
-    setTheme(projectMeta.value?.theme)
+    if (withTheme) setTheme(projectMeta.value?.theme)
 
     return projectLoadedHook.trigger(project.value)
   }
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 4093aeba9a..ede3bece09 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -21,7 +21,7 @@ const route = useRoute()
 
 const { project, loadProject, updateProject, isLoading } = useProject()
 
-await loadProject()
+loadProject(false)
 
 const nameValidationRules = [
   {
@@ -66,12 +66,12 @@ onMounted(async () => {
 
 <template>
   <div
-    class="update-project bg-white relative flex-auto flex flex-col justify-center gap-2 p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="update-project relative flex-auto flex flex-col justify-center gap-2 p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
   >
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
@@ -79,7 +79,9 @@ onMounted(async () => {
 
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.editProject') }}</h1>
 
+    <a-skeleton v-if="isLoading" />
     <a-form
+      v-else
       ref="form"
       :model="formState"
       name="basic"
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 0a6358726b..a85c220457 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -335,12 +335,12 @@ onMounted(async () => {
 
 <template>
   <div
-    class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="create-external relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
   >
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
@@ -367,8 +367,8 @@ onMounted(async () => {
           dropdown-class-name="nc-dropdown-ext-db-type"
           @change="onClientChange"
         >
-          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
-            >{{ client.text }}
+          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value">
+            {{ client.text }}
           </a-select-option>
         </a-select>
       </a-form-item>
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index fadcbf656e..d8dc5161f7 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -64,12 +64,12 @@ onMounted(async () => {
 
 <template>
   <div
-    class="create bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="create relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
   >
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 6c132554a1..094ef6076e 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -126,7 +126,7 @@ onBeforeMount(loadProjects)
 </script>
 
 <template>
-  <div class="bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)">
+  <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
       <!-- My Projects -->
       <span class="text-4xl nc-project-page-title">{{ $t('title.myProject') }}</span>
@@ -198,7 +198,8 @@ onBeforeMount(loadProjects)
         <a-skeleton />
       </div>
 
-      <a-table v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table
+        v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>
diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
index 21b771f13b..bbf66f82ea 100644
--- a/packages/nc-gui/pages/index/index/user.vue
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -67,11 +67,11 @@ const resetError = () => {
 </script>
 
 <template>
-  <div class="bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)">
+  <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="() => router.back()"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
@@ -127,7 +127,7 @@ const resetError = () => {
       </a-form-item>
 
       <div class="text-center">
-        <button class="scaling-btn" type="submit">
+        <button class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MdiKeyChange />
             {{ $t('activity.changePwd') }}

From 27cb0948e5fb97ecf0dbf7f592078594a5f78186 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 20:05:19 +0200
Subject: [PATCH 03/10] chore(nc-gui): update styles

---
 packages/nc-gui/assets/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7df65992f7..1c4fb266c1 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,11 +214,11 @@ a {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
+    @apply !border-0 transform scale-110 ring ring-accent ring-opacity-100;
   }
 
   &:active::after {
-    @apply ring ring-accent;
+    @apply ring ring-accent ring-opacity-100;
   }
 }
 

From aaad161578f3516b9453f9ede379d579f17e918a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 21:18:07 +0200
Subject: [PATCH 04/10] feat(nc-gui,tests): add user settings tests and cy
 selectors

---
 packages/nc-gui/layouts/base.vue              |  8 ++-
 packages/nc-gui/pages/index/index/user.vue    | 10 ++--
 packages/nc-gui/pages/signin.vue              | 16 ++++--
 .../integration/common/6h_change_password.js  | 54 +++++++++++++++++++
 scripts/cypress/integration/test/restMisc.js  |  4 ++
 .../cypress/integration/test/xcdb-restMisc.js |  4 ++
 6 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 scripts/cypress/integration/common/6h_change_password.js

diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index 2fe797b30d..f8eab0160f 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -77,11 +77,15 @@ hooks.hook('page:finish', () => {
 
         <template v-if="signedIn">
           <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
-            <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
+            <MdiDotsVertical
+              data-cy="nc-menu-accounts"
+              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white"
+              @click.prevent
+            />
 
             <template #overlay>
               <a-menu class="!py-0 leading-8 !rounded">
-                <a-menu-item key="0" class="!rounded-t">
+                <a-menu-item key="0" data-cy="nc-menu-accounts__user-settings" class="!rounded-t">
                   <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
                     <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
index bbf66f82ea..3f69d8fd70 100644
--- a/packages/nc-gui/pages/index/index/user.vue
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -81,6 +81,7 @@ const resetError = () => {
 
     <a-form
       ref="formValidator"
+      data-cy="nc-user-settings-form"
       layout="vertical"
       class="change-password lg:max-w-3/4 w-full !mx-auto"
       no-style
@@ -88,8 +89,8 @@ const resetError = () => {
       @finish="passwordChange"
     >
       <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">
+        <div v-if="error" class="mx-auto mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+          <div data-cy="nc-user-settings-form__error" class="flex items-center gap-2 justify-center">
             <MaterialSymbolsWarning />
             {{ error }}
           </div>
@@ -99,6 +100,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
         <a-input-password
           v-model:value="form.currentPassword"
+          data-cy="nc-user-settings-form__current-password"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.current')"
@@ -109,6 +111,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
         <a-input-password
           v-model:value="form.password"
+          data-cy="nc-user-settings-form__new-password"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.new')"
@@ -119,6 +122,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
         <a-input-password
           v-model:value="form.passwordRepeat"
+          data-cy="nc-user-settings-form__new-password-repeat"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.confirm')"
@@ -127,7 +131,7 @@ const resetError = () => {
       </a-form-item>
 
       <div class="text-center">
-        <button class="scaling-btn bg-opacity-100" type="submit">
+        <button data-cy="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MdiKeyChange />
             {{ $t('activity.changePwd') }}
diff --git a/packages/nc-gui/pages/signin.vue b/packages/nc-gui/pages/signin.vue
index a35e386790..d7bc09915c 100644
--- a/packages/nc-gui/pages/signin.vue
+++ b/packages/nc-gui/pages/signin.vue
@@ -63,7 +63,10 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <div class="md:bg-primary bg-opacity-5 signin h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
+    <div
+      data-cy="nc-form-signin"
+      class="md:bg-primary bg-opacity-5 signin h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"
+    >
       <div
         class="bg-white mt-[60px] 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)"
       >
@@ -82,12 +85,19 @@ function resetError() {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
+            <a-input
+              v-model:value="form.email"
+              data-cy="nc-form-signin__email"
+              size="large"
+              :placeholder="$t('msg.info.signUp.workEmail')"
+              @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"
+              data-cy="nc-form-signin__password"
               size="large"
               class="password"
               :placeholder="$t('msg.info.signUp.enterPassword')"
@@ -102,7 +112,7 @@ function resetError() {
           </div>
 
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
-            <button class="scaling-btn bg-opacity-100" type="submit">
+            <button data-cy="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
                 <MdiLogin />
                 {{ $t('general.signIn') }}
diff --git a/scripts/cypress/integration/common/6h_change_password.js b/scripts/cypress/integration/common/6h_change_password.js
new file mode 100644
index 0000000000..c94204fba8
--- /dev/null
+++ b/scripts/cypress/integration/common/6h_change_password.js
@@ -0,0 +1,54 @@
+import { isTestSuiteActive, roles } from "../../support/page_objects/projectConstants";
+
+
+const newPassword = `${roles.owner.credentials.password}1`;
+
+export const genTest = (apiType, dbType) => {
+    if (!isTestSuiteActive(apiType, dbType)) return;
+
+    describe('User settings test', () => {
+        it('Visit user settings', () => {
+            cy.get("[data-cy='nc-menu-accounts']").click();
+            cy.get("[data-cy='nc-menu-accounts__user-settings']").click();
+
+            cy.get("[data-cy='nc-user-settings-form']").should("exist");
+        });
+
+        describe('Change password', () => {
+            beforeEach(() => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").clear();
+                cy.get("[data-cy='nc-user-settings-form__new-password']").clear();
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").clear();
+            })
+
+            it('Verifies current password', () => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").type('WrongPassword');
+                cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__submit']").click();
+                cy.get("[data-cy='nc-user-settings-form__error']").should("exist").should("contain", "Current password is wrong");
+            });
+
+            it('Verifies matching passwords', () => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password);
+                cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword + 'NotMatching');
+                cy.get("[data-cy='nc-user-settings-form__submit']").click();
+                cy.get(".ant-form-item-explain-error").should("exist").should("contain", "Passwords do not match");
+            });
+
+            it('Change user password using valid password', () => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password);
+                cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__submit']").click();
+                cy.get("[data-cy='nc-user-settings-form__submit']").should("not.exist");
+                cy.get("[data-cy='nc-form-signin']").should("exist");
+                cy.get("[data-cy='nc-form-signin__email']").type(roles.owner.credentials.username);
+                cy.get("[data-cy='nc-form-signin__password']").type(newPassword);
+                cy.get("[data-cy='nc-form-signin__submit']").click();
+                cy.get("[data-cy='nc-menu-accounts']").should("exist");
+            });
+        })
+    });
+};
diff --git a/scripts/cypress/integration/test/restMisc.js b/scripts/cypress/integration/test/restMisc.js
index 82e02246d5..e666aada81 100644
--- a/scripts/cypress/integration/test/restMisc.js
+++ b/scripts/cypress/integration/test/restMisc.js
@@ -5,6 +5,7 @@ let t6c = require("../common/6c_swagger_api");
 let t6e = require("../common/6e_project_operations");
 let t6f = require("../common/6f_attachments");
 let t6g = require("../common/6g_base_share");
+let t6h = require("../common/6h_change_password");
 let t7a = require("../common/7a_create_project_from_excel");
 let t8a = require("../common/8a_webhook");
 let t9b = require("../common/9b_ERD");
@@ -44,6 +45,9 @@ const nocoTestSuite = (apiType, dbType) => {
 
   // Create project from Excel
   t7a.genTest(apiType, dbType);
+
+  // Change password
+  t6h.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "mysql");
diff --git a/scripts/cypress/integration/test/xcdb-restMisc.js b/scripts/cypress/integration/test/xcdb-restMisc.js
index cfcb325763..a324074cde 100644
--- a/scripts/cypress/integration/test/xcdb-restMisc.js
+++ b/scripts/cypress/integration/test/xcdb-restMisc.js
@@ -6,6 +6,7 @@ let t6d = require("../common/6d_language_validation");
 let t6e = require("../common/6e_project_operations");
 let t6f = require("../common/6f_attachments");
 let t6g = require("../common/6g_base_share");
+let t6h = require("../common/6h_change_password");
 let t7a = require("../common/7a_create_project_from_excel");
 let t8a = require("../common/8a_webhook");
 const t9b = require("../common/9b_ERD");
@@ -46,6 +47,9 @@ const nocoTestSuite = (apiType, dbType) => {
 
   // Create project from Excel
   t7a.genTest(apiType, dbType);
+
+  // Change password
+  t6h.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "xcdb");

From 801fe85fb7bd2cc8c882816b13fc102e531b95a2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 21:35:50 +0200
Subject: [PATCH 05/10] chore(nc-gui,tests): click brand icon to move to
 project list

---
 packages/nc-gui/layouts/base.vue                          | 1 +
 packages/nc-gui/pages/[projectType]/[projectId]/index.vue | 1 +
 scripts/cypress/integration/common/6h_change_password.js  | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index f8eab0160f..90104d00e4 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -44,6 +44,7 @@ hooks.hook('page:finish', () => {
         <div
           v-if="!route.params.projectType"
           v-e="['c:navbar:home']"
+          data-cy="nc-noco-brand-icon"
           class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
           @click="navigateTo('/')"
         >
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index e92b11b5d0..4f8e7b8b7e 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -192,6 +192,7 @@ onBeforeUnmount(reset)
           <div
             v-if="isOpen && !isSharedBase"
             v-e="['c:navbar:home']"
+            data-cy="nc-noco-brand-icon"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
             @click="navigateTo('/')"
           >
diff --git a/scripts/cypress/integration/common/6h_change_password.js b/scripts/cypress/integration/common/6h_change_password.js
index c94204fba8..bfe867348d 100644
--- a/scripts/cypress/integration/common/6h_change_password.js
+++ b/scripts/cypress/integration/common/6h_change_password.js
@@ -8,6 +8,8 @@ export const genTest = (apiType, dbType) => {
 
     describe('User settings test', () => {
         it('Visit user settings', () => {
+            cy.get("[data-cy='nc-noco-brand-icon']").click();
+
             cy.get("[data-cy='nc-menu-accounts']").click();
             cy.get("[data-cy='nc-menu-accounts__user-settings']").click();
 

From 0a3787a55605308baac2a3df4b112d58b9c49146 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 22:50:50 +0200
Subject: [PATCH 06/10] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue | 1 -
 packages/nc-gui/pages/index/index/index.vue               | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index a537d0774c..58d4e94a54 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -17,7 +17,6 @@ import {
   useDialog,
   useI18n,
   useNuxtApp,
-  useRoute,
   useRouter,
   viewTypeAlias,
   watch,
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 094ef6076e..13db5064b7 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -198,8 +198,7 @@ onBeforeMount(loadProjects)
         <a-skeleton />
       </div>
 
-      <a-table
-        v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>

From 4cd2f21447048cc4ff55d4785e45322a72b11f1f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 22:53:03 +0200
Subject: [PATCH 07/10] chore(tests): cleanup

---
 packages/nc-gui/assets/style.scss             |  4 +--
 packages/nc-gui/pages/index/index/user.vue    |  2 +-
 packages/nc-gui/pages/index/user/index.vue    |  0
 .../integration/common/6h_change_password.js  | 25 ++++++++++++-------
 4 files changed, 19 insertions(+), 12 deletions(-)
 delete mode 100644 packages/nc-gui/pages/index/user/index.vue

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 1c4fb266c1..7df65992f7 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,11 +214,11 @@ a {
   }
 
   &:hover::after {
-    @apply !border-0 transform scale-110 ring ring-accent ring-opacity-100;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
-    @apply ring ring-accent ring-opacity-100;
+    @apply ring ring-accent;
   }
 }
 
diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
index 3f69d8fd70..9ac26c73b0 100644
--- a/packages/nc-gui/pages/index/index/user.vue
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -147,7 +147,7 @@ const resetError = () => {
   .create {
     .ant-input-affix-wrapper,
     .ant-input {
-      @apply !appearance-none my-1 border-1 border-solid rounded;
+      @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
     }
   }
 }
diff --git a/packages/nc-gui/pages/index/user/index.vue b/packages/nc-gui/pages/index/user/index.vue
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/scripts/cypress/integration/common/6h_change_password.js b/scripts/cypress/integration/common/6h_change_password.js
index bfe867348d..7ccc4747ab 100644
--- a/scripts/cypress/integration/common/6h_change_password.js
+++ b/scripts/cypress/integration/common/6h_change_password.js
@@ -2,12 +2,14 @@ import { isTestSuiteActive, roles } from "../../support/page_objects/projectCons
 
 
 const newPassword = `${roles.owner.credentials.password}1`;
+const currentPasswordIsWrong = "Current password is wrong";
+const passwordsNotMatching = "Passwords do not match";
 
 export const genTest = (apiType, dbType) => {
     if (!isTestSuiteActive(apiType, dbType)) return;
 
-    describe('User settings test', () => {
-        it('Visit user settings', () => {
+    describe('User settings', () => {
+        it('Visit user settings page', () => {
             cy.get("[data-cy='nc-noco-brand-icon']").click();
 
             cy.get("[data-cy='nc-menu-accounts']").click();
@@ -16,7 +18,7 @@ export const genTest = (apiType, dbType) => {
             cy.get("[data-cy='nc-user-settings-form']").should("exist");
         });
 
-        describe('Change password', () => {
+        describe('Update password and verify user settings form validation', () => {
             beforeEach(() => {
                 cy.get("[data-cy='nc-user-settings-form__current-password']").clear();
                 cy.get("[data-cy='nc-user-settings-form__new-password']").clear();
@@ -28,29 +30,34 @@ export const genTest = (apiType, dbType) => {
                 cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
                 cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword);
                 cy.get("[data-cy='nc-user-settings-form__submit']").click();
-                cy.get("[data-cy='nc-user-settings-form__error']").should("exist").should("contain", "Current password is wrong");
+                cy.get("[data-cy='nc-user-settings-form__error']").should("exist").should("contain", currentPasswordIsWrong);
             });
 
-            it('Verifies matching passwords', () => {
+            it('Verifies passwords match', () => {
                 cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password);
                 cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
-                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword + 'NotMatching');
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(`${newPassword}NotMatching`);
                 cy.get("[data-cy='nc-user-settings-form__submit']").click();
-                cy.get(".ant-form-item-explain-error").should("exist").should("contain", "Passwords do not match");
+                cy.get(".ant-form-item-explain-error").should("exist").should("contain", passwordsNotMatching);
             });
 
-            it('Change user password using valid password', () => {
+            it('Changes user password & signs out', () => {
                 cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password);
                 cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
                 cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword);
                 cy.get("[data-cy='nc-user-settings-form__submit']").click();
                 cy.get("[data-cy='nc-user-settings-form__submit']").should("not.exist");
+            });
+        })
+
+        describe('Sign in with new password', () => {
+            it('Verifies new password works', () => {
                 cy.get("[data-cy='nc-form-signin']").should("exist");
                 cy.get("[data-cy='nc-form-signin__email']").type(roles.owner.credentials.username);
                 cy.get("[data-cy='nc-form-signin__password']").type(newPassword);
                 cy.get("[data-cy='nc-form-signin__submit']").click();
                 cy.get("[data-cy='nc-menu-accounts']").should("exist");
-            });
+            })
         })
     });
 };

From 1bee54d1409537ceb64bf915d37c5b3382481260 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 16:57:45 +0200
Subject: [PATCH 08/10] chore(nc-gui): lint

---
 packages/nc-gui/pages/signup/[[token]].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 0a58307856..01b8af6ac0 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -85,7 +85,7 @@ function resetError() {
       <div
         class="bg-white mt-[60px] 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)"
       >
-        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent) hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
+        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
 
         <h1 class="prose-2xl font-bold self-center my-4">
           {{ $t('general.signUp') }}

From 918adc48adfa02c4a5f64ca6feee28ac8bf89b04 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 19:38:19 +0200
Subject: [PATCH 09/10] chore(nc-gui): user form styles

---
 packages/nc-gui/pages/index/index/user.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
index 9ac26c73b0..3925422458 100644
--- a/packages/nc-gui/pages/index/index/user.vue
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -144,10 +144,14 @@ const resetError = () => {
 
 <style lang="scss">
 .change-password {
-  .create {
-    .ant-input-affix-wrapper,
-    .ant-input {
-      @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none !m-0;
     }
   }
 }

From c7f9e926b8f9ff96931a6da72f2847d5ffc4c264 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 09:41:22 +0200
Subject: [PATCH 10/10] chore(nc-gui): focus input on project load

---
 .../nc-gui/pages/index/index/[projectId].vue  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index ede3bece09..188c89b6c9 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -5,21 +5,17 @@ import {
   extractSdkResponseErrorMsg,
   message,
   navigateTo,
-  nextTick,
-  onMounted,
   projectTitleValidator,
   reactive,
   ref,
+  tryOnMounted,
   useProject,
   useRoute,
-  useSidebar,
 } from '#imports'
 
-useSidebar('nc-left-sidebar', { hasSidebar: false })
-
 const route = useRoute()
 
-const { project, loadProject, updateProject, isLoading } = useProject()
+const { project, loadProject, updateProject, isLoading, projectLoadedHook } = useProject()
 
 loadProject(false)
 
@@ -48,18 +44,18 @@ const renameProject = async () => {
 }
 
 // select and focus title field on load
-onMounted(async () => {
+projectLoadedHook(async () => {
   formState.title = project.value.title as string
 
-  await nextTick(() => {
+  tryOnMounted(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
 
-      input.setSelectionRange(0, formState.title?.length)
-
       input.focus()
-    }, 500)
+
+      input.setSelectionRange(0, formState.title?.length)
+    }, 150)
   })
 })
 </script>
@@ -80,6 +76,7 @@ onMounted(async () => {
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.editProject') }}</h1>
 
     <a-skeleton v-if="isLoading" />
+
     <a-form
       v-else
       ref="form"