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) => ( |
||||
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