Ott 487 registration fields (#183)
* refactor(#487): left only name, lastname, email and password fields in registration (#180) * refactor(#487): moved all User account feauter components into components folder (#182) * refactor(#487): moved back global hooks into user account feature (#181)keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
5 years ago
committed by
GitHub
parent
64966e942e
commit
b0bd43aad1
@ -0,0 +1,39 @@ |
|||||||
|
import type { FocusEvent } from 'react' |
||||||
|
import { useCallback } from 'react' |
||||||
|
|
||||||
|
import trim from 'lodash/trim' |
||||||
|
|
||||||
|
import { isValidEmail } from 'helpers/isValidEmail' |
||||||
|
|
||||||
|
import { formIds } from 'config/form' |
||||||
|
|
||||||
|
import { useForm } from 'features/FormStore' |
||||||
|
|
||||||
|
import { useSubmitHandler } from './useSubmitHandler' |
||||||
|
|
||||||
|
export const useRegistrationForm = () => { |
||||||
|
const { |
||||||
|
readFormError, |
||||||
|
readFormValue, |
||||||
|
updateFormError, |
||||||
|
updateFormValue, |
||||||
|
} = useForm() |
||||||
|
|
||||||
|
const handleSubmit = useSubmitHandler() |
||||||
|
|
||||||
|
const onEmailBlur = useCallback(({ target }: FocusEvent<HTMLInputElement>) => { |
||||||
|
const email = trim(target.value) |
||||||
|
if (email && !isValidEmail(email)) { |
||||||
|
updateFormError(formIds.email, 'error_invalid_email_format') |
||||||
|
} |
||||||
|
}, [updateFormError]) |
||||||
|
|
||||||
|
return { |
||||||
|
handleSubmit, |
||||||
|
onEmailBlur, |
||||||
|
readFormError, |
||||||
|
readFormValue, |
||||||
|
updateFormError, |
||||||
|
updateFormValue, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
import trim from 'lodash/trim' |
||||||
|
|
||||||
|
import { formIds } from 'config/form' |
||||||
|
|
||||||
|
import { isValidEmail } from 'helpers/isValidEmail' |
||||||
|
import { isValidPassword } from 'helpers/isValidPassword' |
||||||
|
|
||||||
|
import { useForm } from 'features/FormStore' |
||||||
|
|
||||||
|
export const useValidateForm = () => { |
||||||
|
const { |
||||||
|
readFormValue, |
||||||
|
updateFormError, |
||||||
|
} = useForm() |
||||||
|
|
||||||
|
const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName)) |
||||||
|
|
||||||
|
const validateForm = () => { |
||||||
|
let hasError = false |
||||||
|
const firstname = readTrimmedValue(formIds.firstname) |
||||||
|
const lastname = readTrimmedValue(formIds.lastname) |
||||||
|
const email = readTrimmedValue(formIds.email) |
||||||
|
const password = readTrimmedValue(formIds.password) |
||||||
|
if (!firstname) { |
||||||
|
updateFormError(formIds.firstname, 'error_fill_out_this_field') |
||||||
|
hasError = true |
||||||
|
} |
||||||
|
if (!lastname) { |
||||||
|
updateFormError(formIds.lastname, 'error_fill_out_this_field') |
||||||
|
hasError = true |
||||||
|
} |
||||||
|
if (!email) { |
||||||
|
updateFormError(formIds.email, 'error_empty_email') |
||||||
|
hasError = true |
||||||
|
} else if (!isValidEmail(email)) { |
||||||
|
updateFormError(formIds.email, 'error_invalid_email_format') |
||||||
|
hasError = true |
||||||
|
} |
||||||
|
if (!password) { |
||||||
|
updateFormError(formIds.password, 'error_empty_password') |
||||||
|
hasError = true |
||||||
|
} else if (!isValidPassword(password)) { |
||||||
|
updateFormError(formIds.password, 'error_simple_password') |
||||||
|
hasError = true |
||||||
|
} |
||||||
|
return !hasError |
||||||
|
} |
||||||
|
|
||||||
|
return validateForm |
||||||
|
} |
||||||
@ -1,13 +1,6 @@ |
|||||||
export const passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,500}$' |
import trim from 'lodash/trim' |
||||||
|
import isEmpty from 'lodash/isEmpty' |
||||||
|
|
||||||
const passwordRegExp = new RegExp(passwordRegex) |
|
||||||
|
|
||||||
/** |
|
||||||
* At least one upper case English letter, (?=.*?[A-Z]) |
|
||||||
* At least one lower case English letter, (?=.*?[a-z]) |
|
||||||
* At least one digit, (?=.*?[0-9]) |
|
||||||
* Minimum eight in length .{8,} (with the anchors) |
|
||||||
*/ |
|
||||||
export const isValidPassword = (password: string) => ( |
export const isValidPassword = (password: string) => ( |
||||||
passwordRegExp.test(password) |
!isEmpty(trim(password)) |
||||||
) |
) |
||||||
|
|||||||
@ -1,69 +0,0 @@ |
|||||||
import trim from 'lodash/trim' |
|
||||||
import reduce from 'lodash/reduce' |
|
||||||
|
|
||||||
import { useForm } from 'features/FormStore' |
|
||||||
import { isValidEmail } from 'helpers/isValidEmail' |
|
||||||
import { isValidPassword } from 'helpers/isValidPassword' |
|
||||||
import { isValidPhone } from 'helpers/isValidPhone' |
|
||||||
|
|
||||||
import { |
|
||||||
formIds, |
|
||||||
requiredFields, |
|
||||||
simpleValidationFields, |
|
||||||
} from 'config/form' |
|
||||||
|
|
||||||
export const useValidateForm = () => { |
|
||||||
const { |
|
||||||
allFieldsEmpty, |
|
||||||
isFieldEmpty, |
|
||||||
readFormValue, |
|
||||||
updateFormError, |
|
||||||
} = useForm() |
|
||||||
|
|
||||||
const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName)) |
|
||||||
|
|
||||||
const setErrorOnEmptyFields = (fieldNames: Array<string>, message: string) => ( |
|
||||||
reduce( |
|
||||||
fieldNames, |
|
||||||
(acc, fieldName) => { |
|
||||||
if (isFieldEmpty(fieldName)) { |
|
||||||
updateFormError(fieldName, message) |
|
||||||
return true |
|
||||||
} |
|
||||||
return acc |
|
||||||
}, |
|
||||||
false, |
|
||||||
) |
|
||||||
) |
|
||||||
|
|
||||||
const validateForm = () => { |
|
||||||
let hasError = false |
|
||||||
const email = readTrimmedValue(formIds.email) |
|
||||||
const password = readTrimmedValue(formIds.password) |
|
||||||
const phone = readTrimmedValue(formIds.phone) |
|
||||||
if (allFieldsEmpty(requiredFields)) { |
|
||||||
updateFormError(formIds.formError, 'error_fill_out_required_fields') |
|
||||||
setErrorOnEmptyFields(requiredFields, '') |
|
||||||
return false |
|
||||||
} |
|
||||||
hasError = setErrorOnEmptyFields(simpleValidationFields, 'error_fill_out_this_field') |
|
||||||
if (isFieldEmpty(formIds.email)) { |
|
||||||
updateFormError(formIds.email, 'error_empty_email') |
|
||||||
hasError = true |
|
||||||
} else if (!isValidEmail(email)) { |
|
||||||
updateFormError(formIds.email, 'error_invalid_email_format') |
|
||||||
hasError = true |
|
||||||
} |
|
||||||
if (!isValidPassword(password)) { |
|
||||||
updateFormError(formIds.password, 'error_simple_password') |
|
||||||
hasError = true |
|
||||||
} |
|
||||||
if (!isValidPhone(phone)) { |
|
||||||
updateFormError(formIds.phone, 'error_invalid_phone_format') |
|
||||||
hasError = true |
|
||||||
} |
|
||||||
return !hasError |
|
||||||
} |
|
||||||
|
|
||||||
return validateForm |
|
||||||
} |
|
||||||
Loading…
Reference in new issue