- По центру начального экрана располагается кнопка регистрации как на макете (страница desktop полотно Desktop 1).
- После нажатия на кнопку появляется модальное окно (страница desktop полотно Desktop 2). При желании можно добавить эффект появления на усмотрение работника.
- Состояния всех полей есть на отдельных страницах документа. Если каких то состояний не хватает, их нужно добавить, по возможности в стилистике имеющимися состояний.
- После нажатия на крестик в правом верхнем углу, форма закрывается, а уже заполненные данные удаляются.
- Кнопка зарегистрироваться модального окна не активна до тех пор пока все поля формы не заполнены верно.
- При нажатии на кнопку зарегистрироваться модального окна:
a. Страница не перезагружается;
b. Данные из формы собираются в json и выводятся в консоль браузера;
c. Модальное окно закрывается, а кнопка открывающая модальное окно становится зелёной и неактивной. - Валидация полей реализована согласно ТЗ.
- Все поля указанные в макете обязательные.
- Текст ошибки должен явно говорить что пользователь сделал не верно.
- Ошибку стоит выводить после того как пользователь перестал заполнять поле, а скрывать ошибку как только она была исправлена.
- E-mail должен быть валидным адресом электронной почты.
- Никнейм может содержать только:
a. От 3 до 40 символов
b. Латинские буквы
c. Цифры
d. Символ подчёркивания (_) - Никнейм может начинаться только с буквы.
- Никнейм содержит;
- Пароль должен содержать:
a. От 6 до 32 символов
b. Минимум по одной заглавной и строчной букве
c. Минимум одну цифру - Пароль не должен совпадать с ником или почтовым адресом
- На макете под полем пароля есть требования к паролю. По умолчанию все
правила в состоянии default. Как только какое то из условий выполняется, оно
переходит в состояние ok. Если после того как условие единожды было
выполненным перестаёт быть верным - условие переходит в состояние error.
На пример:
a. Пользователь только зашел на страницу и открыл модалку - все правила серого цвета.
b. Пользователь начал вводить пароль и ввёл только одну маленькую букву - ничего не поменялось.
c. Если стереть эту букву тоже ничего не должно меняться.
d. Если к одной маленькой букве дописать одну большую, то правило на то что пароль содержит одну маленькую и одну большую буквы выполнено и становится зелёным, а остальные по прежнему серые.
e. Если к двум буквам добавить цифру то будет верно уже два правила и они станут зелёными.
f. Если удалить одну из букв то правило о буквах перестанет быть верным и оно должно стать красным. Правило на длину пароля по прежнему серое, а т.к. цифра по прежнему есть в пароле то правило на цифру всё ещё зелёное.
g. Если ввести валидный пароль, то все правила должны быть в состоянии ok, если после этого удалить пароль, все правила должны покраснеть. - По умолчанию галочка около условий пользовательского соглашения не стоит, но она обязательна для заполнения пользователем.
- Слова Пользовательского соглашения - это ссылка которая ведёт на отдельную
страницу. Саму страницу верстать не надо.
Если есть какие то замечания, советы или исправления - предлагайте и объясняйте почему вы считаете, что лучше сделать иначе.\
- Дополнить форму регистрации вторым шагом (на первом экране кнопку зарегистрироваться поменять на кнопку далее).
- Кнопка далее первого шага модального окна не активна до тех пор пока все поля первого шага формы не заполнены верно.
- На втором шаге размести не обязательные для заполнения поля:
a. Выбор пола (М/Ж) в виде полей с типом radio;
b. Выбор уровня образования в виде выпадающего списка.
c. Поле рассказать о себе;
d. Выбор рубрик на которые хочет подписаться новый пользователь (можно взять рубрики с федерального сайта МК - политика, экономика, происшествия...) в виде checkbox-ов; - После всех полей второго шага размещается кнопка зарегистрироваться, по нажатию на которую происходит всё то что описано в шестом пункте базовой части.
- Дизайн второго шага регистрации должен быть на первый.
- В части Валидация полей пункт 10.b (и c. об этом же) говорится: “Пользователь начал вводить пароль и ввёл только одну маленькую букву - ничего не поменялось.” Но фактически не соблюдается правило валидации о количестве символов и, логично, если при этом поведении пользователя должно “покраснеть” правило “от 6 до 32 символов” под полем пароля.
- Добавил дополнительный способ закрытия модального окна по клику вне его области. Также работает способ закрытия по Esc.
- Добавил стилизацию не активной кнопки отправки формы. Также первоначально сделал ее не активной.
- В части Валидации полей пункт 7: лучше не использовать спецсимволы в никнейме.
- Согласно пункту 9 в части Валидации полей, логично будет добавить данное требование (пароль кроме всего прочего не должен совпадать с email) к описанным для пользователя правилам заполнения поля ввода Пароля.
- Обработал множество случаев для корректной работы валидации.
- Реализовано с использованием JavaScript, SASS(SCSS), Webpack, ESLint, Prettier, Babel.
yarn install
Запуск
yarn start
yarn run dev
- сборка developmentyarn run build
- сборка productionyarn start
- слежение за файлами и открытие в браузереyarn run stats
- просмотр размера и статы бандла