From e219d13497a969997fc0b3b544a8a804779ead83 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sun, 25 Jan 2026 22:12:55 +0100
Subject: [PATCH] Add profile picture upload functionality to account page

---
 account.php          |  55 +++++++++++++-------
 assets/css/login.css |  30 ++++++++++-
 upload.php           | 117 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 182 insertions(+), 20 deletions(-)
 create mode 100644 upload.php

diff --git a/account.php b/account.php
index 676c7a5..a4daa0b 100644
--- a/account.php
+++ b/account.php
@@ -62,27 +62,46 @@ if (!$user)
 include 'header.php';
 ?>
 
-    <link rel="stylesheet" href="assets/css/login.css">
+<link rel="stylesheet" href="assets/css/login.css">
 
-    <main class="auth" role="main">
-        <section class="auth__grid auth__card__side" aria-label="Account Bereich">
-                    <div class="auth__card auth__card__side__picture">
-                    <header class="auth__header">
-                        <img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
-                             alt="Profilbild"
-                             width="120">
-                    </header>
+<main class="auth" role="main">
+    <section class="auth__grid auth__card__side" aria-label="Account Bereich">
+        <div class="auth__card auth__card__side__picture">
+            <header class="auth__header">
+                <img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
+                     alt="Profilbild"
+                     width="120">
+            </header>
+        </div>
+
+        <div class="auth__card">
+            <header class="auth__header">
+                <p class="auth__title">Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p>
+                <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p>
+                <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p>
+            </header>
+
+            <?php if (isset($_GET['upload']) && $_GET['upload'] === 'ok'): ?>
+                <p class="auth__alert__sucess" role="status">Upload erfolgreich.</p>
+            <?php endif; ?>
+
+            <?php if (isset($_GET['upload']) && $_GET['upload'] === 'err'): ?>
+                <p class="auth__alert__error" role="alert">Upload fehlgeschlagen. Bitte eine gültige Bilddatei auswählen.</p>
+            <?php endif; ?>
+
+            <form class="auth__form" action="upload.php" method="post" enctype="multipart/form-data">
+                <div class="auth__field">
+                    <label for="file">Profilbild auswählen</label>
+                    <input type="file" name="uploadFile" id="file" accept="image/*" required>
+                    <p class="auth__hint">Erlaubt: JPG/PNG/WebP. Maximalgröße je nach Server.</p>
                 </div>
 
-                <div class="auth__card">
-                    <header class="auth__header">
-                        <p class="auth__title">
-                            Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br>
-                        <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br>
-                        <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br>
-                    </header>
+                <div class="auth__actions">
+                    <button class="auth__submit" type="submit">Hochladen</button>
                 </div>
-        </section>
-    </main>
+            </form>
+        </div>
+    </section>
+</main>
 
 <?php include 'footer.php'; ?>
\ No newline at end of file
diff --git a/assets/css/login.css b/assets/css/login.css
index ae4ff7c..f788e07 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -165,7 +165,8 @@
 }
 
 .auth__field input[type="text"],
-.auth__field input[type="password"] {
+.auth__field input[type="password"],
+.auth__field input[type="file"] {
     width: 100%;
     box-sizing: border-box;
     padding: 12px 12px;
@@ -178,11 +179,36 @@
 }
 
 .auth__field input[type="text"]:focus,
-.auth__field input[type="password"]:focus {
+.auth__field input[type="password"]:focus,
+.auth__field input[type="file"]:focus {
     border-color: rgba(37, 99, 235, 0.75);
     box-shadow: var(--gh-focus);
 }
 
+/* Leicht dezenter Hinweistext unter Feldern (z.B. Upload) */
+.auth__hint {
+    margin: 8px 0 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.75);
+    line-height: 1.35;
+}
+
+/* Optional: File-Button im Input anfarblich etwas angleichen (Browser support variiert) */
+.auth__field input[type="file"]::file-selector-button {
+    margin-right: 10px;
+    padding: 10px 12px;
+    border: 0;
+    border-radius: 10px;
+    background: rgba(39, 74, 151, 0.35);
+    color: #ffffff;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.auth__field input[type="file"]::file-selector-button:hover {
+    background: rgba(39, 74, 151, 0.5);
+}
+
 .auth__actions {
     margin-top: 14px;
 }
diff --git a/upload.php b/upload.php
new file mode 100644
index 0000000..ba8ce99
--- /dev/null
+++ b/upload.php
@@ -0,0 +1,117 @@
+<?php
+
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+session_start();
+
+if (empty($_SESSION['user_id']))
+{
+    header('Location: login.php');
+    exit();
+}
+
+$userId = (int)$_SESSION['user_id'];
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST')
+{
+    header('Location: account.php');
+    exit();
+}
+
+if (!isset($_FILES['uploadFile']) || !is_array($_FILES['uploadFile']))
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+$file = $_FILES['uploadFile'];
+
+$fileError = isset($file['error']) ? (int)$file['error'] : UPLOAD_ERR_NO_FILE;
+if ($fileError !== UPLOAD_ERR_OK)
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+// Basic Validierung
+$tmp = isset($file['tmp_name']) ? (string)$file['tmp_name'] : '';
+if ($tmp === '' || !is_uploaded_file($tmp))
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+$allowedMimeToExt = [
+    'image/jpeg' => 'jpg',
+    'image/png' => 'png',
+    'image/webp' => 'webp'
+];
+
+$finfo = new finfo(FILEINFO_MIME_TYPE);
+$mime = $finfo->file($tmp);
+
+if (!$mime || !isset($allowedMimeToExt[$mime]))
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+$ext = $allowedMimeToExt[$mime];
+
+$targetDir = __DIR__ . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR . 'profilePictures';
+if (!is_dir($targetDir))
+{
+    @mkdir($targetDir, 0755, true);
+}
+
+// Fallback-kompatibler Name (auch ohne random_bytes)
+$rand = uniqid('', true);
+$rand = str_replace('.', '', $rand);
+$filename = 'user_' . $userId . '_' . $rand . '.' . $ext;
+$targetPath = $targetDir . DIRECTORY_SEPARATOR . $filename;
+
+if (!move_uploaded_file($tmp, $targetPath))
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+// Pfad, der in HTML genutzt wird (relativ zur Webroot)
+$publicPath = 'assets/images/profilePictures/' . $filename;
+
+$servername = "localhost";
+$port = 3306;
+$username = "FSST";
+$password = "L9wUNZZ9Qkbt";
+$db = "FSST";
+
+$conn = mysqli_connect($servername, $username, $password, $db, $port);
+if (!$conn)
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+$stmt = mysqli_prepare($conn, "UPDATE users SET profilePicture = ? WHERE userID = ?");
+if (!$stmt)
+{
+    mysqli_close($conn);
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+mysqli_stmt_bind_param($stmt, 'si', $publicPath, $userId);
+$ok = mysqli_stmt_execute($stmt);
+mysqli_stmt_close($stmt);
+mysqli_close($conn);
+
+if (!$ok)
+{
+    header('Location: account.php?upload=err');
+    exit();
+}
+
+header('Location: account.php?upload=ok');
+exit();