From bc8db8e619e234a43c6c7c49071e444a323aeec0 Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Mon, 20 Mar 2023 18:19:58 +0800 Subject: [PATCH 01/59] enhancement(nc-gui): make email input full width --- packages/nc-gui/components/cell/Email.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue index de25a13451..f0cbf7553b 100644 --- a/packages/nc-gui/components/cell/Email.vue +++ b/packages/nc-gui/components/cell/Email.vue @@ -30,7 +30,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() v-if="editEnabled" :ref="focus" v-model="vModel" - class="outline-none text-sm px-2" + class="w-full outline-none text-sm px-2" @blur="editEnabled = false" @keydown.down.stop @keydown.left.stop From 10ef74af65d58042dbf5d507d4404dd412459b3c Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Mon, 20 Mar 2023 18:49:55 +0800 Subject: [PATCH 02/59] enhancement(nc-gui): email validation in form view --- .../nc-gui/components/smartsheet/Form.vue | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue index 0171c83a76..6edfc320d4 100644 --- a/packages/nc-gui/components/smartsheet/Form.vue +++ b/packages/nc-gui/components/smartsheet/Form.vue @@ -23,6 +23,7 @@ import { useUIPermission, useViewColumns, useViewData, + validateEmail, watch, } from '#imports' import type { Permission } from '~/lib' @@ -101,6 +102,25 @@ const { t } = useI18n() const { betaFeatureToggleState } = useBetaFeatureToggle() +const formRules = { + email: [ + { + validator: (rule: any, value: string, callback: (errMsg?: string) => void) => { + if (!value || value.length === 0) { + callback('Email is required') + return + } + const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e)) + if (invalidEmails.length > 0) { + callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `) + } else { + callback() + } + }, + }, + ], +} + const updateView = useDebounceFn( () => { if ((formViewData.value?.subheading?.length || 0) > 255) { @@ -719,6 +739,7 @@ watch(view, (nextView) => { required: isRequired(element, element.required), message: `${element.label || element.title} is required`, }, + ...(element.uidt === UITypes.Email && formRules.email), ]" > Date: Mon, 20 Mar 2023 19:00:38 +0800 Subject: [PATCH 03/59] feat(nc-gui): add emailValidator --- packages/nc-gui/utils/validation.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/nc-gui/utils/validation.ts b/packages/nc-gui/utils/validation.ts index fb1c50ea41..6b13e62fd1 100644 --- a/packages/nc-gui/utils/validation.ts +++ b/packages/nc-gui/utils/validation.ts @@ -173,3 +173,20 @@ export const extraParameterValidator = { }) }, } + +export const emailValidator = { + validator: (_: unknown, value: string) => { + return new Promise((resolve, reject) => { + if (!value || value.length === 0) { + return reject(new Error('Email is required')) + } + const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e)) + if (invalidEmails.length > 0) { + return reject( + new Error(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `), + ) + } + return resolve(true) + }) + }, +} From 72ac86e7d8f57043117017b818aa95a113ee404a Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Mon, 20 Mar 2023 19:11:00 +0800 Subject: [PATCH 04/59] refactor(nc-gui): use emailValidator --- .../nc-gui/components/account/UsersModal.vue | 20 +++---------------- .../nc-gui/components/smartsheet/Form.vue | 19 ++---------------- .../tabs/auth/user-management/UsersModal.vue | 20 +++---------------- 3 files changed, 8 insertions(+), 51 deletions(-) diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue index ac5a7f65da..e8f56d437e 100644 --- a/packages/nc-gui/components/account/UsersModal.vue +++ b/packages/nc-gui/components/account/UsersModal.vue @@ -4,6 +4,7 @@ import type { OrgUserReqType } from 'nocodb-sdk' import { Form, computed, + emailValidator, extractSdkResponseErrorMsg, message, ref, @@ -11,7 +12,6 @@ import { useDashboard, useI18n, useNuxtApp, - validateEmail, } from '#imports' import type { User } from '~/lib' import { Role } from '~/lib' @@ -44,24 +44,10 @@ const usersData = $ref({ emails: '', role: Role.OrgLevelViewer, invitatio const formRef = ref() const useForm = Form.useForm + const validators = computed(() => { return { - emails: [ - { - validator: (rule: any, value: string, callback: (errMsg?: string) => void) => { - if (!value || value.length === 0) { - callback('Email is required') - return - } - const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e)) - if (invalidEmails.length > 0) { - callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `) - } else { - callback() - } - }, - }, - ], + emails: [emailValidator], } }) diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue index 6edfc320d4..35f17c863b 100644 --- a/packages/nc-gui/components/smartsheet/Form.vue +++ b/packages/nc-gui/components/smartsheet/Form.vue @@ -9,6 +9,7 @@ import { ReloadViewDataHookInj, computed, createEventHook, + emailValidator, extractSdkResponseErrorMsg, inject, message, @@ -23,7 +24,6 @@ import { useUIPermission, useViewColumns, useViewData, - validateEmail, watch, } from '#imports' import type { Permission } from '~/lib' @@ -103,22 +103,7 @@ const { t } = useI18n() const { betaFeatureToggleState } = useBetaFeatureToggle() const formRules = { - email: [ - { - validator: (rule: any, value: string, callback: (errMsg?: string) => void) => { - if (!value || value.length === 0) { - callback('Email is required') - return - } - const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e)) - if (invalidEmails.length > 0) { - callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `) - } else { - callback() - } - }, - }, - ], + email: [emailValidator], } const updateView = useDebounceFn( diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue index 400a0058c2..18f6c0fbf4 100644 --- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue +++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue @@ -4,6 +4,7 @@ import type { ProjectUserReqType } from 'nocodb-sdk' import { Form, computed, + emailValidator, extractSdkResponseErrorMsg, message, onMounted, @@ -17,7 +18,6 @@ import { useI18n, useNuxtApp, useProject, - validateEmail, } from '#imports' import type { User } from '~/lib' import { ProjectRole } from '~/lib' @@ -54,24 +54,10 @@ let usersData = $ref({ emails: undefined, role: ProjectRole.Viewer, invit const formRef = ref() const useForm = Form.useForm + const validators = computed(() => { return { - emails: [ - { - validator: (rule: any, value: string, callback: (errMsg?: string) => void) => { - if (!value || value.length === 0) { - callback('Email is required') - return - } - const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e)) - if (invalidEmails.length > 0) { - callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `) - } else { - callback() - } - }, - }, - ], + emails: [emailValidator], } }) From 51fb8d19d640b164ced5d435fe608eb980b1fc3a Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Mon, 20 Mar 2023 19:34:56 +0800 Subject: [PATCH 05/59] feat(nc-gui): add error.invalidEmail --- packages/nc-gui/lang/en.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json index c309782e21..e812074a03 100644 --- a/packages/nc-gui/lang/en.json +++ b/packages/nc-gui/lang/en.json @@ -698,6 +698,7 @@ "allowedSpecialCharList": "Allowed special character list" }, "invalidURL": "Invalid URL", + "invalidEmail": "Invalid Email", "internalError": "Some internal error occurred", "templateGeneratorNotFound": "Template Generator cannot be found!", "fileUploadFailed": "Failed to upload file", From 3ef96ea8c04426c1341c7e1dad860866dad2fc61 Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Mon, 20 Mar 2023 19:39:09 +0800 Subject: [PATCH 06/59] fix(nc-gui): avoid sending request with invalid email --- packages/nc-gui/components/cell/Email.vue | 39 ++++++++++++++++++----- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue index f0cbf7553b..c26e981813 100644 --- a/packages/nc-gui/components/cell/Email.vue +++ b/packages/nc-gui/components/cell/Email.vue @@ -1,28 +1,51 @@