Feat/signup login pages

[nkabembo]

🎯Type of Change :

• Feat ✨: Login validation and Sign up validation

This PR...

This PR implements user validation for login and signup processes

---

📝 What I Did (Detailed Work):

List the main actions and changes made in bullet form. Focus on what was implemented.

• Created Base Input that houses basic input features like styling and accessibility( such as aria invalid, aria describedby)
• Created Wrapper inputs: Password and EmailInput that inherits base input
• Implement input specific validation for each input component
• Implemented password toggling
• Added color to index.csss
• Implement ui , added styling and responsiveness , form validation as well as form submission

---

🧪 How to Test (Steps to Verify):

Provide clear, numbered steps for reviewers to manually test and verify your changes.

1. Open the Netlify preview for this PR or git checkout feat/signup-login-pages
2. Navigate to Login and Signup pages and test that the validation works as intended, given message and color feedback

---

🤔 What I learned (gotchas):

I ran into interesting issue: when adding validation as I went on and tested it I had to modify the code many times because I was not passing the prop in the right place in some cases I needed to pass the prop from form other times from the wrapper .i.e Password input or Email input. I learned alot about tailwind one thing being tailwind presets(I think thats what its called): Tailwind removed certain form styles so when coding I had to reset styles for inputs for example! I also learned about having a base component and wrapper component that will have extended features and form validation in vanilla reactjs

[netlify]

✅ Deploy Preview for mint-chip ready!

Name	Link
🔨 Latest commit	eb436a0
🔍 Latest deploy log	https://app.netlify.com/projects/mint-chip/deploys/6907ebca6d889900087a4cca
😎 Deploy Preview	https://deploy-preview-19--mint-chip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[CMolinaBetancourt]

You did a great job with the sign-up and sign-in views!

Sign-up view
• todo: The “Forgot Username” and “Reset Password” links/functionality should not be included in this view.
• question: Should the button in this view have the hover, active, and focus states of the main button component?
• suggestion: During testing, I realized that when the “Complete Sign Up” button is clicked, we could redirect the user to the sign-in view. This would improve the user experience.

Sign-in view
• question: The current design includes “Forgot Username” and “Reset Password” links. Given we're using local storage, I am unsure how to implement or use them. Should we keep them?
• todo: If we decide to keep them, the “Forgot Username” is missing.
• question: Should the button in this view have the hover, active, and focus states of the main button component?

[nkabembo]

It is my understanding that we are not implementing forgot username, reset password, I just added the links to the ui based on the designs, what is your thought on this @magali-la to include the links or remove?.

• I like your suggestion to redirect to the login page after signing up successfully
for the links I will add forgot username on the login page and remove both links on the signup page I think I got mixed up with the designs
For the hover , focus states etc.. my understanding is it will come from the base button component styling when I did this pr the button pr was not merged in yet I will merger with main to fix it

[nkabembo]

I made the changes @CMolinaBetancourt . just waiting to hear back from Magali whether to keep or remove the links

[magali-la]

For the forget password/username links: I say we keep them as it represents future functionality beyond the MVP and is in line with the user's login experience. It can be discussed with design though

[magali-la]

Great job setting up the inputs and labels in the form and adding ARIA labels and roles for accessibility throughout!

Request change - tab focus outline overlap on alert message: The tab focus outline runs over the 'Fill form properly' alert, reducing visibility.

• Suggestion 1: Add more spacing between these elements of greater than 12px - that's the spacing between the outline and the button's edge.

Note 1 - missing browser validation popup: The browser's default popup doesn't appear when the user attempts to submit incomplete required fields. This might indicate something missing from the button to signal to browser it is submitting the form. Something like this for chrome. The ARIA labels are set up correctly for required fields and aria-invalid='false'.

• Suggestion 1: Could try adding type="submit" to the button on the login and signup. This might link the button to the form and trigger this validation popup from browser

Note 2 - password icon hover/focus state: The password toggle button shows a gray default hover and square focus outline on click. When using tab navigation, two outlines show on click.

• Suggestion 2: Find what styling causes both square focus outlines and possibly override it in-line. For hover, you could override it with just an blue active state of the icon's color rather than the background, since the icon change provides a clear visual indicator.

[magali-la]

Updates are good, ready to merge!