From 54a99bdf2fff3ec7f6c210f191d3b6417daa999f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 15 Feb 2024 19:38:11 +0000
Subject: [PATCH 1/5] test(playwright): add CRUD test

---
 .../pages/Account/Authentication.ts           | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Account/Authentication.ts b/tests/playwright/pages/Account/Authentication.ts
index 13ff61bc4d..162254687e 100644
--- a/tests/playwright/pages/Account/Authentication.ts
+++ b/tests/playwright/pages/Account/Authentication.ts
@@ -44,7 +44,7 @@ export class AccountAuthenticationPage extends BasePage {
     });
   }
 
-  async toggleProvider(provider: 'saml' | 'oidc', title: string) {
+  async toggleProvider(provider: 'saml' | 'oidc' | 'google', title: string) {
     await this.waitForResponse({
       uiAction: () => this.get().locator(`.nc-${provider}-${title}-enable .nc-switch`).click(),
       httpMethodsToMatch: ['PATCH'],
@@ -159,4 +159,25 @@ export class AccountAuthenticationPage extends BasePage {
       requestUrlPathToMatch: '/api/v2/sso-client',
     });
   }
+
+  async createGoogleProvider(p: { clientId: string; clientSecret: string }) {
+    await this.rootPage.locator(`.nc-google-more-option`).click();
+    await this.rootPage.locator(`[data-test-id="nc-google-edit"]`).click();
+
+    const googleModal = this.accountPage.rootPage.locator('.nc-google-modal');
+    // wait until redirect url is generated
+    await googleModal.locator('[data-test-id="nc-google-redirect-url"]:has-text("http://")').waitFor();
+
+    await googleModal.locator('[data-test-id="nc-google-client-id"]').fill(p.clientId);
+
+    await googleModal.locator('[data-test-id="nc-google-client-secret"]').fill(p.clientSecret);
+
+    await this.waitForResponse({
+      uiAction: () => googleModal.locator('[data-test-id="nc-google-save-btn"]').click(),
+      httpMethodsToMatch: ['GET'],
+      requestUrlPathToMatch: '/api/v2/sso-client',
+    });
+  }
+
+  async verifyGoogleProviderCount(param: { count: number }) {}
 }

From 358b160100406fc03efd0eb744e8b8cdcf8a83a3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 15 Feb 2024 19:38:11 +0000
Subject: [PATCH 2/5] test(playwright): google signin verification

---
 .../pages/SsoIdpPage/GoogleLoginPage.ts       | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts

diff --git a/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts b/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts
new file mode 100644
index 0000000000..23aedca43f
--- /dev/null
+++ b/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts
@@ -0,0 +1,31 @@
+import { Page } from '@playwright/test';
+import BasePage from '../Base';
+import { ProjectsPage } from '../ProjectsPage';
+import { expect } from '@playwright/test';
+
+export class GoogleLoginPage extends BasePage {
+  readonly projectsPage: ProjectsPage;
+
+  constructor(rootPage: Page) {
+    super(rootPage);
+    this.projectsPage = new ProjectsPage(rootPage);
+  }
+
+  async goto(title = 'test') {
+    // reload page to get latest app info
+    await this.rootPage.reload({ waitUntil: 'networkidle' });
+    // click sign in with SAML
+    await this.rootPage.locator(`button:has-text("Sign in with google")`).click();
+
+    await this.rootPage.waitForNavigation({ url: /accounts\.google\.com/ });
+  }
+
+  get() {
+    return this.rootPage.locator('html');
+  }
+
+  async signIn(_: { email: string }) {
+    // skipping for now as it requires google account
+    // todo: later we can mock backend(google oauth2 endpoint calls) to test this
+  }
+}

From a1712b8967a452a8f9a8831af89e3906ead13a95 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 15 Feb 2024 19:38:12 +0000
Subject: [PATCH 3/5] test(playwright): classname correction

---
 tests/playwright/pages/Account/Authentication.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Account/Authentication.ts b/tests/playwright/pages/Account/Authentication.ts
index 162254687e..498ffa1775 100644
--- a/tests/playwright/pages/Account/Authentication.ts
+++ b/tests/playwright/pages/Account/Authentication.ts
@@ -35,8 +35,10 @@ export class AccountAuthenticationPage extends BasePage {
     return this.rootPage.locator(`[data-test-id="nc-${provider}-provider-${title}"]`);
   }
 
-  async deleteProvider(provider: 'saml' | 'oidc', title: string) {
-    await this.rootPage.locator(`.nc-${provider}-${title}-more-option`).click();
+  async deleteProvider(provider: 'saml' | 'oidc' | 'google', title: string) {
+    await this.rootPage
+      .locator(provider === 'google' ? '.nc-google-more-option' : `.nc-${provider}-${title}-more-option`)
+      .click();
     await this.waitForResponse({
       uiAction: () => this.rootPage.locator(`[data-test-id="nc-${provider}-delete"]`).click(),
       httpMethodsToMatch: ['DELETE'],

From 515585091c72e3628c5cd74718ed273f07c2365a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 15 Feb 2024 19:38:12 +0000
Subject: [PATCH 4/5] test(playwright): change button selector with `a`

---
 tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts b/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts
index 23aedca43f..c6925639ce 100644
--- a/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts
+++ b/tests/playwright/pages/SsoIdpPage/GoogleLoginPage.ts
@@ -15,7 +15,7 @@ export class GoogleLoginPage extends BasePage {
     // reload page to get latest app info
     await this.rootPage.reload({ waitUntil: 'networkidle' });
     // click sign in with SAML
-    await this.rootPage.locator(`button:has-text("Sign in with google")`).click();
+    await this.rootPage.locator(`a:has-text("Sign in with google")`).click();
 
     await this.rootPage.waitForNavigation({ url: /accounts\.google\.com/ });
   }

From b14492ac178128598ac6eef60679f6a0fa4b5db9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 15 Feb 2024 19:38:12 +0000
Subject: [PATCH 5/5] fix: wrap with div if root element is NuxtLayout to avoid
 navigation error

---
 packages/nc-gui/layouts/general.vue           |   8 +-
 packages/nc-gui/pages/account/index.vue       | 292 +++++++++---------
 packages/nc-gui/pages/forgot-password.vue     | 107 ++++---
 .../pages/index/[typeOrId]/form/[viewId].vue  |  66 ++--
 .../nc-gui/pages/profile/[[username]].vue     | 264 ++++++++--------
 packages/nc-gui/pages/projects/index.vue      | 154 ++++-----
 packages/nc-gui/pages/reset/[id].vue          | 118 +++----
 packages/nc-gui/pages/signin.vue              | 190 ++++++------
 packages/nc-gui/pages/signup/[[token]].vue    | 216 ++++++-------
 9 files changed, 721 insertions(+), 694 deletions(-)

diff --git a/packages/nc-gui/layouts/general.vue b/packages/nc-gui/layouts/general.vue
index e5afe7638a..03f1c0bd50 100644
--- a/packages/nc-gui/layouts/general.vue
+++ b/packages/nc-gui/layouts/general.vue
@@ -5,7 +5,9 @@ export default {
 </script>
 
 <template>
-  <NuxtLayout name="default">
-    <slot name="sidebar" />
-  </NuxtLayout>
+  <div>
+    <NuxtLayout name="default">
+      <slot name="sidebar" />
+    </NuxtLayout>
+  </div>
 </template>
diff --git a/packages/nc-gui/pages/account/index.vue b/packages/nc-gui/pages/account/index.vue
index c5794cb785..14c803ad3f 100644
--- a/packages/nc-gui/pages/account/index.vue
+++ b/packages/nc-gui/pages/account/index.vue
@@ -28,177 +28,179 @@ const logout = async () => {
 </script>
 
 <template>
-  <NuxtLayout name="empty">
-    <div class="mx-auto h-full">
-      <div class="h-full overflow-y-auto flex">
-        <!-- Side tabs -->
-
-        <div class="h-full bg-white nc-user-sidebar fixed">
-          <NcMenu
-            v-model:openKeys="openKeys"
-            v-model:selectedKeys="selectedKeys"
-            :inline-indent="16"
-            class="tabs-menu h-full"
-            mode="inline"
-          >
-            <div
-              v-if="!$route.params.baseType"
-              v-e="['c:navbar:home']"
-              data-testid="nc-noco-brand-icon"
-              class="transition-all duration-200 px-2 mx-2 mt-1.5 cursor-pointer transform hover:bg-gray-100 my-1 nc-noco-brand-icon h-8 rounded-md min-w-60"
-              @click="navigateTo('/')"
-            >
-              <div class="flex flex-row gap-x-2 items-center h-8.5">
-                <GeneralIcon icon="arrowLeft" class="-mt-0.1" />
-                <div class="flex text-sm font-medium text-gray-800">{{ $t('labels.backToWorkspace') }}</div>
-              </div>
-            </div>
-
-            <div class="text-sm text-gray-600 ml-4 p-2 mt-3 gray-600 font-medium">{{ $t('labels.account') }}</div>
-
-            <NcMenuItem
-              key="profile"
-              class="item"
-              :class="{
-                active: $route.params.page === 'profile',
-              }"
-              @click="navigateTo('/account/profile')"
+  <div>
+    <NuxtLayout name="empty">
+      <div class="mx-auto h-full">
+        <div class="h-full overflow-y-auto flex">
+          <!-- Side tabs -->
+
+          <div class="h-full bg-white nc-user-sidebar fixed">
+            <NcMenu
+              v-model:openKeys="openKeys"
+              v-model:selectedKeys="selectedKeys"
+              :inline-indent="16"
+              class="tabs-menu h-full"
+              mode="inline"
             >
-              <div class="flex items-center space-x-2">
-                <GeneralIcon icon="user" class="!h-3.5 !w-3.5" />
-
-                <div class="select-none">{{ $t('labels.profile') }}</div>
-              </div>
-            </NcMenuItem>
-
-            <NcMenuItem
-              key="tokens"
-              class="item"
-              :class="{
-                active: $route.params.page === 'tokens',
-              }"
-              @click="navigateTo('/account/tokens')"
-            >
-              <div class="flex items-center space-x-2">
-                <component :is="iconMap.code" />
-
-                <div class="select-none">API {{ $t('title.tokens') }}</div>
+              <div
+                v-if="!$route.params.baseType"
+                v-e="['c:navbar:home']"
+                data-testid="nc-noco-brand-icon"
+                class="transition-all duration-200 px-2 mx-2 mt-1.5 cursor-pointer transform hover:bg-gray-100 my-1 nc-noco-brand-icon h-8 rounded-md min-w-60"
+                @click="navigateTo('/')"
+              >
+                <div class="flex flex-row gap-x-2 items-center h-8.5">
+                  <GeneralIcon icon="arrowLeft" class="-mt-0.1" />
+                  <div class="flex text-sm font-medium text-gray-800">{{ $t('labels.backToWorkspace') }}</div>
+                </div>
               </div>
-            </NcMenuItem>
-            <NcMenuItem
-              v-if="isUIAllowed('superAdminAppStore') && !isEeUI"
-              key="apps"
-              class="item"
-              :class="{
-                active: $route.params.page === 'apps',
-              }"
-              @click="navigateTo('/account/apps')"
-            >
-              <div class="flex items-center space-x-2">
-                <component :is="iconMap.appStore" />
 
-                <div class="select-none text-sm">{{ $t('title.appStore') }}</div>
-              </div>
-            </NcMenuItem>
-            <a-sub-menu key="users" class="!bg-white !my-0">
-              <template #icon>
-                <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
-              </template>
-              <template #title>{{ $t('objects.users') }}</template>
+              <div class="text-sm text-gray-600 ml-4 p-2 mt-3 gray-600 font-medium">{{ $t('labels.account') }}</div>
 
               <NcMenuItem
-                v-if="isUIAllowed('superAdminUserManagement') && !isEeUI"
-                key="list"
-                class="text-xs item"
+                key="profile"
+                class="item"
                 :class="{
-                  active: $route.params.nestedPage === 'list',
+                  active: $route.params.page === 'profile',
                 }"
-                @click="navigateTo('/account/users/list')"
+                @click="navigateTo('/account/profile')"
               >
-                <span class="ml-4">{{ $t('title.userManagement') }}</span>
+                <div class="flex items-center space-x-2">
+                  <GeneralIcon icon="user" class="!h-3.5 !w-3.5" />
+
+                  <div class="select-none">{{ $t('labels.profile') }}</div>
+                </div>
               </NcMenuItem>
+
               <NcMenuItem
-                key="password-reset"
-                class="text-xs item"
+                key="tokens"
+                class="item"
                 :class="{
-                  active: $route.params.nestedPage === 'password-reset',
+                  active: $route.params.page === 'tokens',
                 }"
-                @click="navigateTo('/account/users/password-reset')"
+                @click="navigateTo('/account/tokens')"
               >
-                <span class="ml-4">{{ $t('title.resetPasswordMenu') }}</span>
+                <div class="flex items-center space-x-2">
+                  <component :is="iconMap.code" />
+
+                  <div class="select-none">API {{ $t('title.tokens') }}</div>
+                </div>
               </NcMenuItem>
               <NcMenuItem
-                v-if="isUIAllowed('superAdminAppSettings') && !isEeUI"
-                key="settings"
-                class="text-xs item"
+                v-if="isUIAllowed('superAdminAppStore') && !isEeUI"
+                key="apps"
+                class="item"
                 :class="{
-                  active: $route.params.nestedPage === 'settings',
+                  active: $route.params.page === 'apps',
                 }"
-                @click="navigateTo('/account/users/settings')"
+                @click="navigateTo('/account/apps')"
               >
-                <span class="ml-4">{{ $t('activity.settings') }}</span>
-              </NcMenuItem>
-            </a-sub-menu>
-          </NcMenu>
-        </div>
-
-        <!-- Sub Tabs -->
+                <div class="flex items-center space-x-2">
+                  <component :is="iconMap.appStore" />
 
-        <div class="flex flex-col w-full ml-65">
-          <div class="flex flex-row p-3 items-center h-14">
-            <div class="flex-1" />
-
-            <LazyGeneralReleaseInfo />
-
-            <a-tooltip v-if="!appInfo.ee" placement="bottom" :mouse-enter-delay="1">
-              <template #title>{{ $t('title.switchLanguage') }}</template>
+                  <div class="select-none text-sm">{{ $t('title.appStore') }}</div>
+                </div>
+              </NcMenuItem>
+              <a-sub-menu key="users" class="!bg-white !my-0">
+                <template #icon>
+                  <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
+                </template>
+                <template #title>{{ $t('objects.users') }}</template>
+
+                <NcMenuItem
+                  v-if="isUIAllowed('superAdminUserManagement') && !isEeUI"
+                  key="list"
+                  class="text-xs item"
+                  :class="{
+                    active: $route.params.nestedPage === 'list',
+                  }"
+                  @click="navigateTo('/account/users/list')"
+                >
+                  <span class="ml-4">{{ $t('title.userManagement') }}</span>
+                </NcMenuItem>
+                <NcMenuItem
+                  key="password-reset"
+                  class="text-xs item"
+                  :class="{
+                    active: $route.params.nestedPage === 'password-reset',
+                  }"
+                  @click="navigateTo('/account/users/password-reset')"
+                >
+                  <span class="ml-4">{{ $t('title.resetPasswordMenu') }}</span>
+                </NcMenuItem>
+                <NcMenuItem
+                  v-if="isUIAllowed('superAdminAppSettings') && !isEeUI"
+                  key="settings"
+                  class="text-xs item"
+                  :class="{
+                    active: $route.params.nestedPage === 'settings',
+                  }"
+                  @click="navigateTo('/account/users/settings')"
+                >
+                  <span class="ml-4">{{ $t('activity.settings') }}</span>
+                </NcMenuItem>
+              </a-sub-menu>
+            </NcMenu>
+          </div>
 
