Auth and preference pages

igawaclawska commented 2 months ago

Overall changes:

Pages changed

Log in page
Current: desktop	mobile

This PR: desktop	mobile

Create account page
Current: desktop	mobile

This PR: desktop	mobile

Reset password page
Current: desktop	mobile

This PR: desktop	mobile

Pages added:

Language preferences settings
desktop	mobile

Language preferences settings are separated from the registration page and have their own page and endpoint: language_preferences

      <PrivateRoute
        path="/language_preferences"
        api={api}
        setUser={setUser}
        component={LanguagePreferences}
      />

Input

validation:

As we discussed and agreed on Monday, the 15th, I kept the validation logic unchanged for now. It's still a global message displayed on the form field, but it has now been redesigned to be visually distinct from the input fields.

Validation
Current

This PR

If we want in the future to implement a real-time validation that supports error messages displayed directly below input fields - the new custom input field component will allow us to do so now (similarly to how it can be achieved using mui input fields).

other states:

	Input other states
Active
Error (we will be able to use this state after adapting the way we validate inputs)

The useFormField custom hook controls the behavior of the new form fields. For now, it handles basic state updates, but it can be expanded to handle individual error messages per input field, etc.

The hook:

/* 
A custom hook controlling form field logic.
It could be extended with:
    - validation support (a function with validation rules could be passed as an argument)
    - error message states 
*/

export default function useFormField(initialState) {
  const [currentState, setState] = useState(initialState);

  function handleInputChange(e) {
    setState(e.target.value);
  }

  function resetInputState() {
    setState("");
  }

  return [currentState, handleInputChange, resetInputState];
}

Usage example in CreateAccount.js:

  const [inviteCode, handleInviteCodeChange] = useFormField("");
  const [name, handleNameChange] = useFormField("");
  const [email, handleEmailChange] = useFormField("");
  const [password, handlePasswordChange] = useFormField("");

Privacy Notice

The Privacy Notice text has now been removed from the Registration page and is available as a link.

For now, the validation does not consider the Privacy notice checkbox, as I left it open for discussion. Let's discuss our approach on Monday.

Buttons:

Initially built upon the already existing and used in the system OrangeRoundButton styled component but I have discovered it is not keyboard focusable and does not submit the form on key down.
Upon inspecting it to find a reason for this behavior, I have discovered that the main parent of this component, the RoundButton is made of a div, not a button. This is why it lacked the button behavior.
Initially, I tried to modify the parent-styled component and turn it into a button, but it is used in many different places and serves many different purposes, so it was impossible to fix it without breaking something on the way. (Its use cases are on the website, modal, and info pages as buttons, on the articles page as length and level sorting buttons, interest / non-interest toggling buttons, and probably many more.)
I decided to take a safer route and create a new, separate, valid styled button. For now, I used it on the info pages - but I will keep plugging it into other places that use buttons until it becomes a main button with multiple variants.

button-gif

netlify[bot] commented 2 months ago

Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
Latest commit	f229b9ff47f331c920961042e84ac12768a7fbf7
Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/663914b40a719000087a6422
Deploy Preview	https://deploy-preview-346--voluble-nougat-015dd1.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 site configuration.

igawaclawska commented 2 months ago

Hi @mircealungu and @tfnribeiro

The changes that we discussed last Monday are now addressed:

using string const in repetitive elements that do not require additional styling, such as buttons or input fields on the updated info pages (I will also keep this approach in other places from now on).

Additionally, I have adapted this PR to the newest updates on main so that it no longer has merge conflicts.

Also, This PR mainly introduces changes to the following pages: Log-in, Registration, Password Reset, and Language Selection. However, I have also worked on the Keywords Exclusion pages (from another branch that is dependent on this one because I needed components introduced here). Should I incorporate these changes into this PR or make a separate one after this one is approved/merged?

zeeguu / web