logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 14:20:39 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added requirements for email formatting, password length, and functionality to show password checkbox. Created register page javascript file.

Browse source
This commit is contained in:
JacksonSovilay 2024-09-29 18:42:26 -05:00
parent bb0a8db856
commit 7b3499558c
2 changed files with 61 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
static/register.html
View file

@ -9,27 +9,36 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<!-- <div class="d-flex justify-content-xxl-center" style="background-color: #0C2340; color:#f15a22; font-weight: 900; font: x-large;"><h1>UTSA PLACE</h1></div> -->
<br>
<div class="d-flex justify-content-xl-center"><h3>Registration</h3></div>
<div class="d-flex p-2 justify-content-center align-items-center">
<form method="post">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" required>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Show Password</label>
</div>
<small>
<form method="post">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" pattern="^[^\s@]+@my\.utsa\.edu$" oninput="emailCheck()" required>
<div id="emailHelp" class="form-text">Email must be an @my.utsa.edu email.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" aria-describedby="passwordHelp" pattern="^.{8,}$" oninput="passCheck()" required>
<div id="passwordHelp" class="form-text">Password must be over 8 characters.</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="showPass()">
<label class="form-check-label" for="exampleCheck1">Show Password</label>
</div>
<small>
Already have an account? Click <a href="login.html">here</a> to login.
</small>
<br><br>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</small>
<br><br>
<input id="submit" type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
<script src="register.js"></script>
</body>
</html>

33
static/register.js Normal file
View file

@ -0,0 +1,33 @@
const email = document.getElementById("email");
const emailHelp = document.getElementById("emailHelp");
const emailRegex = /^[^\s@]+@my\.utsa\.edu$/;
const password = document.getElementById("password");
const passwordHelp = document.getElementById("passwordHelp");
const passwordRegex = /^.{8,}$/;
function showPass(){
if(password.type === "password"){
password.type = "text";
}
else{
password.type = "password";
}
}
function passCheck(){
if(passwordRegex.test(password.value)){
passwordHelp.style.color = "#66cc66";
}
else{
passwordHelp.style.color = "#ff6666";
}
}
function emailCheck(){
if(emailRegex.test(email.value)){
emailHelp.style.color = "#66cc66";
}
else{
emailHelp.style.color = "#ff6666";
}
}