feat: Added field validation for Email on sign in and sign up

[sohamdata]

🛠️ Fixes Issue

Closes #252
Fixes the closed PR #265

➕ Changes Introduced

Added field validation for email on both signin and signup pages.
The field box ring and text is highlighted in tailwind color pink-600. "Please provide a valid email address" is displayed under it.

📷 Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
defaang	✅ Ready (Inspect)	Visit Preview	Oct 11, 2022 at 1:44PM (UTC)

[ykdojo]

Thank you.

It's better than before, but I feel like it's still a bit annoying when the error message show up after a single character:

Can we show this message on pressing tab or going to the next field instead?

[ykdojo]

.

[sohamdata]

yeah, that can be changed, i can just set x in email.length > x to the desired min length. (It is 0 right now.)

[ykdojo]

@sohamdata can we show it at tab pressing or when switching to a new field instead?

[sohamdata]

@ykdojo I'll try, thanks for the feedback!

[sohamdata]

@ykdojo it's fixed now.

[ykdojo]

Thank you. That's much better, but I think there are a few small issues.

First of all, even when there's no error message, there's a space for it, and that breaks the format a little.

Secondly, it thinks "yk@example" is a valid email address when it shoudln't.

[sohamdata]

I'll see what I can do, was thinking the same thing as well...

[sohamdata]

hi, I don't think coding for "when there's no error message, there's a space for it" would just make the code more complicated, which isn't needed. It's better if we just highlight the textbox and its text if it's invalid.

[ykdojo]

I just don't think having the whitespace there makes the UI look better in any way - it just makes it slightly worse.

I think it's okay if the code becomes slightly complicated.

[Princeton21]

@sohamdata Kindly acknowledge if you have finished working on the whitespace bug.

[sohamdata]

Sorry for replying late. The problem is:
Instead of rendering classes conditionally, we can render the whole <p>error message</p> conditionally instead.
But I don't know how to do that and/or integrate it with tailwindcss.

[subhoghoshX]

Sorry for replying late. The problem is: Instead of rendering classes conditionally, we can render the whole <p>error message</p> conditionally instead. But I don't know how to do that and/or integrate it with tailwindcss.

Just do { email.length && showEmailError && <p className="...">...</p> or something like that, i.e. pull the condition out of the template string.

Or you can reduce the error font size and also the margin so that the space isn't much noticeable. Something like this:

form-error.mp4

[sohamdata]

@subhoghoshX thanks, I tried it, however, but after exiting email field, the space is left over.
i added:

{email.length && showEmailError ? 
    (<p className=
    {`invisible mt-2 text-sm text-pink-600 ${email.length > 0 && showEmailError ? 'peer-invalid:visible' : null`}
    >
    Please provide a valid email address. </p>) : null}

behavior:

[subhoghoshX]

@sohamdata In that case just revert back to the previous state, as it was. Replace the invisible class with hidden and replace the pr-invalid:visible class with peer-invalid:block. I should work. Let me know how it goes.

[sohamdata]

@subhoghoshX that worked! thanks a lot!
Can you please tell me why it was that way earlier?

[subhoghoshX]

@subhoghoshX that worked! thanks a lot! Can you please tell me why it was that way earlier?

invisible means the element stays there, it's just invisible, so you see a white space in its place. hidden class applies the display: none CSS rule, which removes the element from the document flow.

[sohamdata]

invisible means the element stays there, it's just invisible, so you see a white space in its place. hidden class applies the display: none CSS rule, which removes the element from the document flow.

Got it. I actually tried putting display: none in class earlier, but that resulted in strange behavior.

[sohamdata]

@ykdojo the problem is fixed, kindly see the changes and let me know.

[adilwahla]

looks okay