Разрабатываем форму авторизации на React, XState, MobX

В этой статье мы поговорим про инструмент из серии "как я раньше без него жил" XState
Он не только для React, а для чего угодно - eсть модули для Vue, Svelte и можно свое написать для любого фреймворка


Мне в React всегда не нравились smart компоненты. Это когда в компонент намешано куча useState, useEffect, бизнес логика и вот это вот все.

Вынос всего этого добра в хуки с одной стороны решает проблему, но вся эта мешанина просто едет в хук. Особенную боль в этом случае доставляет form logic...

Вот возьмем например форму входа на сайт. Казалось бы, что там делать? 2 инпута, кнопка, дернули API, авторизовали - PROFIT!

Однако, если включить голову сделать аналитику фичи более детально, окажется, что не все так просто:

1. Форма входа должна обрабатывать ошибки ввода
2. Форма входа не должна показывать ошибки пока поле не заполнено
3. Ошибка поля должна пропадать после ввода данных
4. Поле должно валидироваться явно (с показом ошибки) только после blur события
5. Не должно быть возможность отправить форму, пока есть ошибки валидации
6. Поля должны валидироваться не явно, для требования 5
7. После нажатия на кнопку отправки формы, кнопка должна исчезать и исключать повторную отправку формы
8. Ошибки сервера должны выводится в читаемом виде и не блокировать повторную отправку формы
9. После успешной авторизации форма не должна выводится. Вместо этого должно показываться сообщение, что пользователь уже авторизован

Вот так. 9 требований для простой формы авторизации из 2 полей без всяких там 2FA.

Я думаю вы уже представили как это реализовывать...

Но здесь нам приходит на помощь... дискретная математика...
Далее с картинками, мемчиками и кодом тут https://bearlogin.dev/blog/xstate-react-mobx-form-logic

Это мой новый сайт, который я собрал за вечер и залил на vdsina. https://vdsina.ru/?partner=pu792sk4w7 - вот ссылка на 10% скидоса вам, и 10% вознаграждения мне

Upd. Фиксанул отображение статьи на мобиле

#frontend #react #xstate #mobx #tutorials

Автодополнение для alias в bash

Раньше я перезагружал сервис в docker stack руками - через docker ps брал id контейнеров и рестартил.

Затем я почитал доку :) и нашел там такую команду
docker service update --force --update-parallelism 1 --update-delay 30s redis

Очень удобно, ничего не скажешь...

Для удобства сделал alias в .bashrc
alias service-restart='docker service update --force --update-parallelism 1 --update-delay 30s '

Теперь уже лучше. Для перезагрузки контейнеров нужно всего лишь написать
service-restart huntica_front

Но хотелось бы автокомплита, чтобы подставлял сервисы...

Нашел восхитительную утилиту https://github.com/cykerway/complete-alias

Пишем в .bashrc следующий код
source ~/.bash_completion.d/complete_alias
alias service-restart='docker service update --force --update-parallelism 1 --update-delay 30s '
complete -F _complete_alias service-restart

И magic...

#tutorials #bash #devops