mirror of
https://github.com/adanrsantos/ThePlaceHolders.git
synced 2024-12-16 12:20:37 -06:00
Added requirements for email formatting, password length, and functionality to show password checkbox. Created register page javascript file.
This commit is contained in:
parent
bb0a8db856
commit
7b3499558c
|
@ -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
33
static/register.js
Normal 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";
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue