Finished profile page

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>

app/account/account.php

@@ -759,3 +759,71 @@ if (isset($_POST['account_delete_submit'])) {
         <?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
+	}
+}

app/app.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

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;
+  width: 2rem;
-  padding: 0;
+  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;
+  z-index: 2;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
 .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;

css/main.scss

@@ -131,7 +131,7 @@ form {
     width: 100%;
     box-sizing: content-box;
 
-    >* {
+    & > * {
         margin-bottom: 0.5rem;
     }
 }

css/scss/_body.scss

@@ -214,10 +214,10 @@
     }
 
     button {
-        width: 1.75rem; height: 1.75rem;
-    
         padding: 0;
 
+        width: 2rem; height: 2rem;
+    
         position: absolute;
         top: 1.25rem;
         right: 1.25rem;
@@ -288,9 +288,7 @@
 }
 
 .preview-button {
-    width: 1.5rem;
+    width: 2rem; height: 2rem;
-
-    padding: 0;
 
     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;
+    z-index: +2;
-
-    box-shadow: $shadow;
 
     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();

profile.php

@@ -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">