From 4f658a004e576d9279c2b3dee24e436a353b39d0 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Sat, 8 Feb 2025 17:29:46 +0200
Subject: feat(views/user): Register has better validation and error messages

---
 views/user/create/index.php | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

(limited to 'views')

diff --git a/views/user/create/index.php b/views/user/create/index.php
index 4bec861..223ab9b 100644
--- a/views/user/create/index.php
+++ b/views/user/create/index.php
@@ -15,7 +15,35 @@
         <?php endif; ?>
     <?php endif; ?>
 
-    <input type="text" name="username" placeholder="Username" minlength="1" pattern="[A-Za-z][A-Za-z_0-9]*">
-    <input type="password" name="password" placeholder="Password" minlength="4">
+    <input id="name" type="text" name="username" placeholder="Username" minlength="1" pattern="[A-Za-z][A-Za-z_0-9]*" required>
+    <input id="pass1" type="password" name="password" placeholder="Password" minlength="4" required>
+    <input id="pass2" type="password" name="password" placeholder="Confirm password" minlength="4" required>
     <input type="submit" value="Register">
 </form>
+
+<script type="text/javascript">
+const name = document.getElementById('name');
+name.onkeyup = function () {
+    if (!name.reportValidity()) {
+        name.setCustomValidity('Username must start with a character and must be composed of characters, digits and underscores!');
+    }
+    else {
+        name.setCustomValidity('');
+    }
+}
+
+const pass1 = document.getElementById('pass1');
+const pass2 = document.getElementById('pass2');
+
+function validatePasswords() {
+    if (pass1.value !== pass2.value) {
+        pass2.setCustomValidity('Passwords do not match!');
+    }
+    else {
+        pass2.setCustomValidity('');
+    }
+}
+
+pass1.onchange = validatePasswords;
+pass2.onkeyup = validatePasswords;
+</script>
-- 
cgit v1.2.3