From 5030eb42cecf4ebc31615d888e31ad93a1eef6ea Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Thu, 21 Nov 2024 13:00:11 -0300
Subject: [PATCH] refactor: extracts form submit button template and js
 validation

---
 app/static/css/styles.css           |  7 +++++++
 app/static/js/validate-form.js      | 18 +++++++++++++++++
 app/templates/forms/submit-btn.html |  3 +++
 app/templates/users/register.html   | 31 ++++++++---------------------
 4 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 app/static/js/validate-form.js
 create mode 100644 app/templates/forms/submit-btn.html

diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index 7d2e7f9..2f8cef0 100644
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -27,4 +27,11 @@ body {
   @media(min-width: 576px) {
     margin-bottom: .5rem;  
   }
+}
+
+.submit-button {
+  width: 100%;
+  @media(min-width: 576px) {
+    width: 200px;
+  }
 }
\ No newline at end of file
diff --git a/app/static/js/validate-form.js b/app/static/js/validate-form.js
new file mode 100644
index 0000000..f847b35
--- /dev/null
+++ b/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)
+  }) 
+})()
\ No newline at end of file
diff --git a/app/templates/forms/submit-btn.html b/app/templates/forms/submit-btn.html
new file mode 100644
index 0000000..507948d
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/app/templates/users/register.html b/app/templates/users/register.html
index 15e3135..eb9695f 100644
--- a/app/templates/users/register.html
+++ b/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'
-
-  // 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)
-  })
-
-  const password = document.getElementById("password")
-  const password_validation = document.getElementById("password-confirmation")
+  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 %}
\ No newline at end of file