232 lines
5.6 KiB
HTML
232 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<header></header>
|
|
<main>
|
|
<div class="content" id="js-content">
|
|
<h1>UWP Community Registration Portal</h1>
|
|
<p style="font-size: 12px; position: relative; bottom: 30px">Created by: Evan Niederwerfer at UW-Platteville</p>
|
|
<form method="post" action="otp.html">
|
|
<center>
|
|
|
|
<div style="display: block;">
|
|
<label for="email">Email:</label>
|
|
<input type="email" name="email" id="email" style="width: 350px;" onchange="check_email();">
|
|
<p class="valid-email" id="valid">Email meets all requirements</p>
|
|
<p class="not-email" id="notvalid">Email must be of valid format and end in @uwplatt.edu</p>
|
|
<p id="email_empty" style="color:red; font-size: 14px; margin-right: 310px;"></p>
|
|
</div>
|
|
|
|
<div style="display: block; position: relative; left:4.5%;">
|
|
<div>
|
|
<label for="passwd" class="passwd-label">Password:</label>
|
|
<input type="password" name="passwd" id="password" onchange="check_password();">
|
|
<input type="checkbox" name = "passwd_label" class="input-passwd" onclick="PasswdToggle()">
|
|
<label for="passwd_label" style="font-size: 13px;">Show Password</label>
|
|
|
|
<p class="valid-password" id="valid-password">*Password meets all requirements</p>
|
|
<p class="not-password" id="notvalid-password">*Password must contain 1 uppercase letter, 1 lowercase letter, 1 digit (0-9), 1 special character (only @$!%*?&), minimum length 8 characters</p>
|
|
<p id="password_empty" style="color:red; font-size: 14px; margin-right: 410px;"></p>
|
|
|
|
</div>
|
|
|
|
</center>
|
|
<button type="submit">Register Account</button>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</main>
|
|
<footer></footer>
|
|
</body>
|
|
|
|
<style>
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#js-content {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
text-align: center;
|
|
top: 10vh;
|
|
font-size: 30px;
|
|
|
|
}
|
|
|
|
a {
|
|
font-size: 15px;
|
|
position: relative;
|
|
top: 20px;
|
|
display: block;
|
|
}
|
|
|
|
input {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.content h1 {
|
|
color: orange;
|
|
}
|
|
|
|
input {
|
|
padding: 5px;
|
|
width: 300px;
|
|
}
|
|
|
|
.valid-email {
|
|
color: green;
|
|
display: none;
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.not-email {
|
|
color: red;
|
|
display: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.valid-password {
|
|
color: green;
|
|
display: none;
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.not-password {
|
|
color: red;
|
|
display: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
input {
|
|
border-radius: 20px;
|
|
border: blue 3px solid;
|
|
}
|
|
|
|
button {
|
|
padding: 20px;
|
|
width: 400px;
|
|
border-radius: 20px;
|
|
border: none;
|
|
background-color: #5aaa6d;
|
|
color: white;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.input-passwd {
|
|
width: 10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<script>
|
|
function check_email() {
|
|
let email = document.getElementById("email").value;
|
|
let valid = document.getElementById("valid");
|
|
let not_valid = document.getElementById("notvalid");
|
|
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
|
|
|
if (String(email).endsWith("@uwplatt.edu") && emailRegex.test(email)) {
|
|
not_valid.style.display = "none";
|
|
valid.style.display = "block";
|
|
}
|
|
|
|
else {
|
|
not_valid.style.display = "block";
|
|
valid.style.display = "none";
|
|
}
|
|
};
|
|
|
|
|
|
function check_password() {
|
|
let password = document.getElementById("password").value;
|
|
let valid = document.getElementById("valid-password");
|
|
let not_valid = document.getElementById("notvalid-password");
|
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
|
|
|
|
if (passwordRegex.test(password)) {
|
|
not_valid.style.display = "none";
|
|
valid.style.display = "block";
|
|
}
|
|
|
|
else {
|
|
not_valid.style.display = "block";
|
|
valid.style.display = "none";
|
|
}
|
|
};
|
|
|
|
|
|
window.onload = function() {
|
|
document.getElementById("email").value = "";
|
|
document.getElementById("password").value = "";
|
|
document.getElementById('js-content').style.display = 'block';
|
|
checkTextbox1();
|
|
checkTextbox2();
|
|
};
|
|
|
|
const textbox1 = document.getElementById("email");
|
|
const textbox2 = document.getElementById("password");
|
|
const empty1 = document.getElementById("email_empty");
|
|
const empty2 = document.getElementById("password_empty");
|
|
|
|
function checkTextbox1() {
|
|
if (textbox1.value.trim() === "") {
|
|
empty1.textContent = "*Email cannot be empty";
|
|
} else if (textbox1.value.trim() != ""){
|
|
empty1.textContent = " ";
|
|
}
|
|
}
|
|
|
|
function checkTextbox2() {
|
|
if (textbox2.value.trim() === "") {
|
|
empty2.textContent = "*Password cannot be empty";
|
|
} else if (textbox2.value.trim() != "") {
|
|
empty2.textContent = " ";
|
|
}
|
|
}
|
|
|
|
function PasswdToggle() {
|
|
var x = document.getElementById("password");
|
|
if (x.type === "password") {
|
|
x.type = "text";
|
|
} else {
|
|
x.type = "password";
|
|
}
|
|
}
|
|
|
|
|
|
textbox1.addEventListener("input", checkTextbox1);
|
|
textbox2.addEventListener("input", checkTextbox2);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<noscript>
|
|
<div style="color: red; font-weight: bold;">
|
|
JavaScript is required to view this website properly. Please enable JavaScript in your browser settings.
|
|
</div>
|
|
</noscript>
|
|
|
|
|
|
|
|
</html>
|