Сейчас в Teachbase мы занимаемся редизайном и переходом всей клиентской части на Реакт, поэтому задание будет связано с ним напрямую

Вам нужно будет сделать реальную страницу входа, разбив её на компоненты, добавить валидацию. Моковое API реализовно в этом репозитории.

Запуск мокового API

yarn server

POST в http://localhost:3030/api/login принимает объект

{
  "login": "login",
  "password": "qwerty"
}

При наличии ошибок возвращает объект

{
  "errors": ["Текст ошибки №1", "Текст ошибки №2"]
}

Если поле password содержит 'qwerty', вернется объет содержащий информацию о юзере

{
  "data": {
    "id": 5,
    "name": "User name",
    "age": 25
  }
}

Требования к реализации

  • ES6+ и react (v16)
  • Webpack
  • Typescript
  • Для формы можно использовать redux-form, final-form или любую подобную библиотеку
  • Валидация полей формы: email (обязательное), password (обязательное, длинна не меньше 6 символов)
  • При отправке запроса можно показывать спиннер на кнопке
  • В случае ошибки при входе показывать сообщение с выводом ошибок полученных из API
  • При успешном логине показывать приветствие юзеру, с его именем (можно заюзать alert)
  • Если останется время и желание, прикрутить eslint, тесты (jest) и i18n (react-intl)

Ниже скрин для того, чтобы примерно было понятно, на что ориентироваться. Дизайн можно менять на своё усмотрение: Login