upd: home

Add input-error style for validation feedback

assets/js/register.js

@@ -1,8 +1,7 @@
 // Get references to the form elements
-const nameInput = document.getElementById("name");
-const emailInput = document.getElementById("emailAddress");
-const passwordInput = document.getElementById("password");
-const confirmPasswordInput = document.getElementById("confirmPassword");
+const nameInput = document.getElementById("registration_form_name");
+const emailInput = document.getElementById("registration_form_email");
+const passwordInput = document.getElementById("registration_form_plainPassword");
 const csrfToken = document.getElementById("registration_form__token").value;
 
 // Add event listeners to the form
@@ -18,25 +17,18 @@ function handleSubmit(event) {
     const name = nameInput.value;
     const email = emailInput.value;
     const password = passwordInput.value;
-    const confirmPassword = confirmPasswordInput.value;
 
     if (name === "" || email === "" || password === "") {
         alert("Please fill in all fields.");
         return;
     }
 
-    if (password !== confirmPassword) {
-        alert("Passwords do not match.");
-        return;
-    }
-
     // Send data to server for processing
     const data = {
         "name": name,
         "email": email,
-        "password": password,
         "plainPassword": password,
-        "csrf_token": csrfToken
+        "_token": csrfToken
     };
 
     fetch("/register", {

assets/js/script.js

@@ -95,6 +95,13 @@ function saveNote(event) {
         event.preventDefault();
     }
 
+    document.querySelector('#noteTitle').classList.remove('input-error');
+    document.querySelector('#noteDate').classList.remove('input-error');
+    document.querySelector('#speaker').classList.remove('input-error');
+    document.querySelector('#series').classList.remove('input-error');
+    document.querySelector('#passage').classList.remove('input-error');
+    document.querySelector('#notes').classList.remove('input-error');
+
     if (!textDirty || !validateNote()) {
         clearTimeout(to);
         to = setTimeout(saveNote, saveInterval);
@@ -174,14 +181,20 @@ function validateNote() {
     const title = document.querySelector('#noteTitle');
     const psg = document.querySelector('#passage');
 
-    if (!title.value.length) { return false; }
-    if (!date.value) { return false; }
-    if (!parseInt(speaker.value)) { return false; }
-    if (!parseInt(series.value)) { return false; }
-    if (!psg.value) { return false; }
-    if (!note.value.length) { return false; }
+    let ret = true;
 
-    return true;
+    if (!title.value.length) { title.classList.add('input-error'); ret = false; }
+    if (!date.value) { date.classList.add('input-error'); ret = false; }
+    if (!parseInt(speaker.value)) { speaker.classList.add('input-error'); ret = false; }
+    if (!parseInt(series.value)) { series.classList.add('input-error'); ret = false; }
+    if (!psg.value) { psg.classList.add('input-error'); ret = false; }
+    if (!note.value.length) { note.classList.add('input-error'); ret = false; }
+
+    if (!ret) {
+        toggleFields(true);
+    }
+
+    return ret;
 }
 
 /**
@@ -506,20 +519,21 @@ function removeActiveRef() {
 /**
  * Toggles the visibility of the fields container and updates the active state of the show/hide button.
  *
+ * @param boolean show
  * @return {void}
  */
-function toggleFields() {
+function toggleFields(show = false) {
     const fieldsContainer = document.getElementById('fields-container');
     const showHideBtn = document.getElementById('show-hide-btn');
 
-    if (fieldsContainer.classList.contains('show')) {
-        fieldsContainer.classList.remove('show');
-        fieldsContainer.style.display = 'none';
-        showHideBtn.classList.remove('active');
-    } else {
+    if (show || !fieldsContainer.classList.contains('show')) {
         fieldsContainer.classList.add('show');
         fieldsContainer.style.display = 'block';
         showHideBtn.classList.add('active');
+    } else {
+        fieldsContainer.classList.remove('show');
+        fieldsContainer.style.display = 'none';
+        showHideBtn.classList.remove('active');    
     }
 
     setHeight();

src/Form/RegistrationFormType.php

@@ -43,6 +43,9 @@ class RegistrationFormType extends AbstractType
     {
         $resolver->setDefaults([
             'data_class' => User::class,
+            'csrf_protection' => true,
+            'csrf_field_name' => '_token',
+            'csrf_token_id' => 'registration',
         ]);
     }
 }

templates/default/home.html.twig

@@ -16,6 +16,9 @@
 button.button i {
     font-size: 1.5em;
 }
+.input-error {
+    border: solid 2px red !important;
+}
 </style>
 {% endblock %}