refactor: ui corrections and lint

packages/nc-gui/components/account/setup/ConfigModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {Action} from '../../../composables/useAccountSetupStore'
+import { Action } from '../../../composables/useAccountSetupStore'
 
 const props = defineProps<{
   id: string
@@ -29,7 +29,7 @@ const pluginTypeMap = {
   Password: FormBuilderInputType.Password,
 }
 
-const {formState, validate} = useProvideFormBuilderHelper({
+const { formState, validate } = useProvideFormBuilderHelper({
   formSchema: [
     ...plugin.value.formDetails.items.map((item) => ({
       type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
@@ -67,32 +67,31 @@ const doAction = async (action: Action) => {
 </script>
 
 <template>
-  <NcModal :visible="vOpen" centered width="70rem" wrap-class-name="nc-modal-create-source"
-           @keydown.esc="vOpen = false">
+  <NcModal :visible="vOpen" centered width="70rem" wrap-class-name="nc-modal-create-source"  @keydown.esc="vOpen = false">
     <div class="flex-1 flex flex-col max-h-full min-h-400px">
       <div class="px-4 pb-4 w-full flex items-center gap-3 border-b-1 border-gray-200">
-        <GeneralIcon icon="arrowLeft" class="cursor-pointer flex-none text-[20px]" @click="vOpen = false"/>
+        <GeneralIcon icon="arrowLeft" class="cursor-pointer flex-none text-[20px]" @click="vOpen = false" />
         <div
-            v-if="plugin.logo"
-            class="mr-1 flex items-center justify-center"
-            :class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
+          v-if="plugin.logo"
+          class="mr-1 flex items-center justify-center"
+          :class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
         >
-          <img :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-3"/>
+          <img :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-3" />
         </div>
 
         <span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
-        <div class="flex-grow"/>
+        <div class="flex-grow" />
 
         <div class="flex gap-2">
           <NcButton
-              v-for="(action, i) in plugin.formDetails.actions"
-              :key="i"
-              class="!px-5"
-              :loading="loadingAction === action.key"
-              :type="action.key === Action.Save ? 'primary' : 'default'"
-              size="small"
-              :disabled="!!loadingAction"
-              @click="doAction(action.key)"
+            v-for="(action, i) in plugin.formDetails.actions"
+            :key="i"
+            class="!px-5"
+            :loading="loadingAction === action.key"
+            :type="action.key === Action.Save ? 'primary' : 'default'"
+            size="small"
+            :disabled="!!loadingAction"
+            @click="doAction(action.key)"
           >
             {{ action.label === 'Save' ? 'Save configuration' : action.label }}
           </NcButton>
@@ -100,11 +99,11 @@ const doAction = async (action: Action) => {
       </div>
       <div class="h-[calc(100%_-_58px)] flex py-4 flex-col">
         <div v-if="isLoading || !plugin" class="flex flex-row w-full justify-center items-center h-52">
-          <a-spin size="large"/>
+          <a-spin size="large" />
         </div>
 
         <div v-else class="flex">
-          <NcFormBuilder class="w-500px mx-auto"/>
+          <NcFormBuilder class="w-500px mx-auto" />
         </div>
       </div>
     </div>

packages/nc-gui/components/account/setup/ListModal.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const props = defineProps<{
   category: string
   modelValue?: boolean
@@ -43,7 +42,7 @@ const selectApp = (app: any) => {
               <GeneralIcon v-else icon="mail" />
               <span class="title">{{ app.title }}</span>
               <div class="flex-grow" />
-              <GeneralIcon icon="circleCheckSolid" v-if="app.active" class="text-primary min-w-6 h-6 bg-white-500" />
+              <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-primary min-w-6 h-6 bg-white-500" />
             </div>
           </div>
         </div>

packages/nc-gui/pages/account/index.vue

@@ -64,7 +64,7 @@ const logout = async () => {
                 key="profile"
                 class="item"
                 :class="{
-                  active: $route.path?.startsWith( '/account/setup'),
+                  active: $route.path?.startsWith('/account/setup'),
                 }"
                 @click="navigateTo('/account/setup')"
               >

packages/nc-gui/pages/account/index/setup-old/[[nestedPage]].vue

@@ -12,7 +12,7 @@ onMounted(async () => {
       <LazyAccountSetupListModal category="Storage" />
     </template>
     <template v-else-if="$route.params.nestedPage === 'email'">
-      <LazyAccountSetupListModal category="Email"  />
+      <LazyAccountSetupListModal category="Email" />
     </template>
     <template v-else>
       <LazyAccountSetup />

tests/playwright/pages/Account/Setup.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import BasePage from '../Base';
+import { AccountPage } from './index';
+
+export class AccountSettingsPage extends BasePage {
+  private accountPage: AccountPage;
+
+  constructor(accountPage: AccountPage) {
+    super(accountPage.rootPage);
+    this.accountPage = accountPage;
+  }
+
+  async goto() {
+    await this.rootPage.goto('/#/account/setup');
+    await this.rootPage.locator(`[data-test-id="nc-setup"]`).waitForElementState('visible');
+  }
+
+  get() {
+    return this.accountPage.get().locator(`[data-test-id="nc-setup"]`);
+  }
+
+  openEmailSettings() {}
+
+  async getInviteOnlyCheckboxValue() {
+    // allow time for the checkbox to be rendered
+    await this.rootPage.waitForTimeout(1000);
+
+    return this.get().locator(`.nc-invite-only-signup-checkbox`).isChecked({ timeout: 1000 });
+  }
+
+  async checkInviteOnlySignupCheckbox(value: boolean) {
+    return expect(await this.getInviteOnlyCheckboxValue()).toBe(value);
+  }
+
+  async toggleInviteOnlyCheckbox() {
+    await this.getInviteOnlyCheckbox().click();
+    await this.verifyToast({ message: 'Settings saved successfully' });
+  }
+}

tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts

@@ -0,0 +1,65 @@
+import { test } from '@playwright/test';
+import { AccountPage } from '../../../pages/Account';
+import { AccountSettingsPage } from '../../../pages/Account/Settings';
+import { SignupPage } from '../../../pages/SignupPage';
+import setup, { unsetup } from '../../../setup';
+import { getDefaultPwd } from '../../../tests/utils/general';
+
+test.describe.skip('App setup', () => {
+  // hub will not have this feature
+
+  let accountSettingsPage: AccountSettingsPage;
+  let accountPage: AccountPage;
+  // @ts-ignore
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    accountPage = new AccountPage(page);
+    accountSettingsPage = accountPage.settings;
+  });
+
+  test.afterEach(async () => {
+    await unsetup(context);
+  });
+
+  test('Toggle invite only signup', async () => {
+    test.slow();
+
+    await accountSettingsPage.goto({ networkValidation: false });
+
+    // enable invite only signup
+    if (!(await accountSettingsPage.getInviteOnlyCheckboxValue())) {
+      await accountSettingsPage.toggleInviteOnlyCheckbox();
+      await accountSettingsPage.checkInviteOnlySignupCheckbox(true);
+    }
+
+    await accountPage.signOut();
+
+    const signupPage = new SignupPage(accountPage.rootPage);
+    await signupPage.goto();
+
+    await signupPage.signUp({
+      email: 'test-user-1@nocodb.com',
+      password: getDefaultPwd(),
+      expectedError: 'Not allowed to signup, contact super admin.',
+    });
+
+    await signupPage.rootPage.reload({ waitUntil: 'load' });
+
+    await accountSettingsPage.goto({ networkValidation: false });
+
+    await accountSettingsPage.checkInviteOnlySignupCheckbox(true);
+    await accountSettingsPage.toggleInviteOnlyCheckbox();
+    await accountSettingsPage.checkInviteOnlySignupCheckbox(false);
+
+    await accountPage.signOut();
+
+    await signupPage.goto();
+
+    await signupPage.signUp({
+      email: 'test-user-1@nocodb.com',
+      password: getDefaultPwd(),
+    });
+  });
+});