feature: adding email validation on login

[harshdasila]

During login even if i enter a invalid email address it still processes the request. The same issue is with the 100xdevs website too on email and mobile number for otp we can add frontend validations for those feilds. For this we can use react hook forms or just using some variable.

[devsargam]

It also works with phone number. so, email only validation doesn't sounds too good.

It might be rare but there are people who login with their phone number

[harshdasila]

For number also although it check for the type number but we can enter more than 10 digits and it still sends out the request.

[iam-joey]

then a frontend validation would be fine for phone number then

[SujithThirumalaisamy]

I have came up with the solution for this issue.

Solution:

1. Created a validation function that validates if a input is valid email or a valid phone number.

  function isValidEmailOrPhone(value: string) {
    const phRegEx = new RegExp(
      '^(\\+\\d{1,2}\\s?)?\\(?\\d{3}\\)?[-.\\s]?\\d{3}[-.\\s]?\\d{4}$',
    );
    const emRegEx = new RegExp(
      '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$',
    );
    setEmailValidationError(!phRegEx.test(value) && !emRegEx.test(value));
  }

2. Added 500ms debounce to the function using the lodash.debounce

  const debouncedEmailOrPhoneValidation = React.useCallback(debounce(isValidEmailOrPhone, 500),[]);

3. Implemented the function in the onchange of the email input

onChange={(e) => {
                  setRequiredError((prevState) => ({
                    ...prevState,
                    emailReq: false,
                  }));
                  debouncedEmailOrPhoneValidation(e.target.value);
                  email.current = e.target.value;
                }}

Expected outcome of the RegEx used

1. For Phone Numbers

+XX (XXX) XXX-XXXX
+XX XXX-XXX-XXXX
(XXX) XXX-XXXX
XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX

2. For Email

[email protected]
[email protected]
[email protected]
user%[email protected]
[email protected]

Please update me if you have any suggession for this solution.

https://github.com/code100x/cms/assets/108384868/72c05da6-3f09-45a5-93f7-50e812491cff

[hkirat]

We have some users that dont follow any format so wil have to skip this one altho its a good one

[Pratish10]

Hi @hkirat I have made the changes for this enhancement

1. Added react-hook-form in login component
2. Added email validation regex that is /^[^\s@]+@[^\s@]+.[^\s@]+$/
3. Marked Email and Password as required field

The demo video has been attached for your reference

Thanks login.webm

Shall I push the changes ?

[SujithThirumalaisamy]

Hi @hkirat I have made the changes for this enhancement

1. Added react-hook-form in login component
2. Added email validation regex that is /^[^\s@]+@[^\s@]+.[^\s@]+$/
3. Marked Email and Password as required field

The demo video has been attached for your reference

Thanks login.webm

Shall I push the changes ?

Yooo... Watch his reply.

[Pratish10]

We Can also disable the login button until both email and password fields are valid. In this way we can avoid un necessary api call for invalid credentials. Forcing user to put valid credentials then only login

[devsargam]

@Pratish10 read the thread again!!! It's not as simple as adding validation for email.

[dishak]

@SujithThirumalaisamy , Would like to know if gmail signin/signup would be a good enhancement ?

[SujithThirumalaisamy]

@SujithThirumalaisamy , Would like to know if gmail signin/signup would be a good enhancement ?

It might be. IMO.