Consider using HTMX instead of React

[php-coder]

We should evaluate HTMX (https://htmx.org) and if it's good, let's use it instead of React (see #1328), our own jQuery code (see also #1211) and axios (#1497).

Useful links:

• [x] https://www.dev-notes.ru/articles/javascript/htmx-introduction/ 🇷🇺 (htmx-indicator might be useful)
• [x] https://htmx.org/extensions/loading-states/ data-loading-disable
• [x] https://htmx.org/extensions/json-enc/ json-enc
• [x] https://htmx.org/extensions/response-targets/
• [x] https://htmx.org/extensions/include-vals/
• [x] https://htmx.org/extensions/client-side-templates/
• [x] https://dev.to/yosephtenaw/use-htmx-with-spring-boot-and-thymeleaf-18g9 (pinboard)
• [x] https://refine.dev/blog/what-is-htmx/
• commands:
  • https://htmx.org/attributes/hx-swap/
  • https://htmx.org/attributes/hx-target/
  • https://htmx.org/attributes/hx-select-oob/
  • https://htmx.org/attributes/hx-disabled-elt/
  • https://htmx.org/attributes/hx-headers/
  • https://htmx.org/attributes/hx-patch/

TODO:

• [ ] port AddCommentForm
  • [ ] close #1489
  • [ ] close #1500
  • [ ] close #1544
  • [x] use or remove code for handling /comment from RestSeriesController.updateSeries()
  • [x] submit data on a server, get a response and update a page
  • [x] disable submit button during a server request (see hx-disabled-elt)
  • [x] show field's errors
  • [x] show global errors (listen for htmx:responseError event)
  • [x] deal with CSP (FF: Content Security Policy: Параметры страницы зарегистрировали загрузку ресурса на inline («style-src»). Был отправлен отчёт CSP. Source: .htmx-indicator{opacity:0} .htmx-request .htmx-indicator{opacity:1; transition: opacity 200ms ease-in;} .htmx-request.htmx-indicator{opacity:1; transition: opacity 200ms ease-in;}
  • [x] check how admin sees multiple comments (todo from code)
  • [x] pull up fix for highlighting a form-group instead of a whole form
• [x] port AddCatalogNumbersForm.js
  • [ ] close #1488
  • [x] submit data on a server
  • [x] update a page from a response
    • [ ] find a way to update a page without full reload
  • [x] disable submit button during a server request
  • [x] show field's errors
  • [x] show global errors
  • [x] extract renaming id:numbers-catalog-name => id:catalog-name
  • [ ] register StringTrimmerEditor for all String values
  • [ ] clear out a field with numbers after submission
• [ ] port AddCatalogPriceForm.js
  • [ ] close #1487
  • [x] remove old form
  • [x] add form
  • [x] fix markup (for server rendering and for prototype)
  • [ ] submit data on a server, get a response and update a page
  • [ ] show field's errors
  • [x] show global errors
  • [ ] check that #1394 has been migrated successfully
  • [ ] pull up fix for highlighting a form-group instead of a whole form
• [ ] port AddReleaseYearForm.js
  • [ ] close #1491
  • [ ] remove old form
  • [ ] add form
  • [ ] fix markup (for server rendering and for prototype)
  • [ ] submit data on a server, get a response and update a page
  • [ ] show field's errors
  • [ ] show global errors
• [ ] port HideImageForm.js
  • [ ] close #1543
  • [ ] remove old form
  • [ ] add form
  • [ ] fix markup (for server rendering and for prototype)
  • [ ] submit data on a server, get a response and update a page
  • [ ] show field's errors
  • [ ] show global errors
• [ ] port SeriesSaleImportForm.js
  • [ ] close #1073
  • [ ] close #1074
  • [ ] remove old form
  • [ ] add form
  • [ ] fix markup (for server rendering and for prototype)
  • [ ] submit data on a server, get a response and update a page
  • [ ] show field's errors
  • [ ] show global errors
• [ ] port SeriesSalesList.js
  • [ ] close #1490
  • [ ] remove old form
  • [ ] add form
  • [ ] fix markup (for server rendering and for prototype)
  • [ ] submit data on a server, get a response and update a page
  • [ ] show field's errors
  • [ ] show global errors
  • [ ] remove USE_REACT togglz feature
• [ ] port SimilarSeriesForm.js
  • [ ] close #1317
  • [ ] remove old form
  • [ ] add form
  • [ ] fix markup (for server rendering and for prototype)
  • [ ] submit data on a server, get a response and update a page
  • [ ] show field's errors
  • [ ] show global errors
• [ ] remove RestSeriesController
  • #1437
    • [x] move comment from RestSeriesController to AddCatalogNumbersForm
    • [ ] fix
  • #1434
    • [ ] move comment from RestSeriesController to AddCatalogPriceForm
    • [ ] fix
  • [ ] close #1424
  • [ ] close #1412
  • [ ] close #1413
• [ ] improve security configuration
  • [ ] https://htmx.org/docs/#htmx-security-tools
  • [ ] https://htmx.org/essays/web-security-basics-with-htmx/
• [ ] add loading indicator
• [ ] revert id renaming (7ee6328cd129361389c5718ed66b1a6cdca3b967)
• [ ] consider using animation for element's removal and appending
• [x] consider disabling requests caching (by sending Cache-Control: no-store header)
• [ ] remove react dependency
• [ ] remove axios dependency (it was a workaround for FetchAPI and htmlunit and we don't need it at all now)
• [ ] consider removing: jquery, jest, babel, webpack, frontend-maven-plugin (altogether with frontend maven profile), togglz
• [ ] unbreak integration tests and decide how to proceed
• [x] consider setting CSRF token globally (see https://github.com/wimdeblauwe/htmx-spring-boot/issues/36#issuecomment-1497169466)
• [x] return 422 for failed validation