Added ability to change password through user accounts page
This commit is contained in:
parent
748c476a4b
commit
6db2d2b6b5
@ -94,13 +94,19 @@ session_start();
|
|||||||
<div class="subNav">
|
<div class="subNav">
|
||||||
<?php
|
<?php
|
||||||
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1) {
|
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1) {
|
||||||
echo "<a href=\"./\" class=\"subNavLink\" id=\"adminHomeButton\">ADMIN HOME</a>";
|
echo "<a href=\"./\" class=\"subNavLink\" id=\"adminHomeButton\">ADMIN PANEL</a>";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<a href="../" class="subNavLink" id="mainHomeButton">MAIN HOME</a>
|
<?php
|
||||||
|
if (isset($_SESSION["userID"])){
|
||||||
|
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">MY ACCOUNT</a>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<a href="../" class="subNavLink" id="mainHomeButton">HOME</a>
|
||||||
<p class="newLine"></p>
|
<p class="newLine"></p>
|
||||||
<?php
|
<?php
|
||||||
if (isset($_SESSION["userID"])){
|
if (isset($_SESSION["userID"])){
|
||||||
|
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">ACCOUNT</a>";
|
||||||
echo "<a href=\"../logout.php?redirect=admin\" class=\"subNavLink\" id=\"loginButton\">LOGOUT</a>";
|
echo "<a href=\"../logout.php?redirect=admin\" class=\"subNavLink\" id=\"loginButton\">LOGOUT</a>";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|||||||
@ -1,44 +1,101 @@
|
|||||||
<?php
|
<?php session_start() ?>
|
||||||
session_start();
|
|
||||||
$redirect = $_GET["redirect"];
|
|
||||||
?>
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
<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/primary.css" />
|
||||||
<link rel="stylesheet" href="/styles/login.css" />
|
<link rel="stylesheet" href="/styles/db_management.css" />
|
||||||
<script src="/scripts/tools.js"></script>
|
<script src="/scripts/tools.js"></script>
|
||||||
<script>verifyPageInFrame()</script>
|
<script>verifyPageInFrame()</script>
|
||||||
<script src="/scripts/user_management.js"></script>
|
<title>no title</title>
|
||||||
<title>ADMIN PANEL - Trojan's Trophy Room</title>
|
</head>
|
||||||
</head>
|
|
||||||
|
<body class="sqlOutput">
|
||||||
|
<?php
|
||||||
|
// USER-DEFINED VARIABLES
|
||||||
|
include("../db_config.php"); // Include database stuff
|
||||||
|
|
||||||
|
|
||||||
|
try { // Try opening the SQL database connection
|
||||||
|
$conn = new PDO("mysql:host=$servername; dbname=$dbName", $dbUsername, $dbPassword);
|
||||||
|
// set the PDO error mode to exception
|
||||||
|
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||||
|
|
||||||
|
|
||||||
|
// Grab session username to make sure we're updating the person logged in
|
||||||
|
$username = $_SESSION["username"];
|
||||||
|
|
||||||
|
|
||||||
|
// Grab the existing data, so we can only update the things that got updated
|
||||||
|
$sqlGetUserInfo = $conn->prepare("SELECT password FROM " . $userTableName . " WHERE username=\"" . $username . "\"");
|
||||||
|
$sqlGetUserInfo->execute();
|
||||||
|
|
||||||
|
$userInfo = $sqlGetUserInfo->fetch(); // fetch row
|
||||||
|
|
||||||
|
// Grab passwords entered on account page
|
||||||
|
$oldPassword = $_POST["oldPassword"];
|
||||||
|
$newPassword = password_hash($_POST["password"], PASSWORD_DEFAULT);
|
||||||
|
|
||||||
|
// Grab the hashed password from the database
|
||||||
|
$passwordHash = $userInfo["password"];
|
||||||
|
|
||||||
|
|
||||||
|
// Function from StackOverflow used to get the base URL, to which we append
|
||||||
|
// the redirect (where the user came from)
|
||||||
|
function url(){
|
||||||
|
return sprintf(
|
||||||
|
"%s://%s/user/%s",
|
||||||
|
isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http',
|
||||||
|
$_SERVER['SERVER_NAME'],
|
||||||
|
$_SESSION["username"]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
$address = url();
|
||||||
|
|
||||||
|
// Make sure the old password(s) match
|
||||||
|
if (password_verify($oldPassword, $passwordHash)) {
|
||||||
|
|
||||||
|
// Prepare the command
|
||||||
|
$update = $conn->prepare("UPDATE " . $userTableName . " SET
|
||||||
|
password = :password
|
||||||
|
WHERE username = :username
|
||||||
|
");
|
||||||
|
|
||||||
|
// Bind parameters to query
|
||||||
|
$update->bindParam(":username", $username);
|
||||||
|
$update->bindParam(":password", $newPassword);
|
||||||
|
|
||||||
|
$update->execute(); // Execute query
|
||||||
|
|
||||||
|
// Tell the user what we did
|
||||||
|
echo "<h3>Password successfully changed!</h3>";
|
||||||
|
echo "<p><a href=\"/user/" . $_SESSION["username"] . " \" onclick=\"redirect('this', '/user/" . $username . "')\">This link will take you back to your account</a></p>";
|
||||||
|
echo "<p>Or, you will be re-directed automatically in 5 seconds...</p>";
|
||||||
|
echo "<script>setTimeout(() => {window.top.location.href = \"" . $address . "\";}, 5000);</script>";
|
||||||
|
} else {
|
||||||
|
// Or tell them something fucked up
|
||||||
|
echo "<h3>Whoops!</h3>";
|
||||||
|
echo "<p>There was a problem and your password couldn't be updated. Make sure you've typed your old password correctly and try again</p>";
|
||||||
|
echo "<p><a href=\"/user/" . $_SESSION["username"] . " \" onclick=\"redirect('this', '/user/" . $username . "')\">This link will take you back to your account</a></p>";
|
||||||
|
echo "<p>Or, you will be re-directed automatically in 5 seconds...</p>";
|
||||||
|
echo "<script>setTimeout(() => {window.top.location.href = \"" . $address . "\";}, 5000);</script>";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} catch (PDOException $e) { // failed connection
|
||||||
|
echo "Connection failed: " . $e->getMessage();
|
||||||
|
}
|
||||||
|
|
||||||
|
$conn = null;
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
<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: </label>
|
|
||||||
<input type="checkbox" name="showPassword" id="showPassword" onchange="displayPassword();">
|
|
||||||
<p class="newLine"> </p>
|
|
||||||
</div>
|
|
||||||
<div id="submitButton">
|
|
||||||
<input type="submit" value="Log In">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<p class="newLine"></p>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
@ -86,6 +86,25 @@ function passwordConfirm() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function passwordConfirmLite() {
|
||||||
|
// This is used when we don't have enough space for the "matches" text, i.e. the user page
|
||||||
|
// Check if the 'confirm' password matches the main one entered
|
||||||
|
var password = document.getElementById("password").value;
|
||||||
|
var confirmPassword = document.getElementById("confirmPassword").value;
|
||||||
|
|
||||||
|
// If the field is empty we'll hide the results
|
||||||
|
if (confirmPassword == "") {
|
||||||
|
document.getElementById("confirmPassword").style.border = null;
|
||||||
|
return false;
|
||||||
|
} else if (password == confirmPassword) { // If they match
|
||||||
|
document.getElementById("confirmPassword").style.border = "1px solid green";
|
||||||
|
return true;
|
||||||
|
} else if (password != confirmPassword) {
|
||||||
|
document.getElementById("confirmPassword").style.border = "2px solid red";
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function usernameConfirm() {
|
function usernameConfirm() {
|
||||||
// Get the username entered and convert to lower case
|
// Get the username entered and convert to lower case
|
||||||
var username = document.getElementById("username").value.toLowerCase();
|
var username = document.getElementById("username").value.toLowerCase();
|
||||||
@ -126,3 +145,28 @@ function checkPasswordRequirements() {
|
|||||||
document.getElementById("password").style.border = "1px solid green";
|
document.getElementById("password").style.border = "1px solid green";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function togglePWChange() {
|
||||||
|
var socialsDiv = document.getElementById("accountSocialsPanel");
|
||||||
|
|
||||||
|
var pwChangeDiv = document.getElementById("passwordChangePanel");
|
||||||
|
|
||||||
|
if (pwChangeDiv.style.display == "none") {
|
||||||
|
socialsDiv.style.display = "none";
|
||||||
|
socialsDiv.style.zIndex = "-1";
|
||||||
|
pwChangeDiv.style.display = "flex";
|
||||||
|
pwChangeDiv.style.zIndex = "1";
|
||||||
|
} else if (pwChangeDiv.style.display == "flex") {
|
||||||
|
socialsDiv.style.display = "flex";
|
||||||
|
socialsDiv.style.zIndex = "1";
|
||||||
|
pwChangeDiv.style.display = "none";
|
||||||
|
pwChangeDiv.style.zIndex = "-1";
|
||||||
|
} else {
|
||||||
|
socialsDiv.style.display = "none";
|
||||||
|
socialsDiv.style.zIndex = "-1";
|
||||||
|
pwChangeDiv.style.display = "flex";
|
||||||
|
pwChangeDiv.style.zIndex = "1";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@ -35,6 +35,7 @@
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.userMessage {
|
.userMessage {
|
||||||
|
|||||||
@ -23,21 +23,6 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#accountDetailsPanel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 45%;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
margin-right: 2%;
|
|
||||||
padding: 5px;
|
|
||||||
padding-bottom: 25px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#accountSocialsPanel {
|
#accountSocialsPanel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -55,6 +40,49 @@
|
|||||||
#accountSocialsPanel p {
|
#accountSocialsPanel p {
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
|
#accountSocialsPanel h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#passwordChangePanel {
|
||||||
|
z-index: -1;
|
||||||
|
display: none;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 45%;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin-right: 2%;
|
||||||
|
padding: 5px;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#passwordChangePanel p {
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
#passwordChangePanel h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#accountDetailsPanel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 45%;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin-right: 2%;
|
||||||
|
padding: 5px;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
#accountDetailsPanel p {
|
#accountDetailsPanel p {
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
@ -62,9 +90,6 @@
|
|||||||
#accountDetailsPanel h3 {
|
#accountDetailsPanel h3 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#accountSocialsPanel h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accountDetailsLeftSide {
|
.accountDetailsLeftSide {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
@ -92,6 +117,13 @@
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#passwordChangePanel input[type="password"] {
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#accountDetailsTitlePanel {
|
#accountDetailsTitlePanel {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
@ -271,3 +303,7 @@
|
|||||||
.noUser {
|
.noUser {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#passwordChangeBody {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
@ -62,6 +62,7 @@ try { // Try opening the SQL database connection
|
|||||||
<link rel="stylesheet" href="/styles/user_management.css" />
|
<link rel="stylesheet" href="/styles/user_management.css" />
|
||||||
<link rel="stylesheet" href="/styles/db_management.css" />
|
<link rel="stylesheet" href="/styles/db_management.css" />
|
||||||
<script src="/scripts/tools.js"></script>
|
<script src="/scripts/tools.js"></script>
|
||||||
|
<script src="/scripts/user_management.js"></script>
|
||||||
<script>verifyPageInFrame()</script>
|
<script>verifyPageInFrame()</script>
|
||||||
<title>User Account Management</title>
|
<title>User Account Management</title>
|
||||||
</head>
|
</head>
|
||||||
@ -118,8 +119,8 @@ try { // Try opening the SQL database connection
|
|||||||
<p>Discord (name):</p>
|
<p>Discord (name):</p>
|
||||||
<p>Discord (UserID):</p>
|
<p>Discord (UserID):</p>
|
||||||
<p> </p>
|
<p> </p>
|
||||||
<p><a href=\"/admin/user_management/change_password.php\" id=\"changePasswordButton\" style=\"text-align:center;\" class=\"disabled\">Change Password</a></p>
|
<p><a id=\"changePasswordButton\" style=\"text-align:center;\" onclick=\"togglePWChange();\">Change Password</a></p>
|
||||||
<p>(coming soon!)</p>
|
<p> </p>
|
||||||
</div>
|
</div>
|
||||||
<div class=\"accountDetailsRightSide\">
|
<div class=\"accountDetailsRightSide\">
|
||||||
<form id=\"editUserDetails\" action=\"/admin/user_management/edit_user.php\" method=\"post\">
|
<form id=\"editUserDetails\" action=\"/admin/user_management/edit_user.php\" method=\"post\">
|
||||||
@ -135,6 +136,36 @@ try { // Try opening the SQL database connection
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
"/* */ . "
|
||||||
|
"/* PASSWORD CHANGE */ . "
|
||||||
|
"/* */ . "
|
||||||
|
<div id=\"passwordChangePanel\">
|
||||||
|
<h3>Change Password</h3>
|
||||||
|
<p class=\"newLine\"></p>
|
||||||
|
<div class=\"accountDetailsLeftSide\">
|
||||||
|
<p>Old Password:</p>
|
||||||
|
<p> </p>
|
||||||
|
<p>New Password:</p>
|
||||||
|
<p>Confirm:</p>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
<p><a id=\"changePasswordButton\" style=\"text-align:center;\" onclick=\"togglePWChange()\">Back</a></p>
|
||||||
|
<p> </p>
|
||||||
|
</div>
|
||||||
|
<div class=\"accountDetailsRightSide\">
|
||||||
|
<form id=\"passwordChangeForm\" action=\"/admin/user_management/change_password.php\" method=\"post\">
|
||||||
|
<p><input type=\"password\" id=\"oldPassword\" name=\"oldPassword\"></p>
|
||||||
|
<p> </p>
|
||||||
|
<p><input type=\"password\" id=\"password\" name=\"password\" oninput=\"checkPasswordRequirements();\"></p>
|
||||||
|
<p><input type=\"password\" id=\"confirmPassword\" name=\"confirmPassword\" oninput=\"passwordConfirmLite();\"></p>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
<div class=\"accountUpdateButton\">
|
||||||
|
<input type=\"submit\" id=\"passwordChangeButton\" value=\"Change\">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
");
|
");
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user