fintech-fab / fintech-fab.ru

Fintech Fab Website - стажировка, обучение, тренинги
4 stars 16 forks source link

Визуализация персонального раздела пользователя #35

Open mikanoz opened 10 years ago

mikanoz commented 10 years ago

Задача в том, чтобы сделать более симпатичную и функциональную верстку для раздела регистрации/авторизации.

Сейчас это выглядит так: http://fintech-fab.ru/registration

Для решения задачи использовать подключение библиотек и плагинов:

jQuery https://code.jquery.com/

Bootstrap3, FontAwesome, Bootswatch http://www.bootstrapcdn.com/

Результат задачи - это несколько html-файлов, которые подключают все необходимое с указанных выше ресурсов. Также могут иметь свои общие .css и .js файлы.

  1. Разобраться как подключаются указанные выше ресурсы, в целом посмотреть примеры реализации разных штук на bootstrap3, научиться конструировать html-страницу.
  2. Форма авторизации и регистрации не должны быть отдельными страницами, а должны подключаться в виде модальных окон на любой странице проекта.
  3. Форма авторизации это поля ввода логина и пароля, а также ссылки для входа через социальные сети.
  4. Форма регистрации это поля ввода email плюс пароль (с повторением пароля).
  5. Каждая форма должна предусматривать вариант отображения с ошибками (когда на одном или нескольких полях возникает ошибка ввода неверных данных)
  6. В каждой форме событие submit должно перехватываться через javascript и данные должны "отправляться" на сервер в JSON-формате.
  7. От сервера ожидается два варианта ответа - либо успешная обработка (код ответа 200), либо список ошибок, указанных к каждому из полей (код ответа 400). Эти варианты требуется обрабатывать.
  8. Т.к. задача не включает участие сервера, вместо отправки данных на сервер выводим предполагаемо отправляемые данные в console.log
  9. Также сами генерируем варианты ответа от сервера, как-будто бы он их вернул.

По реализации - вопросы в скайп.