Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(ui): clean up the field validation file (#3167)

Browse source
This commit is contained in:
simeng-li 2023-02-21 10:59:40 +08:00 committed by GitHub
parent 1ef5519e75
commit bbb2f85993
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/containers/SetPassword/index.tsx
View file

@ -80,7 +80,7 @@ const SetPassword = ({
required: t('error.password_required'),
minLength: {
value: 6,
message: t('error.password_min_length', { length: 6 }),
message: t('error.password_min_length', { min: 6 }),
},
})}
isSuffixFocusVisible={!!watch('newPassword')}

73
packages/ui/src/utils/field-validations.ts
View file

@ -1,73 +0,0 @@
import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/mobile';
import type { ErrorType } from '@/components/ErrorMessage';
import { parseE164Number } from '@/utils/country-code';
// TODO: clean up this file and merge to form utils
export const usernameRegex = /^[A-Z_a-z-][\w-]*$/;
export const emailRegex = /^\S+@\S+\.\S+$/;
export const requiredValidation = (
type: 'username' | 'password',
value: string
): ErrorType | undefined => {
if (!value) {
return type === 'username' ? 'username_required' : 'password_required';
}
};
export const validateUsername = (username: string): ErrorType | undefined => {
if (!username) {
return 'username_required';
}
if (/^\d/.test(username)) {
return 'username_should_not_start_with_number';
}
if (!usernameRegex.test(username)) {
return 'username_invalid_charset';
}
};
export const validateEmail = (email: string): ErrorType | undefined => {
if (!emailRegex.test(email)) {
return 'invalid_email';
}
};
export const validatePhone = (value: string): ErrorType | undefined => {
try {
const phoneNumber = parsePhoneNumberWithError(parseE164Number(value));
if (!phoneNumber.isValid()) {
return 'invalid_phone';
}
} catch (error: unknown) {
if (error instanceof ParseError) {
return 'invalid_phone';
}
throw error;
}
};
export const passwordValidation = (password: string): ErrorType | undefined => {
if (!password) {
return 'password_required';
}
if (password.length < 6) {
return { code: 'password_min_length', data: { min: 6 } };
}
};
export const confirmPasswordValidation = (
password: string,
confirmPassword: string
): ErrorType | undefined => {
if (password !== confirmPassword) {
return { code: 'passwords_do_not_match' };
}
};

79
packages/ui/src/utils/form.ts
View file

@ -1,14 +1,70 @@
import { SignInIdentifier } from '@logto/schemas';
import i18next from 'i18next';
import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/mobile';
import type { TFuncKey } from 'react-i18next';
import type { ErrorType } from '@/components/ErrorMessage';
import type { IdentifierInputType } from '@/components/InputFields/SmartInputField';
import { parsePhoneNumber } from './country-code';
import { validateUsername, validateEmail, validatePhone } from './field-validations';
import { parseE164Number, parsePhoneNumber } from '@/utils/country-code';
const { t } = i18next;
const usernameRegex = /^[A-Z_a-z-][\w-]*$/;
const emailRegex = /^\S+@\S+\.\S+$/;
export const validateUsername = (username: string): ErrorType | undefined => {
if (!username) {
return 'username_required';
}
if (/^\d/.test(username)) {
return 'username_should_not_start_with_number';
}
if (!usernameRegex.test(username)) {
return 'username_invalid_charset';
}
};
export const validateEmail = (email: string): ErrorType | undefined => {
if (!emailRegex.test(email)) {
return 'invalid_email';
}
};
export const validatePhone = (value: string): ErrorType | undefined => {
try {
const phoneNumber = parsePhoneNumberWithError(parseE164Number(value));
if (!phoneNumber.isValid()) {
return 'invalid_phone';
}
} catch (error: unknown) {
if (error instanceof ParseError) {
return 'invalid_phone';
}
throw error;
}
};
export const validateIdentifierField = (type: IdentifierInputType, value: string) => {
switch (type) {
case SignInIdentifier.Username: {
return validateUsername(value);
}
case SignInIdentifier.Email: {
return validateEmail(value);
}
case SignInIdentifier.Phone: {
return validatePhone(value);
}
default:
}
};
export const identifierInputPlaceholderMap: { [K in IdentifierInputType]: TFuncKey } = {
[SignInIdentifier.Phone]: 'input.phone_number',
[SignInIdentifier.Email]: 'input.email',
@ -36,23 +92,6 @@ export const getGeneralIdentifierErrorMessage = (
return t<'translation', TFuncKey>(code, data);
};
export const validateIdentifierField = (type: IdentifierInputType, value: string) => {
switch (type) {
case SignInIdentifier.Username: {
return validateUsername(value);
}
case SignInIdentifier.Email: {
return validateEmail(value);
}
case SignInIdentifier.Phone: {
return validatePhone(value);
}
default:
}
};
export const parseIdentifierValue = (type?: IdentifierInputType, value?: string) => {
if (type === SignInIdentifier.Phone && value) {
const validPhoneNumber = parsePhoneNumber(value);