-              <div class="flex pr-4 items-center">
-                <LazyGeneralLanguage class="cursor-pointer text-2xl hover:text-gray-800" />
-              </div>
-            </a-tooltip>
-
-            <template v-if="signedIn">
-              <NcDropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
-                <NcButton type="text" size="small">
-                  <component
-                    :is="iconMap.threeDotVertical"
-                    data-testid="nc-menu-accounts"
-                    class="md:text-lg cursor-pointer hover:text-gray-800 nc-menu-accounts"
-                    @click.prevent
-                  />
-                </NcButton>
-
-                <template #overlay>
-                  <div class="!py-1 !rounded-md bg-white overflow-hidden">
-                    <div class="!rounded-b group" data-testid="nc-menu-accounts__sign-out">
-                      <div v-e="['a:navbar:user:sign-out']" class="nc-account-dropdown-item group" @click="logout">
-                        <component :is="iconMap.signout" class="group-hover:text-accent" />&nbsp;
-
-                        <span class="prose group-hover:text-primary">
-                          {{ $t('general.signOut') }}
-                        </span>
+          <!-- Sub Tabs -->
+
+          <div class="flex flex-col w-full ml-65">
+            <div class="flex flex-row p-3 items-center h-14">
+              <div class="flex-1" />
+
+              <LazyGeneralReleaseInfo />
+
+              <a-tooltip v-if="!appInfo.ee" placement="bottom" :mouse-enter-delay="1">
+                <template #title>{{ $t('title.switchLanguage') }}</template>
+
+                <div class="flex pr-4 items-center">
+                  <LazyGeneralLanguage class="cursor-pointer text-2xl hover:text-gray-800" />
+                </div>
+              </a-tooltip>
+
+              <template v-if="signedIn">
+                <NcDropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
+                  <NcButton type="text" size="small">
+                    <component
+                      :is="iconMap.threeDotVertical"
+                      data-testid="nc-menu-accounts"
+                      class="md:text-lg cursor-pointer hover:text-gray-800 nc-menu-accounts"
+                      @click.prevent
+                    />
+                  </NcButton>
+
+                  <template #overlay>
+                    <div class="!py-1 !rounded-md bg-white overflow-hidden">
+                      <div class="!rounded-b group" data-testid="nc-menu-accounts__sign-out">
+                        <div v-e="['a:navbar:user:sign-out']" class="nc-account-dropdown-item group" @click="logout">
+                          <component :is="iconMap.signout" class="group-hover:text-accent" />&nbsp;
+
+                          <span class="prose group-hover:text-primary">
+                            {{ $t('general.signOut') }}
+                          </span>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </template>
-              </NcDropdown>
-            </template>
-          </div>
-          <div
-            class="flex flex-col container mx-auto"
-            :style="{
-              height: 'calc(100vh - 3.5rem)',
-            }"
-          >
-            <div class="mt-2 h-full">
-              <NuxtPage />
+                  </template>
+                </NcDropdown>
+              </template>
+            </div>
+            <div
+              class="flex flex-col container mx-auto"
+              :style="{
+                height: 'calc(100vh - 3.5rem)',
+              }"
+            >
+              <div class="mt-2 h-full">
+                <NuxtPage />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index b41d19d458..54f1daeb04 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -61,61 +61,68 @@ function navigateSignIn() {
 </script>
 
 <template>
-  <NuxtLayout>
-    <div class="md:bg-primary bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
-      <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 ring-opacity-100)" :animate="isLoading" />
-
-        <div class="self-center flex flex-col justify-center items-center text-center gap-2">
-          <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
-
-          <template v-if="!success">
-            <div class="prose-sm">{{ $t('msg.info.passwordRecovery.message_1') }}</div>
-            <div class="prose-sm mb-4">{{ $t('msg.info.passwordRecovery.message_2') }}</div>
-          </template>
-
-          <template v-else>
-            <div class="prose-sm text-success flex items-center leading-8 gap-2">
-              {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
-            </div>
+  <div>
+    <NuxtLayout>
+      <div class="md:bg-primary bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
+        <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 ring-opacity-100)" :animate="isLoading" />
+
+          <div class="self-center flex flex-col justify-center items-center text-center gap-2">
+            <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
+
+            <template v-if="!success">
+              <div class="prose-sm">{{ $t('msg.info.passwordRecovery.message_1') }}</div>
+              <div class="prose-sm mb-4">{{ $t('msg.info.passwordRecovery.message_2') }}</div>
+            </template>
+
+            <template v-else>
+              <div class="prose-sm text-success flex items-center leading-8 gap-2">
+                {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
+              </div>
 
-            <nuxt-link @click="navigateSignIn">{{ $t('general.signIn') }}</nuxt-link>
-          </template>
-        </div>
+              <nuxt-link @click="navigateSignIn">{{ $t('general.signIn') }}</nuxt-link>
+            </template>
+          </div>
 
-        <a-form ref="formValidator" layout="vertical" :model="form" no-style @finish="resetPassword">
-          <Transition name="layout">
-            <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
-              <div class="flex items-center gap-2 justify-center">
-                <MaterialSymbolsWarning />
-                <div class="break-words">{{ error }}</div>
+          <a-form ref="formValidator" layout="vertical" :model="form" no-style @finish="resetPassword">
+            <Transition name="layout">
+              <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
+                <div class="flex items-center gap-2 justify-center">
+                  <MaterialSymbolsWarning />
+                  <div class="break-words">{{ error }}</div>
+                </div>
+              </div>
+            </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-form-item>
+
+            <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
+              <button class="scaling-btn bg-opacity-100" type="submit">
+                <span class="flex items-center gap-2">
+                  <component :is="iconMap.signin" />
+                  {{ $t('activity.sendEmail') }}
+                </span>
+              </button>
+
+              <div class="text-end prose-sm">
+                {{ $t('msg.info.signUp.alreadyHaveAccount') }}
+                <nuxt-link @click="navigateSignIn">{{ $t('general.signIn') }}</nuxt-link>
               </div>
             </div>
-          </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-form-item>
-
-          <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
-            <button class="scaling-btn bg-opacity-100" type="submit">
-              <span class="flex items-center gap-2">
-                <component :is="iconMap.signin" />
-                {{ $t('activity.sendEmail') }}
-              </span>
-            </button>
-
-            <div class="text-end prose-sm">
-              {{ $t('msg.info.signUp.alreadyHaveAccount') }}
-              <nuxt-link @click="navigateSignIn">{{ $t('general.signIn') }}</nuxt-link>
-            </div>
-          </div>
-        </a-form>
+          </a-form>
+        </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
index e3c6737584..11d3a72576 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue
@@ -62,38 +62,40 @@ watch(
 </script>
 
 <template>
-  <NuxtLayout>
-    <NuxtPage v-if="!passwordDlg" />
-
-    <a-modal
-      v-model:visible="passwordDlg"
-      :class="{ active: passwordDlg }"
-      :closable="false"
-      width="min(100%, 450px)"
-      centered
-      :footer="null"
-      :mask-closable="false"
-      wrap-class-name="nc-modal-shared-form-password-dlg"
-      @close="passwordDlg = false"
-    >
-      <div class="w-full flex flex-col gap-4">
-        <h2 class="text-xl font-semibold">{{ $t('msg.thisSharedViewIsProtected') }}</h2>
-
-        <a-form layout="vertical" no-style :model="form" @finish="loadSharedView">
-          <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
-            <a-input-password v-model:value="form.password" size="large" :placeholder="$t('msg.enterPassword')" />
-          </a-form-item>
-
-          <Transition name="layout">
-            <div v-if="passwordError" class="mb-2 text-sm text-red-500">{{ passwordError }}</div>
-          </Transition>
-
-          <!-- Unlock -->
-          <button type="submit" class="mt-4 scaling-btn bg-opacity-100">{{ $t('general.unlock') }}</button>
-        </a-form>
-      </div>
-    </a-modal>
-  </NuxtLayout>
+  <div>
+    <NuxtLayout>
+      <NuxtPage v-if="!passwordDlg" />
+
+      <a-modal
+        v-model:visible="passwordDlg"
+        :class="{ active: passwordDlg }"
+        :closable="false"
+        width="min(100%, 450px)"
+        centered
+        :footer="null"
+        :mask-closable="false"
+        wrap-class-name="nc-modal-shared-form-password-dlg"
+        @close="passwordDlg = false"
+      >
+        <div class="w-full flex flex-col gap-4">
+          <h2 class="text-xl font-semibold">{{ $t('msg.thisSharedViewIsProtected') }}</h2>
+
+          <a-form layout="vertical" no-style :model="form" @finish="loadSharedView">
+            <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
+              <a-input-password v-model:value="form.password" size="large" :placeholder="$t('msg.enterPassword')" />
+            </a-form-item>
+
+            <Transition name="layout">
+              <div v-if="passwordError" class="mb-2 text-sm text-red-500">{{ passwordError }}</div>
+            </Transition>
+
+            <!-- Unlock -->
+            <button type="submit" class="mt-4 scaling-btn bg-opacity-100">{{ $t('general.unlock') }}</button>
+          </a-form>
+        </div>
+      </a-modal>
+    </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/nc-gui/pages/profile/[[username]].vue b/packages/nc-gui/pages/profile/[[username]].vue
index a0d0cabe6c..38f9c717aa 100644
--- a/packages/nc-gui/pages/profile/[[username]].vue
+++ b/packages/nc-gui/pages/profile/[[username]].vue
@@ -11,153 +11,157 @@ await loadProfile(route.params.username as string)
 </script>
 
 <template>
-  <NuxtLayout>
-    <a-layout class="h-[75vh] overflow-y-auto flex">
-      <a-layout-sider :collapsed="false" width="320" class="h-max px-5" :trigger="null" collapsible theme="light">
-        <div class="mx-2">
-          <div class="my-3">
-            <a-avatar v-if="profile.avatar" :size="150" :src="profile.avatar" />
-            <a-avatar v-else :size="150">
-              <template #icon>
-                <MdiAccount class="w-full h-full p-[15px]" />
-              </template>
-            </a-avatar>
-          </div>
-          <div class="nc-profile-display-name text-[30px] my-2 font-bold">
-            {{ profile.display_name }}
-          </div>
-
-          <div class="nc-profile-user-name text-[18px] my-2">@{{ profile.user_name }}</div>
+  <div>
+    <NuxtLayout>
+      <a-layout class="h-[75vh] overflow-y-auto flex">
+        <a-layout-sider :collapsed="false" width="320" class="h-max px-5" :trigger="null" collapsible theme="light">
+          <div class="mx-2">
+            <div class="my-3">
+              <a-avatar v-if="profile.avatar" :size="150" :src="profile.avatar" />
+              <a-avatar v-else :size="150">
+                <template #icon>
+                  <MdiAccount class="w-full h-full p-[15px]" />
+                </template>
+              </a-avatar>
+            </div>
+            <div class="nc-profile-display-name text-[30px] my-2 font-bold">
+              {{ profile.display_name }}
+            </div>
 
-          <div class="nc-profile-bio text-[15px] my-4">
-            {{ profile.bio }}
-          </div>
+            <div class="nc-profile-user-name text-[18px] my-2">@{{ profile.user_name }}</div>
 
-          <div class="nc-profile-follower my-2">
-            <div class="flex items-center mr-4">
-              <MdiAccountSupervisorOutline class="text-lg" />
-              {{ profile.followerCount }} followers．{{ profile.followingCount }} Following
+            <div class="nc-profile-bio text-[15px] my-4">
+              {{ profile.bio }}
             </div>
-          </div>
 
-          <div v-if="profile.id !== user.id" class="nc-profile-follow-btn my-4">
-            <a-button
-              v-if="!isFollowing"
-              class="!bg-primary !border-none w-full text-center !text-white rounded"
-              size="large"
-              @click="followUser(profile.id)"
-            >
-              Follow
-            </a-button>
-            <a-button
-              v-else
-              class="!bg-primary !border-none w-full text-center !text-white rounded"
-              size="large"
-              @click="unfollowUser(profile.id)"
-            >
-              Unfollow
-            </a-button>
-          </div>
+            <div class="nc-profile-follower my-2">
+              <div class="flex items-center mr-4">
+                <MdiAccountSupervisorOutline class="text-lg" />
+                {{ profile.followerCount }} followers．{{ profile.followingCount }} Following
+              </div>
+            </div>
 
-          <div class="nc-profile-edit-btn my-4">
-            <a-button class="!bg-primary !border-none w-full text-center !text-white rounded" size="large">
-              Edit Profile
-            </a-button>
-          </div>
+            <div v-if="profile.id !== user.id" class="nc-profile-follow-btn my-4">
+              <a-button
+                v-if="!isFollowing"
+                class="!bg-primary !border-none w-full text-center !text-white rounded"
+                size="large"
+                @click="followUser(profile.id)"
+              >
+                Follow
+              </a-button>
+              <a-button
+                v-else
+                class="!bg-primary !border-none w-full text-center !text-white rounded"
+                size="large"
+                @click="unfollowUser(profile.id)"
+              >
+                Unfollow
+              </a-button>
+            </div>
 
-          <div v-if="profile.location" class="nc-profile-location my-2">
-            <div class="flex items-center mr-4"><MdiMapMarkerOutline class="text-lg mr-2" /> {{ profile.location }}</div>
-          </div>
+            <div class="nc-profile-edit-btn my-4">
+              <a-button class="!bg-primary !border-none w-full text-center !text-white rounded" size="large">
+                Edit Profile
+              </a-button>
+            </div>
 
-          <div v-if="profile.website" class="nc-profile-website my-2">
-            <div class="flex items-center mr-4">
-              <MdiLinkVariant class="text-lg mr-2" />
-              <a class="!no-underline" :href="profile.website" rel="noopener noreferrer" target="_blank">{{ profile.website }}</a>
+            <div v-if="profile.location" class="nc-profile-location my-2">
+              <div class="flex items-center mr-4"><MdiMapMarkerOutline class="text-lg mr-2" /> {{ profile.location }}</div>
             </div>
-          </div>
 
-          <div class="nc-profile-statistics my-10">
-            <div class="text-[20px] font-bold">Statistics</div>
-            <div class="mt-5">
+            <div v-if="profile.website" class="nc-profile-website my-2">
               <div class="flex items-center mr-4">
-                <MdiCircleMedium class="text-lg text-[#4E2BDC]" />
-                <span class="text-[16px]">Database</span>
-              </div>
-              <div class="mt-2">
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Columns </a-button>
-                  <span class="ml-2 text-[12px]">x5</span>
-                </div>
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Views </a-button>
-                  <span class="ml-2 text-[12px]">x21</span>
-                </div>
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Tables </a-button>
-                  <span class="ml-2 text-[12px]">x158</span>
-                </div>
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Databases </a-button>
-                  <span class="ml-2 text-[12px]">x9</span>
-                </div>
+                <MdiLinkVariant class="text-lg mr-2" />
+                <a class="!no-underline" :href="profile.website" rel="noopener noreferrer" target="_blank">{{
+                  profile.website
+                }}</a>
               </div>
             </div>
-            <div class="mt-5">
-              <div class="flex items-center mr-4">
-                <MdiCircleMedium class="text-lg text-[#E9ED2A]" />
-                <span class="text-[16px]">Automations</span>
-              </div>
-              <div class="mt-2">
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Columns </a-button>
-                  <span class="ml-2 text-[12px]">x5</span>
+
+            <div class="nc-profile-statistics my-10">
+              <div class="text-[20px] font-bold">Statistics</div>
+              <div class="mt-5">
+                <div class="flex items-center mr-4">
+                  <MdiCircleMedium class="text-lg text-[#4E2BDC]" />
+                  <span class="text-[16px]">Database</span>
                 </div>
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Views </a-button>
-                  <span class="ml-2 text-[12px]">x21</span>
+                <div class="mt-2">
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Columns </a-button>
+                    <span class="ml-2 text-[12px]">x5</span>
+                  </div>
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Views </a-button>
+                    <span class="ml-2 text-[12px]">x21</span>
+                  </div>
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Tables </a-button>
+                    <span class="ml-2 text-[12px]">x158</span>
+                  </div>
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Databases </a-button>
+                    <span class="ml-2 text-[12px]">x9</span>
+                  </div>
                 </div>
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Tables </a-button>
-                  <span class="ml-2 text-[12px]">x158</span>
+              </div>
+              <div class="mt-5">
+                <div class="flex items-center mr-4">
+                  <MdiCircleMedium class="text-lg text-[#E9ED2A]" />
+                  <span class="text-[16px]">Automations</span>
                 </div>
-                <div class="nc-profile-statistics-badge inline-block m-1">
-                  <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Databases </a-button>
-                  <span class="ml-2 text-[12px]">x9</span>
+                <div class="mt-2">
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Columns </a-button>
+                    <span class="ml-2 text-[12px]">x5</span>
+                  </div>
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Views </a-button>
+                    <span class="ml-2 text-[12px]">x21</span>
+                  </div>
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Tables </a-button>
+                    <span class="ml-2 text-[12px]">x158</span>
+                  </div>
+                  <div class="nc-profile-statistics-badge inline-block m-1">
+                    <a-button class="!rounded-2xl !bg-[#F2F4F7]" size="small"> Databases </a-button>
+                    <span class="ml-2 text-[12px]">x9</span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </a-layout-sider>
-      <a-layout-content class="h-max px-5 py-2 scrollbar-thumb-gray-500">
-        <a-tabs>
-          <a-tab-pane key="overview" class="w-full">
-            <template #tab>
-              <div class="flex items-center mr-4">
-                <MdiBookOpenBlankVariant class="text-lg mr-2" />
-                Overview
-              </div>
-            </template>
-            <LazyProfileOverview />
-          </a-tab-pane>
-          <a-tab-pane key="stars" class="w-full">
-            <template #tab>
-              <div class="flex items-center mr-4">
-                <MdiStarOutline class="text-lg mr-2" />
-                <span class="mr-2">Stars</span>
-                <a-badge
-                  count="25"
-                  :number-style="{
-                    backgroundColor: '#B5B5B7',
-                    color: '#FFFFFF',
-                  }"
-                />
-              </div>
-            </template>
-            <LazyProfileStars />
-          </a-tab-pane>
-        </a-tabs>
-      </a-layout-content>
-    </a-layout>
-  </NuxtLayout>
+        </a-layout-sider>
+        <a-layout-content class="h-max px-5 py-2 scrollbar-thumb-gray-500">
+          <a-tabs>
+            <a-tab-pane key="overview" class="w-full">
+              <template #tab>
+                <div class="flex items-center mr-4">
+                  <MdiBookOpenBlankVariant class="text-lg mr-2" />
+                  Overview
+                </div>
+              </template>
+              <LazyProfileOverview />
+            </a-tab-pane>
+            <a-tab-pane key="stars" class="w-full">
+              <template #tab>
+                <div class="flex items-center mr-4">
+                  <MdiStarOutline class="text-lg mr-2" />
+                  <span class="mr-2">Stars</span>
+                  <a-badge
+                    count="25"
+                    :number-style="{
+                      backgroundColor: '#B5B5B7',
+                      color: '#FFFFFF',
+                    }"
+                  />
+                </div>
+              </template>
+              <LazyProfileStars />
+            </a-tab-pane>
+          </a-tabs>
+        </a-layout-content>
+      </a-layout>
+    </NuxtLayout>
+  </div>
 </template>
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index 172bb306b1..4ecf1a1ff8 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -57,88 +57,90 @@ const deleteProject = (base: BaseType) => {
 </script>
 
 <template>
-  <NuxtLayout>
-    <template #sidebar>
-      <div class="flex flex-col h-full">
-        <div class="flex p-4">
-          <v-menu class="select-none">
-            <template #activator="{ props }">
-              <div
-                class="color-transition hover:(bg-gray-100) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
-                @click="props.onClick"
-              >
-                <component :is="iconMap.plus" class="text-primary text-2xl" />
-                {{ $t('title.newProj') }}
+  <div>
+    <NuxtLayout>
+      <template #sidebar>
+        <div class="flex flex-col h-full">
+          <div class="flex p-4">
+            <v-menu class="select-none">
+              <template #activator="{ props }">
+                <div
+                  class="color-transition hover:(bg-gray-100) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
+                  @click="props.onClick"
+                >
+                  <component :is="iconMap.plus" class="text-primary text-2xl" />
+                  {{ $t('title.newProj') }}
+                </div>
+              </template>
+
+              <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
+                <div
+                  class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  @click="navigateTo('/base/create')"
+                >
+                  <component :is="iconMap.plus" class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                  <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+                </div>
+                <div
+                  class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  @click="navigateTo('/base/create-external')"
+                >
+                  <component :is="iconMap.database" class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                  <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+                </div>
+              </v-list>
+            </v-menu>
+          </div>
+
+          <a-menu class="pr-4 flex-1 border-0">
+            <a-menu-item
+              v-for="(option, index) in navDrawerOptions"
+              :key="index"
+              class="!rounded-r-lg"
+              @click="activePage = option.title"
+            >
+              <div class="flex items-center gap-4">
+                <component :is="option.icon" />
+
+                <span class="font-semibold">
+                  {{ option.title }}
+                </span>
               </div>
-            </template>
-
-            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-              <div
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/base/create')"
-              >
-                <component :is="iconMap.plus" class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-              </div>
-              <div
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/base/create-external')"
-              >
-                <component :is="iconMap.database" class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-              </div>
-            </v-list>
-          </v-menu>
-        </div>
+            </a-menu-item>
+          </a-menu>
 
-        <a-menu class="pr-4 flex-1 border-0">
-          <a-menu-item
-            v-for="(option, index) in navDrawerOptions"
-            :key="index"
-            class="!rounded-r-lg"
-            @click="activePage = option.title"
-          >
-            <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>
+          <general-social />
 
-    <div class="flex-1 mb-12">
-      <div class="flex">
-        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 p-4">
-          {{ activePage }}
+          <general-sponsors :nav="true" />
         </div>
-
-        <div class="self-end flex text-4xl mb-1">
-          <MaterialSymbolsGridView
-            :class="route.name === 'index-index' ? '!text-primary' : ''"
-            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/')"
-          />
-          <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'index-index-list' ? '!text-primary' : ''"
-            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/list')"
-          />
+      </template>
+
+      <div class="flex-1 mb-12">
+        <div class="flex">
+          <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 p-4">
+            {{ activePage }}
+          </div>
+
+          <div class="self-end flex text-4xl mb-1">
+            <MaterialSymbolsGridView
+              :class="route.name === 'index-index' ? '!text-primary' : ''"
+              class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+              @click="navigateTo('/')"
+            />
+            <MaterialSymbolsFormatListBulletedRounded
+              :class="route.name === 'index-index-list' ? '!text-primary' : ''"
+              class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+              @click="navigateTo('/list')"
+            />
+          </div>
         </div>
-      </div>
 
-      <a-divider class="!mb-4 lg:(!mb-8)" />
+        <a-divider class="!mb-4 lg:(!mb-8)" />
 
-      <NuxtPage :bases="bases" @delete-base="deleteProject" />
-    </div>
+        <NuxtPage :bases="bases" @delete-base="deleteProject" />
+      </div>
 
-    <a-modal></a-modal>
-  </NuxtLayout>
+      <a-modal></a-modal>
+    </NuxtLayout>
+  </div>
 </template>
diff --git a/packages/nc-gui/pages/reset/[id].vue b/packages/nc-gui/pages/reset/[id].vue
index eb74fcd8b5..83566baa19 100644
--- a/packages/nc-gui/pages/reset/[id].vue
+++ b/packages/nc-gui/pages/reset/[id].vue
@@ -61,72 +61,76 @@ function resetError() {
 </script>
 
 <template>
-  <NuxtLayout>
-    <div class="md:bg-primary signin bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
+  <div>
+    <NuxtLayout>
       <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)"
+        class="md:bg-primary signin bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center"
       >
-        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
+        <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 ring-opacity-100)" :animate="isLoading" />
 
