Доработка фронта: Vue, JWT, XTermJS, WebSockets, Bootstrap

Необходимо доработать существующий скелет фронтенда на Vue2. Ожидаемый результат - полнофункциональный MVP (minimum viable product) на существующем коде, выполняющий основную задачу + обвязку. UX/UI минимальный.

Существующий бекенд: приложение на Golang, есть исчерпывающая документация в Swagger, включая примеры данных запросов/ответов. Бекенд по требованию будет оперативно допиливаться.

Текущий фронт написан на Vue и довольно прост, нет даже axios, работа с апи простым fetch. Включает компоненты/заготовки:

• MainLayout
  
  • Header
    
    • Menu (Home, About, Profile, Login/Register, ...)
  • Body
    
    • Home, About - статика
    • Login/Register - базовые заготовки, на доработку
    • XTermTest - полнофункционален, нужно внедрить в общую логику
  • Footer - статика

Приложение в прод-демо будет работать внутри docker контейнера на NodeJS http-server, все вместе спрятано за nginx. Dockerfile для примера есть.

Порядок работы: создадим git репозиторий в который Вы сможете делать коммиты, а я забирать правки для синхронизации в свой приватный репозиторий. Язык коммитов - исключительно английский.

Необходимо сделать:

• проанализировать и понять текущий код
• при необходимости провести легкий рефакторинг
• разработку вести на локалхосте, с подключением к удаленному API, со своей стороны CORS отключу, со стороны фронта Вам нужно будет решить эту проблему самостоятельно и описать решение в README.md
• сделать глобал-конфиг приложения, куда вынести: API base URL и в перспективе другие параметры
• Модуль auth
  
  • сделать полноценную регистрацию/авторизацию/выход на основе JWT и backend-api. Форма регистрации: email (с повтором ввода), username, password (с проверкой длины 10-32 + повтор ввода). Форма авторизации: email / password
  • JWT нужно хранить в localStorage. Необходима поддержка пары access / refresh token-ов, включая фоновое обновление access-токена по его expiration-time.
  • опционально: предусмотреть возможность авторизации через oauth (google/github, API готово)
  • приложение должно понимать свое внутреннее состояние (пользователь авторизован и токены не истекли либо пользователь вообще не авторизован) и корректно передавать Bearer заголовки с access-token-ом во всех необходимых случаях
• Модуль profile
  
  • доработать страницу профиля пользователя, выводить данные предоставляемые API, выделить цветом статус аккаунта: верифицирован или нет
  • опционально: возможность смены пароля
  • опционально: возможность запросить повторную отправку email для верификации
  • отображение модуля только для авторизованных пользователей
• Модуль groups
  
  • добавить компонент и страницу "Группы пользователя" с возможностью их просмотра/добавления/редактирования/удаления пустых.
  • отображение модуля только для авторизованных пользователей
• Модуль devices
  
  • просмотр списка устройств в выбранной группе
  • добавление нового устройства в указанную группу, вывод списка дистрибутивов (из данных API)
  • создание сессии подключения к новому устройству (websocket + xtermjs + jwt пример уже есть), обработка ошибок подключения
  • сессия к устройству должна быть изолирована (не глобальный объект), чтоб в перспективе можно было создавать несколько подключений за раз
  • отображение модуля только для авторизованных пользователей

Дополнительно, но вообще не обязательно:

• посоветовать, что добавить в конфиг nginx для полноценной навигации (извне открывать сразу конкретные URI, а не базовый домен)
• попробовать с бутстрапа переехать на tailwind
• сессии к устройствам организовать в виде компонента tab bar
• поправить верстку и в целом привести к более опрятному и приятному виду, без фанатизма

Доступ к API предоставлю по запросу, картинки из Swagger как пример. Также прикрепляю картинки внешнего вида фронта на данный момент и примеры кода/структуры проекта.

PS: Порядок цен на фрилансе не очень знаю, пожалуйста предлагайте свои варианты по сумме и срокам на основе вышеизложенного.