search

SHIV5T3R / CO-DE

An Open Source Collaborative Code Editor
36 stars 26 forks source link

Initial UI for SignUp and SignIn #32

Closed hobi9 closed 11 months ago

hobi9 commented 11 months ago

I added an initial implementation for the SignUp and SignIn components. At the moment they are not connected to the backend so there's no navigation in case of a successful login/registration. Also there is no username validation (green outline in case the username is valid/unique) and eventual server errors.

KingXP-Pythoner commented 11 months ago

Your PR doesn't utilize the shadcn Input component which contains the styling. An overflow scrollbar on the x axis pops up on validation error.

hobi9 commented 11 months ago

Your PR doesn't utilize the shadcn Input component which contains the styling. An overflow scrollbar on the x axis pops up on validation error.

i fixed the overflow and imported the input component. Also added zod

KingXP-Pythoner commented 11 months ago

Need to remove '^' from package.json after installing packages. Also, there is an update needed which is Full Name field. This is coming from backend and wasnt updated in the figma design yet.

MrBisquit commented 11 months ago

I hate miss clicking, just started a review rather than making a comment.

hobi9 commented 11 months ago

Need to remove '^' from package.json after installing packages. Also, there is an update needed which is Full Name field. This is coming from backend and wasnt updated in the figma design yet.

Thanks for the reply. I'll remove the carrot and open a new pr once I see the updated figma file.

KingXP-Pythoner commented 11 months ago

can you make it so that when the input error ring is activated, it actually changes to the success color when the user types and meets the requirement. Because if it's still red while they're typing, there's no feedback that it's correct and can start wondering why it's still not correct. There should be aria-invalid attribute added as well to help with accessibility reasons

hobi9 commented 11 months ago

can you make it so that when the input error ring is activated, it actually changes to the success color when the user types and meets the requirement. Because if it's still red while they're typing, there's no feedback that it's correct and can start wondering why it's still not correct. There should be aria-invalid attribute added as well to help with accessibility reasons

Done. I fixed it by adding react form which made it easier since the form became bigger. Also added those accessibility attributes.

SHIV5T3R commented 11 months ago

Please fix conflicts, yarn.lock has already been removed in upstream.