feat(main): Add base theme: This is the falcon theme out of the box.

This is falcon v3.1.2

_dev/js/theme/components/form.js

@@ -0,0 +1,109 @@
+import $ from 'jquery';
+
+const supportedValidity = () => {
+  const input = document.createElement('input');
+
+  return (
+    'validity' in input
+    && 'badInput' in input.validity
+    && 'patternMismatch' in input.validity
+    && 'rangeOverflow' in input.validity
+    && 'rangeUnderflow' in input.validity
+    && 'tooLong' in input.validity
+    && 'tooShort' in input.validity
+    && 'typeMismatch' in input.validity
+    && 'valid' in input.validity
+    && 'valueMissing' in input.validity
+  );
+};
+
+export default class Form {
+  static init() {
+    Form.parentFocus();
+    Form.togglePasswordVisibility();
+    Form.formValidation();
+  }
+
+  static parentFocus() {
+    $('.js-child-focus').on('focus', ({ target }) => {
+      $(target).closest('.js-parent-focus').addClass('focus');
+    });
+    $('.js-child-focus').on('focusout', ({ target }) => {
+      $(target).closest('.js-parent-focus').removeClass('focus');
+    });
+  }
+
+  static togglePasswordVisibility() {
+    $('[data-action="show-password"]').on('click', (e) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+
+      const $btn = $(e.currentTarget);
+      const $input = $btn
+        .closest('.input-group')
+        .children('input.js-visible-password');
+
+      if ($input.attr('type') === 'password') {
+        $input.attr('type', 'text');
+        $btn.html($btn.data('text-hide'));
+      } else {
+        $input.attr('type', 'password');
+        $btn.html($btn.data('textShow'));
+      }
+    });
+  }
+
+  static formValidation() {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    const forms = document.getElementsByClassName('needs-validation');
+
+    if (forms.length > 0) {
+      if (!supportedValidity()) {
+        return;
+      }
+      // Loop over them and prevent submission
+      let divToScroll = false;
+
+      $('input, textarea', forms).on('blur', (e) => {
+        const $field = $(e.currentTarget);
+        $field.val($field.val().trim());
+      });
+
+      Array.prototype.filter.call(forms, (form) => {
+        form.addEventListener(
+          'submit',
+          (event) => {
+            if (form.checkValidity() === false) {
+              event.preventDefault();
+              event.stopPropagation();
+              $('input:invalid,select:invalid,textarea:invalid', form).each((index, field) => {
+                const $field = $(field);
+                const $parent = $field.closest('.form-group');
+
+                $('.js-invalid-feedback-browser', $parent).text(
+                  $field[0].validationMessage,
+                );
+                if (!divToScroll) {
+                  divToScroll = $parent;
+                }
+              });
+
+              const $form = $(form);
+              $form.data('disabled', false);
+              $form.find('[type="submit"]').removeClass('disabled');
+            }
+            form.classList.add('was-validated');
+            if (divToScroll) {
+              $('html, body').animate(
+                { scrollTop: divToScroll.offset().top },
+                300,
+              );
+              divToScroll = false;
+            }
+          },
+          false,
+        );
+      });
+    }
+  }
+}