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

Fixed user account creation screen layout, looks and feels a lot better now

Browse Source
This commit is contained in:
FractalParadigm 2025-03-11 21:18:31 -04:00
parent d358d2699a
commit 241058b3a7
5 changed files with 21 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/user_management/user_form.php
View File

@ -59,7 +59,7 @@ 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" oninput="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]+([._\-]?[a-zA-Z0-9])+([._\-]?)$" required>
<p id="confirmUsername"></p>
<label for="password" class="inputLabel newLine">Password:</label>
<input type="password" id="password" name="password" minlength="6" oninput="checkPasswordRequirements()" required/>

23
scripts/user_management.js
View File

@ -65,24 +65,19 @@ function passwordConfirm() {
// If the field is empty we'll hide the results
if (confirmPassword == "") {
document.getElementById("matchingPasswords").style.visibility = "hidden";
document.getElementById("matchingPasswordsText").style.visibility = "hidden";
document.getElementById("confirmPassword").style.outline = 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.outline = "1px solid green";
document.getElementById("matchingPasswordsText").style.visibility = "visible";
document.getElementById("matchingPasswordsText").innerHTML = "Match!";
document.getElementById("confirmPassword").style.outline = "2px solid green";
return true;
} else if (password != confirmPassword) {
document.getElementById("matchingPasswords").style.visibility = "visible";
document.getElementById("matchingPasswords").style.color = "red";
document.getElementById("matchingPasswords").innerHTML = "&#935;&nbsp;";
document.getElementById("confirmPassword").style.outline = "2px solid red";
document.getElementById("matchingPasswordsText").style.visibility = "visible";
document.getElementById("matchingPasswordsText").innerHTML = "Not a match!";
return false;
}
}
@ -98,7 +93,7 @@ function passwordConfirmLite() {
document.getElementById("confirmPassword").style.outline = null;
return false;
} else if (password == confirmPassword) { // If they match
document.getElementById("confirmPassword").style.outline = "1px solid green";
document.getElementById("confirmPassword").style.outline = "2px solid green";
return true;
} else if (password != confirmPassword) {
document.getElementById("confirmPassword").style.outline = "2px solid red";
@ -112,6 +107,8 @@ function usernameConfirm() {
// Temporarily convert the userlist to lower case. This will allow us to compare input vs. saved
var listOfUsers = userList.map(e => e.toLowerCase());
var confirmRegEx = new RegExp("^[a-zA-Z0-9]+([._-]?[a-zA-Z0-9])+([._-]?)$");
// 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
@ -119,6 +116,12 @@ function usernameConfirm() {
document.getElementById("confirmUsername").style.visibility = "hidden";
document.getElementById("username").style.outline = null;
return false;
} else if (!confirmRegEx.test(username)) {
document.getElementById("confirmUsername").style.visibility = "visible";
document.getElementById("confirmUsername").style.color = "red";
document.getElementById("confirmUsername").innerHTML = "Invalid";
document.getElementById("username").style.outline = "2px solid red";
return false; // we return false for a match - a match is not what we want!
} else if (listOfUsers.includes(username)) {
document.getElementById("confirmUsername").style.visibility = "visible";
document.getElementById("confirmUsername").style.color = "red";
@ -129,9 +132,9 @@ function usernameConfirm() {
document.getElementById("confirmUsername").style.visibility = "visible";
document.getElementById("confirmUsername").style.color = "green";
document.getElementById("confirmUsername").innerHTML = "";
document.getElementById("username").style.outline = "1px solid green";
document.getElementById("username").style.outline = "2px solid green";
return true; // this means the user does not already exist and is good to go
}
}
}
function checkPasswordRequirements() {
@ -142,7 +145,7 @@ function checkPasswordRequirements() {
} else if (password.length < 6) {
document.getElementById("password").style.outline = "2px solid red";
} else {
document.getElementById("password").style.outline = "1px solid green";
document.getElementById("password").style.outline = "2px solid green";
}
}

8
styles/user_management.css
View File

@ -414,17 +414,11 @@
visibility: hidden;
height: 0px;
}
#matchingPasswordsText {
visibility: hidden;
height: 0px;
font-size: 90%;
}
#confirmUsername {
visibility: hidden;
height: 0px;
font-size: 90%;
font-weight: normal;
}
.noUser {

6
styles/user_management_mobile.css
View File

@ -24,12 +24,6 @@
height: 0;
width: 0;
}
#matchingPasswordsText {
visibility: hidden !important;
height: 0;
width: 0;
}
#accountDetailsBody {
width: auto;
flex-direction: column;

14
user/create_account.php
View File

@ -66,17 +66,15 @@ try { // Try opening the SQL database connection
<form id="userForm" action="/admin/user_management/add_user.php" onsubmit="return verifyInput()" method="POST" target="dataFrame" >
<!-- 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" oninput="usernameConfirm()" tabindex="1" pattern="[a-zA-Z0-9-_\|.]*" required>
<p id="confirmUsername"></p>
<label for="username" class="inputLabel" id="usernameLabel">Username:&nbsp;&nbsp;<span id="confirmUsername"></span></label>
<input type="text" id="username" name="username" class="newLine" maxlength="30" oninput="usernameConfirm()" tabindex="1" pattern="^[a-zA-Z0-9]+([._\-]?[a-zA-Z0-9])+([._\-]?)$" required>
<label for="password" class="inputLabel">Password:</label>
<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>
<p class="newLine"></p>
<label for="showPassword" class="passwordOptions" id="displayPassword" class="newLine">Show Password</label>
<input type="checkbox" id="showPassword" name="showPassword" class="passwordOptions newLine" onclick="displayPassword()" tabindex="-1">
<label for="confirmPassword" class="inputLabel">Confirm password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" oninput="passwordConfirm()" required tabindex="1">
<p id="matchingPasswords"></p>
<p id="matchingPasswordsText"></p>
<input type="password" id="confirmPassword" name="confirmPassword" oninput="passwordConfirmLite()" required tabindex="1">
</div>
<p>&nbsp;</p>
<input type="submit" value="CREATE" tabindex="1">