Add profile picture upload functionality to account page

account.php

@@ -76,11 +76,30 @@ include 'header.php';
 
         <div class="auth__card">
             <header class="auth__header">
-                        <p class="auth__title">
+                <p class="auth__title">Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p>
-                            Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br>
+                <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p>
-                        <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br>
+                <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p>
-                        <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br>
             </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__actions">
+                    <button class="auth__submit" type="submit">Hochladen</button>
+                </div>
+            </form>
         </div>
     </section>
 </main>

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;
 }

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();