feat: add indication on signup page for at least one uppercase letter requirement

public/validatePassword.js

@@ -1,5 +1,7 @@
-var isMatch = false
+var isMatch = false;
-var isValid = false
+var isValid = false;
+var hasUppercase = false;
+
 function validatePasswords() {
     var password = document.getElementById('password').value;
     var confirmPassword = document.getElementById('confirmPassword').value;
@@ -7,10 +9,14 @@ function validatePasswords() {
     var matchBadPath = document.getElementById('matchBadPath');
     var lengthGoodPath = document.getElementById('lengthGoodPath');
     var lengthBadPath = document.getElementById('lengthBadPath');
+    var uppercaseGoodPath = document.getElementById('uppercaseGoodPath');
+    var uppercaseBadPath = document.getElementById('uppercaseBadPath');
     var matchSvgContainer = document.getElementById('matchSvgContainer');
     var lengthSvgContainer = document.getElementById('lengthSvgContainer');
+    var uppercaseSvgContainer = document.getElementById('uppercaseSvgContainer');
     var matchStatusText = document.getElementById('matchStatusText');
     var lengthStatusText = document.getElementById('lengthStatusText');
+    var uppercaseStatusText = document.getElementById('uppercaseStatusText');
 
     if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
         matchSvgContainer.classList.remove('bg-red-200');
@@ -20,7 +26,7 @@ function validatePasswords() {
         matchGoodPath.style.display = 'inline';
         matchBadPath.style.display = 'none';
         matchStatusText.textContent = "Passwords match";
-        isMatch = true
+        isMatch = true;
     } else {
         matchSvgContainer.classList.remove('bg-green-200');
         matchSvgContainer.classList.add('bg-red-200');
@@ -29,7 +35,7 @@ function validatePasswords() {
         matchGoodPath.style.display = 'none';
         matchBadPath.style.display = 'inline';
         matchStatusText.textContent = "Passwords do not match";
-        isMatch = false
+        isMatch = false;
     }
 
     if (password.length >= 8) {
@@ -40,7 +46,7 @@ function validatePasswords() {
         lengthGoodPath.style.display = 'inline';
         lengthBadPath.style.display = 'none';
         lengthStatusText.textContent = "Password length meets requirement";
-        isValid = true
+        isValid = true;
     } else {
         lengthSvgContainer.classList.remove('bg-green-200');
         lengthSvgContainer.classList.add('bg-red-200');
@@ -49,10 +55,30 @@ function validatePasswords() {
         lengthGoodPath.style.display = 'none';
         lengthBadPath.style.display = 'inline';
         lengthStatusText.textContent = "Password length must be at least 8 characters";
-        isValid = false
+        isValid = false;
     }
 
-    if ( isValid && isMatch) {
+    if (/[A-Z]/.test(password)) {
+        uppercaseSvgContainer.classList.remove('bg-red-200');
+        uppercaseSvgContainer.classList.add('bg-green-200');
+        uppercaseStatusText.classList.remove('text-red-700');
+        uppercaseStatusText.classList.add('text-green-700');
+        uppercaseGoodPath.style.display = 'inline';
+        uppercaseBadPath.style.display = 'none';
+        uppercaseStatusText.textContent = "Password contains an uppercase letter";
+        hasUppercase = true;
+    } else {
+        uppercaseSvgContainer.classList.remove('bg-green-200');
+        uppercaseSvgContainer.classList.add('bg-red-200');
+        uppercaseStatusText.classList.remove('text-green-700');
+        uppercaseStatusText.classList.add('text-red-700');
+        uppercaseGoodPath.style.display = 'none';
+        uppercaseBadPath.style.display = 'inline';
+        uppercaseStatusText.textContent = "Password must contain at least one uppercase letter";
+        hasUppercase = false;
+    }
+
+    if (isValid && isMatch && hasUppercase) {
         document.getElementById("submit").disabled = false;
     } else {
         document.getElementById("submit").disabled = true;

view/client/auth/auth.templ

@@ -49,6 +49,15 @@ templ form(err types.Message, title string) {
                             </div>
                             <span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> Passwords do not match</span>
                         </li>
+                        <li class="flex items-center py-1">
+                            <div id="uppercaseSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
+                                <svg id="uppercaseSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path id="uppercaseGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    <path id="uppercaseBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                </svg>
+                            </div>
+                            <span id="uppercaseStatusText" class="font-medium text-sm ml-3 text-red-700"> Password must contain at least one uppercase letter</span>
+                        </li>
                         <li class="flex items-center py-1">
                             <div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
                                 <svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

view/client/signup/signup.templ

@@ -55,6 +55,15 @@ templ form(err types.Message, title string) {
                             </div>
                             <span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> Passwords do not match</span>
                         </li>
+                        <li class="flex items-center py-1">
+                            <div id="uppercaseSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
+                                <svg id="uppercaseSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path id="uppercaseGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    <path id="uppercaseBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                </svg>
+                            </div>
+                            <span id="uppercaseStatusText" class="font-medium text-sm ml-3 text-red-700"> Password must contain at least one uppercase letter</span>
+                        </li>
                         <li class="flex items-center py-1">
                             <div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
                                 <svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">