Tea Taste: вход через VK, публичная лента и админ-панель — большое обновление

Первая версия Tea Taste фиксировала параметры заваривания и сенсорную оценку по проливам, но многое вокруг записи оставалось недоделанным: войти можно было только по email и паролю, свою дегустацию нельзя было поправить, а публичная лента показывала карточки без автора. Последнее обновление закрывает именно эти пробелы и добавляет то, без чего публичный сервис не может работать долго, — обратную связь от пользователей и инструменты для администратора.

Вход через VK ID

Раньше единственным способом попасть в сервис была регистрация по email и паролю. Теперь на бэкенде реализован полноценный OAuth 2.1-поток id.vk.com с PKCE: сервер генерирует пару verifier/challenge, отправляет пользователя на авторизацию VK, обменивает код на токен и запрашивает профиль. Если vkId из ответа уже привязан к аккаунту — пользователь входит; если нет — аккаунт создаётся или связывается с существующим по email.

На фронтенде это одна страница-приёмник (VkAuthDone): она дожидается, пока бэкенд выставит cookie с JWT, подтверждает профиль запросом /profile и полным редиректом уводит пользователя внутрь приложения. Простое решение вместо клиентского SDK VK — вся логика OAuth остаётся на сервере.

Одновременно появилось восстановление пароля по email (через nodemailer): страница /reset-password работает в двух режимах — без токена запрашивает ссылку на сброс, с токеном в query-параметре — принимает новый пароль.

Редактирование записей

До этого обновления дегустацию можно было только создать и удалить — исправить опечатку в названии чая или уточнить оценку было нельзя. Новый компонент FormEdit открывает уже сохранённую форму в режиме правки и сохраняет изменения через PATCH-запрос к тому же sessionId. На бэкенде для этого потребовалось развести создание и обновление по отдельным, специально проверенным маршрутам вместо задваивавшейся валидации в routes/teaforms.js.

Заодно обновился и сам ввод сенсорных дескрипторов: DescriptorPicker разворачивает справочник аромата и вкуса (категория → подкатегория → дескриptor) в единый список для поиска и добавляет чипы быстрого выбора для часто используемых значений — не нужно каждый раз идти в самый низ дерева, если достаточно указать категорию.

Публичная лента

Раздел, который раньше назывался «Блог», переименован в «Ленту» — это точнее описывает содержимое: не редакционные посты, а поток опубликованных дегустаций. Публичная карточка (/blog/:sessionId) теперь показывает имя и аватар автора — на бэкенде GET /public-forms стал отдавать данные владельца вместе с формой, а не только параметры заваривания.

Для этого в модель пользователя добавлена загрузка аватара: эндпоинт принимает файл через multer, ограничивает размер двумя мегабайтами и типом изображения, отдаёт как обычную ссылку. Раздел «Профиль» умеет и показывать, и менять аватар, имя, род деятельности и краткое «о себе».

Обратная связь и админ-панель

У сервиса впервые появился канал обратной связи внутри самого приложения: форма «Предложить улучшение» в боковом меню отправляет текст в новую коллекцию suggestion, привязанную к автору. Это заменяет разрозненные сообщения в личку на список, который можно просматривать в одном месте.

Просматривать его — и управлять пользователями — можно в новой админ-панели. Она добавляет роль admin в модель пользователя и закрытые маршрутом adminOnly эндпоинты: список всех аккаунтов, смена роли, удаление пользователя вместе с его данными, просмотр и удаление предложений. На фронтенде это одна страница со списком пользователей и карточками предложений — без отдельного интерфейса под них не обойтись, как только за сервисом стоит не только автор, но и посторонние пользователи.

Инфраструктура

Обновление затронуло и то, что не видно снаружи. Оба репозитория обзавелись тестами (Jest и Supertest на бэкенде, Testing Library на фронтенде) и workflow для GitHub Actions, которые прогоняют их при каждом пуше. Устаревший серверный рендеринг через jade-шаблоны убран — бэкенд стал чистым API. Обновлены зависимости (Express, Mongoose, JWT, Helmet) и конфигурация Docker-образов.

Итог

Если первая версия Tea Taste доказывала, что дегустацию можно превратить в структурированные данные, то это обновление превращает записи в проект, которым пользуются не только его автор: вход без пароля, возможность исправить свою запись, публичный профиль автора рядом с дегустацией, канал для обратной связи и модерация поверх всего этого.

• Репозиторий (фронтенд): github.com/nikita-konkin/tea-taste-frontend
• Репозиторий (API): github.com/nikita-konkin/tea-taste-api
• Сервис: teaform.ru