search

Project-Based-10-24-vk / Client

0 stars 0 forks source link

Student stepper. Photo #10

Open vlad-khrychov opened 1 week ago

vlad-khrychov commented 1 week ago

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

Preconditions:

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

Acceptance criteria:

  1. When a Student goes to the next page during creating a student’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 Student uploads it; • Right part of a screen, top down:
    • navigation tab, which shows on what exactly step the student 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 “Image Upload your profile photo” clickable button to add a photo. When a Student clicks on the “Image Upload your profile photo” button, then he/she can choose the photo in the “Browse” modal window. When a Student 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 “Image Upload your profile photo” button: “Maximum file size should be less than 10 MB”;
    • two clickable buttons: “Back” – a student can go back to the previous page, “Finish” – a student can complete creating an account.

  3. The photo has to be in png/jpg/jpeg format. When a student 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 student 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 Student clicks on the close button, pop-up closes without saved changes and a Student goes to the home page.
  2. When a Student 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 student’s account and a Student can navigate through steps by the navigation tabs. The “Photo” navigation tab is highlighted in the mobile version.