-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsrms_signup.html
141 lines (139 loc) · 5.85 KB
/
srms_signup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./srms_signup.css" />
<title>SRMS</title>
<script>
function validateForm(formId) {
let isValid = true;
const formElements = [];//document.querySelectorAll(#${formId}.input);
formElements.forEach(input => {
if (!input.value.trim()) {
isValid = false;
input.style.borderColor = 'red';
} else {
input.style.borderColor = '';
}
});
if (formId === 'signup-form') {
const emailInput = document.getElementById("email");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;;
if (!emailRegex.test(emailInput.value)) {
isValid = false;
emailInput.style.borderColor = 'red';
document.getElementById("email_err").innerHTML = "Invalid email address.";
} else {
document.getElementById("email_err").innerHTML = "";
}
}
return isValid;
}
function processError() {
const queryParamsString = window.location.search.substr(1);
const queryParams = queryParamsString
.split('&')
.reduce((accumulator, singleQueryParam) => {
const [key, value] = singleQueryParam.split('=');
accumulator[key] = decodeURIComponent(value);
return accumulator;
}, {});
console.log(queryParams)
if(queryParams.invalid_user) {
document.getElementById("error_username").innerHTML="Invalid Username";
} else if(queryParams.invalid_pwd) {
document.getElementById("error_password").innerHTML="Invalid password";
}
}
function handleRepeat(formId) {
const pass = document.getElementById("pass").value;
const repeatPass = document.getElementById("repeat_pass").value;
if (pass!== repeatPass) {
document.getElementById("repeat_pass_err").innerHTML = "Passwords don't match!";
document.getElementById("repeat_pass").style.borderColor = 'red';
} else {
document.getElementById("repeat_pass_err").innerHTML = "";
document.getElementById("repeat_pass").style.borderColor = '';
}
}
function handlepass(formId) {
const password = document.getElementById("pass").value;
if (password.length < 8) {
document.getElementById("pass_err").innerHTML = "Password must be at least 8 characters.";
document.getElementById("pass").style.borderColor = 'red';
} else {
document.getElementById("pass_err").innerHTML = "";
document.getElementById("pass").style.borderColor = '';
}
}
function handleChange(event, formId) {
event.preventDefault();
if (validateForm(formId)) {
// Form is valid, proceed with submission
console.log("Form submitted");
} else {
// Form is invalid, show an alert or handle accordingly
alert("Please fill out all fields correctly.");
}
}
</script>
</head>
<body onload="processError()">
<div class="login-wrap">
<div class="login-html">
<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
<div class="login-form">
<form id="signin-form" action="/srms_signin" method="post" >
<div class="sign-in-htm">
<span id="wrong_password" style="color:red"></span>
<div class="group">
<label for="sign_user" class="label">Username</label>
<input id="sign_user" name="sign_user" type="text" class="input" required onChange="document.getElementById('error_username').innerHTML=''">
<span id="error_username" style="color:red"></span>
</div>
<div class="group">
<label for="sign_pass" class="label">Password</label>
<input id="sign_pass" name="sign_pass" type="password" class="input" required data-type="password" onChange="document.getElementById('error_password').innerHTML=''">
<span id="error_password" style="color:red"></span>
</div>
<div class="group">
<a href="./notindex.html"><button type="submit" class="button">Sign In</button></a>
</div>
<div class="hr"></div>
<div class="foot-lnk">
<a href="./forgot.html">Forgot Password?</a>
</div>
</div>
</form>
<form id="signup-form" action="/srms_signup" method="post" >
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" name="user" type="text" class="input" required>
<span id="user_err" style="color:red"></span>
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" name="pass" type="password" class="input" data-type="password" onchange="handlepass()">
<span id="pass_err" style="color:red"></span>
</div>
<div class="group">
<label for="repeat_pass" class="label">Repeat Password</label>
<input id="repeat_pass" name="repeat_pass" type="password" class="input" data-type="password" required onchange="handleRepeat()">
<span id="repeat_pass_err" style="color:red"></span>
</div>
<div class="group">
<label for="email" class="label">Email Address</label>
<input id="email" name="email" type="email" class="input" required>
<span id="email_err" style="color:red"></span>
</div>
<div class="group">
<button class="button" id="sign_up_button" onclick="handleChange()">Sign Up</button>
</div>
<div class="hr"></div>
</div>
</form>
</div>
</div>
</body>
</html>