Техническое задание «Marketplace com»

6.3 Пагинация

(каталог, внизу страницы)

• 
  Номера страниц;
  
• 
  Элементы управления, при нажатии переход на следующею страницу;
  
• 
  Инпут “Перейти на страницу” (валидация - только цифры);
  
• 
  Кнопка “Перейти” - по клику переход на указанную в инпуте страницу.
  

6.4 Регистрация/Авторизация
6.4.1 Модальное окно “Авторизация”

Имеет общий вид, для всех страниц сайта:

1. 
   Инпут “E-mail” (при заполнении поля происходит проверка валидности (правильности) введенного e-mail;
   
2. 
   Инпут “Пароль” при заполнении поля, символы отображаются как звёздочки; Происходит проверка пары логин и пароль, на наличие в системе. Если таковой нет показывается текстовое сообщение.
   
3. 
   Ссылка “Забыли пароль?”, при нажатии закрывается окно “Авторизации” и открывается модальное окно восстановления пароля (6.4.2 Восстановление пароля);
   
4. 
   Кнопка “Войти”; Является не активной пока не будут заполнены оба поля (e-mail и пароль)
   
5. 
   При 3х кратном неправильном вводе пары логин и пароль появляется каптча:
   
6. 
   При правильном вводе пары логин и пароль происходит авторизация в системе и пользователь остается на той странице на которой он открыл этот поп-ап
   

7. 
   Блок “Соц. сети” (иконки социальных сетей, при клике на которые происходит вход через “Фейсбук”, “Вконтакте”, “Гугл+”) при нажатии - модальное окно входа через соответствующую соц.сеть с помощью API;
   
8. 
   Кнопка “Зарегистрироваться”, при нажатии открывается раздел Регистрации.
   

6.4.2 Модальное окно “Восстановление пароля”

1. 
   Текстовое объяснение;
   
2. 
   Поле для ввода e-mail (при заполнении поля происходит проверка валидности на содержание собачки, а также содержание такого емала в системе) ;
   

3. 
   Кнопка «Восстановить» (становиться активной только после ввода корректного e-mail). После введения e-mail и нажатия кнопки “Восстановить” на указанную почту отправляется ссылка для перехода на форму создания нового пароля.
   

6.4.3 Страница восстановления пароля

актуальный макет:

http://6eao6f.axshare.com/#g=1&p=19_5_1_2_pass_change_error

http://6eao6f.axshare.com/#g=1&p=19_5_1_0_pass_change_new

http://6eao6f.axshare.com/#g=1&p=19_5_1_1_pass_change_congrad

1. 
   Инпут “Придумайте пароль”;
   
2. 
   Инпут “Подтвердите пароль” (с функцией сравнения корректности ввода пароля в оба поля).
   
3. 
   Полоса сложности пароля. Имеет 3 статуса слабый (до 6-ти символов, красный), хороший (до 9-ти символов, желтый) и сильный (от 9-ти и больше символов, зеленый) Если символов меньше 6-ти, то - пароль не подходит, о чем должна гласить соответствующая надпись.
   
4. 
   Кнопка “Подтвердить” (активна при корректном заполнении инпутов), если пароли не совпадают то показывается индикатор, того что пароли не совпадают. Если все поля введены верно то кнопка становится активной:
   

По клику на кнопку “Подтвердить” показывается страница

6.4.4 Страница “Регистрация”

актуальный макет:

http://6eao6f.axshare.com/#g=1&p=19_0_0_0_reg_step_1

Состоит из:

• 
  хедера
  

6.4.5 Шаг 1. “Проверка email”

актуальный макет: http://6eao6f.axshare.com/#p=19_0_0_0_reg_step_1&g=1 http://6eao6f.axshare.com/#g=1&p=19_1_0_0_reg_step_1_conf

1. 
   Инпут “E-mail”, под полем - подсказка “Используется для входа на сайт, пожалуйста вводите существующий емаил”;
   
2. 
   Инпут “Пароль”;
   
3. 
   Инпут “Подтвердить пароль” (с функцией сравнения корректности ввода пароля в оба поля);
   
4. 
   Полоса сложности пароля. Имеет 3 статуса слабый (до 6-ти символов, красный), хороший (до 9-ти символов, желтый) и сильный (от 9ти и больше символов, зеленый) Если символов меньше 6-ти, то пароль не подходит.
   
5. 
   Кнопка “Далее” (активна при валидном и корректном заполнении инпутов), При правильном заполнении инптов показывается окно с сообщением о том что на емаил было отправлено письмо. После того как пользователь перейдет по ссылки из письма он сможет продолжить регистрацию и ему показывается следующий шаг “Выбор роли”
   

1. 
   ссылка “Письмо не пришло, отправьте еще раз” можно повторно только 3 раза, после этого выскакивает сообщение “Количество высланных писем превысило лимит, начните регистрацию заново, возможно вы неверно ввели email ”
   

6. 
   Ссылка “Войти”, при клике - модальное окно “Авторизация”;
   

6.4.6 Шаг 2. Страница “Выбор роли”

актуальный макет: http://6eao6f.axshare.com/#g=1&p=19_2_0_0_reg_step_2_select_role

1. 
   Блоки “Покупатель”, “Продавец”, каждый состоит из:
   

• 
  Изображение;
  
• 
  Название;
  
• 
  Текстового описания.
  
• 
  Кнопка “Выбрать”, при нажатии открывается следующий шаг. В зависимости из выбранной роли на этом этапе создается определенный аккаунт:
  
  • 
    Покупатель, создается ЛК покупателя
    
  • 
    Продавец, создается ЛК продавца
    

6.4.7 Шаг 3. Страница контактов “Покупателя”

актуальный макет: http://6eao6f.axshare.com/#p=19_3_0_0_reg_step_3_buyer&g=1

1. 
   Селект “Местоположение” (изначально выбирается автоматически (гео локация), можно изменить);
   
2. 
   Инпуты “Контактное имя” (Имя, Фамилия); Проверка на отсутствие чисел
   
3. 
   Инпут “Название компании”; не обязательное поле
   
4. 
   Инпуты “Телефон” (код страны, код оператора, номер телефона); Проверка на отсутствие букв и 11 символов
   
5. 
   Кнопка “Завершить регистрацию”; Активна при правильных заполненных формах
   
6. 
   Чекбоксы “Соглашение” и “Подписка” (уже отмечены, без возможности убрать галочку).
   

В правой части от каждого поля есть место под текстовую ошибку, которая отмечается красным светом, или подсказку, которая отмечается обычным текстом.

6.4.8 Шаг 3.Страница контактов “Продавец”

актуальный макет: http://6eao6f.axshare.com/#g=1&p=19_3_1_0_reg_step_3_suppliers

Состоит из:

• 
  Селект “Местоположение” (изначально выбирается автоматически (гео локация), можно изменить);
  
• 
  Инпуты “Контактное имя” (Имя, Фамилия); Проверка на отсутствие чисел
  
• 
  Инпут “Название компании”; не обязательное поле
  
• 
  Инпуты “Телефон” (код страны, код оператора, номер телефона); Проверка на отсутствие букв и 11 символов
  
• 
  Селект “Вид деятельности”. Определяются администратором.
  

• 
  Селект “Продукты”. Select2 Варианты основываются на каталоге товаров. Определяются администратором
  
• 
  Селект “Услуги”. Select2 Варианты основываются на каталоге услуг. Определяются администратором
  
• 
  Кнопка “Завершить регистрацию”; Активна при правильных заполненных формах
  
• 
  Чекбоксы “Соглашение” и “Подписка” (уже отмечены, без возможности убрать галочку).
  

В правой части от каждого поля есть место под текстовую ошибку, которая отмечается красным светом.

6.4.9 Финальное окно

актуальный макет: http://6eao6f.axshare.com/#g=1&p=19_4_0_0_reg_congrats


Состоит из:

• 
  заголовка
  
• 
  текстового блока
  
• 
  ссылок ведущих на соответствующие разделы сайта
  

Поделитесь с Вашими друзьями: