mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-02-05 21:18:03 +00:00
Finished profile page
This commit is contained in:
parent
1b8e92d144
commit
36f76ac2fd
61
account.php
61
account.php
|
|
@ -16,13 +16,72 @@
|
|||
|
||||
$user_info = new Account();
|
||||
$diff = new Diff();
|
||||
|
||||
$profile_info = $user_info->get_user_info($conn, $_SESSION['id']);
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ($user_info->is_loggedin()) {
|
||||
?>
|
||||
<div class="profile-settings">
|
||||
<h2>Profile Settings</h2>
|
||||
<h3>Profile Picture</h3>
|
||||
<div class="pfp-upload">
|
||||
<form id="pfpForm" method="POST" enctype="multipart/form-data">
|
||||
<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
|
||||
<br>
|
||||
<button id="pfpSubmit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
|
||||
</form>
|
||||
<?php
|
||||
if (is_file("images/pfp/".$profile_info['pfp_path'])) {
|
||||
echo "<img src='images/pfp/".$profile_info['pfp_path']."'>";
|
||||
} else {
|
||||
echo "<img src='assets/no_image.png'>";
|
||||
}
|
||||
?>
|
||||
<script>
|
||||
$("#pfpForm").submit(function(event) {
|
||||
event.preventDefault();
|
||||
// Check if image avalible
|
||||
var file = $("#image").val();
|
||||
if (file != "") {
|
||||
// Make form
|
||||
var formData = new FormData();
|
||||
|
||||
// Get image
|
||||
var image_data = $("#image").prop("files")[0];
|
||||
formData.append("image", image_data);
|
||||
// Submit data
|
||||
var submit = $("#pfpSubmit").val();
|
||||
formData.append("pfp_submit", submit);
|
||||
|
||||
// Upload the information
|
||||
$.ajax({
|
||||
url: 'app/account/account.php',
|
||||
type: 'post',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
$("#sniffle").html(response);
|
||||
}
|
||||
});
|
||||
|
||||
// Empty values
|
||||
$("#image").val("");
|
||||
$("#submit").val("");
|
||||
} else {
|
||||
sniffleAdd('Gwha!', 'Pls provide image', 'var(--red)', 'assets/icons/file-search.svg');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<br>
|
||||
<a href="profile.php?user=<?php echo $_SESSION['id']; ?>" class="btn btn-neutral">Go to profile</a>
|
||||
</div>
|
||||
|
||||
<div class="account-root">
|
||||
<h2>Settings</h2>
|
||||
<h2>Account Settings</h2>
|
||||
<a class='btn btn-bad' href='password-reset.php'><img class='svg' src='assets/icons/password.svg'>Reset Password</a>
|
||||
<button class="btn btn-bad" onclick="deleteAccount()"><img class='svg' src='assets/icons/trash.svg'>Delete account</button>
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -758,4 +758,72 @@ if (isset($_POST['account_delete_submit'])) {
|
|||
</script>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Profile Picture upload
|
||||
|
||||
*dies of cringe*
|
||||
*/
|
||||
if (isset($_POST['pfp_submit'])) {
|
||||
if (isset($_SESSION['id'])) {
|
||||
// Root paths
|
||||
$dir = "../../images/pfp/";
|
||||
|
||||
// File name updating
|
||||
$file_type = pathinfo($dir.$_FILES['image']['name'],PATHINFO_EXTENSION);
|
||||
$image_newname = "PFP_".$_SESSION["id"].".".$file_type;
|
||||
$image_path = $dir.$image_newname;
|
||||
|
||||
// Allowed file types
|
||||
$allowed_types = array('jpg', 'jpeg', 'png', 'webp');
|
||||
if (in_array($file_type, $allowed_types)) {
|
||||
$query = mysqli_query($conn, "SELECT pfp_path FROM users WHERE id = ".$_SESSION['id']." LIMIT 1");
|
||||
|
||||
while ($pfp = mysqli_fetch_assoc($query)) {
|
||||
$old_pfp = $pfp['pfp_path'];
|
||||
}
|
||||
|
||||
if (is_file($dir.$old_pfp) && !empty($old_pfp)) {
|
||||
unlink($dir.$old_pfp);
|
||||
}
|
||||
|
||||
// Move file to server
|
||||
if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) {
|
||||
$sql = "UPDATE users SET pfp_path = '$image_newname' WHERE id=".$_SESSION['id'];
|
||||
|
||||
if (mysqli_query($conn, $sql)) {
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd(':3', 'Your Image uploaded successfully!', 'var(--green)', 'assets/icons/check.svg');
|
||||
</script>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd(':c', 'Something went fuckywucky, please try later', 'var(--red)', 'assets/icons/cross.svg');
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
} else {
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd('Hmmff', 'Something happened when moving the file to the server. This may just been a 1-off so try again', 'var(--red)', 'assets/icons/bug.svg');
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
} else {
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd('Woopsie', 'The file type you are trying to upload is not supported. Supported files include: JPEG, JPG, PNG and WEBP', 'var(--red)', 'assets/icons/cross.svg');
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
} else {
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd('Denied!!!', 'As you are not logged in', 'var(--red)', 'assets/icons/cross.svg');
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@ class Account {
|
|||
Returns array with user info
|
||||
*/
|
||||
function get_user_info($conn, $id) {
|
||||
$sql = "SELECT id, username, created_at FROM users WHERE id = ?";
|
||||
$sql = "SELECT id, username, created_at, pfp_path FROM users WHERE id = ?";
|
||||
|
||||
if ($stmt = mysqli_prepare($conn, $sql)) {
|
||||
// Bind variables to the prepared statement as parameters
|
||||
|
|
|
|||
62
css/main.css
62
css/main.css
|
|
@ -340,9 +340,9 @@ nav .btn {
|
|||
z-index: 1;
|
||||
}
|
||||
.fullscreen-image button {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
padding: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
right: 1.25rem;
|
||||
|
|
@ -395,23 +395,18 @@ nav .btn {
|
|||
}
|
||||
|
||||
.preview-button {
|
||||
width: 1.5rem;
|
||||
padding: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: -0.2rem;
|
||||
border-radius: 0.3rem;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
background-color: #121212;
|
||||
opacity: 0.8;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
z-index: 2;
|
||||
}
|
||||
.preview-button img {
|
||||
width: 1.5rem;
|
||||
|
|
@ -716,6 +711,51 @@ nav .btn {
|
|||
| ACCOUNT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.profile-settings {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.3rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.profile-settings > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.profile-settings h1,
|
||||
.profile-settings h2,
|
||||
.profile-settings h3,
|
||||
.profile-settings h4,
|
||||
.profile-settings h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.profile-settings p,
|
||||
.profile-settings a,
|
||||
.profile-settings button,
|
||||
.profile-settings input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.pfp-upload {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.pfp-upload > img {
|
||||
margin-left: 1rem;
|
||||
width: 7.25rem;
|
||||
height: 7.25rem;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
border-radius: calc(0.3rem - (0.5rem + 3px));
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.account-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ form {
|
|||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
|
||||
>* {
|
||||
& > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,9 +214,9 @@
|
|||
}
|
||||
|
||||
button {
|
||||
width: 1.75rem; height: 1.75rem;
|
||||
|
||||
padding: 0;
|
||||
|
||||
width: 2rem; height: 2rem;
|
||||
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
|
|
@ -288,9 +288,7 @@
|
|||
}
|
||||
|
||||
.preview-button {
|
||||
width: 1.5rem;
|
||||
|
||||
padding: 0;
|
||||
width: 2rem; height: 2rem;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
|
|
@ -299,22 +297,14 @@
|
|||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $font-body;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
border-radius: $rad;
|
||||
|
||||
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
||||
|
||||
background-color: $black;
|
||||
|
||||
opacity: 0.8;
|
||||
|
||||
box-shadow: $shadow;
|
||||
z-index: +2;
|
||||
|
||||
img {
|
||||
width: 1.5rem;
|
||||
|
|
@ -497,6 +487,30 @@
|
|||
| ACCOUNT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.profile-settings {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
}
|
||||
.pfp-upload {
|
||||
margin-bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
& > img {
|
||||
margin-left: 1rem;
|
||||
|
||||
width: 7.25rem;
|
||||
height: 7.25rem;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
border-radius: calc($rad - (0.5rem + 3px));
|
||||
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.account-root {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
|
|
|
|||
|
|
@ -32,8 +32,12 @@
|
|||
<div class="profile-root">
|
||||
<?php
|
||||
if (!empty($user)) {
|
||||
if (is_file("images/pfp/".$user['pfp_path'])) {
|
||||
echo "<img src='images/pfp/".$user['pfp_path']."'>";
|
||||
} else {
|
||||
echo "<img src='assets/no_image.png'>";
|
||||
}
|
||||
?>
|
||||
<img src='assets/no_image.png'>
|
||||
<h2><?php echo $user['username']; ?></h2>
|
||||
<?php if ($user_info->is_admin($conn, $user['id'])) echo "<p style='color: var(--accent);'>Admin</p>"; ?>
|
||||
<div class="profile-info">
|
||||
|
|
|
|||
Loading…
Reference in a new issue