search

EQWorks / lumen-labs

React library of basic components based on Tailwind CSS
https://eqworks.github.io/lumen-labs
5 stars 2 forks source link

[G2M] Modules/login #120

Closed hyx131 closed 2 years ago

hyx131 commented 2 years ago

Changes:

Screenshots: Screen Shot 2022-03-28 at 12 11 43 PM Screen Shot 2022-03-28 at 12 11 25 PM

github-actions[bot] commented 2 years ago

📚 Storybook preview (updated to df47c9bb79ec0037b7dae5f43eb592d592c7f725)

sallkall commented 2 years ago

@hyx131 for the input check, it should have 2 error stages:

  1. "Required" (empty field error)

    image

  2. "Invalid" (incorrect formating error)

    image

^Using some other website's UI as examples

hyx131 commented 2 years ago

@sallkall they are there, one is set by Login (empty email error), the other comes default from our Textfield component (incorrect email format)

Screen Shot 2022-03-28 at 12 51 58 PM Screen Shot 2022-03-28 at 12 52 05 PM
sallkall commented 2 years ago

@sallkall they are there, one is set by Login (empty email error), the other comes default from our Textfield component (incorrect email format)

Screen Shot 2022-03-28 at 12 51 58 PM Screen Shot 2022-03-28 at 12 52 05 PM

Ohhh weird, I didn't see this when I tried. That's great thanks for adding it in 🤩

sallkall commented 2 years ago

Oh i see, this tooltip warning only appears on enter - should we just have it always until we detect the correct syntax?

https://user-images.githubusercontent.com/33563070/160448927-97db6ea9-8244-4950-9fba-40b6747057d0.mov

^like how it only goes back to normal state when they detect @ and a . after?

sallkall commented 2 years ago

@vlatawiec ^ what do you think? Did you have anything in mind for this input feedback part? 😄

hyx131 commented 2 years ago

Oh i see, this tooltip warning only appears on enter - should we just have it always until we detect the correct syntax?

Screen.Recording.2022-03-28.at.12.48.33.PM.mov ^like how it only goes back to normal state when they detect @ and a . after?

yup, we can do that too would it make ppl feel bad to show error as soon as they type tho? (if so maybe check only on submit is better)

sallkall commented 2 years ago

Oh i see, this tooltip warning only appears on enter - should we just have it always until we detect the correct syntax?

Screen.Recording.2022-03-28.at.12.48.33.PM.mov ^like how it only goes back to normal state when they detect @ and a . after?

I don't think it'll make them feel 'bad' cuz we're just trying to give them feedback and guide them to make a correct input. On enter is also fine but then they have to 'enter' (extra step) to get feedback. I'm good with either will wait for @vlatawiec 's input as she may have thought more about this than me :D

hyx131 commented 2 years ago

Looks great! For the error input field, I think it would be ideal to have the message appear immediately when typed, not on enter, so that users know there is an issue ASAP ( like Sally said, it's just one less step) but either method works and this is not a major concern as long as they get feedback on the input eventually

I notice a couple of issues with the text copy, but those should be easy to fix!

The copy text on the "Authentication" page has been changed to include the term "one-time-passcode", there should be an updated version in the COX Dashboard Figma. (let me know if you have any issues finding it)

Also, the login page has a typo (Login in), but otherwise everything looks great! Please let me know if you have any questions

LOL oh gawd that login typo 🤦‍♀️ , gonna fix