FIX: turnstile captchas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "version": "5.2.7",
+  "version": "5.2.8",
   "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
   "author": "Tony Air <tony@twma.pro>",
   "license": "BSD-2-Clause",

sass-lint.yml

@@ -41,9 +41,7 @@ rules:
   indentation:
     - 2
     - size: 4
-  final-newline:
+  final-newline: false
-    - 2
-    - include: true
   no-trailing-whitespace: 2
   border-zero:
     - 2

src/js/ui/turnstile.js

@@ -4,7 +4,8 @@ const NAME = 'uiTurnstile'
 const SELECTOR = '.cf-turnstile'
 
 const init = () => {
-  if (!document.querySelectorAll(SELECTOR).length) {
+  const captchas = document.querySelectorAll(SELECTOR)
+  if (!captchas.length) {
     console.log(`${NAME}: No Captcha fields.`)
     return
   }
@@ -15,7 +16,9 @@ const init = () => {
   }
 
   console.log(`${NAME}: init`)
-  window.turnstile.render(SELECTOR)
+  captchas.forEach((el) => {
+    window.turnstile.render(el)
+  })
 }
 
 

src/scss/layout/forms/basics.scss

@@ -26,6 +26,10 @@
 
   &.CompositeField {
     flex-direction: column;
+
+    &.row {
+      flex-direction: row;
+    }
   }
 
   &__alert {
@@ -47,8 +51,16 @@
   }
 }
 
-.form__field input.password {
+.form {
+  &__field {
+    input.password {
       @extend .form-control;
+    }
+
+    iframe {
+      width: 100% !important;
+    }
+  }
 }
 
 .form__fieldset {