Skip to content

Commit 342dfde

Browse files
authored
Merge pull request #908 from Lochipi/ft/user-registration-validation
Enhance User Registration with Input Validation and Success Feedback
2 parents 41a544d + 691d405 commit 342dfde

File tree

3 files changed

+58
-8
lines changed

3 files changed

+58
-8
lines changed

apps/signup/signup.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@ body {
44
font-family: 'Roboto', sans-serif;
55
overflow-x: hidden;
66
}
7+
.popup {
8+
position: fixed;
9+
top: 10%;
10+
right: 5%;
11+
max-width: 300px;
12+
height: 50px;
13+
padding: 10px;
14+
background-color: #28a745;
15+
color: #fff;
16+
text-align: center;
17+
border-radius: 5px;
18+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
19+
z-index:9999;
20+
}
721
.bg-dark {
822
background-color: #343a40!important;
923
}

apps/signup/signup.html

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@
6666
style="text-align:center; background: #17a2b8; font-size: xx-large; color: white; padding: 4px; border-radius: 5px 5px 0px 0px;">
6767
caMicroscope
6868
</div>
69-
<!-- <hr style="width: 24.25em; height: 0.01em; background-color: black; margin-top: 0em; margin-bottom: 0;"> -->
7069

7170
<form id="userForm" onsubmit="return false;">
7271
<h2 style="margin-top: -.5em;">User Signup</h2>
@@ -77,17 +76,18 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
7776
<div class="form-group">
7877
<div class="input-group">
7978
<span class="input-group-addon"><i class="fa fa-envelope" style="margin-top: 0.5em;"></i></span>
80-
<input id="mail" type="email" class="form-control" name="email" placeholder="Email" >
79+
<input id="mail" type="email" class="form-control" name="email" placeholder="Email">
8180
</div>
82-
<div id="emailerror" class="error-message"></div>
81+
<div id="emailError" class="error-message text-danger"></div>
82+
8383
</div>
8484
<br>
8585
<div class="form-group">
8686
<div class="input-group">
8787
<span class="input-group-addon"><i class="fa fa-th-list" style="margin-top: 0.5em;"></i></span>
88-
<input type="text" id="filters" class="form-control" placeholder="['list','of','filters']"
89-
required="required">
88+
<input type="text" id="filters" class="form-control" placeholder="['list','of','filters']">
9089
</div>
90+
<div id="filtersError" class="error-message ml-1 text-danger"></div>
9191
</div> <br>
9292

9393
<!-- User Type selection -->
@@ -105,9 +105,11 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
105105
</button>
106106
<div class="text-center text-primary" onclick="loginPage()" style="margin-top: 0.5em;">Already have an account? </div>
107107
</div>
108+
108109
<!-- <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
109110
access. Email the administrator if you want to be added.</p> -->
110111
<p id="info" class="small text-center;">
112+
111113
Non-admin users have to submit a request ticket to admins to get their approval to signup new users.
112114
If you are an Admin, you can directly signup users.
113115
</p>
@@ -116,7 +118,9 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
116118

117119
<footer id="footer-layout"></footer>
118120
<!-- popup -->
119-
<div id="popup-container"></div>
121+
<div id="successPopup" class="alert alert-success popup" role="alert" style="display:none;">
122+
User registered successfully!
123+
</div>
120124

121125
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
122126
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"

apps/signup/signup.js

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ var userSignupUrl = "../../data/User/post";
22
var protoTokenUrl = "../../auth/Token/proto";
33
var permissions;
44
const store = new Store('../../data/');
5+
var emailError = document.getElementById("emailError");
6+
var filtersError = document.getElementById("filtersError");
7+
8+
// Validation function for email
9+
function validateEmail(email) {
10+
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
11+
}
12+
13+
// Validation function for filters
14+
function validateFilters(filters) {
15+
return filters.trim() !== ''; // Basic validation: ensuring it's not empty
16+
}
517

618
function addUser(){
719
var email = document.getElementById("mail").value
@@ -10,6 +22,20 @@ function addUser(){
1022
var attrEle = document.getElementById("attr");
1123
var attr = attrEle.options[attrEle.selectedIndex].value;
1224
var emailErr = document.getElementById('emailerror');
25+
// Clear previous error messages
26+
emailError.style.display = "none";
27+
filtersError.style.display = "none";
28+
29+
if (!validateEmail(email)) {
30+
emailError.style.display = "block";
31+
emailError.innerHTML = "Please enter a valid email address.";
32+
return;
33+
}
34+
35+
if (!validateFilters(filters)) {
36+
filtersError.style.display = "block";
37+
filtersError.innerHTML = "Please enter atleast one filter.";
38+
return;
1339

1440
if (email === '') {
1541
emailErr.textContent = 'Please enter your email';
@@ -88,7 +114,14 @@ function addUser(){
88114
}
89115
x.json()
90116
}).then(x=>{
91-
window.alert("User registered successfully");
117+
// Show success popup
118+
document.getElementById("successPopup").style.display = "block";
119+
document.getElementById('mail').value = '';
120+
document.getElementById('filters').value = '';
121+
122+
setTimeout(function(){
123+
document.getElementById("successPopup").style.display = "none";
124+
}, 3000)
92125
}).catch(e=>{
93126
// window.alert("error!")
94127
console.error(e)
@@ -99,7 +132,6 @@ function addUser(){
99132
}
100133
});
101134
}
102-
103135
$(window).on('load', function() {
104136
$('#sub').text('Sign up');
105137
$('#sub').removeAttr('disabled');

0 commit comments

Comments
 (0)