From 67d531ff407937de76aca4ddd915bf37a93cae16 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Tue, 7 Mar 2023 15:54:55 +0400 Subject: [PATCH 1/7] fix: :sparkles: allows users to enter accented name characters --- packages/account/src/Configs/personal-details-config.js | 4 ++-- packages/core/src/Constants/form-error-messages.js | 1 + .../src/utils/validation/declarative-validation-rules.ts | 5 +++++ .../shared/src/utils/validation/form-error-messages-types.ts | 1 + 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js index 39b865d41e0d..a17978b22997 100644 --- a/packages/account/src/Configs/personal-details-config.js +++ b/packages/account/src/Configs/personal-details-config.js @@ -29,7 +29,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore rules: [ ['req', localize('First name is required.')], ['length', localize('First name should be between 2 and 50 characters.'), { min: 2, max: 50 }], - ['letter_symbol', getErrorMessages().letter_symbol()], + ['name', getErrorMessages().name()], ], }, last_name: { @@ -38,7 +38,7 @@ const personal_details_config = ({ residence_list, account_settings, is_appstore rules: [ ['req', localize('Last name is required.')], ['length', localize('Last name should be between 2 and 50 characters.'), { min: 2, max: 50 }], - ['letter_symbol', getErrorMessages().letter_symbol()], + ['name', getErrorMessages().name()], ], }, date_of_birth: { diff --git a/packages/core/src/Constants/form-error-messages.js b/packages/core/src/Constants/form-error-messages.js index a0ca7bbbf6da..2810584a76e4 100644 --- a/packages/core/src/Constants/form-error-messages.js +++ b/packages/core/src/Constants/form-error-messages.js @@ -12,6 +12,7 @@ export const FORM_ERROR_MESSAGES = { email: () => localize('Invalid email address.'), general: () => localize('Only letters, numbers, space, hyphen, period, and apostrophe are allowed.'), letter_symbol: () => localize('Letters, spaces, periods, hyphens, apostrophes only'), + name: () => localize('Letters, spaces, periods, hyphens, apostrophes only.'), password: () => localize('Password should have lower and uppercase English letters with numbers.'), po_box: () => localize('P.O. Box is not accepted in address'), phone: () => localize('Please enter a valid phone number (e.g. +15417541234).'), diff --git a/packages/shared/src/utils/validation/declarative-validation-rules.ts b/packages/shared/src/utils/validation/declarative-validation-rules.ts index d4ef06025b63..fbfe649846d8 100644 --- a/packages/shared/src/utils/validation/declarative-validation-rules.ts +++ b/packages/shared/src/utils/validation/declarative-validation-rules.ts @@ -24,6 +24,7 @@ export const validPostCode = (value: string) => value === '' || /^[A-Za-z0-9][A- export const validTaxID = (value: string) => /(?!^$|\s+)[A-Za-z0-9./\s-]$/.test(value); export const validPhone = (value: string) => /^\+?([0-9-]+\s)*[0-9-]+$/.test(value); export const validLetterSymbol = (value: string) => /^[A-Za-z]+([a-zA-Z.' -])*[a-zA-Z.' -]+$/.test(value); +export const validName = (value: string) => /^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u.test(value); export const validLength = (value = '', options: TOptions) => (options.min ? value.length >= options.min : true) && (options.max ? value.length <= options.max : true); export const validPassword = (value: string) => /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+/.test(value); @@ -112,6 +113,10 @@ const initPreBuildDVRs = () => ({ func: validLetterSymbol, message: form_error_messages.letter_symbol, }, + name: { + func: validName, + message: form_error_messages.name, + }, number: { func: (...args: [string, TOptions, Record]) => { const [value, opts] = args; diff --git a/packages/shared/src/utils/validation/form-error-messages-types.ts b/packages/shared/src/utils/validation/form-error-messages-types.ts index bc2099a1738a..4f1fdd002625 100644 --- a/packages/shared/src/utils/validation/form-error-messages-types.ts +++ b/packages/shared/src/utils/validation/form-error-messages-types.ts @@ -7,6 +7,7 @@ export type TFormErrorMessagesTypes = Record< | 'email' | 'general' | 'letter_symbol' + | 'name' | 'password' | 'po_box' | 'phone' From 4bbe640c1d5c7c9ddbfae96eda011533dff3fc01 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 8 Mar 2023 11:23:09 +0400 Subject: [PATCH 2/7] chore: :wastebasket: removes unused 'letter_symbol' variable --- packages/core/src/Constants/form-error-messages.js | 1 - .../src/utils/validation/declarative-validation-rules.ts | 4 ---- .../shared/src/utils/validation/form-error-messages-types.ts | 1 - 3 files changed, 6 deletions(-) diff --git a/packages/core/src/Constants/form-error-messages.js b/packages/core/src/Constants/form-error-messages.js index 2810584a76e4..b69d902b55ad 100644 --- a/packages/core/src/Constants/form-error-messages.js +++ b/packages/core/src/Constants/form-error-messages.js @@ -11,7 +11,6 @@ export const FORM_ERROR_MESSAGES = { }), email: () => localize('Invalid email address.'), general: () => localize('Only letters, numbers, space, hyphen, period, and apostrophe are allowed.'), - letter_symbol: () => localize('Letters, spaces, periods, hyphens, apostrophes only'), name: () => localize('Letters, spaces, periods, hyphens, apostrophes only.'), password: () => localize('Password should have lower and uppercase English letters with numbers.'), po_box: () => localize('P.O. Box is not accepted in address'), diff --git a/packages/shared/src/utils/validation/declarative-validation-rules.ts b/packages/shared/src/utils/validation/declarative-validation-rules.ts index fbfe649846d8..313d72c320fa 100644 --- a/packages/shared/src/utils/validation/declarative-validation-rules.ts +++ b/packages/shared/src/utils/validation/declarative-validation-rules.ts @@ -109,10 +109,6 @@ const initPreBuildDVRs = () => ({ message: form_error_messages.general, }, length: { func: validLength, message: '' }, // Message will be set in validLength function on initiation - letter_symbol: { - func: validLetterSymbol, - message: form_error_messages.letter_symbol, - }, name: { func: validName, message: form_error_messages.name, diff --git a/packages/shared/src/utils/validation/form-error-messages-types.ts b/packages/shared/src/utils/validation/form-error-messages-types.ts index 4f1fdd002625..4496c0ae7225 100644 --- a/packages/shared/src/utils/validation/form-error-messages-types.ts +++ b/packages/shared/src/utils/validation/form-error-messages-types.ts @@ -6,7 +6,6 @@ export type TFormErrorMessagesTypes = Record< | 'barrier' | 'email' | 'general' - | 'letter_symbol' | 'name' | 'password' | 'po_box' From 94c7ea80c2f0ba5fa059fffd346f7393c450b680 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 8 Mar 2023 17:28:37 +0400 Subject: [PATCH 3/7] fix: :bug: allows accented characters in name for existing users --- .../PersonalDetails/personal-details.jsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index b05cb7ce571b..99bbac508b86 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -312,8 +312,6 @@ export const PersonalDetailsForm = ({ } validateValues(val => val, required_fields, localize('This field is required')); - const only_alphabet_fields = ['first_name', 'last_name']; - validateValues(validLetterSymbol, only_alphabet_fields, localize('Only alphabet is allowed')); const residence_fields = ['citizen']; const validateResidence = val => getLocation(residence_list, val, 'value'); @@ -349,12 +347,17 @@ export const PersonalDetailsForm = ({ const min_name = 2; const max_name = 50; - if (values.first_name && !validLength(values.first_name.trim(), { min: min_name, max: max_name })) { - errors.first_name = localize('You should enter 2-50 characters.'); - } - if (values.last_name && !validLength(values.last_name.trim(), { min: min_name, max: max_name })) { - errors.last_name = localize('You should enter 2-50 characters.'); - } + const validateName = (name, field) => { + if (name) { + if (!validLength(name.trim(), { min: min_name, max: max_name })) { + errors[field] = localize('You should enter 2-50 characters.'); + } else if (!/^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u.test(name)) { + errors[field] = localize('Letters, spaces, periods, hyphens, apostrophes only.'); + } + } + }; + validateName(values.first_name, 'first_name'); + validateName(values.last_name, 'last_name'); if (values.phone) { // minimum characters required is 9 numbers (excluding +- signs or space) From fd27880ca1c4174e905071cba24037e43c6a57d4 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Wed, 15 Mar 2023 13:16:36 +0400 Subject: [PATCH 4/7] docs: :pencil2: comment on the regex used for name validation --- .../src/Sections/Profile/PersonalDetails/personal-details.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index 99bbac508b86..3265ff3a2ed7 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -352,6 +352,8 @@ export const PersonalDetailsForm = ({ if (!validLength(name.trim(), { min: min_name, max: max_name })) { errors[field] = localize('You should enter 2-50 characters.'); } else if (!/^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u.test(name)) { + // the exact regex used at the backend for allowing non digit characters including accented unicode characters. + // two or more space between name not allowed. errors[field] = localize('Letters, spaces, periods, hyphens, apostrophes only.'); } } From 20e0d2a00b5442243dedc20a0499ad333e62daef Mon Sep 17 00:00:00 2001 From: Shaheer <122449658+shaheer-deriv@users.noreply.github.com> Date: Thu, 16 Mar 2023 11:01:43 +0400 Subject: [PATCH 5/7] resused regex function Co-authored-by: Yashim Wong --- .../src/Sections/Profile/PersonalDetails/personal-details.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index 3265ff3a2ed7..fb9dccaef67a 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -351,7 +351,7 @@ export const PersonalDetailsForm = ({ if (name) { if (!validLength(name.trim(), { min: min_name, max: max_name })) { errors[field] = localize('You should enter 2-50 characters.'); - } else if (!/^(?!.*\s{2,})[\p{L}\s'.-]{2,50}$/u.test(name)) { + } else if (!validName(name)) { // the exact regex used at the backend for allowing non digit characters including accented unicode characters. // two or more space between name not allowed. errors[field] = localize('Letters, spaces, periods, hyphens, apostrophes only.'); From c5afae2aed7b2aa8a1cb85da83fab697ac2aa152 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 16 Mar 2023 11:15:06 +0400 Subject: [PATCH 6/7] fix: :memo: imported reused regex function --- .../src/Sections/Profile/PersonalDetails/personal-details.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index fb9dccaef67a..a273d2730737 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -34,6 +34,7 @@ import { routes, WS, useIsMounted, + validName, } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { withRouter } from 'react-router'; From b2d392cbd05ae19def5c53c62749397eeaf8a201 Mon Sep 17 00:00:00 2001 From: Shaheer Date: Thu, 16 Mar 2023 11:22:40 +0400 Subject: [PATCH 7/7] fix: :memo: comment on regex function used --- .../src/Sections/Profile/PersonalDetails/personal-details.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx index a273d2730737..3afc81caeb0b 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx +++ b/packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx @@ -353,7 +353,7 @@ export const PersonalDetailsForm = ({ if (!validLength(name.trim(), { min: min_name, max: max_name })) { errors[field] = localize('You should enter 2-50 characters.'); } else if (!validName(name)) { - // the exact regex used at the backend for allowing non digit characters including accented unicode characters. + // validName() has the exact regex used at the backend for allowing non digit characters including accented unicode characters. // two or more space between name not allowed. errors[field] = localize('Letters, spaces, periods, hyphens, apostrophes only.'); }