From bbb1b251487b886757d6523494ed4bdeb4887aca Mon Sep 17 00:00:00 2001
From: Cornelius Emase <corneliuslochipi@gmail.com>
Date: Fri, 29 Mar 2024 14:07:43 +0300
Subject: [PATCH] feat: implementinput validation

---
 apps/signup/signup.css  | 14 ++++++++++++++
 apps/signup/signup.html | 14 +++++++-------
 apps/signup/signup.js   | 37 +++++++++++++++++++++++++++++++++----
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index 40d071bfb..612ff3e60 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -7,6 +7,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;
 }
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index 55fdaaa02..78a91ab59 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -64,7 +64,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>
@@ -75,16 +74,17 @@ <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" required="required">
+            <input id="mail" type="email" class="form-control" name="email" placeholder="Email">
           </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 -->
@@ -102,8 +102,6 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
             </button>
         </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 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.
@@ -115,7 +113,9 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
       <p class="p">Copyright <span id="currentYear"></span> caMicroscope</p>
     </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/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" 
             integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 
diff --git a/apps/signup/signup.js b/apps/signup/signup.js
index 30cd39dfc..5e558bcb2 100644
--- a/apps/signup/signup.js
+++ b/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,8 +22,19 @@ function addUser(){
   var attrEle = document.getElementById("attr");
   var attr = attrEle.options[attrEle.selectedIndex].value;
 
-  if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))) {
-    window.alert("Please enter a valid email");
+  // 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;
   }
 
@@ -85,7 +108,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)
@@ -96,7 +126,6 @@ function addUser(){
     }
   });
 }
-
 $(window).on('load', function() {
   $('#sub').text('Sign up');
   $('#sub').removeAttr('disabled');