[Redesign] Log In Page

[Lvyshnevska]

As a User,
I want to log into the platform seamlessly with clear and intuitive visual feedback,
So that I can access my account quickly and correct any errors if needed.

---

Acceptance Criteria:

1. Log In Page Layout:

   • A centered login form with fields for:
     • Email Address: Input field with a placeholder ("Введіть свою електронну пошту").
     • Password: Password input with an eye icon to toggle password visibility.
   • Buttons for:
     • Forgot Password?: A link to password recovery.
     • Log In: Primary button labeled "Увійти".
     • Sign Up Option: Below the form, a message: "Вперше на нашому сайті? Зареєструйтесь".

2. Form Validations:

   • Email Format Validation: If the email is invalid, display an error in red:
     • "Введіть адресу електронної пошти у форматі name@example.com".
   • Password Error Handling: If credentials are incorrect:
     • Error Message in Red: "Електронна пошта чи пароль вказані некоректно".
   • The error messages should appear dynamically without a page reload.

3. Visual Feedback for Errors:

   • Highlight the error field in red borders when the user enters incorrect data.
   • Password error feedback shows when typing invalid input (mockup shows real-time error detection).

4. Password Toggle Feature:

   • Clicking the eye icon will toggle the password visibility on and off.

5. Mobile and Desktop Views:

   • The layout must be responsive:
     • On desktop, the form remains centered.
     • On mobile, the form should adjust its size and position to remain user-friendly.

6. Footer and Header Consistency:

   • Header navigation includes links for "Про нас", "Підприємства та сектори", "Пошук", "Увійти", and "Зареєструватися".
   • Footer must remain visible with:
     • Contact information and categories for "Підприємства" and "Сектори".
     • Links for "Політика конфіденційності" and "Умови користування".

7. Error Handling and Retry Option:

   • If login fails multiple times, users can retry:
     • The system should guide users to click "Забули пароль?" if they need recovery.

8. User Redirection:

   • Upon successful login, users are redirected to the main page.

---

Mockups

Link to Mockup
https://www.figma.com/design/pdh0xc92SJqnUmix7dkeRT/Forum-Project-(New)?node-id=2028-17451&node-type=frame&t=keEWVY8UaeXRuy3C-0

Epic #844

[parsival2022]

I think everything looks like it should be.