Merge pull request #908 from Lochipi/ft/user-registration-validation

Enhance User Registration with Input Validation and Success Feedback

Author: birm

apps/signup/signup.css

@@ -4,6 +4,20 @@ body {
 	font-family: 'Roboto', sans-serif;
 	overflow-x: hidden;
 }
+.popup {
+	position: fixed;
+	top: 10%;
+	right: 5%;
+	max-width: 300px;
+	height: 50px;
+	padding: 10px;
+	background-color: #28a745;
+	color: #fff;
+	text-align: center;
+	border-radius: 5px;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	z-index:9999;
+}
 .bg-dark {
     background-color: #343a40!important;
 }

apps/signup/signup.html

@@ -66,7 +66,6 @@
         style="text-align:center; background: #17a2b8; font-size: xx-large; color: white; padding: 4px; border-radius: 5px 5px 0px 0px;">
         caMicroscope
       </div>
-      <!-- <hr style="width: 24.25em;  height: 0.01em; background-color: black; margin-top: 0em; margin-bottom: 0;"> -->
 
       <form id="userForm" onsubmit="return false;">
         <h2 style="margin-top: -.5em;">User Signup</h2>
@@ -77,17 +76,18 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
         <div class="form-group">
           <div class="input-group">
             <span class="input-group-addon"><i class="fa fa-envelope" style="margin-top: 0.5em;"></i></span>
-            <input id="mail" type="email" class="form-control" name="email" placeholder="Email" >
+            <input id="mail" type="email" class="form-control" name="email" placeholder="Email">
           </div>
-          <div id="emailerror" class="error-message"></div>
+          <div id="emailError" class="error-message text-danger"></div> 
+
         </div>
         <br>
         <div class="form-group">
           <div class="input-group">
             <span class="input-group-addon"><i class="fa fa-th-list" style="margin-top: 0.5em;"></i></span>
-            <input type="text" id="filters" class="form-control" placeholder="['list','of','filters']"
-              required="required">
+            <input type="text" id="filters" class="form-control" placeholder="['list','of','filters']">
           </div>
+          <div id="filtersError" class="error-message ml-1 text-danger"></div>
         </div> <br>
 
         <!-- User Type selection -->
@@ -105,9 +105,11 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
           </button>
           <div class="text-center text-primary" onclick="loginPage()" style="margin-top: 0.5em;">Already have an account? </div>
         </div>
+
         <!-- <p class="small text-center">This form is only useful to Admin users. If you reach this page, it's likely that you tried to log into this instance but lack
           access. Email the administrator if you want to be added.</p> -->
         <p id="info" class="small text-center;">
+          
           Non-admin users have to submit a request ticket to admins to get their approval to signup new users.
           If you are an Admin, you can directly signup users.
         </p>
@@ -116,7 +118,9 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
 
     <footer id="footer-layout"></footer>
     <!-- popup -->
-    <div id="popup-container"></div>
+  <div id="successPopup" class="alert alert-success popup" role="alert" style="display:none;">
+    User registered successfully!
+  </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
             integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 

apps/signup/signup.js

@@ -2,6 +2,18 @@ var userSignupUrl = "../../data/User/post";
 var protoTokenUrl = "../../auth/Token/proto";
 var permissions;
 const store = new Store('../../data/');
+var emailError = document.getElementById("emailError");
+var filtersError = document.getElementById("filtersError");
+
+// Validation function for email
+function validateEmail(email) {
+  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
+}
+
+// Validation function for filters
+function validateFilters(filters) {
+  return filters.trim() !== ''; // Basic validation: ensuring it's not empty
+}
 
 function addUser(){
   var email = document.getElementById("mail").value
@@ -10,6 +22,20 @@ function addUser(){
   var attrEle = document.getElementById("attr");
   var attr = attrEle.options[attrEle.selectedIndex].value;
   var emailErr = document.getElementById('emailerror');
+  // Clear previous error messages
+  emailError.style.display = "none";
+  filtersError.style.display = "none";
+
+  if (!validateEmail(email)) {
+    emailError.style.display = "block";
+    emailError.innerHTML = "Please enter a valid email address.";
+    return;
+  }
+
+  if (!validateFilters(filters)) {
+    filtersError.style.display = "block";
+    filtersError.innerHTML = "Please enter atleast one filter.";
+    return;
 
   if (email === '') {
     emailErr.textContent = 'Please enter your email';
@@ -88,7 +114,14 @@ function addUser(){
             }
             x.json()
           }).then(x=>{
-            window.alert("User registered successfully");
+             // Show success popup
+            document.getElementById("successPopup").style.display = "block";
+            document.getElementById('mail').value = '';
+            document.getElementById('filters').value = '';
+
+            setTimeout(function(){
+              document.getElementById("successPopup").style.display = "none";
+            }, 3000)
           }).catch(e=>{
             // window.alert("error!")
             console.error(e)
@@ -99,7 +132,6 @@ function addUser(){
     }
   });
 }
-
 $(window).on('load', function() {
   $('#sub').text('Sign up');
   $('#sub').removeAttr('disabled');