From 037ec4eee9af7e540d2c56bcd074ec7d98c4adf2 Mon Sep 17 00:00:00 2001
From: Dave Smith-Hayes <me@davesmithhayes.com>
Date: Sat, 16 Nov 2024 21:44:55 -0500
Subject: [PATCH] Add user registration validation

---
 app/public/static/js/register.js | 19 +++++++++++++++++++
 app/templates/user/register.twig | 20 ++++----------------
 2 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 app/public/static/js/register.js

diff --git a/app/public/static/js/register.js b/app/public/static/js/register.js
new file mode 100644
index 0000000..25ece55
--- /dev/null
+++ b/app/public/static/js/register.js
@@ -0,0 +1,19 @@
+const form = document.getElementById("login-form");
+form.addEventListener('submit', function (e) {
+  e.preventDefault();
+
+  // validate form
+  const p1 = document.querySelector('input[name="password"]');
+  const p2 = document.querySelector('input[name="checked_password"]'); 
+  
+  if (p1.value == p2.value) {
+    console.log("Passwords match");
+    form.submit();
+  } else {
+    console.log("Passwords do not match");
+    // do something with the forms
+    p1.setAttribute('style', 'border: 1px solid red');
+    p2.setAttribute('style', 'border: 1px solid red');
+  }
+});
+
diff --git a/app/templates/user/register.twig b/app/templates/user/register.twig
index 463d169..d677800 100644
--- a/app/templates/user/register.twig
+++ b/app/templates/user/register.twig
@@ -1,5 +1,9 @@
 {% extends 'layouts/skeleton.twig' %}
 
+{% block head_js %}
+<script async src="/static/js/register.js"></script>
+{% endblock %}
+
 {% block content %}
 <div>
     <form action="/register" method="post" id="login-form">
@@ -26,19 +30,3 @@
 </div>
 {% endblock %}
 
-{% block bod_js %}
-<script type="javascript">
-const form = document.getElementById("login-form");
-form.addEventListener('submit', function (e) {
-    e.preventDefault();
-
-    // validate form
-    const [p1] = document.querySelector('input[name="password"]');
-    const [p2] = document.querySelector('input[name="checked_password"]'); 
-
-    if (p1.getAttribute("value") == p2.getAttribute("value")) {
-        return this.submit();
-    }
-});
-</script>
-{% endblock %}