Реализовать форму входа/регистрации в некую закрытую информационную систему.
Используемые библиотеки и технологии Всё, что перечислено в данном списке, должно быть использовано при реализации
- Vue
- Typescript
- vue-router
- vuex
- vue-property-decorator
- vuex-class
- vue-cli
- С главной пользователя должно редиректить на страницу /auth
- На странице /auth пользователь должен видеть форму авторизации с 2 полями
(
“ Телефон ”и“ Пароль ”), кнопку“ Войти ”, ссылку на страницу регистрации. - Поле
“ Телефон ”обязательно и должно валидироваться по таким правилам: в начале должно быть “+7”; допустимые символы: “+” и цифры; должно быть 12 символов, включая “+”. - Поле
“ Пароль ”обязательно и должно валидироваться по таким правилам: должна быть одна заглавная буква, одна маленькая буква, одна цифра и не меньше 8 символов. - Валидация формы авторизации должна происходить на лету
- Если валидация не проходит, то под полем должно показываться сообщение о том, что поле заполнено некорректно
- При нажатии на кнопку
“ Войти ”если поля введены некорректно , то должны показываться ошибки - При нажатии на кнопку
“ Войти ”если поля введены корректно , под формой должно появиться сообщение об успешном входе в формате“Вы вошли под номером +7 (999) ***-99-99”, где вместо 9 будут цифры из номера пользователя - При нажатии на ссылку, ведущую на страницу регистрации, пользователя должно редиректить на страницу /register
- На странице /register пользователь должен видеть форму регистрации,
состоящую из полей
“ Имя ”,“ Фамилия ”,“ Отчество ”,“ Телефон ”и“ Пароль ”, кнопку“ Зарегистрироваться ”и ссылку на страницу авторизации - Поля
“ Имя ”и“ Фамилия ”обязательны и должны валидироваться по таким правилам: допускаются только русские буквы, не больше 15 символов. - Поле “ Отчество ” необязательно, но если пользователь вводит, то должно
валидироваться также как и
“ Имя ”или“ Фамилия ”. - Поля
“ Телефон ”и“ Пароль ”валидируются также как на форме авторизации. - Валидация полей формы регистрации должна происходить при смене фокуса
- Если валидация не проходит, то под полем должно показываться сообщение о
том, что поле заполнено некорректно16. Пока человек вводит данные, под формой должно показываться сообщение
“Вы пытаетесь зарегистрироваться под номером +7 (999) ***-99-99, как Имя Фамилия Отчество”, где вместо 9 будут выведены цифры номера пользователя, а вместо Имя - имя пользователя, приведенное к виду <Большая буква><маленькие буквы> (аналогично Фамилия и Отчество ) - При нажатии на кнопку
“ Зарегистрироваться ”, если данные введены некорректно, должны показываться ошибки - При нажатии на кнопку
“ Зарегистрироваться ”, если данные введены корректно, то должно редиректить на /auth , в поле“ Телефон ”подставляется телефон из формы регистрации, внизу должно показываться сообщение“Вы зарегистрировались под номером +7 (999) ***-99-99, как Имя Фамилия Отчество”(формируется также как в пункте 16) - При нажатии на ссылку, ведущую на страницу авторизации, пользователя должно редиректить на /auth
- Проект должен быть поднят через vue-cli, и быть написанным с помощью typescript + vue
- Должно быть несколько компонентов, реализованных через typescript классы
- Любые свойства классов, функции, объекты должны быть типизированы
- Должны быть использованы декораторы из vue-property-decorator
- Все данные должны храниться в store из vuex, в компонентах получаем информацию с помощью декораторов из vuex-class
- Для страниц /auth и /register должен использоваться vue-router
- Верстка не обязательна, но будет плюсом, если будет выглядеть красиво
- Код должен быть в git