В третьем задании приложение перезжает на React и перестаёт быть анонимным.
Во-первых, вместо handlebars и чистого JavaScript необходимо использовать React для организации всего клиентского кода. При этом можно выбрать любые сопутствующие библиотеки: Redux, React Router, Redux Saga – на ваше усмотрение.
Для этого текущий код необходимо смигрировать.
Мы выложили пример приложения «Заметки» на стеке React:
https://github.com/urfu-2018/notes-app-example/
В отдельном коммите можно посмотреть как приложение было смигрировано на React:
https://github.com/urfu-2018/notes-app-example/commit/44bd0876ed952dd812553133ffa338294e2e0feb
Во-вторых, реализовать новую функциональность:
-
Добавить страницу регистрации пользователя
- На странице форма с полями для ввода логина, пароля и выбора аватарки
- Необходимо проверять, что поля ввода логина и пароля заполнены
- Пароль может быть любым
- Логин может содержать только символы «a-Z», «0-9» и «-»
- При неверном вводе логина или пароля необходимо вывести сообщение об ошибке
- Аватарка может быть не выбрана
- При сохранении необходимо создать учётную запись пользователя, авторизовать его и перезагрузить страницу, отправив нового пользователя на главную страницу
- Должна быть недоступна для авторизованных пользователей
-
Добавить страницу входа пользователя
- На странице форма с полями для ввода логина и пароля
- При неверном вводе логина и пароля необходимо вывести сообщение об ошибке
- При верном вводе необходимо авторизовать пользователя и перезагрузить страницу, отправив его на главную страницу
- Должна быть недоступна для авторизованных пользователей
-
Для неавторизованных пользователей в шапке вывести две кнопки – «Зарегистрироваться» и «Войти»
-
Для авторизованных пользователей в шапке вывести его аватар, логин и кнопку «Выйти»
- При нажатии на «Выход» необходимо разлогнить пользователя и отправить его страницу входа
- Если у пользователя нет аватарки необходимо вывести изображение по умолчанию на ваш выбор
-
На финальной сцене фиксировать факт прохождения конкретного приключения пользователем
- Факт не должен фиксировать для анонимных пользователей
- Факт может фиксироваться несколько раз – пользователь может пройти приключение 2 и более раз
- На странице списка приключений под описанием приключения необходимо вывести аватарки всех пользователей прошедших его с указанием количества прохождений. Если прохождение одно – счётчик прохождений не выводится, только аватар
- При наведении на аватар пользователя показываем его логин во всплывающей подсказке
Третья версия приложения должна быть построена на тех же технологиях, что и первая с одним исключением.
Вместо handlebars и чистого JavaScript необходимо использовать React для организации всего клиентского кода. При этом можно выбрать любые сопутствующие библиотеки: Redux, React Router, Redux Saga – на ваше усмотрение.