-        <div class="self-center flex flex-col justify-center items-center text-center gap-2">
-          <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
+          <div class="self-center flex flex-col justify-center items-center text-center gap-2">
+            <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
 
-          <div class="prose-sm text-success flex items-center leading-8 gap-2">
-            {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
-          </div>
+            <div class="prose-sm text-success flex items-center leading-8 gap-2">
+              {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
+            </div>
 
-          <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
-        </div>
+            <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
+          </div>
 
-        <a-form ref="formValidator" layout="vertical" :model="form" no-style @finish="resetPassword">
-          <Transition name="layout">
-            <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
-              <div class="flex items-center gap-2 justify-center">
-                <MaterialSymbolsWarning />
-                <div class="break-words">{{ error }}</div>
+          <a-form ref="formValidator" layout="vertical" :model="form" no-style @finish="resetPassword">
+            <Transition name="layout">
+              <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
+                <div class="flex items-center gap-2 justify-center">
+                  <MaterialSymbolsWarning />
+                  <div class="break-words">{{ error }}</div>
+                </div>
               </div>
+            </Transition>
+
+            <a-form-item
+              :label="$t('placeholder.password.new')"
+              name="password"
+              :rules="[{ required: true, message: t('msg.error.signUpRules.passwdRequired') }]"
+            >
+              <a-input-password
+                v-model:value="form.password"
+                :placeholder="$t('placeholder.password.new')"
+                class="password"
+                @focus="resetError"
+              />
+            </a-form-item>
+
+            <a-form-item
+              :label="$t('placeholder.password.confirm')"
+              name="newPassword"
+              :rules="[{ required: true, message: t('msg.error.signUpRules.passwdRequired') }]"
+            >
+              <a-input-password
+                v-model:value="form.newPassword"
+                type="password"
+                class="password"
+                :placeholder="$t('placeholder.password.confirm')"
+                @focus="resetError"
+              />
+            </a-form-item>
+
+            <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
+              <NcButton type="primary" :is-loading="isLoading" html-type="submit">
+                <span class="flex items-center gap-2">
+                  <component :is="iconMap.signin" />
+                  {{ $t('general.reset') }}
+                </span>
+              </NcButton>
             </div>
-          </Transition>
-
-          <a-form-item
-            :label="$t('placeholder.password.new')"
-            name="password"
-            :rules="[{ required: true, message: t('msg.error.signUpRules.passwdRequired') }]"
-          >
-            <a-input-password
-              v-model:value="form.password"
-              :placeholder="$t('placeholder.password.new')"
-              class="password"
-              @focus="resetError"
-            />
-          </a-form-item>
-
-          <a-form-item
-            :label="$t('placeholder.password.confirm')"
-            name="newPassword"
-            :rules="[{ required: true, message: t('msg.error.signUpRules.passwdRequired') }]"
-          >
-            <a-input-password
-              v-model:value="form.newPassword"
-              type="password"
-              class="password"
-              :placeholder="$t('placeholder.password.confirm')"
-              @focus="resetError"
-            />
-          </a-form-item>
-
-          <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
-            <NcButton type="primary" :is-loading="isLoading" html-type="submit">
-              <span class="flex items-center gap-2">
-                <component :is="iconMap.signin" />
-                {{ $t('general.reset') }}
-              </span>
-            </NcButton>
-          </div>
-        </a-form>
+          </a-form>
+        </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/packages/nc-gui/pages/signin.vue b/packages/nc-gui/pages/signin.vue
index 3a55a0a140..2c05c8bfc4 100644
--- a/packages/nc-gui/pages/signin.vue
+++ b/packages/nc-gui/pages/signin.vue
@@ -92,114 +92,116 @@ function navigateForgotPassword() {
 </script>
 
 <template>
-  <NuxtLayout>
-    <div
-      data-testid="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>
+    <NuxtLayout>
       <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)"
+        data-testid="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"
       >
-        <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent ring-opacity-100)" :animate="isLoading" />
+        <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 ring-opacity-100)" :animate="isLoading" />
 
