refactor: extracts form submit button

template and js validation

app/static/css/styles.css

@@ -28,3 +28,10 @@ body {
     margin-bottom: .5rem;  
   }
 }
+
+.submit-button {
+  width: 100%;
+  @media(min-width: 576px) {
+    width: 200px;
+  }
+}

app/static/js/validate-form.js

@@ -0,0 +1,18 @@
+(() => {
+  'use strict'
+
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  const forms = document.querySelectorAll('.needs-validation')
+
+  // Loop over them and prevent submission
+  Array.from(forms).forEach(form => {
+    form.addEventListener('submit', event => {
+      if (!form.checkValidity()) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+
+      form.classList.add('was-validated')
+    }, false)
+  }) 
+})()

app/templates/forms/submit-btn.html

@@ -0,0 +1,3 @@
+{% macro form_submit_button(text) %}
+  <button class="btn btn-outline-primary submit-button" type="submit">{{text}}</button>
+{% endmacro %}

app/templates/users/register.html

@@ -1,5 +1,6 @@
 {% extends "layout/layout.html" %}
 {% from "forms/validation-block.html" import form_field_validation %}
+{% from "forms/submit-btn.html" import form_submit_button %}
 {% from "layout/inner_header.html" import inner_header%} 
 {% block title %} register {% endblock %}
 {% block head %} 
@@ -90,36 +91,20 @@
         {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
       </div>
       <div class="col-12 text-center">
-        <button class="btn btn-outline-primary register__form-button" type="submit">Register</button>
+        {{ form_submit_button("Register") }}
       </div>
     </form>
   </div>
 </div>
+<script src="{{ url_for('static', filename='js/validate-form.js') }}"></script>
 <script>
-  (() => {
+(() => {
   'use strict'
-
+  const password = document.getElementById("password");
-  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  const password_validation = document.getElementById("password-confirmation");
-  const forms = document.querySelectorAll('.needs-validation')
-
-  // Loop over them and prevent submission
-  Array.from(forms).forEach(form => {
-    form.addEventListener('submit', event => {
-      if (!form.checkValidity()) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-
-      form.classList.add('was-validated')
-    }, false)
-  })
-
-  const password = document.getElementById("password")
-  const password_validation = document.getElementById("password-confirmation")
   password.addEventListener('change', (c) => {
-    password_validation.setAttribute("pattern", c.target.value)
+    password_validation.setAttribute("pattern", c.target.value);
-  })
+  });
- 
 })()
 </script>
 {% endblock %}