Taylor/trojans-trophy-room
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed account creation page so that input boxes would have coloured border based on whether the contents are valid

Browse Source
This commit is contained in:
Taylor Courage 2025-03-09 08:23:10 -04:00
parent 186ede7211
commit f71a485b6e
3 changed files with 71 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
admin/user_management/change_password.php Normal file
View File

@ -0,0 +1,44 @@
<?php
session_start();
$redirect = $_GET["redirect"];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/styles/primary.css" />
<link rel="stylesheet" href="/styles/login.css" />
<script src="/scripts/tools.js"></script>
<script>verifyPageInFrame()</script>
<script src="/scripts/user_management.js"></script>
<title>ADMIN PANEL - Trojan's Trophy Room</title>
</head>
<body id="loginBody">
<h3 id="loginNotice">Change Password</h3>
<div id="loginPanel">
<form id="loginForm" onsubmit="return verifyInput()" action="/login.php?redirect=<?php echo $redirect; ?>" method="POST">
<div id="inputArea">
<label for="oldPassoword">Username:</label>
<input type="text" name="username" id="username" required>
<p class="newLine"></p>
<label for="newpassword">Password:</label>
<input type="newpassword" name="newpassword" id="newpassword" minlength="6" required>
<p class="newLine"></p>
<label for="confirmNewPassword">Password:</label>
<input type="confirmNewPassword" name="confirmNewPassword" id="confirmNewPassword" minlength="6" oninput="passwordConfirm()" required>
<p class="newLine"></p>
<label for="showPassword" id="showPasswordLabel">Show Password: &nbsp;</label>
<input type="checkbox" name="showPassword" id="showPassword" onchange="displayPassword();">
<p class="newLine">&nbsp;</p>
</div>
<div id="submitButton">
<input type="submit" value="Log In">
</div>
</form>
</div>
<p class="newLine"></p>
</body>
</html>

4
create_account.php
View File

@ -58,10 +58,10 @@ try { // Try opening the SQL database connection
<!-- THIS DIV IS FOR INPUT -->
<div id="textInputArea">
<label for="username" class="inputLabel">Username:</label>
<input type="text" id="username" name="username" class="newLine" maxlength="30" onchange="usernameConfirm()" tabindex="1" pattern="[a-zA-Z0-9]*" required>
<input type="text" id="username" name="username" class="newLine" maxlength="30" oninput="usernameConfirm()" tabindex="1" pattern="[a-zA-Z0-9]*" required>
<p id="confirmUsername"></p>
<label for="password" class="inputLabel">Password:</label>
<input type="password" id="password" name="password" required tabindex="1">
<input type="password" id="password" name="password" required oninput="checkPasswordRequirements()" tabindex="1">
<input type="checkbox" id="showPassword" name="showPassword" class="passwordOptions" onclick="displayPassword()" tabindex="-1">
<label for="showPassword" class="passwordOptions" id="displayPassword" class="newLine">(show)</label>
<label for="confirmPassword" class="inputLabel">Confirm password:</label>

29
scripts/user_management.js
View File

@ -65,11 +65,13 @@ function passwordConfirm() {
if (confirmPassword == "") {
document.getElementById("matchingPasswords").style.visibility = "hidden";
document.getElementById("matchingPasswordsText").style.visibility = "hidden";
document.getElementById("confirmPassword").style.border = null;
return false;
} else if (password == confirmPassword) { // If they match, show them green and return true
document.getElementById("matchingPasswords").style.visibility = "visible";
document.getElementById("matchingPasswords").style.color = "green" ;
document.getElementById("matchingPasswords").innerHTML = "&#10003;&nbsp;";
document.getElementById("confirmPassword").style.border = "1px solid green";
document.getElementById("matchingPasswordsText").style.visibility = "visible";
document.getElementById("matchingPasswordsText").innerHTML = "Match!";
return true;
@ -77,6 +79,7 @@ function passwordConfirm() {
document.getElementById("matchingPasswords").style.visibility = "visible";
document.getElementById("matchingPasswords").style.color = "red";
document.getElementById("matchingPasswords").innerHTML = "&#935;&nbsp;";
document.getElementById("confirmPassword").style.border = "2px solid red";
document.getElementById("matchingPasswordsText").style.visibility = "visible";
document.getElementById("matchingPasswordsText").innerHTML = "Not a match!";
return false;
@ -84,24 +87,42 @@ function passwordConfirm() {
}
function usernameConfirm() {
// Get the username entered
var username = document.getElementById("username").value;
// Get the username entered and convert to lower case
var username = document.getElementById("username").value.toLowerCase();
// Temporarily convert the userlist to lower case. This will allow us to compare input vs. saved
var listOfUsers = userList.map(e => e.toLowerCase());
// If the username is blank, clear the notice
// Otherwise, we'll check the userlist created by PHP which was converted for JS
// If the name is there, return false
if (username == "") {
document.getElementById("confirmUsername").style.visibility = "hidden";
document.getElementById("username").style.border = null;
return false;
} else if (userList.includes(username)) {
} else if (listOfUsers.includes(username)) {
document.getElementById("confirmUsername").style.visibility = "visible";
document.getElementById("confirmUsername").style.color = "red";
document.getElementById("confirmUsername").innerHTML = "Name Taken";
document.getElementById("username").style.border = "2px solid red";
return false; // we return false for a match - a match is not what we want!
} else if (!userList.includes(username)) {
} else if (!listOfUsers.includes(username)) {
document.getElementById("confirmUsername").style.visibility = "visible";
document.getElementById("confirmUsername").style.color = "green";
document.getElementById("confirmUsername").innerHTML = "Name Available!";
document.getElementById("username").style.border = "1px solid green";
return true; // this means the user does not already exist and is good to go
}
}
function checkPasswordRequirements() {
var password = document.getElementById("password").value;
console.log(password);
if (password == "") {
document.getElementById("password").style.border = null;
} else if (password.length < 6) {
document.getElementById("password").style.border = "2px solid red";
} else {
document.getElementById("password").style.border = "1px solid green";
}
}