-        <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
+          <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
 
-        <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signIn">
-          <template v-if="!appInfo.disableEmailAuth">
-            <Transition name="layout">
-              <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
-                <div class="flex items-center gap-2 justify-center">
-                  <MaterialSymbolsWarning />
-                  <div class="break-words">{{ error }}</div>
+          <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signIn">
+            <template v-if="!appInfo.disableEmailAuth">
+              <Transition name="layout">
+                <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
+                  <div class="flex items-center gap-2 justify-center">
+                    <MaterialSymbolsWarning />
+                    <div class="break-words">{{ error }}</div>
+                  </div>
                 </div>
+              </Transition>
+
+              <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+                <a-input
+                  v-model:value="form.email"
+                  data-testid="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-testid="nc-form-signin__password"
+                  size="large"
+                  class="password"
+                  :placeholder="$t('msg.info.signUp.enterPassword')"
+                  @focus="resetError"
+                />
+              </a-form-item>
+
+              <div class="hidden md:block text-right">
+                <nuxt-link class="prose-sm" @click="navigateForgotPassword">
+                  {{ $t('msg.info.signUp.forgotPassword') }}
+                </nuxt-link>
               </div>
-            </Transition>
-
-            <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-              <a-input
-                v-model:value="form.email"
-                data-testid="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-testid="nc-form-signin__password"
-                size="large"
-                class="password"
-                :placeholder="$t('msg.info.signUp.enterPassword')"
-                @focus="resetError"
-              />
-            </a-form-item>
-
-            <div class="hidden md:block text-right">
-              <nuxt-link class="prose-sm" @click="navigateForgotPassword">
-                {{ $t('msg.info.signUp.forgotPassword') }}
-              </nuxt-link>
-            </div>
-          </template>
-
-          <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
-            <template v-if="!appInfo.disableEmailAuth">
-              <button data-testid="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit">
-                <span class="flex items-center gap-2">
-                  <component :is="iconMap.signin" />
-                  {{ $t('general.signIn') }}
-                </span>
-              </button>
             </template>
-            <a
-              v-if="appInfo.googleAuthEnabled"
-              :href="`${appInfo.ncSiteUrl}/auth/google`"
-              class="scaling-btn bg-opacity-100 after:(!bg-white) !text-primary !no-underline"
-            >
-              <span class="flex items-center gap-2">
-                <LogosGoogleGmail />
-
-                {{ $t('labels.signInWithProvider', { provider: 'Google' }) }}
-              </span>
-            </a>
-
-            <div
-              v-if="appInfo.oidcAuthEnabled"
-              class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center"
-            >
-              <a :href="`${appInfo.ncSiteUrl}/auth/oidc`" class="!text-primary !no-underline">
-                <button type="button" class="scaling-btn bg-opacity-100">
+
+            <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
+              <template v-if="!appInfo.disableEmailAuth">
+                <button data-testid="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit">
                   <span class="flex items-center gap-2">
-                    <MdiLogin />
-
-                    <template v-if="!appInfo.disableEmailAuth">
-                      {{ $t('labels.signUpWithProvider', { provider: appInfo.oidcProviderName || 'OpenID Connect' }) }}
-                    </template>
-                    <template v-else>
-                      {{ $t('general.signIn') }}
-                    </template>
+                    <component :is="iconMap.signin" />
+                    {{ $t('general.signIn') }}
                   </span>
                 </button>
