search

Project-Based-10-24-vk / Client

0 stars 0 forks source link

Student stepper. Language #12

Open vlad-khrychov opened 1 week ago

vlad-khrychov commented 1 week ago

As a Student, I want to see the third step of the ‘Become a student’ pop-up, so that I can add information about my language

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 “Language” page on the third step. The Mockups: • for Desktop Image

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

    • static picture; • Right part of a screen, top down:
    • navigation tab, which shows on what exactly step a student is;
    • the CRUD description of the third step. The description of the third step consists of a text (“Please select the language in which you would like to study and cooperate.”);
    • dropdown with single select, lazy loading (show 6 languages in dropdown) and scroll down. The dropdown should have an input with autocomplete to find the language. Input should have “Your native language” placeholder text;
    • two clickable buttons: “Back” – a student can go back to the previous page, “Next” – a student can go to the next step for creating an account. • for Tablet Image

• for Mobile Image

  1. The static picture is placed below the description of the third step on the “Language” page (Mobile version).
  2. When a Student clicks on the particular input, the placeholder text transfers to the transparent header.
  3. When a Student enters invalid data, then he/she sees the “No options” dropdown item.
  4. When a Student clicks on the close button, pop-up closes without saved changes and a Student goes to the home page.
  5. When a Student clicks outside the pop-up field, nothing happens. Note: The “Language” navigation tab is in bold, because this is the third step of creating a student’s account and a Student can navigate through steps by the navigation tabs. The “Language” navigation tab is highlighted in the mobile version.