roterentev / vue-auth-page Goto Github PK

Реализовать форму входа/регистрации в некую закрытую информационную систему.

Используемые библиотеки и технологии Всё, что перечислено в данном списке, должно быть использовано при реализации

• Vue
• Typescript
• vue-router
• vuex
• vue-property-decorator
• vuex-class
• vue-cli

1. С главной пользователя должно редиректить на страницу /auth
2. На странице /auth пользователь должен видеть форму авторизации с 2 полями (“ Телефон ” и “ Пароль ”), кнопку “ Войти ”, ссылку на страницу регистрации.
3. Поле “ Телефон ” обязательно и должно валидироваться по таким правилам: в начале должно быть “+7”; допустимые символы: “+” и цифры; должно быть 12 символов, включая “+”.
4. Поле “ Пароль ” обязательно и должно валидироваться по таким правилам: должна быть одна заглавная буква, одна маленькая буква, одна цифра и не меньше 8 символов.
5. Валидация формы авторизации должна происходить на лету
6. Если валидация не проходит, то под полем должно показываться сообщение о том, что поле заполнено некорректно
7. При нажатии на кнопку “ Войти ” если поля введены некорректно , то должны показываться ошибки
8. При нажатии на кнопку “ Войти ” если поля введены корректно , под формой должно появиться сообщение об успешном входе в формате “Вы вошли под номером +7 (999) ***-99-99”, где вместо 9 будут цифры из номера пользователя
9. При нажатии на ссылку, ведущую на страницу регистрации, пользователя должно редиректить на страницу /register
10. На странице /register пользователь должен видеть форму регистрации, состоящую из полей “ Имя ”, “ Фамилия ”, “ Отчество ”, “ Телефон ” и “ Пароль ”, кнопку “ Зарегистрироваться ” и ссылку на страницу авторизации
11. Поля “ Имя ” и “ Фамилия ” обязательны и должны валидироваться по таким правилам: допускаются только русские буквы, не больше 15 символов.
12. Поле “ Отчество ” необязательно, но если пользователь вводит, то должно валидироваться также как и “ Имя ” или “ Фамилия ”.
13. Поля “ Телефон ” и “ Пароль ” валидируются также как на форме авторизации.
14. Валидация полей формы регистрации должна происходить при смене фокуса
15. Если валидация не проходит, то под полем должно показываться сообщение о том, что поле заполнено некорректно16. Пока человек вводит данные, под формой должно показываться сообщение “Вы пытаетесь зарегистрироваться под номером +7 (999) ***-99-99, как Имя Фамилия Отчество”, где вместо 9 будут выведены цифры номера пользователя, а вместо Имя - имя пользователя, приведенное к виду <Большая буква><маленькие буквы> (аналогично Фамилия и Отчество )
16. При нажатии на кнопку “ Зарегистрироваться ”, если данные введены некорректно, должны показываться ошибки
17. При нажатии на кнопку “ Зарегистрироваться ”, если данные введены корректно, то должно редиректить на /auth , в поле “ Телефон ” подставляется телефон из формы регистрации, внизу должно показываться сообщение “Вы зарегистрировались под номером +7 (999) ***-99-99, как Имя Фамилия Отчество” (формируется также как в пункте 16)
18. При нажатии на ссылку, ведущую на страницу авторизации, пользователя должно редиректить на /auth

1. Проект должен быть поднят через vue-cli, и быть написанным с помощью typescript + vue
2. Должно быть несколько компонентов, реализованных через typescript классы
3. Любые свойства классов, функции, объекты должны быть типизированы
4. Должны быть использованы декораторы из vue-property-decorator
5. Все данные должны храниться в store из vuex, в компонентах получаем информацию с помощью декораторов из vuex-class
6. Для страниц /auth и /register должен использоваться vue-router
7. Верстка не обязательна, но будет плюсом, если будет выглядеть красиво
8. Код должен быть в git