+              </template>
+              <a
+                v-if="appInfo.googleAuthEnabled"
+                :href="`${appInfo.ncSiteUrl}/auth/google`"
+                class="scaling-btn bg-opacity-100 after:(!bg-white) !text-primary !no-underline"
+              >
+                <span class="flex items-center gap-2">
+                  <LogosGoogleGmail />
+
+                  {{ $t('labels.signInWithProvider', { provider: 'Google' }) }}
+                </span>
               </a>
-            </div>
 
-            <div v-if="!appInfo.inviteOnlySignup" class="text-end prose-sm">
-              {{ $t('msg.info.signUp.dontHaveAccount') }}
-              <nuxt-link @click="navigateSignUp">{{ $t('general.signUp') }}</nuxt-link>
-            </div>
-            <template v-if="!appInfo.disableEmailAuth">
-              <div class="md:hidden">
-                <nuxt-link class="prose-sm" @click="navigateForgotPassword">
-                  {{ $t('msg.info.signUp.forgotPassword') }}
-                </nuxt-link>
+              <div
+                v-if="appInfo.oidcAuthEnabled"
+                class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center"
+              >
+                <a :href="`${appInfo.ncSiteUrl}/auth/oidc`" class="!text-primary !no-underline">
+                  <button type="button" class="scaling-btn bg-opacity-100">
+                    <span class="flex items-center gap-2">
+                      <MdiLogin />
+
+                      <template v-if="!appInfo.disableEmailAuth">
+                        {{ $t('labels.signUpWithProvider', { provider: appInfo.oidcProviderName || 'OpenID Connect' }) }}
+                      </template>
+                      <template v-else>
+                        {{ $t('general.signIn') }}
+                      </template>
+                    </span>
+                  </button>
+                </a>
               </div>
-            </template>
-          </div>
-        </a-form>
+
+              <div v-if="!appInfo.inviteOnlySignup" class="text-end prose-sm">
+                {{ $t('msg.info.signUp.dontHaveAccount') }}
+                <nuxt-link @click="navigateSignUp">{{ $t('general.signUp') }}</nuxt-link>
+              </div>
+              <template v-if="!appInfo.disableEmailAuth">
+                <div class="md:hidden">
+                  <nuxt-link class="prose-sm" @click="navigateForgotPassword">
+                    {{ $t('msg.info.signUp.forgotPassword') }}
+                  </nuxt-link>
+                </div>
+              </template>
+            </div>
+          </a-form>
+        </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 00fefdc79c..7ff2f54459 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -127,124 +127,126 @@ onMounted(async () => {
 </script>
 
 <template>
-  <NuxtLayout>
-    <div class="md:bg-primary bg-opacity-5 signup h-full min-h-[600px] flex flex-col justify-center items-center">
-      <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 ring-opacity-100)" :animate="isLoading" />
-
-        <h1 class="prose-2xl font-bold self-center my-4">
-          {{ $t('general.signUp') }}
-          {{ $route.query.redirect_to === '/referral' ? '& REFER' : '' }}
-          {{ $route.query.redirect_to === '/pricing' ? '& BUY' : '' }}
-        </h1>
-
-        <h2 v-if="appInfo.firstUser" class="prose !text-primary font-semibold self-center">
-          {{ $t('msg.info.signUp.superAdmin') }}
-        </h2>
-
-        <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signUp">
-          <template v-if="!appInfo.disableEmailAuth">
-            <Transition name="layout">
-              <div
-                v-if="error"
-                class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1"
-                data-testid="nc-signup-error"
-              >
-                <div class="flex items-center gap-2 justify-center">
-                  <MaterialSymbolsWarning />
-                  <div class="break-words">{{ error }}</div>
-                </div>
-              </div>
-            </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-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('msg.info.signUp.enterPassword')"
-                @focus="resetError"
-              />
-            </a-form-item>
-          </template>
-          <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4">
-            <template v-if="!appInfo.disableEmailAuth">
-              <button class="scaling-btn bg-opacity-100" type="submit">
-                <span class="flex items-center gap-2">
-                  <MaterialSymbolsRocketLaunchOutline />
+  <div>
+    <NuxtLayout>
+      <div class="md:bg-primary bg-opacity-5 signup h-full min-h-[600px] flex flex-col justify-center items-center">
+        <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 ring-opacity-100)" :animate="isLoading" />
 
-                  {{ $t('general.signUp') }}
-                </span>
-              </button>
+          <h1 class="prose-2xl font-bold self-center my-4">
+            {{ $t('general.signUp') }}
+            {{ $route.query.redirect_to === '/referral' ? '& REFER' : '' }}
+            {{ $route.query.redirect_to === '/pricing' ? '& BUY' : '' }}
+          </h1>
+
+          <h2 v-if="appInfo.firstUser" class="prose !text-primary font-semibold self-center">
+            {{ $t('msg.info.signUp.superAdmin') }}
+          </h2>
+
+          <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signUp">
+            <template v-if="!appInfo.disableEmailAuth">
+              <Transition name="layout">
+                <div
+                  v-if="error"
+                  class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1"
+                  data-testid="nc-signup-error"
+                >
+                  <div class="flex items-center gap-2 justify-center">
+                    <MaterialSymbolsWarning />
+                    <div class="break-words">{{ error }}</div>
+                  </div>
+                </div>
+              </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-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('msg.info.signUp.enterPassword')"
+                  @focus="resetError"
+                />
+              </a-form-item>
             </template>
-            <a
-              v-if="appInfo.googleAuthEnabled"
-              :href="`${appInfo.ncSiteUrl}/auth/google`"
-              class="scaling-btn bg-opacity-100 after:(!bg-white) !text-primary !no-underline"
-            >
-              <span class="flex items-center gap-2">
-                <LogosGoogleGmail />
-
-                {{ $t('labels.signUpWithProvider', { provider: 'Google' }) }}
-              </span>
-            </a>
-
-            <div
-              v-if="appInfo.oidcAuthEnabled"
-              class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center"
-            >
-              <a :href="`${appInfo.ncSiteUrl}/auth/oidc`" class="!text-primary !no-underline">
-                <button type="button" class="scaling-btn bg-opacity-100">
+            <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4">
+              <template v-if="!appInfo.disableEmailAuth">
+                <button class="scaling-btn bg-opacity-100" type="submit">
                   <span class="flex items-center gap-2">
-                    <MdiLogin />
-                    <template v-if="!appInfo.disableEmailAuth">
-                      {{ $t('labels.signUpWithProvider', { provider: appInfo.oidcProviderName || 'OpenID Connect' }) }}
-                    </template>
-                    <template v-else>
-                      {{ $t('general.signUp') }}
-                    </template>
+                    <MaterialSymbolsRocketLaunchOutline />
+
+                    {{ $t('general.signUp') }}
                   </span>
                 </button>
+              </template>
+              <a
+                v-if="appInfo.googleAuthEnabled"
+                :href="`${appInfo.ncSiteUrl}/auth/google`"
+                class="scaling-btn bg-opacity-100 after:(!bg-white) !text-primary !no-underline"
+              >
+                <span class="flex items-center gap-2">
+                  <LogosGoogleGmail />
+
+                  {{ $t('labels.signUpWithProvider', { provider: 'Google' }) }}
+                </span>
               </a>
-            </div>
 
-            <div v-if="!appInfo.disableEmailAuth" class="flex items-center gap-2">
-              <a-switch
-                v-model:checked="subscribe"
-                size="small"
-                class="my-1 hover:(ring ring-accent ring-opacity-100) focus:(!ring !ring-accent ring-opacity-100)"
-              />
-              <div class="prose-xs text-gray-500">{{ $t('msg.subscribeToOurWeeklyNewsletter') }}</div>
-            </div>
+              <div
+                v-if="appInfo.oidcAuthEnabled"
+                class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center"
+              >
+                <a :href="`${appInfo.ncSiteUrl}/auth/oidc`" class="!text-primary !no-underline">
+                  <button type="button" class="scaling-btn bg-opacity-100">
+                    <span class="flex items-center gap-2">
+                      <MdiLogin />
+                      <template v-if="!appInfo.disableEmailAuth">
+                        {{ $t('labels.signUpWithProvider', { provider: appInfo.oidcProviderName || 'OpenID Connect' }) }}
+                      </template>
+                      <template v-else>
+                        {{ $t('general.signUp') }}
+                      </template>
+                    </span>
+                  </button>
+                </a>
+              </div>
 
-            <div class="text-end prose-sm">
-              {{ $t('msg.info.signUp.alreadyHaveAccount') }}
+              <div v-if="!appInfo.disableEmailAuth" class="flex items-center gap-2">
+                <a-switch
+                  v-model:checked="subscribe"
+                  size="small"
+                  class="my-1 hover:(ring ring-accent ring-opacity-100) focus:(!ring !ring-accent ring-opacity-100)"
+                />
+                <div class="prose-xs text-gray-500">{{ $t('msg.subscribeToOurWeeklyNewsletter') }}</div>
+              </div>
 
-              <nuxt-link @click="navigateSignIn">{{ $t('general.signIn') }}</nuxt-link>
-            </div>
-          </div>
-        </a-form>
-      </div>
+              <div class="text-end prose-sm">
+                {{ $t('msg.info.signUp.alreadyHaveAccount') }}
 
-      <div class="prose-sm mt-4 text-gray-500">
-        {{ $t('msg.bySigningUp') }}
-        <a class="prose-sm !text-gray-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb" rel="noopener">
-          {{ $t('title.termsOfService') }}</a
-        >
+                <nuxt-link @click="navigateSignIn">{{ $t('general.signIn') }}</nuxt-link>
+              </div>
+            </div>
+          </a-form>
+        </div>
+
+        <div class="prose-sm mt-4 text-gray-500">
+          {{ $t('msg.bySigningUp') }}
+          <a class="prose-sm !text-gray-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb" rel="noopener">
+            {{ $t('title.termsOfService') }}</a
+          >
+        </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">