Merge pull request #29 from HWKDS/update

username field required update
princekhunt · Jun 15, 2024 · 4d7f70b · 4d7f70b
2 parents 4e71c05 + 9ee83e3
commit 4d7f70b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/assets/js/registration/Login.js b/assets/js/registration/Login.js
@@ -3,26 +3,28 @@ document
   .getElementById("username-button")
   .addEventListener("click", function (event) {
     event.preventDefault();
-
-    document.getElementById("username-form").style.transform =
-      "translateX(-400%)";
-    document.getElementById("username-form").style.transition =
-      "transform 0.5s ease-in-out";
-    //wait
-    setTimeout(function () {
-      document.getElementById("username-form").style.display = "none";
-      document.getElementById("password-field").style.display = "flex";
-      document.getElementById("password-field").style.transform =
-        "translateX(300%)";
-      document.getElementById("password-field").style.transition =
-        "transform 0.4s ease-in-out ";
-      setTimeout(function () {
-        document.getElementById("password-field").style.transform =
-          "translateX(0%)";
-        document.getElementById("password").focus();
-      }, 200);
-    }, 400);
-  });
+    const username = document.getElementById("username").value.trim();
+    if (username == "") {
+      document.getElementById("err_mssg").innerHTML = "username is required!";
+      return false 
+    }
+    else {   
+        document.getElementById("err_mssg").innerHTML = ""; 
+        document.getElementById("username-form").style.transform =
+          "translateX(-400%)";
+        document.getElementById("username-form").style.transition =
+          "transform 0.5s ease-in-out";
+        setTimeout(function () {
+          document.getElementById("username-form").style.display = "none";
+          document.getElementById("password-field").style.display = "flex";
+          document.getElementById("password-field").style.transform = "translateX(300%)";
+          document.getElementById("password-field").style.transition = "transform 0.4s ease-in-out ";
+            setTimeout(function () {
+                document.getElementById("password-field").style.transform = "translateX(0%)";
+                document.getElementById("password").focus();
+              }, 200);
+        }, 400);
+  }});
 
 //form submit
 

diff --git a/registration/templates/registration/Login.html b/registration/templates/registration/Login.html
@@ -102,6 +102,7 @@ <h1 style="color: antiquewhite;" id="processing"></h1>
                     {% endif %}
             </div>
             </form>
+            <p id="err_mssg" style="color: rgb(253, 84, 84); font-size: 18px; font-weight: bold; margin-top: 10px;"></p>
             <p style="color:cornsilk; margin-top: 2rem;">Do you know?</p>
             <small style="color: #ccc;">{{fact}}</small>
             <div>