Project-Based-10-24-vk / Client

0 stars 0 forks source link

Tutor stepper. Photo #9

Open vlad-khrychov opened 1 week ago

vlad-khrychov commented 1 week ago

As a Tutor, I want to see the fourth step of the ‘Become a tutor’ pop-up, so that I can upload my profile photo

Preconditions:

  1. A User is registered as a tutor.
  2. A Tutor verifies his/her email via the email service.
  3. A Tutor is logged in, and the ‘Become a tutor’ pop-up is opened.

Acceptance criteria:

  1. When a Tutor goes to the next page during creating a tutor’s account, then he/she sees the “Photo” page on the fourth step. The Mockups: • for Desktop Image

  2. The “Photo” page (Desktop version) on the fourth step contains: • Left part of a screen:

    • a place with the placeholder text: “Photo Preview”, where the photo will be updated when a Tutor uploads it; • Right part of a screen, top down:
    • navigation tab, which shows on what exactly step the tutor is;
    • the CRUD description of the third step. The description of the third step consists of a text (“Please upload a photo that represents you and helps others recognize you.”);
    • the “ Upload your profile photo” clickable button to add a photo. When a Tutor clicks on the “ Upload your profile photo” button, then he/she can choose the photo in the “Browse” modal window. When a Tutor uploads a photo the label button changes to file name with extension and the photo appears on the left part of the screen;
    • description below the “ Upload your profile photo” button: “Maximum file size should be less than 10 MB”;
    • two clickable buttons: “Back” – a tutor can go back to the previous page, “Finish” – a tutor can complete creating an account.
  3. The photo has to be in png/jpg/jpeg format. When a tutor tries to upload an invalid file, the error message "Wrong file type. Only PNG/JPG/JPEG files are allowed." appears in red below.

  4. The photo must be smaller than 10 MB. When a tutor tries to upload a photo larger than 10 MB, the error message "File size cannot exceed 10 MB." appears in red below. • for Tablet Image

• for Mobile Image

  1. When a Tutor clicks on the close button, pop-up closes without saved changes and a Tutor goes to the home page.
  2. When a Tutor clicks outside the pop-up field, nothing happens.

Note: The “Photo” navigation tab is in bold, because this is the fourth step of creating a tutor’s account and a Tutor can navigate through steps by the navigation tabs. The “Photo” navigation tab is highlighted in the mobile version.