Cross-Check 'eCommerce Application Sprint#2. Cross-check' - 'KaterinaMysl'

[katemihalovskaya]

1. A link to your deployed project (final version)

   • link

   A link to your deployed project (sprint#2)

   • link

2. A link to the project repository on Github (final)

   • link

   A link to the sprint#2 Pull Request on Github.

   • link

3. A link to the task

   • link

4. A Link to the checklist for evaluating the task (if it exists)

   • link

5. A screenshot of cross-checking marks Due to different time zones we missed the deadline and did not submit the task in time.

6. A final score after self-assessment, with comments Score: 315 / 315 Login Page Implementation (130/130) Registration Page Implementation (120/120) Main Page Enhancements (10/10) Routing Implementation (30/30) Evaluation Criteria for Header (25/25)

7. A cross-check score of your Score

[haslie22]

Login Page 130/130

---

Input Validation 40/40

• [x] Implement client-side validation for the login form, including email and password fields 20/20
  • [x] Email field validation checks for a properly formatted email address according to the specified rules
  • [x] Password field validation checks for meeting the length and complexity requirements
  • [x] Show/hide password functionality allows users to toggle password visibility
  • [x] Validation checks are performed as the user types  
• [x] Display clear error messages for validation issues 20/20
  • [x] Clear error messages are shown next to the corresponding input field when validation fails
  • [x] Error messages are descriptive, explaining the specific validation issue
  • [x] Error messages follow the specified display rules for a consistent and user-friendly experience
  • [x] Error messages disappear when the user corrects the invalid input

Небольшой момент по форме: если вы разрешаете автозаполнение формы сохраненными данными, было бы здорово предусмотреть этот момент, чтобы плейсхолдеры своевременно уезжали вверх и становились лейблами, иначе выходит вот так: https://i2.paste.pics/7233ef1d998608812252044cc089012b.png

Аналогично в форме регистрации

Integration with Authentication Service 45/45

• [x] Integrate the login form with a chosen authentication service (CommerceTools) to handle user authentication 25/25
  • [x] CommerceTools authentication service is set up and configured for the project
  • [x] Login form communicates with the CommerceTools authentication service to sign in users by submitting email and password
  • [x] Application can successfully receive access token, refresh token, and user data from the CommerceTools API  
• [x] Implement error handling for failed authentication attempts using CommerceTools 20/20
  • [x] Clear error messages are shown when authentication fails due to incorrect email or password
  • [x] Error messages are user-friendly and provide guidance on how to proceed
  • [x] No sensitive information is exposed to the user in the error messages
  • [x] The application handles CommerceTools authentication errors properly

Есть небольшое замечание: если я неверно ввожу один из кредов, оба инпута подсвечены красным с подписью "Incorrect email or password". Я понимаю, что допустила опечатку в пароле, изменяю пароль, красное сообщение под паролем пропадает, но оно остается в логине, а он-то у меня верный, и форму при этом я сабмитнуть не могу. Более того, по логике валидации (наличие символов в верхнем/нижнем регистре, цифр, корректный формат емейла и т.п.) в нем тоже все ок. В итоге я вынуждена идти в логин, убирать там один символ и добавлять его же, чтобы триггернуть валидацию поля. Это не очень удобно. Как альтернативу на будущее предлагаю сделать общую красную подпись для обоих полей, и убирать ее по инпуту в одно из двух полей, оставляя лишь собственную валидацию полей, так юзеру будет удобнее.

---

Redirection 30/30

• [x] Redirect users to the application's main page upon successful login 15/15
  • [x] After successful authentication, users are redirected to the main page of the application, which contains simple text ("Main") or any other content
  • [x] The URL in the address bar is changed to the main page's URL upon redirection
  • [x] Proper handling of navigation and user experience during redirection, including browser history updates and preserving authentication state  
• [x] Redirect users who are already logged in to the main page if they try to access the login page 15/15
  • [x] Authenticated users who attempt to visit the login page are automatically redirected to the main page
  • [x] The URL in the address bar is changed to the main page's URL for authenticated users redirected from the login page
  • [x] Redirection maintains the user's authentication state during the process
  • [x] Proper handling of navigation and user experience during redirection, including updating browser history

---

Handle Authentication Token 10/10

• [x] Obtain the authentication token securely after a successful login attempt by sending a request to the token endpoint, allowing for seamless user authentication across the application 0/10
  • [x] The authentication token is obtained from the token endpoint after a successful login attempt
  • [x] The token is used for subsequent requests that require authentication

---

Navigation to Registration Page 5/5

• [x] Add a button or link on the login page that allows users to navigate to the registration page 0/5
  • [x] A clear and prominent button or link is present on the login page to navigate to the registration page
  • [x] The button or link is functional and directs the user to the registration page
  • [x] Proper handling of navigation and user experience during this process  

---

Registration Page 120/120

---

Input Validation 45/45

• [x] Implement client-side validation for all required fields in the registration form, such as email, password, first name, last name, date of birth, and address fields (e.g., street, city, postal code, and country) for proper use with CommerceTools 25/25
  • [x] Each required field in the registration form has validation rules
  • [x] Registration form submission is prevented if the input doesn't meet the requirements  

• [x] Display clear error messages indicating any validation issues, such as an improperly formatted email or a weak password

  • [x] Error messages are displayed for each invalid input in the registration form
  • [x] Error messages are clear, concise, and visually accessible

  Было бы круто, если бы для поля с проверкой пароля в случае несовпадения также выводилось сообщение вроде "your passwords don't match, please try again", но это не критично

  • [x] Selected UI elements are used effectively to highlight validation errors and improve user experience

---

Integration with Authentication Service 25/25

• [x] Integrate the registration form with a chosen authentication service, such as commercetools, to handle user registration 10/10
  • [x] Successful user registration with the chosen authentication service
  • [x] Proper submission of user information to the authentication service backend
  • [x] A success message is displayed to the user upon successful account creation
  • [x] Verification of successful customer creation using the browser's DevTools Network tab  
• [x] Implement error handling for failed registration attempts, and display user-friendly error messages 15/15
  • [x] Proper error handling during the registration process
  • [x] Display user-friendly error messages for failed registration attempts
  • [x] Selected UI elements are used effectively to highlight failed registration attempt errors and improve user experience

---

State Management, Automatic Login, and Redirection 15/15

• [x] Redirect users to the application's main page upon successful account creation and automatic login 15/15
  • [x] Users are redirected to the main page upon successful account creation and automatic login
  • [x] The redirection process takes into account browser history for seamless navigation
  • [x] Proper use of the chosen front-end framework or library for handling routing and navigation, or implementation of plain TypeScript solutions when not using a front-end framework

---

Integration with commercetools for User Profiles and Addresses 30/30

• [x] Allow users to set a default address during registration 15/15
  • [x] Users can set a default address while registering
  • [x] The setting of a default address happens simultaneously with user account creation
  • [x] The default address is saved in the user profile upon successful registration
  • [x] Proper integration with the commercetools API for storing default address information
  • [x] The user interface clearly distinguishes the default address selection during registration  
• [x] Enable users to select different billing and shipping addresses or choose a single address for both billing and shipping during the registration process 15/15
  • [x] Users can enter separate addresses for billing and shipping during the registration process
  • [x] Users can choose to use the same address for both billing and shipping
  • [x] The chosen addresses are saved in the user profile upon successful registration
  • [x] The user interface clearly distinguishes between input fields for billing and shipping addresses
  • [x] Proper integration with the commercetools API for storing billing and shipping address information

---

Navigation to Login Page 5/5

• [x] Add a button or link on the registration page that allows users to navigate to the login page 5/5
  • [x] The registration page includes a clear and visible button or link
  • [x] Upon clicking the button or link, the user is redirected to the login page

---

Main Page Enhancements 65/65

---

Centralized Navigation 10/10

• [x] Add links to all the functional pages of the application on the main page. These should include, but are not limited to, the login and registration pages 5/5
  • [x] Links to all functional pages of the application are present on the main page, including the login and registration pages
  • [x] The links are clearly visible and accessible to users, making the navigation easy and intuitive  
• [x] Each link should redirect the user correctly to the corresponding page without any errors 5/5
  • [x] Each link on the main page correctly redirects to the corresponding page
  • [x] No error occurs during the redirection process
  • [x] The correct page content is displayed after the redirection

---

Routing Implementation 27/30

• [x] Implement routing for navigation between login, registration, and main pages 15/15
  • [x] Users can directly access the main page by typing its URL into the browser's address bar
  • [x] Users can directly access the login page by typing its URL into the browser's address bar
  • [x] Users can directly access the registration page by typing its URL into the browser's address bar
  • [x] Direct access to these pages does not cause any errors or issues with the application's functionality
  • [x] Navigation using the implemented routing is smooth, without page refreshes (when applicable, e.g., in a Single Page Application)
  • [x] Navigational features of the browser (such as the back and forward buttons) work correctly after using these direct access links  

• [x] Implement a 404 (Not Found) page for invalid route requests 15/15

  • [x] The 404 page contains clear messaging informing the user that the requested page could not be found
  • [x] The 404 page includes a navigation option (e.g., a button or link) for users to return to the main page or another accessible section of the application

  Непосредственно на странице 404 кнопки/ссылки нет, было бы неплохо, если бы она была непосредственно на странице: https://i2.paste.pics/PGGF1.png

  • [x] The application automatically redirects users to the 404 page when they request an invalid route
  • [x] The application should maintain the originally requested URL in the browser's address bar when showing the 404 page, as this helps support user expectations and provides clearer context about the requested route

---

Evaluation Criteria for Header 25/25

• [x] Navigation to login and registration pages for unauthorized users 15/15
  • [x] A clear and visible link or button for the login page is present for unauthorized users
  • [x] Clicking the link or button takes the user to the login page
  • [x] A clear and visible link or button for the registration page is present for unauthorized users
  • [x] Clicking the link or button takes the user to the registration page  
• [x] Ability to access the main page for all users 5/5
  • [x] A navigation button or a clickable logo is present in the header that redirects users to the main page of the application
  • [x] The navigation button or logo contains a link to the main page URL
  • [x] Clicking on the navigation button or logo takes the user to the main page from any other page in the application.  
• [x] Logout functionality for authorized users 5/5
  • [x] An option to log out is available for authorized users
  • [x] Upon logging out, users are redirected to the login or main page
  • [x] After logging out, users have the option to log in or register again

---

Penalties

• [ ] Absence of Responsive Application Design -0/20
• [ ] Errors in the Console -0/20

---

Total: 315 / 315

[haslie22]

@valerydluski @helenakrasnova done, check please

[KaterinaMysl]

@haslie22 Thank you for review and good advices!

[kazymirT]

@haslie22 Thank you for reviewing our missed sprint. Thank you for the detailed feedback and recommendations.