Всем привет дорогие читатели. Продолжаем цикл новостей о разработке социальной сети stryfe.online. Сегодня хочу рассказать о результатах работы с формой регистрации. Статью я разделю на 3 части, клиентская часть, серверная часть и база данных.
Клиентская часть
Собрал отзывчивую форму с проверкой каждого поля. Собирал на основе компонента Primevue Form компонента. Сейчас покажу как форма выглядит, а потом поделись болью, с которой столкнулся и почему решил отказаться и данного компонента и от zodjs.
Форма получилась приятной на вид и функциональной в плане ошибок (места для ссылок на документы я специально создал заранее, в дальнейшем как доберусь до их реализации я просто добавлю ссылки на раздел), НО т.к. я использую и на фронте и не беке библиотеку zod, то появилось желание без всяких костылей сделать возможность подставлять ошибки полученные с сервера на клиент и....
И тут я получил ворох проблем. Штатно zod не умеет получать из вне ошибки, убив на попытку подружить дня 3, да да именно из-за этого статья появилась именно сейчас, а не в середине недели. Я решил сделать свой валидатор, взяв за основу компоненты из библиотеки valodator.
Также надо будет поправить мой мелкий косяк в получение CSRF, который был сделан по средством GET-запроса. Необходимо будет переделать его на POST, что буду передавать в теле я еще подумаю, но скорее всего название формы, а при проверке буду сверять CSRF-токен еще и с формой, с которой он был отправлен.
Еще хочу отметить, что реализовал включение временной заглушки на форму регистрации, на время полного ее отключения, которая проверяется со стороны сервера.
Текст ошибки и то, как она будет отображаться еще будет прорабатываться.
Серверная часть
В серверной части работ было сделано чуть побольше. Создал два middleware, первый для логирования запросов, а второй для проверки csrf-токена.
Со вторым Middleware пришлось повозиться, т.к. движек Nitrojs, на основе которого и создана серверная часть Nuxt.js не умеет цепляться к конкретному маршруту, а работает как глобальный middleware. Но для того, что бы их можно было выделить на определенный маршрут или часть маршрутов существует специальная функция, которая позволяет на основе начала маршрута получить true/false и уже для этого выполнять логику middleware.
Пример для формы регистрации, пока прямой маршрут для обработчика, потом это место будет модернизироваться ни один раз.
event.path.startsWith("/api/auth/registr")
Также для регистрации использовал zod для валидации данных, от которого буду отказываться везде в проекте. Сама регистрация пока застряла именно на отдаче данных ошибки от сервера к клиенту и их выводе. Точнее на ошибке, когда пользователь ввел не те данные или почтовый ящик уже используется.
Еще создан маршрут для отдачи информации о включенной регистрации на данный момент.
База данных
Ну и на последок БД. Для удобства всю структуру я вынес в n1ql файл, что бы можно было на новом продовом кластере просто запустить этот файл и вся структура будет сразу же под рукой. А также это позволяет просматривать всю структуру очень удобно, но пока визуально схему так и не сделал...
Также не забывайте про мои игровые стримы, о которых я так же оповещаю на данном дзен канале. На этом у меня все, спасибо, что остаетесь со мной всем спасибо, всем пока.