From 6656f9c05ae64414a5c074321b0a5a881f5b2f01 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Wed, 18 Mar 2026 19:38:08 +0100
Subject: [PATCH 01/16] feat: adding fontawesome library, changing from CSS to
 Tailwind, configure setup for frontend hot reload

---
 .github/workflows/github-actions-demo.yml     | 18 -----
 .../service/CustomUserDetailsService.java     |  2 +
 projekt/docker-compose.dev.yml                |  4 +-
 projekt/frontend/Dockerfile.dev               | 27 ++++---
 projekt/frontend/package-lock.json            | 75 +++++++++++++++++++
 projekt/frontend/package.json                 |  5 ++
 .../src/components/CreateDocument.tsx         | 64 +++++++++-------
 .../frontend/src/components/ErrorMessage.tsx  |  4 +-
 projekt/frontend/src/components/Navbar.tsx    | 46 +++++++-----
 projekt/frontend/src/components/Searchbar.tsx | 21 ++----
 .../frontend/src/styling/CreateDocuments.css  | 62 ---------------
 projekt/frontend/src/styling/Navbar.css       | 75 -------------------
 projekt/frontend/src/styling/Searchbar.css    | 65 ----------------
 projekt/frontend/vite.config.ts               | 13 ++++
 14 files changed, 187 insertions(+), 294 deletions(-)
 delete mode 100644 .github/workflows/github-actions-demo.yml
 delete mode 100644 projekt/frontend/src/styling/CreateDocuments.css
 delete mode 100644 projekt/frontend/src/styling/Navbar.css
 delete mode 100644 projekt/frontend/src/styling/Searchbar.css

diff --git a/.github/workflows/github-actions-demo.yml b/.github/workflows/github-actions-demo.yml
deleted file mode 100644
index b00f8e9..0000000
--- a/.github/workflows/github-actions-demo.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-name: GitHub Actions Demo
-run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
-on: [push]
-jobs:
-  Explore-GitHub-Actions:
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
-      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
-      - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
-      - name: Check out repository code
-        uses: actions/checkout@v5
-      - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
-      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
-      - name: List files in the repository
-        run: |
-          ls ${{ github.workspace }}
-      - run: echo "🍏 This job's status is ${{ job.status }}."
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/CustomUserDetailsService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/CustomUserDetailsService.java
index 4e3d69e..c5e0284 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/CustomUserDetailsService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/CustomUserDetailsService.java
@@ -3,6 +3,7 @@
 import com.projektsse.backend.models.CustomUserDetails;
 import com.projektsse.backend.repository.UserRepository;
 import com.projektsse.backend.repository.entities.User;
+import org.jspecify.annotations.NullMarked;
 import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.core.userdetails.UserDetailsService;
 import org.springframework.security.core.userdetails.UsernameNotFoundException;
@@ -19,6 +20,7 @@ public CustomUserDetailsService(UserRepository userRepository) {
     }
 
     @Override
+    @NullMarked
     public UserDetails loadUserByUsername(String userId) throws UsernameNotFoundException {
         User user  = userRepository.findById(UUID.fromString(userId))
                 .orElseThrow(() -> new UsernameNotFoundException("User not found with id: " + userId));
diff --git a/projekt/docker-compose.dev.yml b/projekt/docker-compose.dev.yml
index 7c08d49..8b3dd06 100644
--- a/projekt/docker-compose.dev.yml
+++ b/projekt/docker-compose.dev.yml
@@ -51,4 +51,6 @@ services:
     links:
       - "backend:backend"
     ports:
-      - "8080:8080"
\ No newline at end of file
+      - "8080:8080"
+    volumes:
+      - ./frontend/src:/app/src
\ No newline at end of file
diff --git a/projekt/frontend/Dockerfile.dev b/projekt/frontend/Dockerfile.dev
index 2466fd8..92fac3b 100644
--- a/projekt/frontend/Dockerfile.dev
+++ b/projekt/frontend/Dockerfile.dev
@@ -8,19 +8,24 @@ RUN npm install
 
 COPY . .
 
-RUN npm run build
+EXPOSE 8080
 
-FROM nginx:1.29.4-alpine
+CMD ["npm", "run", "dev", "--", "--host", "--port", "8080"]
 
-COPY nginx.dev.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/dist /usr/share/nginx/html
+# RUN npm run build
 
-RUN touch /var/run/nginx.pid
-RUN chown -R nginx:nginx /var/cache/nginx && \
-    chown -R nginx:nginx /var/log/nginx && \
-    chown -R nginx:nginx /etc/nginx/conf.d && \
-    chown nginx:nginx /var/run/nginx.pid
+# FROM nginx:1.29.4-alpine
 
-USER nginx
+# COPY nginx.dev.conf /etc/nginx/conf.d/default.conf
+# COPY --from=build /app/dist /usr/share/nginx/html
+
+# RUN touch /var/run/nginx.pid
+# RUN chown -R nginx:nginx /var/cache/nginx && \
+#    chown -R nginx:nginx /var/log/nginx && \
+#    chown -R nginx:nginx /etc/nginx/conf.d && \
+#    chown nginx:nginx /var/run/nginx.pid
+
+# USER nginx
+
+# CMD ["nginx","-g","daemon off;"]
 
-CMD ["nginx","-g","daemon off;"]
\ No newline at end of file
diff --git a/projekt/frontend/package-lock.json b/projekt/frontend/package-lock.json
index c90034a..e53b384 100644
--- a/projekt/frontend/package-lock.json
+++ b/projekt/frontend/package-lock.json
@@ -8,6 +8,11 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^7.2.0",
+        "@fortawesome/free-brands-svg-icons": "^7.2.0",
+        "@fortawesome/free-regular-svg-icons": "^7.2.0",
+        "@fortawesome/free-solid-svg-icons": "^7.2.0",
+        "@fortawesome/react-fontawesome": "^3.2.0",
         "@tailwindcss/vite": "^4.2.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -1136,6 +1141,76 @@
         }
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
+      "integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz",
+      "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-7.2.0.tgz",
+      "integrity": "sha512-VNG8xqOip1JuJcC3zsVsKRQ60oXG9+oYNDCosjoU/H9pgYmLTEwWw8pE0jhPz/JWdHeUuK6+NQ3qsM4gIbdbYQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.2.0.tgz",
+      "integrity": "sha512-iycmlN51EULlQ4D/UU9WZnHiN0CvjJ2TuuCrAh+1MVdzD+4ViKYH2deNAll4XAAYlZa8WAefHR5taSK8hYmSMw==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz",
+      "integrity": "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.2.0.tgz",
+      "integrity": "sha512-E9Gu1hqd6JussVO26EC4WqRZssXMnQr2ol7ZNWkkFOH8jZUaxDJ9Z9WF9wIVkC+kJGXUdY3tlffpDwEKfgQrQw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/projekt/frontend/package.json b/projekt/frontend/package.json
index 640a4ba..97ab20b 100644
--- a/projekt/frontend/package.json
+++ b/projekt/frontend/package.json
@@ -12,6 +12,11 @@
     "test:ci": "vitest run"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
     "@tailwindcss/vite": "^4.2.1",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/projekt/frontend/src/components/CreateDocument.tsx b/projekt/frontend/src/components/CreateDocument.tsx
index 87ba306..2580a6e 100644
--- a/projekt/frontend/src/components/CreateDocument.tsx
+++ b/projekt/frontend/src/components/CreateDocument.tsx
@@ -4,7 +4,8 @@ import { useNavigate } from 'react-router';
 import { apiFetch } from '../utils/apiFetch';
 import ErrorMessage from './ErrorMessage';
 import Navbar from './Navbar';
-import '../styling/CreateDocuments.css';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faBan, faCirclePlus} from "@fortawesome/free-solid-svg-icons";
 
 interface FormData {
     title: string;
@@ -56,23 +57,23 @@ function CreateDocument() {
         }
     };
 
-    const handleSubmit = async (e: React.FormEvent): Promise<void> => {
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
         e.preventDefault();
 
         if (!auth.isAuthenticated) {
-            setErrors({ general: 'Sie müssen angemeldet sein, um ein Dokument zu erstellen.' });
+            setErrors({ general: 'You have to be authorized to create a document' });
             return;
         }
 
         const newErrors: Errors = {};
         if (!formData.title.trim()) {
-            newErrors.title = 'Titel ist erforderlich';
+            newErrors.title = 'Title is required.';
         } else if (formData.title.length > 200) {
-            newErrors.title = 'Titel darf maximal 200 Zeichen haben';
+            newErrors.title = 'Title cannot exceed 200 characters.';
         }
 
         if (!formData.mdContent.trim()) {
-            newErrors.content = 'Inhalt ist erforderlich';
+            newErrors.content = 'Content is required.';
         }
 
         if (Object.keys(newErrors).length > 0) {
@@ -92,7 +93,7 @@ function CreateDocument() {
 
             if (!response.ok) {
                 const errorData = await response.json();
-                throw new Error(errorData.message || 'Dokument konnte nicht erstellt werden');
+                throw new Error(errorData.mdContent || 'Failed to create document');
             }
 
             const data = await response.json();
@@ -100,7 +101,7 @@ function CreateDocument() {
 
         } catch (error) {
             setErrors({
-                general: error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'
+                general: error instanceof Error ? error.message : 'An error occurred.'
             });
         } finally {
             setIsSubmitting(false);
@@ -110,62 +111,69 @@ function CreateDocument() {
     return (
         <>
             <Navbar />
-            <div className="create-document-container">
-                <h1>Neues Dokument erstellen</h1>
+            <div className="max-w-3xl mx-auto mt-8 px-4">
+                <h1 className="text-2xl font-bold mb-6">Create new document</h1>
 
-                <form className="create-document-form" onSubmit={handleSubmit}>
-                    <div className="form-group">
-                        <label className="form-label">Titel *</label>
+                <form className="w-full" onSubmit={handleSubmit}>
+                    <div className="mb-6">
+                        <label className="block mb-2 font-semibold">Title *</label>
                         <input
-                            className="form-input"
+                            className="w-full px-3 py-3 text-base border border-gray-300 rounded-md"
                             type="text"
                             name="title"
                             value={formData.title}
                             onChange={handleChange}
-                            placeholder="Dokumenttitel eingeben"
+                            placeholder="Insert document title"
                         />
                         <ErrorMessage message={errors.title} type="field" />
                     </div>
 
-                    <div className="form-group">
-                        <label className="form-label">
-                            Inhalt * (Markdown unterstützt)
-                        </label>
+                    <div className="mb-6">
+                        <div className="flex justify-between items-center mb-2">
+                            <label className="block mb-2 font-semibold">
+                                Content * (Markdown supported)
+                            </label>
+                            <p>
+                                Chars: {formData.mdContent.length} / 10000
+                            </p>
+                        </div>
                         <textarea
-                            className="form-textarea"
+                            className="w-full px-3 py-3 text-base border border-gray-300 rounded-md font-mono resize-y"
                             name="mdContent"
                             value={formData.mdContent}
                             onChange={handleChange}
                             rows={15}
-                            placeholder="Dokumentinhalt eingeben"
+                            placeholder="Insert document content. You can use Markdown syntax to format your text."
                         />
                         <ErrorMessage message={errors.content} type="field" />
                     </div>
 
-                    <div className="form-group">
-                        <label className="checkbox-label">
+                    <div className="mb-6">
+                        <label className="inline-flex items-center gap-2 cursor-pointer font-semibold">
                             <input
+                                className="w-4 h-4"
                                 type="checkbox"
                                 name="isPrivate"
                                 checked={formData.isPrivate}
                                 onChange={handleChange}
                             />
-                            Privat sichtbar
+                            Private document (only visible to you)
                         </label>
                     </div>
 
                     <ErrorMessage message={errors.general} type="general" />
 
                     <button
-                        className="submit-button"
+                        className="px-6 py-3 bg-blue-500 text-white rounded-md cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed"
                         type="submit"
                         disabled={isSubmitting || !auth.isAuthenticated}
                     >
                         {isSubmitting
-                            ? 'Wird erstellt...'
+                            ? 'Submitting...'
                             : !auth.isAuthenticated
-                                ? 'Anmeldung erforderlich'
-                                : 'Dokument erstellen'}
+                                ? <> <FontAwesomeIcon icon={faBan} /> Unauthorized</>
+                                : <> <FontAwesomeIcon icon={faCirclePlus} /> Create</>
+                        }
                     </button>
                 </form>
             </div>
diff --git a/projekt/frontend/src/components/ErrorMessage.tsx b/projekt/frontend/src/components/ErrorMessage.tsx
index 20f36cf..91fc7fd 100644
--- a/projekt/frontend/src/components/ErrorMessage.tsx
+++ b/projekt/frontend/src/components/ErrorMessage.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import '../styling/ErrorMessage.css';
+import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 interface ErrorMessageProps {
     message?: string;
@@ -13,7 +15,7 @@ const ErrorMessage: React.FC<ErrorMessageProps> = ({ message, type = 'field' })
 
     return (
         <div className={className}>
-            {type === 'general' && '⚠️ '}
+            {type === 'general' && <FontAwesomeIcon icon={faTriangleExclamation} />}
             {message}
         </div>
     );
diff --git a/projekt/frontend/src/components/Navbar.tsx b/projekt/frontend/src/components/Navbar.tsx
index bc594cd..5a083fd 100644
--- a/projekt/frontend/src/components/Navbar.tsx
+++ b/projekt/frontend/src/components/Navbar.tsx
@@ -1,56 +1,64 @@
 import { NavLink } from "react-router";
 import { useAuth } from "../utils/useAuth";
-import '../styling/Navbar.css';
+import {faCircleUser, faFileCirclePlus, faGlobe, faUserLock} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 function Navbar() {
     const { isAuthenticated } = useAuth();
 
+    const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+        `px-4 py-2 font-medium rounded-md border transition-all duration-200 text-sm
+    ${isActive
+            ? 'bg-blue-50 text-blue-500 border-blue-500'
+            : 'text-gray-500 border-transparent hover:bg-gray-100 hover:text-gray-900'
+        }`;
+
     return (
-        <nav className="navbar">
-            <div className="navbar-container">
-                <div className="navbar-links">
-                    <NavLink
-                        to="/documents/public"
-                        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
+        <nav className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-1000">
+            <div className="max-w-350 mx-auto px-8 py-4 flex justify-between items-center">
+                <div className="flex gap-2 items-center">
+                    <NavLink to="/documents/public"
+                        className={navLinkClass}
                     >
-                        Öffentliche Dokumente
+                        <><FontAwesomeIcon icon={faGlobe} /> All Documents</>
                     </NavLink>
 
                     {isAuthenticated ? (
                         <>
                             <NavLink
                                 to="/documents/create"
-                                className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
+                                className={navLinkClass}
                             >
-                                Erstellen
+                                <><FontAwesomeIcon icon={faFileCirclePlus} /> Create</>
                             </NavLink>
+
                             <NavLink
-                                to="/login"
-                                className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
+                                to="/users/my-documents"
+                                className={navLinkClass}
                             >
-                                Profil
+                                <><FontAwesomeIcon icon={faUserLock} /> My Documents</>
                             </NavLink>
 
                             <NavLink
-                                to="/users/my-documents"
-                                className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
+                                to="/login"
+                                className={navLinkClass}
                             >
-                                Meine Dokumente
+                                <><FontAwesomeIcon icon={faCircleUser} /> Profile</>
                             </NavLink>
                         </>
                     ) : (
                         <>
                             <NavLink
                                 to="/login"
-                                className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
+                                className={navLinkClass}
                             >
                                 Login
                             </NavLink>
                             <NavLink
                                 to="/register"
-                                className="nav-link nav-link-primary"
+                                className="px-4 py-2 font-medium rounded-md border text-sm text-white bg-blue-500 border-blue-500 transition-all duration-200 hover:bg-blue-700 hover:border-blue-700 [&.active]:bg-blue-800 [&.active]:border-blue-800"
                             >
-                                Registrieren
+                                Register
                             </NavLink>
                         </>
                     )}
diff --git a/projekt/frontend/src/components/Searchbar.tsx b/projekt/frontend/src/components/Searchbar.tsx
index 90f8ac0..fdd6364 100644
--- a/projekt/frontend/src/components/Searchbar.tsx
+++ b/projekt/frontend/src/components/Searchbar.tsx
@@ -1,53 +1,46 @@
 import React, { useState } from "react";
 import ErrorMessage from "./ErrorMessage.tsx";
-import "../styling/Searchbar.css";
 
 type SearchBarProps = {
     value: string;
     onChange: (v: string) => void;
     onSubmit: (s: string) => void;
 };
-// const PATTERN : RegExp = /^[a-zA-Z0-9äöüÄÖÜß\s-_.]*$/;
 const MAX_LENGTH = 50;
 
 function SearchBar({ value, onChange, onSubmit }: SearchBarProps) {
     const [error, setError] = useState<string | null>(null);
 
 
-    const handleSearch = async (event: React.FormEvent<HTMLFormElement>) => {
+    const handleSearch = async (event: React.SubmitEvent<HTMLFormElement>) => {
         event.preventDefault();
         setError(null);
 
         if (value.length > MAX_LENGTH) {
-            setError(`Die Suchanfrage darf maximal ${MAX_LENGTH} Zeichen lang sein.`);
+            setError(`The search query must be at most ${MAX_LENGTH} characters long.`);
             return;
         }
-        //if (!PATTERN.test(value)) {
-         //   setError("Die Suchanfrage enthält ungültige Zeichen. Nur Buchstaben, Zahlen und Leerzeichen sind erlaubt.");
-        //    return;
-        // }
         onSubmit(encodeURIComponent(value.trim()));
-
     };
 
     return (
         <>
-            <form className="search-bar" onSubmit={handleSearch}>
+            <form className="max-w-225 mx-auto my-6 px-5 py-4 flex gap-3 items-center bg-white border border-gray-200 rounded-xl shadow-sm" onSubmit={handleSearch}>
                 <input
-                    className="search-input"
+                    className="flex-1 px-3 py-2.5 text-base text-gray-900 border border-gray-300 rounded-lg outline-none placeholder-gray-400 transition duration-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                     type="text"
                     name="searchQuery"
-                    placeholder="Eingabe..."
+                    placeholder="Enter..."
                     value={value}
                     maxLength={MAX_LENGTH}
                     onChange={(e) => onChange(e.target.value)}
                 />
                 <button
-                    className="search-button"
+                    className="px-5 py-2.5 text-[0.95rem] font-semibold text-white bg-blue-500 rounded-lg cursor-pointer transition duration-200 hover:bg-blue-700 active:translate-y-px disabled:bg-blue-300 disabled:cursor-not-allowed"
                     type="submit"
                     disabled={value.length > MAX_LENGTH}
                 >
-                    Suchen
+                    Search
                 </button>
             </form>
 
diff --git a/projekt/frontend/src/styling/CreateDocuments.css b/projekt/frontend/src/styling/CreateDocuments.css
deleted file mode 100644
index 11f601e..0000000
--- a/projekt/frontend/src/styling/CreateDocuments.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.create-document-container {
-    max-width: 800px;
-    margin: 2rem auto;
-    padding: 0 1rem;
-}
-
-.create-document-form {
-    width: 100%;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-.form-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-}
-
-.form-input,
-.form-textarea {
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-}
-
-.form-textarea {
-    font-family: 'Courier New', monospace;
-    resize: vertical;
-}
-
-.checkbox-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    font-weight: 600;
-}
-
-.checkbox-label input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    margin-right: 0.25rem;
-}
-
-
-.submit-button {
-    padding: 0.75rem 1.5rem;
-    background-color: #2196f3;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-}
-
-.submit-button:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-}
diff --git a/projekt/frontend/src/styling/Navbar.css b/projekt/frontend/src/styling/Navbar.css
deleted file mode 100644
index 3192a91..0000000
--- a/projekt/frontend/src/styling/Navbar.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.navbar {
-    background-color: #ffffff;
-    border-bottom: 1px solid #e0e0e0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-}
-
-.navbar-container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 1rem 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.navbar-brand a {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #1a1a1a;
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-.navbar-brand a:hover {
-    color: #2196f3;
-}
-
-.navbar-links {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-}
-
-.nav-link {
-    padding: 0.5rem 1rem;
-    color: #666;
-    text-decoration: none;
-    font-weight: 500;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
-}
-
-.nav-link:hover {
-    background-color: #f5f5f5;
-    color: #1a1a1a;
-}
-
-/* ✅ React Router fügt automatisch .active Klasse hinzu */
-.nav-link.active {
-    background-color: #e3f2fd;
-    color: #2196f3;
-    border-color: #2196f3;
-}
-
-.nav-link-primary {
-    background-color: #2196f3;
-    color: white !important;
-    border-color: #2196f3;
-}
-
-.nav-link-primary:hover {
-    background-color: #1976d2;
-    border-color: #1976d2;
-}
-
-
-.nav-link-primary.active {
-    background-color: #1565c0;
-    border-color: #1565c0;
-}
-
diff --git a/projekt/frontend/src/styling/Searchbar.css b/projekt/frontend/src/styling/Searchbar.css
deleted file mode 100644
index 0e03079..0000000
--- a/projekt/frontend/src/styling/Searchbar.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* SearchBar Container */
-.search-bar {
-    max-width: 900px;
-    margin: 1.5rem auto 2rem auto;
-    padding: 1rem 1.25rem;
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-
-    background-color: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-/* Input */
-.search-input {
-    flex: 1;
-    padding: 0.65rem 0.85rem;
-    font-size: 1rem;
-    color: #1a1a1a;
-
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    outline: none;
-
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.search-input::placeholder {
-    color: #999;
-}
-
-.search-input:focus {
-    border-color: #2196f3;
-    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
-}
-
-/* Button */
-.search-button {
-    padding: 0.65rem 1.25rem;
-    font-size: 0.95rem;
-    font-weight: 600;
-
-    background-color: #2196f3;
-    color: white;
-    border: none;
-    border-radius: 8px;
-
-    cursor: pointer;
-    transition: background-color 0.2s ease, transform 0.1s ease;
-}
-
-.search-button:hover {
-    background-color: #1976d2;
-}
-
-.search-button:active {
-    transform: translateY(1px);
-}
-
-.search-button:disabled {
-    background-color: #b0bec5;
-    cursor: not-allowed;
-}
diff --git a/projekt/frontend/vite.config.ts b/projekt/frontend/vite.config.ts
index 0eebf60..a15338e 100644
--- a/projekt/frontend/vite.config.ts
+++ b/projekt/frontend/vite.config.ts
@@ -5,6 +5,19 @@ import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+    port: 8080,
+    watch : {
+      usePolling: true
+    },
+    proxy: {
+        '/api': {
+            target: 'http://backend:8080',
+            changeOrigin: true
+        }
+    }
+  },
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {

From 421fbe5ff09b861ac3901c16815dd479321071e3 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Fri, 20 Mar 2026 13:14:45 +0100
Subject: [PATCH 02/16] feat: refactoring, and CSS to Tailwind

---
 .../src/components/ApiErrorMessage.tsx        |   4 +-
 .../src/components/DocumentDetailPage.tsx     |  10 +-
 .../frontend/src/components/LoadingBar.tsx    |  12 ++
 projekt/frontend/src/components/LoginPage.tsx |   2 -
 .../frontend/src/components/OverviewPage.tsx  |  39 +++++
 .../src/components/PublicDocumentsPage.tsx    |  57 ++-----
 .../frontend/src/components/RegisterPage.tsx  |  16 +-
 .../frontend/src/components/SafeMarkdown.tsx  |   1 -
 .../src/components/UserDocumentsPage.tsx      |  45 +----
 projekt/frontend/src/index.css                |  11 +-
 .../src/styling/PublicDocumentsPage.css       | 160 ------------------
 .../frontend/src/types/OverviewPageProps.ts   |   6 +
 projekt/frontend/src/types/PublicDocument.ts  |   5 +
 projekt/frontend/src/utils/apiFetch.ts        |   2 +-
 14 files changed, 115 insertions(+), 255 deletions(-)
 create mode 100644 projekt/frontend/src/components/LoadingBar.tsx
 create mode 100644 projekt/frontend/src/components/OverviewPage.tsx
 delete mode 100644 projekt/frontend/src/styling/PublicDocumentsPage.css
 create mode 100644 projekt/frontend/src/types/OverviewPageProps.ts
 create mode 100644 projekt/frontend/src/types/PublicDocument.ts

diff --git a/projekt/frontend/src/components/ApiErrorMessage.tsx b/projekt/frontend/src/components/ApiErrorMessage.tsx
index df2daaa..77f2a95 100644
--- a/projekt/frontend/src/components/ApiErrorMessage.tsx
+++ b/projekt/frontend/src/components/ApiErrorMessage.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ErrorType } from '../types/ErrorType';
 import '../styling/ErrorMessage.css';
+import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 interface ApiErrorMessageProps {
     error?: Partial<ErrorType>;
@@ -11,7 +13,7 @@ const ApiErrorMessage: React.FC<ApiErrorMessageProps> = ({ error }) => {
 
     return (
         <div className="error-message error-message--general">
-            ⚠️ <strong>{error.title}</strong>
+            <FontAwesomeIcon icon={faTriangleExclamation} /> <strong>{error.title}</strong>
             {error.detail && <p>{error.detail}</p>}
             {error.status && <span>Status: {error.status}</span>}
         </div>
diff --git a/projekt/frontend/src/components/DocumentDetailPage.tsx b/projekt/frontend/src/components/DocumentDetailPage.tsx
index 608a568..2c086c4 100644
--- a/projekt/frontend/src/components/DocumentDetailPage.tsx
+++ b/projekt/frontend/src/components/DocumentDetailPage.tsx
@@ -8,6 +8,8 @@ import {SafeMarkdown} from "./SafeMarkdown.tsx";
 import Navbar from "./Navbar.tsx";
 import {jwtDecode, type JwtPayload} from "jwt-decode";
 import DOMPurify from "dompurify";
+import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 interface DocumentDetail {
     noteId: string;
@@ -109,9 +111,9 @@ function DocumentDetailPage() {
     if (error) {
         return (
             <div className="document-detail-container">
-                <div className="error-message">⚠️ {error || 'Dokument nicht gefunden'}</div>
+                <div className="error-message"><FontAwesomeIcon icon={faTriangleExclamation} /> {error}</div>
                 <button onClick={handleBack} className="back-button">
-                    ← Zurück zur Übersicht
+                    ← Back to Overview
                 </button>
             </div>
         );
@@ -120,9 +122,9 @@ function DocumentDetailPage() {
     if (!document) {
         return (
             <div className="document-detail-container">
-                <div className="error-message">⚠️ Dokument nicht gefunden</div>
+                <div className="error-message"><FontAwesomeIcon icon={faTriangleExclamation} /> Document not found</div>
                 <button onClick={handleBack} className="back-button">
-                    ← Zurück zur Übersicht
+                    ← Back to Overview
                 </button>
             </div>
         );
diff --git a/projekt/frontend/src/components/LoadingBar.tsx b/projekt/frontend/src/components/LoadingBar.tsx
new file mode 100644
index 0000000..68a6289
--- /dev/null
+++ b/projekt/frontend/src/components/LoadingBar.tsx
@@ -0,0 +1,12 @@
+function LoadingBar() {
+    return (
+        <div className="max-w-350 mx-auto px-4 py-16 flex flex-col items-center gap-4">
+            <div className="w-full max-w-md h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                <div className="h-full w-1/3 bg-blue-500 rounded-full animate-loading" />
+            </div>
+            <span className="text-sm text-gray-400">Loading documents...</span>
+        </div>
+    );
+}
+
+export default LoadingBar;
\ No newline at end of file
diff --git a/projekt/frontend/src/components/LoginPage.tsx b/projekt/frontend/src/components/LoginPage.tsx
index 0eeebfc..e5f1d7e 100644
--- a/projekt/frontend/src/components/LoginPage.tsx
+++ b/projekt/frontend/src/components/LoginPage.tsx
@@ -314,8 +314,6 @@ async function submitLogin(
         // Token im Context speichern (In-Memory)
         login(data.accessToken);
 
-        // console.log('Login erfolgreich!');
-
     } catch (error) {
         setErrors({
             general: error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'
diff --git a/projekt/frontend/src/components/OverviewPage.tsx b/projekt/frontend/src/components/OverviewPage.tsx
new file mode 100644
index 0000000..208a67f
--- /dev/null
+++ b/projekt/frontend/src/components/OverviewPage.tsx
@@ -0,0 +1,39 @@
+import type {OverviewPageProps} from "../types/OverviewPageProps.ts";
+
+function OverviewPage({documents, onCardClick}: OverviewPageProps) {
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-4 mt-8">
+            {documents.map((doc) => (
+                <div
+                    key={doc.noteId}
+                    className="group bg-white border border-gray-200 rounded-xl p-6 md:p-5 sm:p-4 cursor-pointer transition-all duration-300 shadow-sm hover:-translate-y-1 hover:shadow-lg hover:border-blue-500"
+                    onClick={() => onCardClick(doc.noteId)}
+                >
+                    <div className="mb-4 pb-4 border-b-2 border-gray-100">
+                        <h2 className="text-xl sm:text-lg font-semibold text-gray-900 leading-snug wrap-break-word">
+                            {doc.title}
+                        </h2>
+                    </div>
+                    <div className="flex flex-col gap-3 mb-4">
+                        <div className="flex flex-col gap-1">
+                            <span className="text-xs font-semibold uppercase text-gray-500 tracking-wide">
+                                Document-ID:
+                            </span>
+                            <span className="text-sm sm:text-[0.85rem] text-gray-700 break-all font-mono">
+                                {doc.noteId}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="mt-4 pt-4 border-t border-gray-100">
+                        <span className="text-sm font-semibold text-blue-500 group-hover:text-blue-700 transition-colors duration-200">
+                            View →
+                        </span>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default OverviewPage;
\ No newline at end of file
diff --git a/projekt/frontend/src/components/PublicDocumentsPage.tsx b/projekt/frontend/src/components/PublicDocumentsPage.tsx
index cc970fe..82948c5 100644
--- a/projekt/frontend/src/components/PublicDocumentsPage.tsx
+++ b/projekt/frontend/src/components/PublicDocumentsPage.tsx
@@ -2,16 +2,13 @@ import { useEffect, useState } from 'react';
 import {useNavigate, useSearchParams} from 'react-router';
 import { apiFetch } from '../utils/apiFetch';
 import { useAuth } from '../utils/useAuth';
-import '../styling/PublicDocumentsPage.css';
 import Navbar from "./Navbar.tsx";
 import SearchBar from "./Searchbar.tsx";
 import ErrorMessage from "./ErrorMessage.tsx";
+import LoadingBar from "./LoadingBar.tsx";
+import type {PublicDocument} from "../types/PublicDocument.ts";
+import OverviewPage from "./OverviewPage.tsx";
 
-interface PublicDocument {
-    noteId: string;
-    title: string;
-    userId: string;
-}
 
 export function PublicDocumentsPage() {
     const auth = useAuth();
@@ -37,14 +34,13 @@ export function PublicDocumentsPage() {
                 const response = await apiFetch(auth, url);
 
                 if (!response.ok) {
-                    setError("Fehler beim Laden der Dokumente");
+                    setError("Error loading documents");
                 }
-
-                    const data = await response.json();
-                    setDocuments(data);
+                const data = await response.json();
+                setDocuments(data);
 
             } catch (err) {
-                setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
+                setError(err instanceof Error ? err.message : 'An error occurred');
             } finally {
                 setIsLoading(false);
             }
@@ -66,11 +62,7 @@ export function PublicDocumentsPage() {
     };
 
     if (isLoading) {
-        return (
-            <div className="public-documents-container">
-                <div className="loading">Lädt Dokumente...</div>
-            </div>
-        );
+        return <LoadingBar />;
     }
 
 
@@ -78,38 +70,19 @@ export function PublicDocumentsPage() {
         <>
             <Navbar/>
             <SearchBar value={inputValue} onChange={setInputValue} onSubmit={handleSearchSubmit} />
-            <div className="public-documents-container">
-                <h1 className="page-title">Öffentliche Dokumente</h1>
+            <div className="max-w-350 mx-auto py-8 px-4 md:px-2">
+                <h1 className="text-4xl md:text-3xl sm:text-2xl font-bold text-gray-900 mb-8 md:mb-6 text-center">
+                    Public documents
+                </h1>
 
                 {error && <ErrorMessage message={error} type="general" />}
 
                 {!error && documents.length === 0 ? (
-                    <div className="empty-state">
-                        <p>Keine öffentlichen Dokumente vorhanden</p>
+                    <div className="text-center bg-gray-100 rounded-lg py-12 px-4 text-lg text-gray-500">
+                        <p>No public documents exist.</p>
                     </div>
                 ) : (
-                    <div className="documents-grid">
-                        {documents.map((doc) => (
-                            <div
-                                key={doc.noteId}
-                                className="document-card"
-                                onClick={() => handleCardClick(doc.noteId)}
-                            >
-                                <div className="card-header">
-                                    <h2 className="card-title">{doc.title}</h2>
-                                </div>
-                                <div className="card-body">
-                                    <div className="card-info">
-                                        <span className="info-label">Dokument-ID:</span>
-                                        <span className="info-value">{doc.noteId}</span>
-                                    </div>
-                                </div>
-                                <div className="card-footer">
-                                    <span className="view-link">Ansehen →</span>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
+                    <OverviewPage documents={documents} onCardClick={handleCardClick} />
                 )}
             </div>
         </>
diff --git a/projekt/frontend/src/components/RegisterPage.tsx b/projekt/frontend/src/components/RegisterPage.tsx
index b8a978b..b932a6e 100644
--- a/projekt/frontend/src/components/RegisterPage.tsx
+++ b/projekt/frontend/src/components/RegisterPage.tsx
@@ -8,6 +8,8 @@ import "../styling/RegisterPage.css";
 import Navbar from "./Navbar.tsx";
 import type {ErrorType} from "../types/ErrorType.ts";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
+import {faLightbulb, faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 zxcvbnOptions.setOptions({
     translations: de.translations,
@@ -151,13 +153,13 @@ function RegisterPage() {
                 <Navbar />
                 <div className="register-success-wrapper">
                     <div className="register-success-box">
-                        <h1>Registrierung erfolgreich!</h1>
+                        <h1>Registration successful!</h1>
                         <p>
-                            Wir haben dir eine Bestätigungs-E-Mail an
-                            <strong> {formData.email}</strong> gesendet.
+                            We have sent a confirmation email to
+                            <strong> {formData.email}</strong>.
                         </p>
                         <p className="hint">
-                            Bitte bestätige deine E-Mail, um dein Konto zu aktivieren.
+                            Please confirm your email to activate your account.
                         </p>
                     </div>
 
@@ -165,7 +167,7 @@ function RegisterPage() {
                         className="primary-button"
                         onClick={() => navigate('/login')}
                     >
-                        Zum Login
+                        To Login
                     </button>
                 </div>
             </>
@@ -204,10 +206,10 @@ function RegisterPage() {
                     {passwordData && (
                         <div className="password-feedback">
                             {passwordData.feedback.warning && (
-                                <p className="warning"> ⚠️ {passwordData.feedback.warning}</p>
+                                <p className="warning"> <FontAwesomeIcon icon={faTriangleExclamation} /> {passwordData.feedback.warning}</p>
                             )}
                             {passwordData.feedback.suggestions.map((s, i) => (
-                                <p key={i} className="suggestion">💡 {s}</p>
+                                <p key={i} className="suggestion"><FontAwesomeIcon icon={faLightbulb} /> {s}</p>
                             ))}
                         </div>
                     )}
diff --git a/projekt/frontend/src/components/SafeMarkdown.tsx b/projekt/frontend/src/components/SafeMarkdown.tsx
index 1f84603..bedc4a7 100644
--- a/projekt/frontend/src/components/SafeMarkdown.tsx
+++ b/projekt/frontend/src/components/SafeMarkdown.tsx
@@ -32,7 +32,6 @@ export function SafeMarkdown({ markdown }: { markdown: string }) {
                                         An dieser Stelle finden Sie einen externen Inhalt von YouTube, <br>
                                         der den Artikel ergänzt und von der Redaktion empfohlen wird. <br>
                                         Sie können ihn sich mit einem Klick anzeigen lassen. <br>
-
                                     </p>
                                     <button class="consent-load-btn" type="button">
                                         Externen Inhalt laden
diff --git a/projekt/frontend/src/components/UserDocumentsPage.tsx b/projekt/frontend/src/components/UserDocumentsPage.tsx
index cc8cd84..8e4bcb3 100644
--- a/projekt/frontend/src/components/UserDocumentsPage.tsx
+++ b/projekt/frontend/src/components/UserDocumentsPage.tsx
@@ -5,12 +5,10 @@ import {apiFetch} from "../utils/apiFetch.ts";
 import Navbar from "./Navbar.tsx";
 import SearchBar from "./Searchbar.tsx";
 import ErrorMessage from "./ErrorMessage.tsx";
+import LoadingBar from "./LoadingBar.tsx";
+import OverviewPage from "./OverviewPage.tsx";
+import type {PublicDocument} from "../types/PublicDocument.ts";
 
-interface PublicDocument {
-    noteId: string;
-    title: string;
-    userId: string;
-}
 
 function UserDocumentsPage()  {
     const auth = useAuth();
@@ -65,11 +63,7 @@ function UserDocumentsPage()  {
     }
 
     if (isLoading) {
-        return (
-            <div className="public-documents-container">
-                <div className="loading">Lädt Dokumente...</div>
-            </div>
-        );
+        return <LoadingBar />;
     }
 
 
@@ -77,38 +71,17 @@ function UserDocumentsPage()  {
         <>
             <Navbar/>
             <SearchBar value={inputValue} onChange={setInputValue} onSubmit={handleSearchSubmit} />
-            <div className="public-documents-container">
-                <h1 className="page-title">Meine Dokumente</h1>
+            <div className="max-w-350 mx-auto py-8 px-4 md:px-2">
+                <h1 className="text-4xl md:text-3xl sm:text-2xl font-bold text-gray-900 mb-8 md:mb-6 text-center">My documents</h1>
 
                 {error && <ErrorMessage message={error} type="general" />}
 
                 {!error && documents.length === 0 ? (
-                    <div className="empty-state">
-                        <p>Keine eigenen Dokumente vorhanden</p>
+                    <div className="text-center bg-gray-100 rounded-lg py-6 px-4 text-lg text-gray-500">
+                        <p>There are no documents.</p>
                     </div>
                 ) : (
-                    <div className="documents-grid">
-                        {documents.map((doc) => (
-                            <div
-                                key={doc.noteId}
-                                className="document-card"
-                                onClick={() => handleCardClick(doc.noteId)}
-                            >
-                                <div className="card-header">
-                                    <h2 className="card-title">{doc.title}</h2>
-                                </div>
-                                <div className="card-body">
-                                    <div className="card-info">
-                                        <span className="info-label">Dokument-ID:</span>
-                                        <span className="info-value">{doc.noteId}</span>
-                                    </div>
-                                </div>
-                                <div className="card-footer">
-                                    <span className="view-link">Ansehen →</span>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
+                   <OverviewPage documents={documents} onCardClick={handleCardClick} />
                 )}
             </div>
         </>
diff --git a/projekt/frontend/src/index.css b/projekt/frontend/src/index.css
index a461c50..b839728 100644
--- a/projekt/frontend/src/index.css
+++ b/projekt/frontend/src/index.css
@@ -1 +1,10 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+@theme {
+    --animate-loading: loading 1.4s ease-in-out infinite;
+    
+    @keyframes loading {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(400%); }
+    }
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/styling/PublicDocumentsPage.css b/projekt/frontend/src/styling/PublicDocumentsPage.css
deleted file mode 100644
index 0577396..0000000
--- a/projekt/frontend/src/styling/PublicDocumentsPage.css
+++ /dev/null
@@ -1,160 +0,0 @@
-.public-documents-container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
-}
-
-.page-title {
-    font-size: 2rem;
-    font-weight: 700;
-    color: #1a1a1a;
-    margin-bottom: 2rem;
-    text-align: center;
-}
-
-.loading,
-.error-message,
-.empty-state {
-    text-align: center;
-    padding: 3rem 1rem;
-    font-size: 1.1rem;
-    color: #666;
-}
-
-.error-message {
-    color: #d32f2f;
-    background-color: #ffebee;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin: 2rem 0;
-}
-
-.empty-state {
-    background-color: #f5f5f5;
-    border-radius: 8px;
-    padding: 3rem 1rem;
-}
-
-/* Grid Layout */
-.documents-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1.5rem;
-    margin-top: 2rem;
-}
-
-/* Card Styles */
-.document-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 12px;
-    padding: 1.5rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.document-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-    border-color: #2196f3;
-}
-
-.card-header {
-    margin-bottom: 1rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid #f0f0f0;
-}
-
-.card-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0;
-    line-height: 1.4;
-    word-break: break-word;
-}
-
-.card-body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-}
-
-.card-info {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.info-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: #757575;
-    letter-spacing: 0.5px;
-}
-
-.info-value {
-    font-size: 0.9rem;
-    color: #424242;
-    word-break: break-all;
-    font-family: 'Courier New', monospace;
-}
-
-.card-footer {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #f0f0f0;
-}
-
-.view-link {
-    color: #2196f3;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: color 0.2s ease;
-}
-
-.document-card:hover .view-link {
-    color: #1976d2;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .public-documents-container {
-        padding: 1rem 0.5rem;
-    }
-
-    .page-title {
-        font-size: 1.5rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .documents-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .document-card {
-        padding: 1.25rem;
-    }
-
-    .card-title {
-        font-size: 1.1rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .page-title {
-        font-size: 1.25rem;
-    }
-
-    .document-card {
-        padding: 1rem;
-    }
-
-    .info-value {
-        font-size: 0.85rem;
-    }
-}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/OverviewPageProps.ts b/projekt/frontend/src/types/OverviewPageProps.ts
new file mode 100644
index 0000000..1ed6cc8
--- /dev/null
+++ b/projekt/frontend/src/types/OverviewPageProps.ts
@@ -0,0 +1,6 @@
+import type {PublicDocument} from "./PublicDocument.ts";
+
+export interface OverviewPageProps {
+    documents: PublicDocument[];
+    onCardClick: (noteId: string) => void;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/PublicDocument.ts b/projekt/frontend/src/types/PublicDocument.ts
new file mode 100644
index 0000000..17b3b25
--- /dev/null
+++ b/projekt/frontend/src/types/PublicDocument.ts
@@ -0,0 +1,5 @@
+export interface PublicDocument {
+    noteId: string;
+    title: string;
+    userId: string;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/utils/apiFetch.ts b/projekt/frontend/src/utils/apiFetch.ts
index dbd0f6f..4c4e2bb 100644
--- a/projekt/frontend/src/utils/apiFetch.ts
+++ b/projekt/frontend/src/utils/apiFetch.ts
@@ -41,7 +41,7 @@ export async function apiFetch(
     // Access Token refreshen
     const newToken = await auth.refreshAccessToken();
     if (!newToken) {
-        throw new Error("Sie müssen angemeldet sein, um diese Aktion durchzuführen.");
+        throw new Error("You have to be authenticated to perform this action. Please log in.");
     }
 
     // Retry mit neuem Token + CSRF

From 8b8134f31c2d1937270c1595e6c87940db658f98 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Fri, 20 Mar 2026 17:29:08 +0100
Subject: [PATCH 03/16] fix: max length title fixed, refactoring CSS to
 tailwind

---
 .../backend/controller/dto/NoteReq.java       |  2 +-
 .../frontend/src/components/AuthProvider.tsx  |  3 +-
 .../frontend/src/components/BackButton.tsx    | 14 ++++
 .../src/components/CreateDocument.tsx         |  7 +-
 .../frontend/src/components/DeleteButton.tsx  | 12 ++++
 .../src/components/DocumentDetailPage.tsx     | 65 +++++++++----------
 .../frontend/src/components/RegisterPage.tsx  | 50 +++++++-------
 projekt/frontend/src/index.css                |  7 ++
 8 files changed, 94 insertions(+), 66 deletions(-)
 create mode 100644 projekt/frontend/src/components/BackButton.tsx
 create mode 100644 projekt/frontend/src/components/DeleteButton.tsx

diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java
index 9a2601e..b4343ee 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java
@@ -12,7 +12,7 @@
  */
 public record NoteReq(
     @NotBlank(message = "Title cannot be empty")
-    @Size(max = 255, message = "Title can be at most 255 characters long")
+    @Size(max = 100, message = "Title can be at most 100 characters long")
     String title,
     @NotBlank(message = "Content cannot be empty")
     @Size(max = 10000, message = "Content can be at most 10,000 characters long")
diff --git a/projekt/frontend/src/components/AuthProvider.tsx b/projekt/frontend/src/components/AuthProvider.tsx
index ab700e3..3ffcff3 100644
--- a/projekt/frontend/src/components/AuthProvider.tsx
+++ b/projekt/frontend/src/components/AuthProvider.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { getCookie } from "../utils/cookies";
 import { AuthContext } from "./AuthContext";
+import LoadingBar from "./LoadingBar.tsx";
 
 let refreshPromise: Promise<string | null> | null = null;
 
@@ -73,7 +74,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
                 isAuthenticated: token !== null,
             }}
         >
-            {isLoading ? <div>Lade...</div> : children}
+            {isLoading ? <LoadingBar /> : children}
         </AuthContext.Provider>
     );
 }
diff --git a/projekt/frontend/src/components/BackButton.tsx b/projekt/frontend/src/components/BackButton.tsx
new file mode 100644
index 0000000..de2beb8
--- /dev/null
+++ b/projekt/frontend/src/components/BackButton.tsx
@@ -0,0 +1,14 @@
+import {useNavigate} from "react-router";
+
+function BackButton({onBack}: { onBack?: () => void }) {
+    const navigate = useNavigate();
+    const handleBack = onBack ?? (() => navigate(-1));
+
+    return (
+        <button onClick={handleBack} className="text-blue-500 hover:text-blue-700 hover:underline font-semibold cursor-pointer">
+            ← Back to Overview
+        </button>
+    );
+}
+
+export default BackButton;
\ No newline at end of file
diff --git a/projekt/frontend/src/components/CreateDocument.tsx b/projekt/frontend/src/components/CreateDocument.tsx
index 2580a6e..be8dcd3 100644
--- a/projekt/frontend/src/components/CreateDocument.tsx
+++ b/projekt/frontend/src/components/CreateDocument.tsx
@@ -68,8 +68,9 @@ function CreateDocument() {
         const newErrors: Errors = {};
         if (!formData.title.trim()) {
             newErrors.title = 'Title is required.';
-        } else if (formData.title.length > 200) {
-            newErrors.title = 'Title cannot exceed 200 characters.';
+        }
+        else if (formData.title.length > 100) {
+            newErrors.title = 'Title cannot exceed 100 characters.';
         }
 
         if (!formData.mdContent.trim()) {
@@ -93,7 +94,7 @@ function CreateDocument() {
 
             if (!response.ok) {
                 const errorData = await response.json();
-                throw new Error(errorData.mdContent || 'Failed to create document');
+                throw new Error(errorData.title || 'Failed to create document');
             }
 
             const data = await response.json();
diff --git a/projekt/frontend/src/components/DeleteButton.tsx b/projekt/frontend/src/components/DeleteButton.tsx
new file mode 100644
index 0000000..d86bc3f
--- /dev/null
+++ b/projekt/frontend/src/components/DeleteButton.tsx
@@ -0,0 +1,12 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faTrash} from "@fortawesome/free-solid-svg-icons";
+
+function DeleteButton({ onDeleteClick }: { onDeleteClick: () => void }) {
+    return (
+        <button onClick={onDeleteClick} className="mt-8 px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-md cursor-pointer transition-colors">
+            <FontAwesomeIcon icon={faTrash} /> Delete
+        </button>
+    );
+}
+
+export default DeleteButton;
\ No newline at end of file
diff --git a/projekt/frontend/src/components/DocumentDetailPage.tsx b/projekt/frontend/src/components/DocumentDetailPage.tsx
index 2c086c4..a37c146 100644
--- a/projekt/frontend/src/components/DocumentDetailPage.tsx
+++ b/projekt/frontend/src/components/DocumentDetailPage.tsx
@@ -8,8 +8,11 @@ import {SafeMarkdown} from "./SafeMarkdown.tsx";
 import Navbar from "./Navbar.tsx";
 import {jwtDecode, type JwtPayload} from "jwt-decode";
 import DOMPurify from "dompurify";
-import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
+import {faGlobe, faLock, faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import LoadingBar from "./LoadingBar.tsx";
+import BackButton from "./BackButton.tsx";
+import DeleteButton from "./DeleteButton.tsx";
 
 interface DocumentDetail {
     noteId: string;
@@ -55,7 +58,7 @@ function DocumentDetailPage() {
 
                 if (!response.ok) {
                     if (response.status === 404) {
-                        throw new Error('Dokument nicht gefunden');
+                        throw new Error('Document not found');
                     }
                     throw new Error('Fehler beim Laden des Dokuments');
                 }
@@ -72,9 +75,6 @@ function DocumentDetailPage() {
         fetchDocument();
     }, [documentId, auth]);
 
-    const handleBack = () => {
-        navigate(-1); // Vorherige Seite in der Historie
-    };
 
     const handleDelete = async () => {
         if (!documentId) return;
@@ -102,30 +102,24 @@ function DocumentDetailPage() {
 
     if (isLoading) {
         return (
-            <div className="document-detail-container">
-                <div className="loading">Lädt Dokument...</div>
-            </div>
+            <LoadingBar />
         );
     }
 
     if (error) {
         return (
-            <div className="document-detail-container">
+            <div className="page-container">
                 <div className="error-message"><FontAwesomeIcon icon={faTriangleExclamation} /> {error}</div>
-                <button onClick={handleBack} className="back-button">
-                    ← Back to Overview
-                </button>
+                <BackButton />
             </div>
         );
     }
 
     if (!document) {
         return (
-            <div className="document-detail-container">
+            <div className="page-container">
                 <div className="error-message"><FontAwesomeIcon icon={faTriangleExclamation} /> Document not found</div>
-                <button onClick={handleBack} className="back-button">
-                    ← Back to Overview
-                </button>
+                <BackButton />
             </div>
         );
     }
@@ -135,37 +129,36 @@ function DocumentDetailPage() {
     return (
         <>
             <Navbar />
-            <div className="document-detail-container">
-                <button onClick={handleBack} className="back-button">
-                    ← Zurück zur Übersicht
-                </button>
-
-                <div className="document-detail-card">
-                    <header className="document-header">
-                        <h1 className="document-title">
+            <div className="page-container">
+
+                <BackButton />
+
+                <div className="bg-white border border-gray-200 rounded-xl p-8 overflow-hidden md:p-6 sm:p-4 shadow-sm">
+                    <header className="flex justify-between items-start gap-4 mb-8 pb-6 border-b-2 border-gray-300 md:flex-col">
+                        <h1 className="text-4xl md:text-2xl sm:text-xl font-bold text-gray-900 leading-snug break-all flex-1">
                             {sanitizedTitle}
                         </h1>
-                        {document.is_private ? (
-                                <span className="content-badge">🔒 Privat</span>
+                        {
+                            document.is_private ? (
+                                <span className="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide whitespace-nowrap">
+                                    <FontAwesomeIcon icon={faLock} /> Private
+                                </span>
                             ) :
-                            <p className="content-text">Öffentlich</p>}
+                            <p className="bg-green-600 text-white px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide whitespace-nowrap">
+                                <FontAwesomeIcon icon={faGlobe} /> Public
+                            </p>
+                        }
                     </header>
-                    <div className="document-content">
+                    <div className="mt-8 pt-8 break-all border-gray-100">
                         {document.md_content ? (
                             <SafeMarkdown markdown={document.md_content}/>
                         ) : (
-                            <p className="content-text">Kein Inhalt vorhanden</p>
+                            <p className="text-base text-gray-700 leading-relaxed">No content available.</p>
                         )}
                     </div>
-
-
                 </div>
 
-                { isOwner && (
-                    <button onClick={handleDelete} className="delete-button">
-                        Löschen
-                    </button>)
-                }
+                { isOwner && (<DeleteButton onDeleteClick={handleDelete} />)}
 
             </div>
         </>
diff --git a/projekt/frontend/src/components/RegisterPage.tsx b/projekt/frontend/src/components/RegisterPage.tsx
index b932a6e..a18a174 100644
--- a/projekt/frontend/src/components/RegisterPage.tsx
+++ b/projekt/frontend/src/components/RegisterPage.tsx
@@ -10,6 +10,7 @@ import type {ErrorType} from "../types/ErrorType.ts";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
 import {faLightbulb, faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import LoadingBar from "./LoadingBar.tsx";
 
 zxcvbnOptions.setOptions({
     translations: de.translations,
@@ -42,28 +43,26 @@ async function submitRegister(
     const newErrors: Errors = {};
 
     if (!formData.email) {
-        newErrors.email = 'Email ist erforderlich';
+        newErrors.email = 'Email is required';
     } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-        newErrors.email = 'Ungültige Email-Adresse';
+        newErrors.email = 'Invalid email address';
     }
 
     const passwordStrength : ZxcvbnResult = zxcvbn(formData.password);
     if (!formData.password) {
-        newErrors.password = 'Passwort ist erforderlich';
+        newErrors.password = 'Password is required';
     }
     else {
         switch (passwordStrength.score) {
-            case 0: newErrors.password = 'Passwort ist sehr schwach'; break;
-            case 1: newErrors.password = 'Passwort ist schwach'; break;
-            case 2: newErrors.password = 'Passwort ist akzeptabel'; break;
-            case 3: newErrors.password = 'Passwort ist stark'; break;
+            case 0: newErrors.password = 'Password is too weak.'; break;
+            case 1: newErrors.password = 'Password is weak.'; break;
+            case 2: newErrors.password = 'Password is okay.'; break;
+            case 3: newErrors.password = 'Password is good, but could be stronger.'; break;
             case 4: break;
             default: break;
         }
     }
 
-
-
     if (Object.keys(newErrors).length > 0) {
         setErrors(newErrors);
         return;
@@ -151,20 +150,21 @@ function RegisterPage() {
         return (
             <>
                 <Navbar />
-                <div className="register-success-wrapper">
-                    <div className="register-success-box">
-                        <h1>Registration successful!</h1>
-                        <p>
-                            We have sent a confirmation email to
-                            <strong> {formData.email}</strong>.
+                <div className="max-w-2xl mx-auto mt-12 px-8 text-center">
+                    <div className="bg-green-50 border-2 border-green-500 rounded-xl p-8 mb-8">
+                        <h1 className="text-2xl font-bold text-green-800 mb-4">
+                            Registration successful!
+                        </h1>
+                        <p className="text-lg text-gray-700 leading-relaxed">
+                            We have sent a confirmation email to <strong>{formData.email}</strong>.
                         </p>
-                        <p className="hint">
+                        <p className="text-base text-gray-500 mt-4">
                             Please confirm your email to activate your account.
                         </p>
                     </div>
 
                     <button
-                        className="primary-button"
+                        className="w-full py-3 text-base font-semibold bg-blue-500 hover:bg-blue-600 text-white rounded-md cursor-pointer transition-colors"
                         onClick={() => navigate('/login')}
                     >
                         To Login
@@ -179,28 +179,28 @@ function RegisterPage() {
         <>
             <Navbar />
             <div className="register-wrapper">
-                <h1>Registrierung</h1>
+                <h1>Registration</h1>
 
                 <div className="form-group">
-                    <label>Email-Adresse</label>
+                    <label>Email Address</label>
                     <input
                         type="email"
                         name="email"
                         value={formData.email}
                         onChange={handleChange}
-                        placeholder="E-Mail Adresse eingeben"
+                        placeholder="Enter Email Address"
                     />
                     <ErrorMessage message={errors.email} type="field" />
                 </div>
 
                 <div className="form-group">
-                    <label>Passwort</label>
+                    <label>Password</label>
                     <input
                         type="password"
                         name="password"
                         value={formData.password}
                         onChange={handleChange}
-                        placeholder="Passwort eingeben"
+                        placeholder="Enter Password"
                     />
                     <progress max={4} value={passwordData?.score ?? 0} className="password-strength-bar"></progress>
                     {passwordData && (
@@ -224,13 +224,13 @@ function RegisterPage() {
                     onClick={handleSubmit}
                     disabled={isSubmitting}
                 >
-                    {isSubmitting ? 'Lädt...' : 'Registrieren'}
+                    {isSubmitting ? <LoadingBar /> : 'Register'}
                 </button>
 
                 <p className="login-hint">
-                    Bereits registriert?{' '}
+                    Already registered?{' '}
                     <span onClick={() => navigate('/login')}>
-                        Zum Login
+                        Login
                     </span>
                 </p>
             </div>
diff --git a/projekt/frontend/src/index.css b/projekt/frontend/src/index.css
index b839728..d469b50 100644
--- a/projekt/frontend/src/index.css
+++ b/projekt/frontend/src/index.css
@@ -7,4 +7,11 @@
         0% { transform: translateX(-100%); }
         100% { transform: translateX(400%); }
     }
+
+}
+
+@layer components {
+    .page-container {
+        @apply max-w-4xl mx-auto px-4 md:px-2 py-8;
+    }
 }
\ No newline at end of file

From da51eb162af5628b7295e5942787952049ec67e7 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Sun, 22 Mar 2026 21:08:52 +0100
Subject: [PATCH 04/16] feat: refactor buttons, adding tests, setting exception
 handlers in SecurityFilterChain

---
 .../config/CustomAccessDeniedHandler.java     | 38 ++++++++++++
 .../CustomAuthenticationEntryPoint.java       | 38 ++++++++++++
 .../backend/config/SecurityConfig.java        | 17 +++--
 .../backend/controller/NotesController.java   | 12 ++++
 .../backend/controller/dto/NoteRes.java       | 14 +++++
 .../projektsse/backend/models/NoteModel.java  | 24 ++++++-
 .../backend/repository/NoteRepository.java    |  3 -
 .../backend/repository/entities/Note.java     | 12 ++++
 .../backend/service/JwtService.java           | 20 +++++-
 .../backend/service/NoteService.java          | 25 ++++++--
 .../backend/service/UserService.java          |  1 +
 .../Notes/NotesIntegrationTest.java           |  7 +++
 .../backend/service/NoteServiceTest.java      | 62 +++++++++++++++++++
 .../frontend/src/components/DeleteButton.tsx  | 53 ++++++++++++++--
 .../src/components/DocumentDetailPage.tsx     | 15 ++---
 15 files changed, 313 insertions(+), 28 deletions(-)
 create mode 100644 projekt/backend/src/main/java/com/projektsse/backend/config/CustomAccessDeniedHandler.java
 create mode 100644 projekt/backend/src/main/java/com/projektsse/backend/config/CustomAuthenticationEntryPoint.java
 create mode 100644 projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java
 create mode 100644 projekt/backend/src/test/java/com/projektsse/backend/controller/Integration/Notes/NotesIntegrationTest.java
 create mode 100644 projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java

diff --git a/projekt/backend/src/main/java/com/projektsse/backend/config/CustomAccessDeniedHandler.java b/projekt/backend/src/main/java/com/projektsse/backend/config/CustomAccessDeniedHandler.java
new file mode 100644
index 0000000..69ece68
--- /dev/null
+++ b/projekt/backend/src/main/java/com/projektsse/backend/config/CustomAccessDeniedHandler.java
@@ -0,0 +1,38 @@
+package com.projektsse.backend.config;
+
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.jspecify.annotations.NonNull;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ProblemDetail;
+import org.springframework.security.access.AccessDeniedException;
+import org.springframework.security.web.access.AccessDeniedHandler;
+import org.springframework.stereotype.Component;
+import tools.jackson.databind.ObjectMapper;
+
+import java.io.IOException;
+import java.net.URI;
+
+@Component
+public class CustomAccessDeniedHandler implements AccessDeniedHandler {
+
+    private final ObjectMapper objectMapper;
+
+    public CustomAccessDeniedHandler(ObjectMapper objectMapper) {
+        this.objectMapper = objectMapper;
+    }
+
+    @Override
+    public void handle(@NonNull HttpServletRequest request,
+                       @NonNull HttpServletResponse response,
+                       @NonNull AccessDeniedException accessDeniedException) throws IOException {
+        ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(HttpStatus.FORBIDDEN, "Forbidden");
+        problemDetail.setDetail("You do not have permission to access this resource.");
+        problemDetail.setInstance(URI.create(request.getRequestURI()));
+
+        response.setStatus(HttpStatus.FORBIDDEN.value());
+        response.setContentType(MediaType.APPLICATION_PROBLEM_JSON_VALUE);
+        objectMapper.writeValue(response.getWriter(), problemDetail);
+    }
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/config/CustomAuthenticationEntryPoint.java b/projekt/backend/src/main/java/com/projektsse/backend/config/CustomAuthenticationEntryPoint.java
new file mode 100644
index 0000000..1fc1766
--- /dev/null
+++ b/projekt/backend/src/main/java/com/projektsse/backend/config/CustomAuthenticationEntryPoint.java
@@ -0,0 +1,38 @@
+package com.projektsse.backend.config;
+
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.jspecify.annotations.NonNull;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ProblemDetail;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.web.AuthenticationEntryPoint;
+import org.springframework.stereotype.Component;
+import tools.jackson.databind.ObjectMapper;
+
+import java.io.IOException;
+import java.net.URI;
+
+@Component
+public class CustomAuthenticationEntryPoint implements AuthenticationEntryPoint {
+    private final ObjectMapper objectMapper;
+
+    public CustomAuthenticationEntryPoint(ObjectMapper objectMapper) {
+        this.objectMapper = objectMapper;
+    }
+
+
+    @Override
+    public void commence(@NonNull HttpServletRequest request,
+                         @NonNull HttpServletResponse response,
+                         @NonNull AuthenticationException authException) throws IOException {
+        ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(HttpStatus.UNAUTHORIZED, "Unauthorized");
+        problemDetail.setDetail("Authentication is required to access this resource.");
+        problemDetail.setInstance(URI.create(request.getRequestURI()));
+
+        response.setStatus(HttpStatus.UNAUTHORIZED.value());
+        response.setContentType(MediaType.APPLICATION_PROBLEM_JSON_VALUE);
+        objectMapper.writeValue(response.getWriter(), problemDetail);
+    }
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java b/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java
index 40d207c..c0b14f8 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java
@@ -1,6 +1,5 @@
 package com.projektsse.backend.config;
 
-import jakarta.servlet.http.HttpServletResponse;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
@@ -17,8 +16,16 @@ public class SecurityConfig {
 
     private final JwtFilter jwtFilter;
 
-    SecurityConfig(JwtFilter jwtFilter) {
+    private final CustomAuthenticationEntryPoint customAuthenticationEntryPoint;
+    private final CustomAccessDeniedHandler customAccessDeniedHandler;
+
+    SecurityConfig(JwtFilter jwtFilter,
+                   CustomAuthenticationEntryPoint customAuthenticationEntryPoint,
+                   CustomAccessDeniedHandler customAccessDeniedHandler
+    ) {
         this.jwtFilter = jwtFilter;
+        this.customAuthenticationEntryPoint = customAuthenticationEntryPoint;
+        this.customAccessDeniedHandler = customAccessDeniedHandler;
     }
 
     @Bean
@@ -38,6 +45,8 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) {
                             "/api/auth/register",
                             "/api/auth/verify-email",
                             "/api/documents/public",
+                            "/api/documents/{docId}",
+                            "/api/documents",
                             "/api/documents/public/search",
                             "/api/auth/forgot-password",
                             "/api/auth/reset-password"
@@ -49,8 +58,8 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) {
                     .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
             )
             .exceptionHandling(ex -> ex
-                    .authenticationEntryPoint((request, response, authException) -> response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Unauthorized"))
-                    .accessDeniedHandler((request, response, accessDeniedException) -> response.sendError(HttpServletResponse.SC_FORBIDDEN, "Forbidden"))
+                    .authenticationEntryPoint(customAuthenticationEntryPoint)
+                    .accessDeniedHandler(customAccessDeniedHandler)
             )
             .authorizeHttpRequests(auth -> auth
                    .requestMatchers(
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java
index 21dc939..9f87bf5 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java
@@ -1,6 +1,7 @@
 package com.projektsse.backend.controller;
 
 import com.projektsse.backend.controller.dto.NoteReq;
+import com.projektsse.backend.controller.dto.NoteRes;
 import com.projektsse.backend.interfaces.CurrentUserId;
 import com.projektsse.backend.models.NoteModel;
 import com.projektsse.backend.service.NoteService;
@@ -83,4 +84,15 @@ public ResponseEntity<?> deleteNote(
         noteService.deleteNote(docId, userId);
         return ResponseEntity.noContent().build();
     }
+
+
+    @PutMapping(value = "/{docId}", consumes = "application/json")
+    public ResponseEntity<NoteRes> updateNote(
+            @PathVariable UUID docId,
+            @Valid @RequestBody NoteReq noteReq,
+            @CurrentUserId UUID userId
+    ) {
+        NoteRes updatedNote = noteService.updateNote(docId, noteReq, userId).toDto();
+        return ResponseEntity.ok().body(updatedNote);
+    }
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java
new file mode 100644
index 0000000..e8be36d
--- /dev/null
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java
@@ -0,0 +1,14 @@
+package com.projektsse.backend.controller.dto;
+
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+public record NoteRes(
+    String title,
+    String md_content,
+    boolean is_private,
+    LocalDateTime created_at,
+    LocalDateTime updated_at,
+    UUID userId
+) {}
\ No newline at end of file
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java b/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java
index 0bc37e8..abeb705 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java
@@ -1,5 +1,7 @@
 package com.projektsse.backend.models;
 
+import com.projektsse.backend.controller.dto.NoteRes;
+
 import java.time.LocalDateTime;
 import java.util.UUID;
 
@@ -11,4 +13,24 @@ public record NoteModel(
     LocalDateTime created_at,
     LocalDateTime updated_at,
     UUID userId
-) {}
+) {
+    public NoteRes toDto() {
+        return new NoteRes(title, md_content, is_private, created_at, updated_at, userId);
+    }
+
+//    public Note toEntity() {
+//        return new Note(noteId, title, md_content, is_private, created_at, updated_at, userId);
+//    }
+
+    public NoteModel setTitle(String title) {
+        return new NoteModel(noteId, title, md_content, is_private, created_at, updated_at, userId);
+    }
+
+    public NoteModel setMdContent(String md_content) {
+        return new NoteModel(noteId, title, md_content, is_private, created_at, updated_at, userId);
+    }
+
+    public NoteModel setIsPrivate(boolean is_private) {
+        return new NoteModel(noteId, title, md_content, is_private, created_at, updated_at, userId);
+    }
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/repository/NoteRepository.java b/projekt/backend/src/main/java/com/projektsse/backend/repository/NoteRepository.java
index fed2709..e747e2c 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/repository/NoteRepository.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/repository/NoteRepository.java
@@ -28,7 +28,4 @@ public interface NoteRepository extends CrudRepository<Note, UUID> {
             "LOWER(n.mdContent) LIKE LOWER(CONCAT('%', :query, '%')))")
     List<Note> searchUserNotes(@Param("userId") UUID userId, @Param("query") String query);
 
-//    @Query("SELECT n FROM Note n WHERE n.isPrivate = false")
-//    List<Note> findAllPublicNotes();
-
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java b/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java
index 4f1889a..6ee474c 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java
@@ -68,6 +68,18 @@ public NoteModel toModel() {
         );
     }
 
+    public static Note fromModel(NoteModel model, User owner) {
+        Note note = new Note();
+        note.setNoteId(model.noteId());
+        note.setTitle(model.title());
+        note.setMdContent(model.md_content());
+        note.setIsPrivate(model.is_private());
+        note.setOwner(owner);
+        return note;
+    }
+
+
+
     public void setMdContent(@NotBlank(message = "Inhalt darf nicht leer sein") @Size(max = 10000, message = "Inhalt darf maximal 10.000 Zeichen lang sein") String mdContent) {
         this.mdContent = mdContent;
     }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/JwtService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/JwtService.java
index a4267e7..1f0b800 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/JwtService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/JwtService.java
@@ -3,7 +3,10 @@
 import com.auth0.jwt.JWT;
 import com.auth0.jwt.JWTVerifier;
 import com.auth0.jwt.algorithms.Algorithm;
+import com.auth0.jwt.exceptions.*;
 import com.auth0.jwt.interfaces.DecodedJWT;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.stereotype.Service;
@@ -29,6 +32,8 @@ public class JwtService {
     @Value("${jwt.access-token-expiration}")
     private int accessTokenExpiration; // In Minuten
 
+    private final Logger log = LoggerFactory.getLogger(JwtService.class);
+
     private Algorithm getAlgorithm() {
         byte[] keyBytes = Base64.getDecoder().decode(secret);
         return Algorithm.HMAC256(keyBytes);
@@ -98,7 +103,20 @@ public boolean isTokenValid(String token, String fingerprintFromCookie, UserDeta
             String userId = decoded.getSubject();
             boolean isExpired = decoded.getExpiresAt().before(new Date());
             return userId.equals(userDetails.getUsername()) && !isExpired;
-        } catch (Exception e) {
+        } catch (AlgorithmMismatchException e) {
+            log.warn("Invalid JWT algorithm: {}", e.getMessage());
+            return false;
+        } catch (SignatureVerificationException e) {
+            log.warn("Invalid JWT signature: {}", e.getMessage());
+            return false;
+        } catch (TokenExpiredException e) {
+            log.warn("JWT token expired: {}", e.getMessage());
+            return false;
+        } catch (MissingClaimException e) {
+            log.warn("Invalid JWT token: {}", e.getMessage());
+            return false;
+        } catch (IncorrectClaimException e) {
+            log.warn("Invalid JWT claim: {}", e.getMessage());
             return false;
         }
     }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
index 58c3512..9d11fed 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
@@ -6,6 +6,7 @@
 import com.projektsse.backend.models.NoteModel;
 import com.projektsse.backend.repository.NoteRepository;
 import com.projektsse.backend.repository.entities.Note;
+import com.projektsse.backend.repository.entities.User;
 import jakarta.validation.Valid;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Pattern;
@@ -57,7 +58,7 @@ public List<NoteModel> searchPublicNotes(String query) {
 
     public NoteModel getNoteById(UUID documentId) {
         Note note = noteRepository.findById(documentId)
-                .orElseThrow(() -> new NoteNotFoundException("Notiz mit der ID " + documentId + " wurde nicht gefunden"));
+                .orElseThrow(() -> new NoteNotFoundException(String.format("Note with ID %s not found", documentId)));
         return note.toModel();
     }
 
@@ -76,14 +77,30 @@ public List<NoteModel> searchUserNotes(@NotBlank @Size(max = 50) @Pattern(regexp
 
     public void deleteNote(UUID documentId, UUID userId) {
         Note note = noteRepository.findById(documentId)
-                .orElseThrow(() -> new NoteNotFoundException("Notiz mit der ID " + documentId + " wurde nicht gefunden"));
+                .orElseThrow(() -> new NoteNotFoundException(String.format("Note with ID %s not found", documentId)));
 
-        // Ist authorisiert?
         // Gleiche Exceptions um User Enumeration zu verhindern
         if (!note.getOwner().getId().equals(userId)) {
-            throw new NoteNotFoundException("Notiz mit der ID " + documentId + " wurde nicht gefunden");
+            throw new NoteNotFoundException(String.format("Note with ID %s not found", documentId));
         }
 
         noteRepository.delete(note);
     }
+
+    public NoteModel updateNote(UUID docId, @Valid NoteReq noteReq, UUID userId) {
+        NoteModel note = getNoteById(docId);
+
+        if (!note.userId().equals(userId)) {
+            // Note exists, but belongs to another user, so we throw the same exception to prevent user enumeration
+            throw new NoteNotFoundException(String.format("Note with ID %s not found", docId));
+        }
+
+        User user = userService.getUserById(userId.toString());
+
+        note.setTitle(mdSanitizer.sanitizeTitle(noteReq.title()))
+            .setMdContent(mdSanitizer.sanitizeContent(noteReq.mdContent()))
+            .setIsPrivate(noteReq.isPrivate());
+
+        return noteRepository.save(Note.fromModel(note, user)).toModel();
+    }
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
index cc1d0f8..4ccbcee 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
@@ -114,6 +114,7 @@ public UUID getUserIdByEmail(String email) {
     public void authenticateUser(String email, String password) {
         Optional<User> userOpt = userRepository.findByEmail(email);
         if (userOpt.isEmpty()) {
+            // passwordEncoder.matches(password, DUMMY_HASH); // Dummy-Hash-Vergleich, um Timing-Angriffe zu verhindern
             throw new IllegalArgumentException("Invalid credentials.");
         }
         User user = userOpt.get();
diff --git a/projekt/backend/src/test/java/com/projektsse/backend/controller/Integration/Notes/NotesIntegrationTest.java b/projekt/backend/src/test/java/com/projektsse/backend/controller/Integration/Notes/NotesIntegrationTest.java
new file mode 100644
index 0000000..851c938
--- /dev/null
+++ b/projekt/backend/src/test/java/com/projektsse/backend/controller/Integration/Notes/NotesIntegrationTest.java
@@ -0,0 +1,7 @@
+package com.projektsse.backend.controller.Integration.Notes;
+
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+public class NotesIntegrationTest {
+}
diff --git a/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java b/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java
new file mode 100644
index 0000000..a1db012
--- /dev/null
+++ b/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java
@@ -0,0 +1,62 @@
+package com.projektsse.backend.service;
+
+import com.projektsse.backend.repository.NoteRepository;
+import com.projektsse.backend.repository.UserRepository;
+import com.projektsse.backend.repository.entities.User;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.test.web.servlet.client.RestTestClient;
+import org.springframework.web.context.WebApplicationContext;
+
+@SpringBootTest
+class NoteServiceTest {
+
+    @Autowired
+    private WebApplicationContext context;
+
+    @Autowired
+    private NoteRepository noteRepository;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    @Autowired
+    private JwtService jwtService;
+
+    RestTestClient client;
+
+    private User testUser;
+    private String authToken;
+    private String fingerprint;
+    private String fingerprintHash;
+
+    @BeforeEach
+    void setUp(WebApplicationContext context) {
+        client = RestTestClient.bindToApplicationContext(context).build();
+
+        testUser = userRepository.save(new User("test@example.com", "$argon2id$v=19$m=16,t=2,p=1$T1ZsV1ZtV1ZVd1pRVG9uZw$Y2hpbGRyZW4xMjM0NTY3OA"));
+
+        fingerprint = jwtService.generateFingerprint();
+        fingerprintHash = jwtService.hashFingerprint(fingerprint);
+        authToken = jwtService.generateAccessToken(testUser.getId().toString(), fingerprintHash);
+
+    }
+
+//    @Test
+//    void testCreateNoteSuccess() {
+//        client.post()
+//                .uri("/api/documents")
+//                .header("Authorization", "Bearer " + authToken)
+//                .cookie("__Secure-Fgp", fingerprint)
+//                .cookie("X-XSRF-TOKEN", "null")
+//                .body(new NoteReq("Test Note", "This is a test note.", false))
+//                .exchange()
+//                .expectStatus().isCreated();
+//    }
+
+    @Test
+    void updateNote() {
+    }
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/components/DeleteButton.tsx b/projekt/frontend/src/components/DeleteButton.tsx
index d86bc3f..808d137 100644
--- a/projekt/frontend/src/components/DeleteButton.tsx
+++ b/projekt/frontend/src/components/DeleteButton.tsx
@@ -1,12 +1,55 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faTrash} from "@fortawesome/free-solid-svg-icons";
+import {faCircleExclamation, faTrash} from "@fortawesome/free-solid-svg-icons";
+import {useState} from "react";
+
+function DeleteButton({ onDeleteClick, title = "Delete", message = "Are you sure? This action cannot be undone." }: { onDeleteClick: () => void, title?: string, message?: string }) {
+    const [showModal, setShowModal] = useState(false);
+
+    const handleConfirmDelete = () => {
+        setShowModal(false)
+        onDeleteClick();
+    }
 
-function DeleteButton({ onDeleteClick }: { onDeleteClick: () => void }) {
     return (
-        <button onClick={onDeleteClick} className="mt-8 px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-md cursor-pointer transition-colors">
-            <FontAwesomeIcon icon={faTrash} /> Delete
-        </button>
+        <>
+            <button data-model-target="popup-modal"
+                    onClick={() : void => setShowModal(true)}
+                    className="mt-8 px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-md cursor-pointer transition-colors"
+            >
+                <FontAwesomeIcon icon={faTrash} /> Delete
+            </button>
+
+        {showModal && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+                <div className="bg-white rounded-xl shadow-xl p-8 max-w-md w-full mx-4">
+                    <div className="flex items-center gap-3 mb-4">
+                        <FontAwesomeIcon icon={faCircleExclamation} className="text-red-700 text-xl" />
+                        <h2 className="text-lg font-bold text-gray-900">{title}</h2>
+                    </div>
+                    <p className="text-gray-600 mb-6">
+                        {message}
+                    </p>
+                    <div className="flex justify-between gap-3">
+                        <button
+                            onClick={handleConfirmDelete}
+                            className="px-4 py-2 rounded-md bg-red-500 hover:bg-red-600 text-white font-semibold cursor-pointer transition-colors"
+                        >
+                            <FontAwesomeIcon icon={faTrash} /> Delete
+                        </button>
+                        <button
+                            onClick={() => setShowModal(false)}
+                            className="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 font-semibold cursor-pointer transition-colors"
+                        >
+                            Cancel
+                        </button>
+
+                    </div>
+                </div>
+            </div>
+        )}
+        </>
     );
+
 }
 
 export default DeleteButton;
\ No newline at end of file
diff --git a/projekt/frontend/src/components/DocumentDetailPage.tsx b/projekt/frontend/src/components/DocumentDetailPage.tsx
index a37c146..f82882e 100644
--- a/projekt/frontend/src/components/DocumentDetailPage.tsx
+++ b/projekt/frontend/src/components/DocumentDetailPage.tsx
@@ -60,7 +60,7 @@ function DocumentDetailPage() {
                     if (response.status === 404) {
                         throw new Error('Document not found');
                     }
-                    throw new Error('Fehler beim Laden des Dokuments');
+                    throw new Error('Error loading document');
                 }
 
                 const data = await response.json();
@@ -79,11 +79,6 @@ function DocumentDetailPage() {
     const handleDelete = async () => {
         if (!documentId) return;
 
-        const confirmed = window.confirm(
-            "Willst du dieses Dokument wirklich löschen?"
-        );
-        if (!confirmed) return;
-
         try {
             const response = await apiFetch(
                 auth,
@@ -92,11 +87,11 @@ function DocumentDetailPage() {
                 }
             );
             if (!response.ok) {
-                throw new Error("Löschen fehlgeschlagen");
+                throw new Error("Failed to delete document");
             }
             navigate(-1);
         } catch (err) {
-            alert(err instanceof Error ? err.message : "Fehler beim Löschen");
+            alert(err instanceof Error ? err.message : "Error occurred while deleting document");
         }
     };
 
@@ -149,7 +144,7 @@ function DocumentDetailPage() {
                             </p>
                         }
                     </header>
-                    <div className="mt-8 pt-8 break-all border-gray-100">
+                    <div className="mt-8 pt-8 break-normal border-gray-100">
                         {document.md_content ? (
                             <SafeMarkdown markdown={document.md_content}/>
                         ) : (
@@ -158,7 +153,7 @@ function DocumentDetailPage() {
                     </div>
                 </div>
 
-                { isOwner && (<DeleteButton onDeleteClick={handleDelete} />)}
+                { isOwner && (<DeleteButton title="Delete document" message="Are you sure you want to delete this document? This action cannot be undone." onDeleteClick={handleDelete} />)}
 
             </div>
         </>

From d5506129a52d9608d88f2afc71bbce9523c1e427 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 24 Mar 2026 12:24:44 +0100
Subject: [PATCH 05/16] fix: fixing PUT /api/documents/{id} Route and adjusting
 response time in login attempts to prevent user enumeration / timing attacks

---
 .../backend/config/SecurityBeansConfig.java   |  1 +
 .../backend/repository/entities/Note.java     | 20 +++++++++----------
 .../backend/service/NoteService.java          | 13 ++++++------
 .../backend/service/UserService.java          |  4 +++-
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityBeansConfig.java b/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityBeansConfig.java
index 1f510f9..c3aad8f 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityBeansConfig.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityBeansConfig.java
@@ -27,6 +27,7 @@ public AuthenticationProvider authenticationProvider(
     public PasswordEncoder passwordEncoder() {
         // https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#argon2id
         // Configurations taken from OWASP recommendations
+
         return new Argon2PasswordEncoder(
             16, // Salt length
             32, // Hash length
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java b/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java
index 6ee474c..fab54d4 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/repository/entities/Note.java
@@ -2,9 +2,6 @@
 
 import com.projektsse.backend.models.NoteModel;
 import jakarta.persistence.*;
-import jakarta.validation.constraints.NotBlank;
-import jakarta.validation.constraints.NotNull;
-import jakarta.validation.constraints.Size;
 import org.hibernate.annotations.CreationTimestamp;
 import org.hibernate.annotations.UpdateTimestamp;
 
@@ -29,7 +26,7 @@ public class Note {
     private boolean isPrivate;
 
     @CreationTimestamp
-    @Column(name = "created_at")
+    @Column(name = "created_at", updatable = false)
     private LocalDateTime createdAt;
 
     @UpdateTimestamp
@@ -52,10 +49,6 @@ public void setOwner(User user) {
         this.user = user;
     }
 
-    public void setTitle(@NotBlank(message = "Titel darf nicht leer sein") @Size(max = 255, message = "Titel darf maximal 255 Zeichen lang sein") String title) {
-        this.title = title;
-    }
-
     public NoteModel toModel() {
         return new NoteModel(
             this.noteId,
@@ -70,7 +63,6 @@ public NoteModel toModel() {
 
     public static Note fromModel(NoteModel model, User owner) {
         Note note = new Note();
-        note.setNoteId(model.noteId());
         note.setTitle(model.title());
         note.setMdContent(model.md_content());
         note.setIsPrivate(model.is_private());
@@ -79,13 +71,19 @@ public static Note fromModel(NoteModel model, User owner) {
     }
 
 
+    public Note setTitle(String title) {
+        this.title = title;
+        return this;
+    }
 
-    public void setMdContent(@NotBlank(message = "Inhalt darf nicht leer sein") @Size(max = 10000, message = "Inhalt darf maximal 10.000 Zeichen lang sein") String mdContent) {
+    public Note setMdContent(String mdContent) {
         this.mdContent = mdContent;
+        return this;
     }
 
-    public void setIsPrivate(@NotNull(message = "Sichtbarkeit muss angegeben werden") boolean isPrivate) {
+    public Note setIsPrivate(boolean isPrivate) {
         this.isPrivate = isPrivate;
+        return this;
     }
 
     public User getOwner() {
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
index 9d11fed..928e2a5 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
@@ -6,7 +6,6 @@
 import com.projektsse.backend.models.NoteModel;
 import com.projektsse.backend.repository.NoteRepository;
 import com.projektsse.backend.repository.entities.Note;
-import com.projektsse.backend.repository.entities.User;
 import jakarta.validation.Valid;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Pattern;
@@ -88,19 +87,19 @@ public void deleteNote(UUID documentId, UUID userId) {
     }
 
     public NoteModel updateNote(UUID docId, @Valid NoteReq noteReq, UUID userId) {
-        NoteModel note = getNoteById(docId);
 
-        if (!note.userId().equals(userId)) {
+        Note noteEntity = noteRepository.findById(docId)
+                .orElseThrow(() -> new NoteNotFoundException(String.format("Note with ID %s not found", docId)));
+
+        if (!noteEntity.getOwner().getId().equals(userId)) {
             // Note exists, but belongs to another user, so we throw the same exception to prevent user enumeration
             throw new NoteNotFoundException(String.format("Note with ID %s not found", docId));
         }
 
-        User user = userService.getUserById(userId.toString());
-
-        note.setTitle(mdSanitizer.sanitizeTitle(noteReq.title()))
+        noteEntity.setTitle(mdSanitizer.sanitizeTitle(noteReq.title()))
             .setMdContent(mdSanitizer.sanitizeContent(noteReq.mdContent()))
             .setIsPrivate(noteReq.isPrivate());
 
-        return noteRepository.save(Note.fromModel(note, user)).toModel();
+        return noteRepository.save(noteEntity).toModel();
     }
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
index 4ccbcee..0a58a7f 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
@@ -26,6 +26,8 @@ public class UserService {
     private final EmailService emailService;
     private final RegistrationRepository registrationRepository;
 
+    private static final String DUMMY_HASH = "$argon2id$v=19$m=12288,t=3,p=1$bKJ65XHVvriCKaOG3i3WHw$Ruu7bnU7+IKhuSOAcYungNnDYbzILF5HEperRn5b28Q";
+
     public UserService(UserRepository userRepository,
                        PasswordEncoder passwordEncoder,
                        TokenService tokenService,
@@ -114,7 +116,7 @@ public UUID getUserIdByEmail(String email) {
     public void authenticateUser(String email, String password) {
         Optional<User> userOpt = userRepository.findByEmail(email);
         if (userOpt.isEmpty()) {
-            // passwordEncoder.matches(password, DUMMY_HASH); // Dummy-Hash-Vergleich, um Timing-Angriffe zu verhindern
+            passwordEncoder.matches(password, DUMMY_HASH); // Dummy-Hash to prevent timing attacks
             throw new IllegalArgumentException("Invalid credentials.");
         }
         User user = userOpt.get();

From 84721127b04203d62839762759a50e2a6450ef05 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 24 Mar 2026 13:16:47 +0100
Subject: [PATCH 06/16] chore: adding documentation frontend

---
 .../backend/service/TokenService.java           |  3 +++
 projekt/frontend/src/components/BackButton.tsx  |  5 +++++
 .../frontend/src/components/DeleteButton.tsx    |  7 +++++++
 .../frontend/src/components/ErrorMessage.tsx    | 17 +++++++++++------
 projekt/frontend/src/components/LoadingBar.tsx  |  3 +++
 projekt/frontend/src/types/ErrorMessageProps.ts | 14 ++++++++++++++
 6 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 projekt/frontend/src/types/ErrorMessageProps.ts

diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/TokenService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/TokenService.java
index 3243922..4c45320 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/TokenService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/TokenService.java
@@ -20,6 +20,9 @@
 
 import static com.projektsse.backend.exceptions.GlobalExceptionHandler.log;
 
+/**
+ *
+ */
 @Service
 public class TokenService {
 
diff --git a/projekt/frontend/src/components/BackButton.tsx b/projekt/frontend/src/components/BackButton.tsx
index de2beb8..8967329 100644
--- a/projekt/frontend/src/components/BackButton.tsx
+++ b/projekt/frontend/src/components/BackButton.tsx
@@ -1,5 +1,10 @@
 import {useNavigate} from "react-router";
 
+/**
+ * A simple back button component that either uses a provided onBack function or defaults to navigating back in history.
+ * @param onBack Optional callback function to execute when the back button is clicked. If not provided, it will navigate back using the browser history.
+ * @constructor
+ */
 function BackButton({onBack}: { onBack?: () => void }) {
     const navigate = useNavigate();
     const handleBack = onBack ?? (() => navigate(-1));
diff --git a/projekt/frontend/src/components/DeleteButton.tsx b/projekt/frontend/src/components/DeleteButton.tsx
index 808d137..7756df9 100644
--- a/projekt/frontend/src/components/DeleteButton.tsx
+++ b/projekt/frontend/src/components/DeleteButton.tsx
@@ -2,6 +2,13 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faCircleExclamation, faTrash} from "@fortawesome/free-solid-svg-icons";
 import {useState} from "react";
 
+/**
+ * A button component that shows a confirmation modal before executing a delete action.
+ * @param onDeleteClick Callback function to execute when the delete action is confirmed.
+ * @param title Optional title for the confirmation modal. Defaults to "Delete".
+ * @param message Optional message for the confirmation modal. Defaults to "Are you sure? This action cannot be undone."
+ * @constructor
+ */
 function DeleteButton({ onDeleteClick, title = "Delete", message = "Are you sure? This action cannot be undone." }: { onDeleteClick: () => void, title?: string, message?: string }) {
     const [showModal, setShowModal] = useState(false);
 
diff --git a/projekt/frontend/src/components/ErrorMessage.tsx b/projekt/frontend/src/components/ErrorMessage.tsx
index 91fc7fd..68a3d7f 100644
--- a/projekt/frontend/src/components/ErrorMessage.tsx
+++ b/projekt/frontend/src/components/ErrorMessage.tsx
@@ -2,13 +2,18 @@ import React from 'react';
 import '../styling/ErrorMessage.css';
 import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import type {ErrorMessageProps} from "../types/ErrorMessageProps.ts";
 
-interface ErrorMessageProps {
-    message?: string;
-    type?: 'field' | 'general';
-}
-
-const ErrorMessage: React.FC<ErrorMessageProps> = ({ message, type = 'field' }) => {
+/**
+ * Displays an error message with optional with a warning icon
+ *
+ * @param message The error message to display. If empty, nothing will be rendered.
+ * @param type Visual style variant. 'field' for inline below form fields, 'general' for prominent block with warning icon. Default is 'field'.
+ * @example
+ * <ErrorMessage message="This field is required." type="field" />
+ * <ErrorMessage message="Failed to load data." type="general" />
+ */
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ message, type = 'field' } : ErrorMessageProps) => {
     if (!message) return null;
 
     const className = `error-message error-message--${type}`;
diff --git a/projekt/frontend/src/components/LoadingBar.tsx b/projekt/frontend/src/components/LoadingBar.tsx
index 68a6289..d29d3f5 100644
--- a/projekt/frontend/src/components/LoadingBar.tsx
+++ b/projekt/frontend/src/components/LoadingBar.tsx
@@ -1,3 +1,6 @@
+/**
+ * A simple loading bar component that can be used to indicate that documents are being loaded.
+ */
 function LoadingBar() {
     return (
         <div className="max-w-350 mx-auto px-4 py-16 flex flex-col items-center gap-4">
diff --git a/projekt/frontend/src/types/ErrorMessageProps.ts b/projekt/frontend/src/types/ErrorMessageProps.ts
new file mode 100644
index 0000000..8b993b2
--- /dev/null
+++ b/projekt/frontend/src/types/ErrorMessageProps.ts
@@ -0,0 +1,14 @@
+/**
+ * Interface for error message properties.
+ */
+export interface ErrorMessageProps {
+    /** The error message to display. If empty, nothing will be rendered. */
+    message?: string;
+    /**
+     * Visual style variant.
+     * - `'field'`: inline below form fields
+     * - `'general'`: prominent block with warning icon
+     * @default 'field'
+     */
+    type?: 'field' | 'general';
+}
\ No newline at end of file

From a182081d37167e49a1dde2f965622bb140488144 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 24 Mar 2026 15:06:50 +0100
Subject: [PATCH 07/16] chore: refactoring css to tailwind, adding colors to
 password strength bar

---
 .../frontend/src/components/LoadingBar.tsx    |   2 +-
 projekt/frontend/src/components/LoginPage.tsx |   8 +-
 .../frontend/src/components/PWResetEmail.tsx  |   2 +-
 .../src/components/PWResetPassword.tsx        |   8 +-
 .../frontend/src/components/RegisterPage.tsx  |  22 ++--
 projekt/frontend/src/index.css                |  51 ++++++++
 projekt/frontend/src/styling/RegisterPage.css | 117 ------------------
 7 files changed, 73 insertions(+), 137 deletions(-)
 delete mode 100644 projekt/frontend/src/styling/RegisterPage.css

diff --git a/projekt/frontend/src/components/LoadingBar.tsx b/projekt/frontend/src/components/LoadingBar.tsx
index d29d3f5..b7299e9 100644
--- a/projekt/frontend/src/components/LoadingBar.tsx
+++ b/projekt/frontend/src/components/LoadingBar.tsx
@@ -7,7 +7,7 @@ function LoadingBar() {
             <div className="w-full max-w-md h-1.5 bg-gray-200 rounded-full overflow-hidden">
                 <div className="h-full w-1/3 bg-blue-500 rounded-full animate-loading" />
             </div>
-            <span className="text-sm text-gray-400">Loading documents...</span>
+            <span className="text-sm text-gray-400">Loading...</span>
         </div>
     );
 }
diff --git a/projekt/frontend/src/components/LoginPage.tsx b/projekt/frontend/src/components/LoginPage.tsx
index e5f1d7e..fbe1f96 100644
--- a/projekt/frontend/src/components/LoginPage.tsx
+++ b/projekt/frontend/src/components/LoginPage.tsx
@@ -114,10 +114,6 @@ function LoginPage() {
             setErrors({ general: "Bitte Passwort eingeben." });
             return;
         }
-        /*const confirmed = window.confirm(
-            "Dein Konto wird gelöscht. Fortfahren?"
-        );
-        if (!confirmed) return;*/
 
         try {
             const res = await apiFetch(auth, '/api/auth/me', {
@@ -148,7 +144,7 @@ function LoginPage() {
         return (
             <>
                 <Navbar/>
-                <div className="register-wrapper">
+                <div className="auth-form-wrapper">
                     <h1>Sie sind angemeldet</h1>
 
                     <ErrorMessage
@@ -200,7 +196,7 @@ function LoginPage() {
     return (
         <>
             <Navbar/>
-            <div className="register-wrapper">
+            <div className="auth-form-wrapper">
                 <h1>Login Page</h1>
 
                 <div className="form-group">
diff --git a/projekt/frontend/src/components/PWResetEmail.tsx b/projekt/frontend/src/components/PWResetEmail.tsx
index e069620..1676c77 100644
--- a/projekt/frontend/src/components/PWResetEmail.tsx
+++ b/projekt/frontend/src/components/PWResetEmail.tsx
@@ -64,7 +64,7 @@ export function PWResetEmail() {
     return (
         <>
             <Navbar/>
-            <div className="register-wrapper">
+            <div className="auth-form-wrapper">
                 <h1>Password Reset</h1>
 
                 <div className="form-group">
diff --git a/projekt/frontend/src/components/PWResetPassword.tsx b/projekt/frontend/src/components/PWResetPassword.tsx
index b15184a..fcf4e6a 100644
--- a/projekt/frontend/src/components/PWResetPassword.tsx
+++ b/projekt/frontend/src/components/PWResetPassword.tsx
@@ -114,7 +114,7 @@ export function PWResetPassword() {
         return (
             <>
                 <Navbar/>
-                <div className="register-wrapper">
+                <div className="auth-form-wrapper">
                     <h1> Password Reset</h1>
                     <p>Validating token...</p>
                 </div>
@@ -126,7 +126,7 @@ export function PWResetPassword() {
         return (
             <>
                 <Navbar/>
-                <div className="register-wrapper">
+                <div className="auth-form-wrapper">
                     <h1>Password Reset</h1>
                     <ApiErrorMessage error={tokenError ?? undefined} />
                 </div>
@@ -138,7 +138,7 @@ export function PWResetPassword() {
         return (
             <>
                 <Navbar/>
-                <div className="register-wrapper">
+                <div className="auth-form-wrapper">
                     <h1>Password Reset</h1>
                     {responseMessage && <div className="success-message">{responseMessage}</div>}
                     <NavLink to="/login" className="primary-button">Go to Login</NavLink>
@@ -150,7 +150,7 @@ export function PWResetPassword() {
     return (
         <>
             <Navbar/>
-            <div className="register-wrapper">
+            <div className="auth-form-wrapper">
                 <h1>Set new password</h1>
 
                 <div className="form-group">
diff --git a/projekt/frontend/src/components/RegisterPage.tsx b/projekt/frontend/src/components/RegisterPage.tsx
index a18a174..13bf000 100644
--- a/projekt/frontend/src/components/RegisterPage.tsx
+++ b/projekt/frontend/src/components/RegisterPage.tsx
@@ -4,7 +4,6 @@ import {zxcvbn, zxcvbnOptions, type ZxcvbnResult} from "@zxcvbn-ts/core";
 import * as common from "@zxcvbn-ts/language-common";
 import * as de from "@zxcvbn-ts/language-de";
 import { useNavigate } from 'react-router';
-import "../styling/RegisterPage.css";
 import Navbar from "./Navbar.tsx";
 import type {ErrorType} from "../types/ErrorType.ts";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
@@ -115,6 +114,7 @@ function RegisterPage() {
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [passwordData, setPasswordData] = useState<ZxcvbnResult | null>(null);
     const [apiError, setApiError] = useState<Partial<ErrorType> | undefined>(undefined);
+    const score = passwordData?.score ?? 0;
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
         const { name, value } = e.target;
@@ -178,7 +178,7 @@ function RegisterPage() {
     return (
         <>
             <Navbar />
-            <div className="register-wrapper">
+            <div className="auth-form-wrapper">
                 <h1>Registration</h1>
 
                 <div className="form-group">
@@ -202,14 +202,20 @@ function RegisterPage() {
                         onChange={handleChange}
                         placeholder="Enter Password"
                     />
-                    <progress max={4} value={passwordData?.score ?? 0} className="password-strength-bar"></progress>
+
+                    <progress
+                        max={4}
+                        value={score}
+                        className={`password-strength-bar strength-${score}`}
+                    />
+
                     {passwordData && (
-                        <div className="password-feedback">
+                        <div className="bg-gray-200 mt-1 text-sm">
                             {passwordData.feedback.warning && (
-                                <p className="warning"> <FontAwesomeIcon icon={faTriangleExclamation} /> {passwordData.feedback.warning}</p>
+                                <p className="text-red-600 font-semibold"> <FontAwesomeIcon icon={faTriangleExclamation} /> {passwordData.feedback.warning}</p>
                             )}
                             {passwordData.feedback.suggestions.map((s, i) => (
-                                <p key={i} className="suggestion"><FontAwesomeIcon icon={faLightbulb} /> {s}</p>
+                                <p key={i} className="text-yellow-600 ml-2"><FontAwesomeIcon icon={faLightbulb} /> {s}</p>
                             ))}
                         </div>
                     )}
@@ -227,9 +233,9 @@ function RegisterPage() {
                     {isSubmitting ? <LoadingBar /> : 'Register'}
                 </button>
 
-                <p className="login-hint">
+                <p className="text-center mt-6 text-gray-500">
                     Already registered?{' '}
-                    <span onClick={() => navigate('/login')}>
+                    <span onClick={() => navigate('/login')} className="text-blue-500 cursor-pointer underline">
                         Login
                     </span>
                 </p>
diff --git a/projekt/frontend/src/index.css b/projekt/frontend/src/index.css
index d469b50..fb88b19 100644
--- a/projekt/frontend/src/index.css
+++ b/projekt/frontend/src/index.css
@@ -14,4 +14,55 @@
     .page-container {
         @apply max-w-4xl mx-auto px-4 md:px-2 py-8;
     }
+    .auth-form-wrapper {
+        @apply max-w-xl mx-auto mt-8 px-4;
+    }
+
+    .form-group {
+        @apply mb-6;
+    }
+    .form-group label {
+        @apply block mb-2 font-semibold;
+    }
+    .form-group input {
+        @apply w-full px-3 py-3 text-base border border-gray-300 rounded-md;
+    }
+
+    .primary-button {
+        @apply w-full py-3 text-base bg-blue-500 text-white border-none rounded-md cursor-pointer font-semibold;
+    }
+    .primary-button.disabled {
+        @apply bg-gray-300 cursor-not-allowed;
+    }
+
+    .password-strength-bar {
+        @apply w-full h-3 rounded-full appearance-none mt-2 mb-1 bg-gray-200 overflow-hidden;
+    }
+
+    .strength-0::-webkit-progress-value {
+        background-color: #e5e7eb;
+    }
+    .strength-1::-webkit-progress-value {
+        background-color: #ef4444;
+    }
+    .strength-2::-webkit-progress-value {
+        background-color: #f97316;
+    }
+    .strength-3::-webkit-progress-value {
+        background-color: #eab308;
+    }
+    .strength-4::-webkit-progress-value {
+        background-color: #22c55e;
+    }
+
+    .password-strength-bar::-moz-progress-bar {
+        background-color: inherit;
+    }
+
+    .strength-0::-moz-progress-bar { background-color: #e5e7eb; }
+    .strength-1::-moz-progress-bar { background-color: #ef4444; }
+    .strength-2::-moz-progress-bar { background-color: #f97316; }
+    .strength-3::-moz-progress-bar { background-color: #eab308; }
+    .strength-4::-moz-progress-bar { background-color: #22c55e; }
+
 }
\ No newline at end of file
diff --git a/projekt/frontend/src/styling/RegisterPage.css b/projekt/frontend/src/styling/RegisterPage.css
deleted file mode 100644
index 04385c6..0000000
--- a/projekt/frontend/src/styling/RegisterPage.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/* Wrapper */
-.register-wrapper {
-    max-width: 500px;
-    margin: 2rem auto;
-    padding: 0 1rem;
-}
-
-/* Form */
-.form-group {
-    margin-bottom: 1.5rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-}
-
-.form-group input {
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-}
-
-/* Buttons */
-.primary-button {
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 1rem;
-    background-color: #2196f3;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 600;
-}
-
-.primary-button.disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-}
-
-/* Login Hint */
-.login-hint {
-    text-align: center;
-    margin-top: 1.5rem;
-    color: #666;
-}
-
-.login-hint span {
-    color: #2196f3;
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-/* Success */
-.register-success-wrapper {
-    max-width: 600px;
-    margin: 3rem auto;
-    padding: 2rem;
-    text-align: center;
-}
-
-.register-success-box {
-    background-color: #e8f5e9;
-    border: 2px solid #4caf50;
-    border-radius: 12px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-}
-
-.register-success-box h1 {
-    color: #2e7d32;
-    margin-bottom: 1rem;
-}
-
-.register-success-box p {
-    font-size: 1.1rem;
-    color: #333;
-    line-height: 1.6;
-}
-
-.register-success-box .hint {
-    font-size: 1rem;
-    color: #666;
-    margin-top: 1rem;
-}
-
-/* Passwort-Progressbar */
-.password-strength-bar {
-    width: 100%;
-    height: 12px;
-    border-radius: 6px;
-    appearance: none;
-    margin-top: 0.5rem;
-    margin-bottom: 0.25rem;
-    background-color: #eee;
-    overflow: hidden;
-}
-
-.password-feedback {
-    background: #ececec;
-    margin-top: 0.25rem;
-    font-size: 0.875rem;
-}
-
-.password-feedback .warning {
-    color: #e53935;
-    font-weight: 600;
-}
-
-.password-feedback .suggestion {
-    color: #dca721;
-    margin-left: 0.5rem;
-}

From a57e6bb36c1a636b68be44f3c0c60c8d2ea48e0c Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Wed, 25 Mar 2026 15:05:49 +0100
Subject: [PATCH 08/16] fix: fixing dependency warning in pom.xml and starting
 refactoring in frontend

---
 projekt/backend/pom.xml                       |  6 +-
 projekt/frontend/src/adapters/api.ts          | 95 +++++++++++++++++++
 .../frontend/src/components/AuthContext.tsx   | 15 +--
 .../frontend/src/components/AuthProvider.tsx  |  2 +-
 .../frontend/src/services/documentService.ts  | 17 ++++
 projekt/frontend/src/types/AuthContextType.ts |  8 ++
 projekt/frontend/src/types/Document.ts        |  8 ++
 projekt/frontend/src/types/DocumentInput.ts   |  5 +
 8 files changed, 141 insertions(+), 15 deletions(-)
 create mode 100644 projekt/frontend/src/adapters/api.ts
 create mode 100644 projekt/frontend/src/services/documentService.ts
 create mode 100644 projekt/frontend/src/types/AuthContextType.ts
 create mode 100644 projekt/frontend/src/types/Document.ts
 create mode 100644 projekt/frontend/src/types/DocumentInput.ts

diff --git a/projekt/backend/pom.xml b/projekt/backend/pom.xml
index e999b4b..309b169 100644
--- a/projekt/backend/pom.xml
+++ b/projekt/backend/pom.xml
@@ -5,7 +5,7 @@
     <parent>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-parent</artifactId>
-        <version>4.0.0</version>
+        <version>4.0.4</version>
         <relativePath/> <!-- lookup parent from repository -->
     </parent>
     <groupId>com.projektSSE</groupId>
@@ -81,14 +81,12 @@
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-mail</artifactId>
-            <version>4.0.1</version>
         </dependency>
         <!-- Test Dependencies -->
         <!-- Source: https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-resttestclient -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-resttestclient</artifactId>
-            <version>4.0.0</version>
             <scope>test</scope>
         </dependency>
         <dependency>
@@ -108,7 +106,7 @@
         <dependency>
             <groupId>org.slf4j</groupId>
             <artifactId>slf4j-api</artifactId>
-            <version>2.1.0-alpha1</version>
+            <version>2.0.17</version>
             <scope>compile</scope>
         </dependency>
         <!-- Devtools Dependencies -->
diff --git a/projekt/frontend/src/adapters/api.ts b/projekt/frontend/src/adapters/api.ts
new file mode 100644
index 0000000..dc8fc81
--- /dev/null
+++ b/projekt/frontend/src/adapters/api.ts
@@ -0,0 +1,95 @@
+import { getCookie } from "../utils/cookies";
+import type {AuthContextType} from "../types/AuthContextType.ts";
+
+const API_BASE = "/api";
+const CSRF_HEADER = "X-XSRF-TOKEN";
+const CSRF_COOKIE = "XSRF-TOKEN";
+
+export interface ApiConfig {
+    auth: AuthContextType;
+}
+
+class ApiAdapter {
+    private auth: AuthContextType;
+
+    constructor(auth: AuthContextType) {
+        this.auth = auth;
+    }
+
+    private getHeaders(): HeadersInit {
+        const headers: Record<string, string> = {
+            "Content-Type": "application/json",
+        };
+
+        if (this.auth.token) {
+            headers["Authorization"] = `Bearer ${this.auth.token}`;
+        }
+
+        const csrf = getCookie(CSRF_COOKIE);
+        if (csrf) {
+            headers[CSRF_HEADER] = csrf;
+        }
+
+        // Fingerprint Cookie will be sent automatically with credentials: "include", no need to add it to headers
+
+        return headers;
+    }
+
+    async get<T>(endpoint: string): Promise<T> {
+        const response = await fetch(`${API_BASE}${endpoint}`, {
+            method: "GET",
+            headers: this.getHeaders(),
+            credentials: "include",
+        });
+        return this.handleResponse<T>(response);
+    }
+
+    async post<T>(endpoint: string, body?: unknown): Promise<T> {
+        const response = await fetch(`${API_BASE}${endpoint}`, {
+            method: "POST",
+            headers: this.getHeaders(),
+            body: body ? JSON.stringify(body) : undefined,
+            credentials: "include",
+        });
+        return this.handleResponse<T>(response);
+    }
+
+    async put<T>(endpoint: string, body?: unknown): Promise<T> {
+        const response = await fetch(`${API_BASE}${endpoint}`, {
+            method: "PUT",
+            headers: this.getHeaders(),
+            body: body ? JSON.stringify(body) : undefined,
+            credentials: "include",
+        });
+        return this.handleResponse<T>(response);
+    }
+
+    async delete<T>(endpoint: string): Promise<T> {
+        const response = await fetch(`${API_BASE}${endpoint}`, {
+            method: "DELETE",
+            headers: this.getHeaders(),
+            credentials: "include",
+        });
+        return this.handleResponse<T>(response);
+    }
+
+    private async handleResponse<T>(response: Response): Promise<T> {
+        if (response.status === 401) {
+            const newToken = await this.auth.refreshAccessToken();
+            if (!newToken) {
+                throw new Error("Authentication required.");
+            }
+        }
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.title || "API request failed");
+        }
+
+        return response.json();
+    }
+}
+
+export const createApiAdapter = (auth: AuthContextType): ApiAdapter => {
+    return new ApiAdapter(auth);
+};
diff --git a/projekt/frontend/src/components/AuthContext.tsx b/projekt/frontend/src/components/AuthContext.tsx
index af14d61..b1abbe7 100644
--- a/projekt/frontend/src/components/AuthContext.tsx
+++ b/projekt/frontend/src/components/AuthContext.tsx
@@ -1,16 +1,11 @@
 import {createContext} from 'react';
+import type {AuthContextType} from "../types/AuthContextType.ts";
 
 
-// Typen definieren
-export interface AuthContextType {
-    token: string | null;
-    login: (newToken: string) => void;
-    logout: () => void;
-    refreshAccessToken: () => Promise<string | null>;
-    isAuthenticated: boolean;
-}
-
-// Store JWT-Token In-Memory
+/**
+ * The AuthContext stores the authentication state of the user and provides methods for logging in and out.
+ * It is storing a JWT In-Memory, which is lost when the page is refreshed.
+ */
 export const AuthContext = createContext<AuthContextType | null>(null);
 
 
diff --git a/projekt/frontend/src/components/AuthProvider.tsx b/projekt/frontend/src/components/AuthProvider.tsx
index 3ffcff3..0843179 100644
--- a/projekt/frontend/src/components/AuthProvider.tsx
+++ b/projekt/frontend/src/components/AuthProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import  React, { useCallback, useEffect, useState } from "react";
 import { getCookie } from "../utils/cookies";
 import { AuthContext } from "./AuthContext";
 import LoadingBar from "./LoadingBar.tsx";
diff --git a/projekt/frontend/src/services/documentService.ts b/projekt/frontend/src/services/documentService.ts
new file mode 100644
index 0000000..8ab943b
--- /dev/null
+++ b/projekt/frontend/src/services/documentService.ts
@@ -0,0 +1,17 @@
+
+/*
+export const createDocumentService = (api) => ({
+    getAll: () => api.get<{ documents: Document[] }>("/documents"),
+
+    getById: (id: string) => api.get<Document>(`/documents/${id}`),
+
+    create: (data: DocumentInput) =>
+        api.post<Document>("/documents", data),
+
+    update: (id: string, data: Partial<DocumentInput>) =>
+        api.put<Document>(`/documents/${id}`, data),
+
+    delete: (id: string) =>
+        api.delete<void>(`/documents/${id}`),
+});
+*/
\ No newline at end of file
diff --git a/projekt/frontend/src/types/AuthContextType.ts b/projekt/frontend/src/types/AuthContextType.ts
new file mode 100644
index 0000000..80d0933
--- /dev/null
+++ b/projekt/frontend/src/types/AuthContextType.ts
@@ -0,0 +1,8 @@
+// Typen definieren
+export interface AuthContextType {
+    token: string | null;
+    login: (newToken: string) => void;
+    logout: () => void;
+    refreshAccessToken: () => Promise<string | null>;
+    isAuthenticated: boolean;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/Document.ts b/projekt/frontend/src/types/Document.ts
new file mode 100644
index 0000000..0f48943
--- /dev/null
+++ b/projekt/frontend/src/types/Document.ts
@@ -0,0 +1,8 @@
+import type {DocumentInput} from "./DocumentInput.ts";
+
+export interface Document extends DocumentInput {
+    noteId: string;
+    userId: string;
+    created_at: string;
+    updated_at: string;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/DocumentInput.ts b/projekt/frontend/src/types/DocumentInput.ts
new file mode 100644
index 0000000..2b9f92c
--- /dev/null
+++ b/projekt/frontend/src/types/DocumentInput.ts
@@ -0,0 +1,5 @@
+export interface DocumentInput {
+    title: string;
+    mdContent: string;
+    isPrivate: boolean;
+}
\ No newline at end of file

From b0cd23b7cb1d11c1a76d955bd7664eb40835fdc7 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Thu, 26 Mar 2026 17:18:01 +0100
Subject: [PATCH 09/16] feat: refactoring backend, dtos, exceptions handlers
 for validation

---
 projekt/backend/pom.xml                       |  4 +-
 .../backend/config/SecurityConfig.java        |  9 ++-
 .../backend/controller/AuthController.java    | 69 +++++++++----------
 .../backend/controller/NotesController.java   | 45 ++++++------
 .../backend/controller/dto/ApiMessage.java    |  4 ++
 .../dto/{LoginReq.java => LoginRequest.java}  |  4 +-
 .../dto/{NoteReq.java => NoteRequest.java}    |  2 +-
 .../dto/{NoteRes.java => NoteResponse.java}   |  3 +-
 .../exceptions/GlobalExceptionHandler.java    | 45 +++++++-----
 .../projektsse/backend/models/NoteModel.java  |  9 +--
 .../backend/service/NoteService.java          | 28 ++++----
 .../backend/service/UserService.java          | 20 ++----
 .../resources/application-local.properties    | 17 -----
 .../src/main/resources/application.properties |  5 +-
 .../Authentication/AuthControllerTest.java    | 29 ++++----
 15 files changed, 141 insertions(+), 152 deletions(-)
 create mode 100644 projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java
 rename projekt/backend/src/main/java/com/projektsse/backend/controller/dto/{LoginReq.java => LoginRequest.java} (94%)
 rename projekt/backend/src/main/java/com/projektsse/backend/controller/dto/{NoteReq.java => NoteRequest.java} (97%)
 rename projekt/backend/src/main/java/com/projektsse/backend/controller/dto/{NoteRes.java => NoteResponse.java} (84%)
 delete mode 100644 projekt/backend/src/main/resources/application-local.properties

diff --git a/projekt/backend/pom.xml b/projekt/backend/pom.xml
index 309b169..0059c22 100644
--- a/projekt/backend/pom.xml
+++ b/projekt/backend/pom.xml
@@ -41,7 +41,7 @@
         <dependency>
             <groupId>org.springframework.security</groupId>
             <artifactId>spring-security-crypto</artifactId>
-            <version>7.0.0</version>
+            <version>7.0.4</version>
         </dependency>
         <!-- https://mvnrepository.com/artifact/org.jsoup/jsoup -->
         <dependency>
@@ -98,7 +98,7 @@
         <dependency>
             <groupId>org.mockito</groupId>
             <artifactId>mockito-core</artifactId>
-            <version>5.22.0</version>
+            <version>5.23.0</version>
             <scope>test</scope>
         </dependency>
         <!-- Logging Dependencies -->
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java b/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java
index c0b14f8..ff167a8 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/config/SecurityConfig.java
@@ -1,5 +1,6 @@
 package com.projektsse.backend.config;
 
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
@@ -14,6 +15,9 @@
 @EnableWebSecurity
 public class SecurityConfig {
 
+    @Value("${app.cookie.secure}")
+    private boolean cookieSecure;
+
     private final JwtFilter jwtFilter;
 
     private final CustomAuthenticationEntryPoint customAuthenticationEntryPoint;
@@ -32,7 +36,7 @@ public class SecurityConfig {
     public SecurityFilterChain securityFilterChain(HttpSecurity http) {
         CookieCsrfTokenRepository repo = CookieCsrfTokenRepository.withHttpOnlyFalse();
         repo.setCookieCustomizer(cookie -> {
-            cookie.secure(true);
+            cookie.secure(cookieSecure);
             cookie.sameSite("Strict");
             cookie.path("/");
         });
@@ -71,7 +75,8 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) {
                             "/api/auth/rt/refresh-token",
                             "/api/auth/rt/logout",
                            "/api/auth/forgot-password",
-                           "/api/auth/reset-password"
+                           "/api/auth/reset-password",
+                           "/api/auth/csrf"
                    ).permitAll().anyRequest().authenticated()
             )
             .formLogin(AbstractHttpConfigurer::disable)
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
index 7469f51..6a572ea 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
@@ -10,7 +10,7 @@
 import jakarta.validation.Valid;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Pattern;
-import jakarta.validation.constraints.Size;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseCookie;
 import org.springframework.http.ResponseEntity;
@@ -27,6 +27,9 @@
 @Validated
 public class AuthController {
 
+    @Value("${app.cookie.secure}")
+    private boolean cookieSecure;
+
     private final UserService userService;
     private final JwtService jwtService;
     private final TokenService tokenService;
@@ -37,29 +40,20 @@ public AuthController(UserService userService, JwtService jwtService, TokenServi
         this.jwtService = jwtService;
         this.tokenService = tokenService;
         this.passwortResetService = passwortResetService;
-
     }
 
     @PostMapping(value = "/register", consumes = "application/json", produces = "application/json")
-    public ResponseEntity<?> register(@Validated @RequestBody RegisterReq req) {
-
+    public ResponseEntity<ApiMessage> register(@Validated @RequestBody RegisterReq req) {
         UserReqModel userReqModel = new UserReqModel(req.email(), req.password());
-
         userService.registerUser(userReqModel);
-
-        return ResponseEntity.status(HttpStatus.CREATED)
-             .body(Map.of(
-                "message", "Benutzer erfolgreich registriert. Bitte überprüfen Sie Ihre E-Mails zur Verifizierung."
-            ));
-
+        return ResponseEntity.status(HttpStatus.CREATED).body(new ApiMessage("User successfully registered. Please check your email for verification."));
     }
 
     @GetMapping(value = "/verify-email", produces = "application/json")
     public ResponseEntity<?> verifyEmail(
             @RequestParam("code")
-            @NotBlank(message = "Ungültiger Verifizierungscode.")
-            @Size(min = 43, max = 43, message = "Ungültiger Verifizierungscode.")
-            @Pattern(regexp = "^[A-Za-z0-9_-]{43}$", message = "Ungültiger Verifizierungscode.")
+            @NotBlank(message = "Invalid verification code.")
+            @Pattern(regexp = "^[A-Za-z0-9_-]{43}$", message = "Invalid verification code.")
             String code
     ) {
         boolean isVerified = userService.verifyUserEmail(code);
@@ -73,11 +67,11 @@ public ResponseEntity<?> verifyEmail(
 
 
     @PostMapping(value = "/login", consumes = "application/json", produces = "application/json")
-    public ResponseEntity<?> login(@Validated @RequestBody LoginReq loginReq) {
+    public ResponseEntity<?> login(@Validated @RequestBody LoginRequest loginRequest) {
 
-        userService.authenticateUser(loginReq.email(), loginReq.password());
+        userService.authenticateUser(loginRequest.email(), loginRequest.password());
 
-        String userId = userService.getUserIdByEmail(loginReq.email()).toString();
+        String userId = userService.getUserIdByEmail(loginRequest.email()).toString();
 
         // Fingerprint generieren
         String fingerprint = jwtService.generateFingerprint();
@@ -93,7 +87,7 @@ public ResponseEntity<?> login(@Validated @RequestBody LoginReq loginReq) {
         // Fingerprint Cookie (HttpOnly, Secure, SameSite=Strict)
         ResponseCookie fingerprintCookie = ResponseCookie.from("__Secure-Fgp", fingerprint)
                                                          .httpOnly(true)
-                                                         .secure(true)
+                                                         .secure(cookieSecure)
                                                          .path("/")
                                                          .maxAge(accessTokenDuration) // Max-Age <= JWT Expiry
                                                          .sameSite("Strict")
@@ -102,7 +96,7 @@ public ResponseEntity<?> login(@Validated @RequestBody LoginReq loginReq) {
         // Refresh Token Cookie
         ResponseCookie refreshTokenCookie = ResponseCookie.from("REFRESH_TOKEN", refreshToken)
                                                           .httpOnly(true)
-                                                          .secure(true)
+                                                          .secure(cookieSecure)
                                                           .path("/api/auth/rt")
                                                           .maxAge(durationDays)
                                                           .sameSite("Strict")
@@ -125,7 +119,7 @@ public ResponseEntity<?> refreshToken(@CookieValue(name = "REFRESH_TOKEN") Strin
 
         if (userIdOpt.isEmpty()) {
             ResponseCookie deleteCookie = ResponseCookie.from("REFRESH_TOKEN", "")
-                                                        .httpOnly(true).secure(true).path("/api/auth/rt")
+                                                        .httpOnly(true).secure(cookieSecure).path("/api/auth/rt")
                                                         .maxAge(0).sameSite("Strict").build();
 
             return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
@@ -145,11 +139,11 @@ public ResponseEntity<?> refreshToken(@CookieValue(name = "REFRESH_TOKEN") Strin
         Duration accessTokenDuration = Duration.ofMinutes(10);
 
         ResponseCookie fingerprintCookie = ResponseCookie.from("__Secure-Fgp", newFingerprint)
-                                                         .httpOnly(true).secure(true).path("/")
+                                                         .httpOnly(true).secure(cookieSecure).path("/")
                                                          .maxAge(accessTokenDuration).sameSite("Strict").build();
 
         ResponseCookie refreshTokenCookie = ResponseCookie.from("REFRESH_TOKEN", newRefreshToken)
-                                                          .httpOnly(true).secure(true).path("/api/auth/rt")
+                                                          .httpOnly(true).secure(cookieSecure).path("/api/auth/rt")
                                                           .maxAge(Duration.ofDays(7)).sameSite("Strict").build();
 
         return ResponseEntity.ok()
@@ -160,7 +154,7 @@ public ResponseEntity<?> refreshToken(@CookieValue(name = "REFRESH_TOKEN") Strin
 
 
     @PostMapping(value = "/rt/logout", produces = "application/json")
-    public ResponseEntity<?> logout(
+    public ResponseEntity<ApiMessage> logout(
             @CookieValue(name ="REFRESH_TOKEN", required = false) String refreshToken
     ) {
         if (refreshToken != null && !refreshToken.isBlank()) {
@@ -169,7 +163,7 @@ public ResponseEntity<?> logout(
 
         ResponseCookie deleteCookie = ResponseCookie.from("REFRESH_TOKEN", "")
                 .httpOnly(true)
-                .secure(true)
+                .secure(cookieSecure)
                 .path("/api/auth/rt")
                 .maxAge(0)
                 .sameSite("Strict")
@@ -177,7 +171,7 @@ public ResponseEntity<?> logout(
 
         ResponseCookie deleteFingerprintCookie = ResponseCookie.from("__Secure-Fgp", "")
                 .httpOnly(true)
-                .secure(true)
+                .secure(cookieSecure)
                 .path("/")
                 .maxAge(0)
                 .sameSite("Strict")
@@ -186,41 +180,42 @@ public ResponseEntity<?> logout(
         return  ResponseEntity.ok()
                 .header("Set-Cookie", deleteCookie.toString())
                 .header("Set-Cookie", deleteFingerprintCookie.toString())
-                .body(Map.of("message", "Erfolgreich abgemeldet."));
+                .body(new ApiMessage("Successfully logged out."));
     }
 
 
     @DeleteMapping(value = "/me", consumes = "application/json", produces = "application/json")
-    public ResponseEntity<?> deleteAccount(
+    public ResponseEntity<ApiMessage> deleteAccount(
             @CurrentUserId UUID userId,
             @Valid @RequestBody DeleteAccountReq deleteAccountReq
     ) {
         userService.deleteUserAccount(userId, deleteAccountReq.password());
-
-        return  ResponseEntity.ok()
-                .body(Map.of("message", "Benutzerkonto erfolgreich gelöscht."));
+        return ResponseEntity.ok(new ApiMessage("Account successfully deleted."));
     }
 
 
     @PostMapping(value = "/forgot-password", consumes = "application/json", produces = "application/json")
-    public ResponseEntity<?> forgotPassword(@Validated @RequestBody EmailPasswordReset emailPasswordReset) {
+    public ResponseEntity<ApiMessage> forgotPassword(@Validated @RequestBody EmailPasswordReset emailPasswordReset) {
         passwortResetService.createPasswordReset(emailPasswordReset);
-        return ResponseEntity.ok(Map.of("message", "Wenn ein Konto mit dieser E-Mail-Adresse existiert, wurde eine E-Mail mit Anweisungen zum Zurücksetzen des Passworts gesendet"));
+        return ResponseEntity.ok(new ApiMessage("If an account with that email exists, a password reset link has been sent."));
     }
 
     @GetMapping(value = "/reset-password", produces = "application/json")
-    public ResponseEntity<?> handleResetLink(@RequestParam String token) {
+    public ResponseEntity<ApiMessage> handleResetLink(@RequestParam String token) {
         passwortResetService.validateToken(token);
-        return ResponseEntity.ok(Map.of("message", "Token ist gültig. Sie können nun ein neues Passwort festlegen."));
+        return ResponseEntity.ok(new ApiMessage("Token is valid. You can proceed to reset your password."));
     }
 
     @PostMapping(value = "/reset-password", consumes = "application/json", produces = "application/json")
-    public ResponseEntity<?> verifyPasswordReset(@Validated @RequestBody PasswordResetRequest passwordResetReq) {
+    public ResponseEntity<ApiMessage> verifyPasswordReset(@Validated @RequestBody PasswordResetRequest passwordResetReq) {
         passwortResetService.verifyPasswordReset(passwordResetReq);
-        return ResponseEntity.ok(Map.of("message", "Passwort erfolgreich zurückgesetzt."));
+        return ResponseEntity.ok(new ApiMessage("Password reset successful."));
     }
 
-
+    @GetMapping(value = "/csrf")
+    public ResponseEntity<Void> getCsrfToken() {
+        return ResponseEntity.ok().build();
+    }
 
 }
 
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java
index 9f87bf5..e7c342c 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/NotesController.java
@@ -1,13 +1,14 @@
 package com.projektsse.backend.controller;
 
-import com.projektsse.backend.controller.dto.NoteReq;
-import com.projektsse.backend.controller.dto.NoteRes;
+import com.projektsse.backend.controller.dto.NoteRequest;
+import com.projektsse.backend.controller.dto.NoteResponse;
 import com.projektsse.backend.interfaces.CurrentUserId;
 import com.projektsse.backend.models.NoteModel;
 import com.projektsse.backend.service.NoteService;
 import jakarta.validation.Valid;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Size;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
@@ -16,8 +17,8 @@
 import java.util.UUID;
 
 @RestController
-@RequestMapping("/api/documents")
 @Validated
+@RequestMapping("/api/documents")
 public class NotesController {
 
     NoteService noteService;
@@ -27,57 +28,54 @@ public class NotesController {
     }
 
     @GetMapping(value = "/public", produces = "application/json")
-    public ResponseEntity<?> getNotes() {
-        List<NoteModel> notes = noteService.getAllPublicNotes();
+    public ResponseEntity<List<NoteResponse>> getNotes() {
+        List<NoteResponse> notes = noteService.getAllPublicNotes().stream().map(NoteModel::toDto).toList();
         return ResponseEntity.ok().body(notes);
     }
 
     @GetMapping(value = "/public/search", produces = "application/json")
-    public ResponseEntity<?> searchPublicNotes(
+    public ResponseEntity<List<NoteResponse>> searchPublicNotes(
             @RequestParam("q")
             @NotBlank
             @Size(max = 50)
-            //@Pattern(regexp = "^[a-zA-Z0-9 äöüÄÖÜß!?.,-]*$", message = "Query contains invalid characters")
             String query
     ) {
-        List<NoteModel> notes = noteService.searchPublicNotes(query);
+        List<NoteResponse> notes = noteService.searchPublicNotes(query).stream().map(NoteModel::toDto).toList();
         return ResponseEntity.ok().body(notes);
     }
 
     @GetMapping(value = "/{documentId:[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}}", produces = "application/json")
-    public ResponseEntity<?> getNoteById(@PathVariable UUID documentId) {
-        NoteModel note = noteService.getNoteById(documentId);
+    public ResponseEntity<NoteResponse> getNoteById(@PathVariable UUID documentId) {
+        NoteResponse note = noteService.getNoteById(documentId).toDto();
         return ResponseEntity.ok().body(note);
     }
 
     @GetMapping(value = "/user", produces = "application/json")
-    public ResponseEntity<?> getUserNotes(@CurrentUserId UUID userId) {
-        List<NoteModel> notes = noteService.getNotesByUserId(userId);
-        return ResponseEntity.ok().body(notes);
+    public ResponseEntity<List<NoteResponse>> getUserNotes(@CurrentUserId UUID userId) {
+        return ResponseEntity.ok().body(noteService.getNotesByUserId(userId).stream().map(NoteModel::toDto).toList());
     }
 
     @GetMapping(value = "/user/search", produces = "application/json")
-    public ResponseEntity<?> searchUserNotes(
+    public ResponseEntity<List<NoteResponse>> searchUserNotes(
             @RequestParam("q")
             @NotBlank
             @Size(max = 50)
-            // @Pattern(regexp = "^[a-zA-Z0-9 äöüÄÖÜß!?.,-]*$", message = "Query contains invalid characters")
             String query,
             @CurrentUserId UUID userId
     ) {
-        List<NoteModel> notes = noteService.searchUserNotes(query, userId);
+        List<NoteResponse> notes = noteService.searchUserNotes(query, userId).stream().map(NoteModel::toDto).toList();
         return ResponseEntity.ok(notes);
     }
 
     @PostMapping(consumes = "application/json", produces = "application/json")
-    public ResponseEntity<?> createNote(@Valid @RequestBody NoteReq noteReq, @CurrentUserId UUID userId) {
-        NoteModel note = noteService.createNote(noteReq, userId.toString());
-        return ResponseEntity.status(201).body(note.noteId());
+    public ResponseEntity<NoteResponse> createNote(@Valid @RequestBody NoteRequest noteRequest, @CurrentUserId UUID userId) {
+        NoteResponse note = noteService.createNote(noteRequest, userId.toString()).toDto();
+        return ResponseEntity.status(HttpStatus.CREATED).body(note);
 
     }
 
     @DeleteMapping(value = "/{docId}", produces = "application/json")
-    public ResponseEntity<?> deleteNote(
+    public ResponseEntity<Void> deleteNote(
             @PathVariable UUID docId,
             @CurrentUserId UUID userId
     ) {
@@ -85,14 +83,13 @@ public ResponseEntity<?> deleteNote(
         return ResponseEntity.noContent().build();
     }
 
-
     @PutMapping(value = "/{docId}", consumes = "application/json")
-    public ResponseEntity<NoteRes> updateNote(
+    public ResponseEntity<NoteResponse> updateNote(
             @PathVariable UUID docId,
-            @Valid @RequestBody NoteReq noteReq,
+            @Valid @RequestBody NoteRequest noteRequest,
             @CurrentUserId UUID userId
     ) {
-        NoteRes updatedNote = noteService.updateNote(docId, noteReq, userId).toDto();
+        NoteResponse updatedNote = noteService.updateNote(docId, noteRequest, userId).toDto();
         return ResponseEntity.ok().body(updatedNote);
     }
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java
new file mode 100644
index 0000000..3970b23
--- /dev/null
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java
@@ -0,0 +1,4 @@
+package com.projektsse.backend.controller.dto;
+
+public record ApiMessage(String message) {
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/LoginReq.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/LoginRequest.java
similarity index 94%
rename from projekt/backend/src/main/java/com/projektsse/backend/controller/dto/LoginReq.java
rename to projekt/backend/src/main/java/com/projektsse/backend/controller/dto/LoginRequest.java
index 24a4722..376f6d4 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/LoginReq.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/LoginRequest.java
@@ -13,11 +13,11 @@
  * @param password no specific validation constraints are applied to the password field
  */
 @GroupSequence({
-        LoginReq.class,
+        LoginRequest.class,
         RegistrationValidationGroups.EmailSize.class,
         RegistrationValidationGroups.EmailFormat.class
 })
-public record LoginReq(
+public record LoginRequest(
         @NotBlank(message = "Email cannot be empty")
         @Size(max = 255, message = "Email must be at most 255 characters long")
         @Email(message = "Invalid email format")
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRequest.java
similarity index 97%
rename from projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java
rename to projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRequest.java
index b4343ee..e56d243 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteReq.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRequest.java
@@ -10,7 +10,7 @@
  * @param mdContent Is the Markdown content of the note, must not be blank and has a maximum length of 10,000 characters.
  * @param isPrivate Indicates whether the note is private or public, must not be null.
  */
-public record NoteReq(
+public record NoteRequest(
     @NotBlank(message = "Title cannot be empty")
     @Size(max = 100, message = "Title can be at most 100 characters long")
     String title,
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteResponse.java
similarity index 84%
rename from projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java
rename to projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteResponse.java
index e8be36d..5875dd8 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteRes.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/NoteResponse.java
@@ -4,7 +4,8 @@
 import java.time.LocalDateTime;
 import java.util.UUID;
 
-public record NoteRes(
+public record NoteResponse(
+    UUID noteId,
     String title,
     String md_content,
     boolean is_private,
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java b/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java
index 0d64caf..ce733a3 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java
@@ -1,5 +1,6 @@
 package com.projektsse.backend.exceptions;
 
+import jakarta.servlet.http.HttpServletRequest;
 import jakarta.validation.ConstraintViolation;
 import jakarta.validation.ConstraintViolationException;
 import org.hibernate.StaleObjectStateException;
@@ -14,7 +15,7 @@
 import org.springframework.web.bind.annotation.RestControllerAdvice;
 
 import java.net.URI;
-import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
 
@@ -47,16 +48,21 @@ public ProblemDetail handleIllegalState(IllegalStateException ex) {
     }
 
     @ExceptionHandler(MethodArgumentNotValidException.class)
-    public ProblemDetail handleValidationExceptions(MethodArgumentNotValidException ex) {
+    public ProblemDetail handleValidationExceptions(MethodArgumentNotValidException ex, HttpServletRequest request) {
+        log.warn("Validation error: {}", ex.getMessage());
         ProblemDetail problemDetail = ProblemDetail.forStatus(HttpStatus.BAD_REQUEST);
         problemDetail.setTitle("Validation Error");
-        problemDetail.setInstance(URI.create("/api/validation-error"));
-        Map<String, Object> errors = new HashMap<>();
-        ex.getBindingResult().getFieldErrors().forEach(error -> {
-            String msg = error.getDefaultMessage() != null ? error.getDefaultMessage() : "Invalid value";
-            errors.put(error.getField(), msg);
-        });
-        problemDetail.setProperties(errors);
+        problemDetail.setInstance(URI.create(request.getRequestURI()));
+        List<Map<String, String>> errors = ex.getBindingResult().getFieldErrors().stream()
+                .map(fe -> {
+                    assert fe.getDefaultMessage() != null;
+                    return Map.of(
+                            "field",   fe.getField(),
+                            "message", fe.getDefaultMessage()
+                    );
+                })
+                .toList();
+        problemDetail.setProperty("errors", errors);
         return problemDetail;
     }
 
@@ -64,17 +70,22 @@ public ProblemDetail handleValidationExceptions(MethodArgumentNotValidException
     public ProblemDetail handleConstraintViolationException(ConstraintViolationException ex) {
         ProblemDetail problemDetail = ProblemDetail.forStatus(HttpStatus.BAD_REQUEST);
         problemDetail.setTitle("Validation Error");
-        Map<String, Object> errors = ex.getConstraintViolations()
-                        .stream()
-                        .collect(Collectors.toMap(
-                                violation -> violation.getPropertyPath().toString(),
-                                ConstraintViolation::getMessage,
-                                (existing, replacement) -> existing // In case of duplicate keys, keep the existing value
-                        ));
-        problemDetail.setProperties(errors);
+        List<Map<String, String>> errors = ex.getConstraintViolations().stream()
+                .map(cv -> Map.of(
+                        "field",   extractFieldNameFromConstraintViolation(cv),
+                        "message", cv.getMessage()
+                ))
+                .collect(Collectors.toList());
+        problemDetail.setProperty("errors", errors);
         return problemDetail;
     }
 
+    private String extractFieldNameFromConstraintViolation(ConstraintViolation<?> violation) {
+        String propertyPath = violation.getPropertyPath().toString();
+        int lastDotIndex = propertyPath.lastIndexOf('.');
+        return lastDotIndex != -1 ? propertyPath.substring(lastDotIndex + 1) : propertyPath;
+    }
+
     @ExceptionHandler(NoteNotFoundException.class)
     public ProblemDetail handleNoteNotFoundException(NoteNotFoundException ex) {
         ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(HttpStatus.NOT_FOUND, ex.getMessage());
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java b/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java
index abeb705..77513f0 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/models/NoteModel.java
@@ -1,6 +1,6 @@
 package com.projektsse.backend.models;
 
-import com.projektsse.backend.controller.dto.NoteRes;
+import com.projektsse.backend.controller.dto.NoteResponse;
 
 import java.time.LocalDateTime;
 import java.util.UUID;
@@ -14,13 +14,10 @@ public record NoteModel(
     LocalDateTime updated_at,
     UUID userId
 ) {
-    public NoteRes toDto() {
-        return new NoteRes(title, md_content, is_private, created_at, updated_at, userId);
+    public NoteResponse toDto() {
+        return new NoteResponse(noteId, title, md_content, is_private, created_at, updated_at, userId);
     }
 
-//    public Note toEntity() {
-//        return new Note(noteId, title, md_content, is_private, created_at, updated_at, userId);
-//    }
 
     public NoteModel setTitle(String title) {
         return new NoteModel(noteId, title, md_content, is_private, created_at, updated_at, userId);
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
index 928e2a5..a2056c7 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/NoteService.java
@@ -1,7 +1,7 @@
 package com.projektsse.backend.service;
 
 import com.projektsse.backend.config.MdSanitizer;
-import com.projektsse.backend.controller.dto.NoteReq;
+import com.projektsse.backend.controller.dto.NoteRequest;
 import com.projektsse.backend.exceptions.NoteNotFoundException;
 import com.projektsse.backend.models.NoteModel;
 import com.projektsse.backend.repository.NoteRepository;
@@ -29,19 +29,18 @@ public NoteService(NoteRepository noteRepository, UserService userService, MdSan
     }
 
     public List<NoteModel> getAllPublicNotes() {
-        List<NoteModel> notes = noteRepository.findAllByIsPrivateFalse()
+        return noteRepository.findAllByIsPrivateFalse()
                 .stream()
                 .map(note -> ((Note) note).toModel())
                 .toList();
-        return notes;
     }
 
 
-    public NoteModel createNote(@Valid NoteReq noteReq, String userId) {
+    public NoteModel createNote(@Valid NoteRequest noteRequest, String userId) {
         Note note = new Note();
-        note.setTitle(mdSanitizer.sanitizeTitle(noteReq.title()));
-        note.setMdContent(mdSanitizer.sanitizeContent(noteReq.mdContent()));
-        note.setIsPrivate(noteReq.isPrivate());
+        note.setTitle(mdSanitizer.sanitizeTitle(noteRequest.title()));
+        note.setMdContent(mdSanitizer.sanitizeContent(noteRequest.mdContent()));
+        note.setIsPrivate(noteRequest.isPrivate());
         note.setOwner(userService.getUserById(userId));
         Note savedNote = noteRepository.save(note);
         return savedNote.toModel();
@@ -49,10 +48,9 @@ public NoteModel createNote(@Valid NoteReq noteReq, String userId) {
     }
 
     public List<NoteModel> searchPublicNotes(String query) {
-        String lowerCaseQuery = query.toLowerCase();
-        List<NoteModel> notes = noteRepository.searchPublicNotes(lowerCaseQuery)
-                .stream().map(note -> ((Note) note).toModel()).toList();
-        return notes;
+        String lowerCaseQuery = query.toLowerCase().trim();
+        return noteRepository.searchPublicNotes(lowerCaseQuery)
+                .stream().map(Note::toModel).toList();
     }
 
     public NoteModel getNoteById(UUID documentId) {
@@ -86,7 +84,7 @@ public void deleteNote(UUID documentId, UUID userId) {
         noteRepository.delete(note);
     }
 
-    public NoteModel updateNote(UUID docId, @Valid NoteReq noteReq, UUID userId) {
+    public NoteModel updateNote(UUID docId, @Valid NoteRequest noteRequest, UUID userId) {
 
         Note noteEntity = noteRepository.findById(docId)
                 .orElseThrow(() -> new NoteNotFoundException(String.format("Note with ID %s not found", docId)));
@@ -96,9 +94,9 @@ public NoteModel updateNote(UUID docId, @Valid NoteReq noteReq, UUID userId) {
             throw new NoteNotFoundException(String.format("Note with ID %s not found", docId));
         }
 
-        noteEntity.setTitle(mdSanitizer.sanitizeTitle(noteReq.title()))
-            .setMdContent(mdSanitizer.sanitizeContent(noteReq.mdContent()))
-            .setIsPrivate(noteReq.isPrivate());
+        noteEntity.setTitle(mdSanitizer.sanitizeTitle(noteRequest.title()))
+            .setMdContent(mdSanitizer.sanitizeContent(noteRequest.mdContent()))
+            .setIsPrivate(noteRequest.isPrivate());
 
         return noteRepository.save(noteEntity).toModel();
     }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
index 0a58a7f..175a4ad 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
@@ -59,26 +59,18 @@ public void registerUser(UserReqModel userReqModel) {
         Registration_Request user = createPendingUser(userReqModel, verificationCode);
         registrationRepository.save(user);
 
-        // E-Mail versenden
-        String title = "E-Mail Verifizierung";
+        // Sending mail
+        String title = "E-Mail verification";
         String message = String.format("""
-        Bitte verifizieren Sie Ihre E-Mail-Adresse, indem Sie auf den folgenden Link klicken:
+        Please verify your email address by clicking the following link:
         http://localhost:8080/api/auth/verify-email?code=%s
         """, verificationCode);
 
-
         if (existsByEmail(userReqModel.email())) {
-            title = "Hinweis auf ungewöhnliche Registrierungsaktivität";
-            message = "Es wurde versucht, diese E-Mail-Adresse erneut zu registrieren. " +
-                    "Wenn Sie das nicht waren, können Sie diese Nachricht ignorieren.";
+            title = "Suspicious registration attempt";
+            message = "An attempt was made to register an account with this email address, but it is already in use. If this was not you, please ignore this email.";
         }
-
-        emailService.sendMail(
-                user.getEmail(),
-                title,
-                message
-        );
-
+        emailService.sendMail(user.getEmail(), title, message);
     }
 
     public boolean verifyUserEmail(@NotBlank(message = "Ungültiger Verifizierungscode.") @Size(min = 43, max = 43, message = "Ungültiger Verifizierungscode.") String code) {
diff --git a/projekt/backend/src/main/resources/application-local.properties b/projekt/backend/src/main/resources/application-local.properties
deleted file mode 100644
index ebe6060..0000000
--- a/projekt/backend/src/main/resources/application-local.properties
+++ /dev/null
@@ -1,17 +0,0 @@
-spring.datasource.url=jdbc:postgresql://localhost:5432/sse_local_db
-spring.datasource.username=postgres
-spring.datasource.password=zf5DDP3Ho#
-
-jwt.secret=0871b9b880f40f86a1b65ed54cca407af1b65ed54cca407af1bd7c66db877cb2529a68110df99809b368f2a4b1f67e70c7336dcf23a5f136138bdfb49ffea1e8f4883498d5252355
-jwt.access-token-expiration=10
-
-refreshToken.value=CsSK3+JgE1C/mHVPmwBDfb1AAJ/bBObhnfqV0A1JIb+gV4NTuLXMqLoWroDsLAPcNqohdNBp0n065COODeBugQ==
-
-spring.mail.host=localhost
-spring.mail.port=1025
-spring.mail.username=
-spring.mail.password=
-spring.mail.properties.mail.smtp.auth=false
-spring.mail.properties.mail.smtp.starttls.enable=false
-spring.mail.properties.mail.smtp.starttls.required=false
-spring.mail.test-connection=false
diff --git a/projekt/backend/src/main/resources/application.properties b/projekt/backend/src/main/resources/application.properties
index edbb93f..f6fc1f6 100644
--- a/projekt/backend/src/main/resources/application.properties
+++ b/projekt/backend/src/main/resources/application.properties
@@ -25,7 +25,7 @@ jwt.access-token-expiration=10
 
 refreshToken.value=${REFRESH_TOKEN_HMAC_SECRET}
 
-# ini
+# init
 spring.mail.host=${MAIL_HOST}
 spring.mail.port=${MAIL_PORT}
 spring.mail.username=${MAIL_USERNAME}
@@ -35,5 +35,6 @@ spring.mail.properties.mail.smtp.starttls.enable=false
 spring.mail.properties.mail.smtp.starttls.required=false
 spring.mail.test-connection=false
 
-# Test propeties
+# Prod
+app.cookie.secure=false
 
diff --git a/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java b/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
index 0c40f2d..05ba58f 100644
--- a/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
+++ b/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
@@ -15,6 +15,8 @@
 import org.springframework.test.web.servlet.client.RestTestClient;
 
 import java.net.URI;
+import java.util.List;
+import java.util.Map;
 
 import static org.junit.jupiter.api.Assertions.*;
 
@@ -84,9 +86,11 @@ void registerWithEmailNull() {
                     assertNotNull(problem.getProperties());
                     assertEquals("Validation Error", problem.getTitle());
                     assertEquals(400, problem.getStatus());
-                    assertEquals(URI.create("/api/validation-error"), problem.getInstance());
-                    assertTrue(problem.getProperties().containsKey("email"));
-                    assertEquals("Email must not be empty", problem.getProperties().get("email"));
+                    assertEquals(URI.create("/api/auth/register"), problem.getInstance());
+                    assertTrue(problem.getProperties().containsKey("errors"));
+                    List<Map<String, String>> errors = (List<Map<String, String>>) problem.getProperties().get("errors");
+                    assertFalse(errors.isEmpty());
+                    assertTrue(errors.stream().anyMatch(error -> "email".equals(error.get("field")) && "Email must not be empty".equals(error.get("message"))));
                 });
     }
 
@@ -105,9 +109,11 @@ void registerWithEmailEmpty() {
                     assertNotNull(problem.getProperties());
                     assertEquals("Validation Error", problem.getTitle());
                     assertEquals(400, problem.getStatus());
-                    assertEquals(URI.create("/api/validation-error"), problem.getInstance());
-                    assertTrue(problem.getProperties().containsKey("email"));
-                    assertEquals("Email must not be empty", problem.getProperties().get("email"));
+                    assertEquals(URI.create("/api/auth/register"), problem.getInstance());
+                    assertTrue(problem.getProperties().containsKey("errors"));
+                    List<Map<String, String>> errors = (List<Map<String, String>>) problem.getProperties().get("errors");
+                    assertFalse(errors.isEmpty());
+                    assertTrue(errors.stream().anyMatch(error -> "email".equals(error.get("field")) && "Email must not be empty".equals(error.get("message"))));
                 });
     }
 
@@ -128,12 +134,11 @@ void registerEmailTooLong() {
                     assertNotNull(problem.getProperties());
                     assertEquals("Validation Error", problem.getTitle());
                     assertEquals(400, problem.getStatus());
-                    assertEquals(URI.create("/api/validation-error"), problem.getInstance());
-                    assertTrue(problem.getProperties().containsKey("email"));
-                    assertEquals(
-                            "Email must be at most 255 characters long",
-                            problem.getProperties().get("email")
-                    );
+                    assertEquals(URI.create("/api/auth/register"), problem.getInstance());
+                    assertTrue(problem.getProperties().containsKey("errors"));
+                    List<Map<String, String>> errors = (List<Map<String, String>>) problem.getProperties().get("errors");
+                    assertFalse(errors.isEmpty());
+                    assertTrue(errors.stream().anyMatch(error -> "email".equals(error.get("field")) && "Email must be at most 255 characters long".equals(error.get("message"))));
                 });
     }
 

From 81a8224e2a1626656d07de2292e5ec9979644e20 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Fri, 27 Mar 2026 12:07:38 +0100
Subject: [PATCH 10/16] feat: refactoring AuthController and adjusting DTOs and
 ExceptionHandlers

---
 .../backend/controller/AuthController.java    | 20 ++++++-------------
 .../backend/controller/dto/ApiMessage.java    |  4 ++++
 ...{RegisterReq.java => RegisterRequest.java} | 11 +++++++---
 .../exceptions/GlobalExceptionHandler.java    |  8 ++++++++
 .../VerificationFailedException.java          |  7 +++++++
 .../StrongPasswordEmailCheckValidator.java    |  6 +++---
 .../backend/models/ApiMessageModel.java       | 10 ++++++++++
 .../backend/models/CustomUserDetails.java     | 11 +---------
 .../backend/service/UserService.java          | 14 ++++++-------
 .../Authentication/AuthControllerTest.java    | 16 +++++++--------
 10 files changed, 61 insertions(+), 46 deletions(-)
 rename projekt/backend/src/main/java/com/projektsse/backend/controller/dto/{RegisterReq.java => RegisterRequest.java} (85%)
 create mode 100644 projekt/backend/src/main/java/com/projektsse/backend/exceptions/VerificationFailedException.java
 create mode 100644 projekt/backend/src/main/java/com/projektsse/backend/models/ApiMessageModel.java

diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
index 6a572ea..8181e5d 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
@@ -2,7 +2,6 @@
 
 import com.projektsse.backend.controller.dto.*;
 import com.projektsse.backend.interfaces.CurrentUserId;
-import com.projektsse.backend.models.UserReqModel;
 import com.projektsse.backend.service.JwtService;
 import com.projektsse.backend.service.PasswortResetService;
 import com.projektsse.backend.service.TokenService;
@@ -43,26 +42,19 @@ public AuthController(UserService userService, JwtService jwtService, TokenServi
     }
 
     @PostMapping(value = "/register", consumes = "application/json", produces = "application/json")
-    public ResponseEntity<ApiMessage> register(@Validated @RequestBody RegisterReq req) {
-        UserReqModel userReqModel = new UserReqModel(req.email(), req.password());
-        userService.registerUser(userReqModel);
+    public ResponseEntity<ApiMessage> register(@Validated @RequestBody RegisterRequest req) {
+        userService.registerUser(req.toModel());
         return ResponseEntity.status(HttpStatus.CREATED).body(new ApiMessage("User successfully registered. Please check your email for verification."));
     }
 
     @GetMapping(value = "/verify-email", produces = "application/json")
-    public ResponseEntity<?> verifyEmail(
+    public ResponseEntity<ApiMessage> verifyEmail(
             @RequestParam("code")
-            @NotBlank(message = "Invalid verification code.")
-            @Pattern(regexp = "^[A-Za-z0-9_-]{43}$", message = "Invalid verification code.")
+            @NotBlank(message = "Cannot be blank.")
+            @Pattern(regexp = "^[A-Za-z0-9_-]{43}$", message = "Invalid or expired link.")
             String code
     ) {
-        boolean isVerified = userService.verifyUserEmail(code);
-        if (isVerified) {
-            return ResponseEntity.ok(Map.of("message", "E-Mail erfolgreich verifiziert."));
-        } else {
-            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
-                    .body(Map.of("message", "Ungültiger oder abgelaufener Verifizierungslink."));
-        }
+        return ResponseEntity.ok(userService.verifyUserEmail(code).toDto());
     }
 
 
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java
index 3970b23..3363a7a 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/ApiMessage.java
@@ -1,4 +1,8 @@
 package com.projektsse.backend.controller.dto;
 
+/**
+ * A simple DTO for API responses that contain a message. This can be used for various endpoints to return a standardized message format.
+ * @param message the message to be returned in the API response.
+ */
 public record ApiMessage(String message) {
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/RegisterReq.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/RegisterRequest.java
similarity index 85%
rename from projekt/backend/src/main/java/com/projektsse/backend/controller/dto/RegisterReq.java
rename to projekt/backend/src/main/java/com/projektsse/backend/controller/dto/RegisterRequest.java
index 08cf0c9..eabcdd2 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/RegisterReq.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/dto/RegisterRequest.java
@@ -2,6 +2,7 @@
 
 import com.projektsse.backend.interfaces.RegistrationValidationGroups;
 import com.projektsse.backend.interfaces.StrongPasswordEmailCheck;
+import com.projektsse.backend.models.UserReqModel;
 import jakarta.validation.GroupSequence;
 import jakarta.validation.constraints.Email;
 import jakarta.validation.constraints.NotBlank;
@@ -14,16 +15,20 @@
  */
 @StrongPasswordEmailCheck(groups = RegistrationValidationGroups.PasswordValidation.class)
 @GroupSequence({
-        RegisterReq.class,
+        RegisterRequest.class,
         RegistrationValidationGroups.EmailSize.class,
         RegistrationValidationGroups.EmailFormat.class,
         RegistrationValidationGroups.PasswordValidation.class
 })
-public record RegisterReq(
+public record RegisterRequest(
         @NotBlank(message = "Email must not be empty")
         @Size(max = 255, message = "Email must be at most 255 characters long", groups = RegistrationValidationGroups.EmailSize.class)
         @Email(message = "Invalid email format", groups = RegistrationValidationGroups.EmailFormat.class)
         String email,
 
         String password
-) { }
+) {
+        public UserReqModel toModel() {
+                return new UserReqModel(email, password);
+        }
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java b/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java
index ce733a3..b92612b 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/exceptions/GlobalExceptionHandler.java
@@ -122,6 +122,14 @@ public ProblemDetail handleErrorPWReset(WrongTokenException ex) {
         return problemDetail;
     }
 
+    @ExceptionHandler(VerificationFailedException.class)
+    public ProblemDetail handleInvalidLinkException(VerificationFailedException ex) {
+        ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(HttpStatus.BAD_REQUEST, ex.getMessage());
+        problemDetail.setTitle("Verification failed");
+        problemDetail.setInstance(URI.create("/api/auth/verify-email"));
+        return problemDetail;
+    }
+
 
     @ExceptionHandler(StaleObjectStateException.class)
     public ProblemDetail handleStaleObjectStateException() {
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/exceptions/VerificationFailedException.java b/projekt/backend/src/main/java/com/projektsse/backend/exceptions/VerificationFailedException.java
new file mode 100644
index 0000000..325e914
--- /dev/null
+++ b/projekt/backend/src/main/java/com/projektsse/backend/exceptions/VerificationFailedException.java
@@ -0,0 +1,7 @@
+package com.projektsse.backend.exceptions;
+
+public class VerificationFailedException extends RuntimeException {
+    public VerificationFailedException(String message) {
+        super(message);
+    }
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/interfaces/StrongPasswordEmailCheckValidator.java b/projekt/backend/src/main/java/com/projektsse/backend/interfaces/StrongPasswordEmailCheckValidator.java
index 6a57b3f..2480c18 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/interfaces/StrongPasswordEmailCheckValidator.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/interfaces/StrongPasswordEmailCheckValidator.java
@@ -1,7 +1,7 @@
 package com.projektsse.backend.interfaces;
 
 import com.nulabinc.zxcvbn.Zxcvbn;
-import com.projektsse.backend.controller.dto.RegisterReq;
+import com.projektsse.backend.controller.dto.RegisterRequest;
 import com.projektsse.backend.exceptions.WeakPasswordException;
 import jakarta.validation.ConstraintValidator;
 import jakarta.validation.ConstraintValidatorContext;
@@ -17,7 +17,7 @@
  * The password must have a score of at least 4 to be considered strong.
  * Implementing this class as a ConstraintValidator allows us to use it as a custom validation annotation on the password field in our DTOs.
  */
-public class StrongPasswordEmailCheckValidator implements ConstraintValidator<StrongPasswordEmailCheck, RegisterReq> {
+public class StrongPasswordEmailCheckValidator implements ConstraintValidator<StrongPasswordEmailCheck, RegisterRequest> {
 
     /**
      * This method checks if the provided password meets the requirements of the password policy.
@@ -27,7 +27,7 @@ public class StrongPasswordEmailCheckValidator implements ConstraintValidator<St
      * @throws WeakPasswordException if the password is null, too long, or does not meet the strength requirements
      */
     @Override
-    public boolean isValid(RegisterReq req, ConstraintValidatorContext context) {
+    public boolean isValid(RegisterRequest req, ConstraintValidatorContext context) {
         if (req.password() == null) throw new WeakPasswordException("Password cannot be empty.");
 
         if (req.password().length() >= 255) {
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/models/ApiMessageModel.java b/projekt/backend/src/main/java/com/projektsse/backend/models/ApiMessageModel.java
new file mode 100644
index 0000000..5e00ee2
--- /dev/null
+++ b/projekt/backend/src/main/java/com/projektsse/backend/models/ApiMessageModel.java
@@ -0,0 +1,10 @@
+package com.projektsse.backend.models;
+
+import com.projektsse.backend.controller.dto.ApiMessage;
+
+public record ApiMessageModel(String message) {
+
+    public ApiMessage toDto() {
+        return new ApiMessage(message);
+    }
+}
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/models/CustomUserDetails.java b/projekt/backend/src/main/java/com/projektsse/backend/models/CustomUserDetails.java
index d5154b5..0c5b094 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/models/CustomUserDetails.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/models/CustomUserDetails.java
@@ -8,12 +8,7 @@
 import java.util.Collection;
 import java.util.Collections;
 
-public class CustomUserDetails implements UserDetails {
-    private final User user;
-
-    public CustomUserDetails(User user) {
-        this.user = user;
-    }
+public record CustomUserDetails(User user) implements UserDetails {
 
     @Override
     @NullMarked
@@ -53,8 +48,4 @@ public boolean isEnabled() {
         return true;
     }
 
-    public User getUser() {
-        return user;
-    }
-
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
index 175a4ad..9442e0a 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/service/UserService.java
@@ -1,13 +1,14 @@
 package com.projektsse.backend.service;
 
+import com.projektsse.backend.exceptions.VerificationFailedException;
 import com.projektsse.backend.exceptions.UserNotFoundException;
+import com.projektsse.backend.models.ApiMessageModel;
 import com.projektsse.backend.models.UserReqModel;
 import com.projektsse.backend.repository.RegistrationRepository;
 import com.projektsse.backend.repository.UserRepository;
 import com.projektsse.backend.repository.entities.Registration_Request;
 import com.projektsse.backend.repository.entities.User;
 import jakarta.validation.constraints.NotBlank;
-import jakarta.validation.constraints.Size;
 import org.springframework.security.crypto.argon2.Argon2PasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
@@ -73,9 +74,7 @@ public void registerUser(UserReqModel userReqModel) {
         emailService.sendMail(user.getEmail(), title, message);
     }
 
-    public boolean verifyUserEmail(@NotBlank(message = "Ungültiger Verifizierungscode.") @Size(min = 43, max = 43, message = "Ungültiger Verifizierungscode.") String code) {
-
-        //Optional<User> user = userRepository.findByVerificationCode(code);
+    public ApiMessageModel verifyUserEmail(String code) {
         Optional<Registration_Request> regReq = registrationRepository
                 .findByVerificationCodeAndVerificationCodeExpiryAfter(
                         tokenService.hashVerificationToken(code),
@@ -83,10 +82,10 @@ public boolean verifyUserEmail(@NotBlank(message = "Ungültiger Verifizierungsco
                 );
 
         if (regReq.isEmpty()) {
-            return false; // Kein Benutzer mit diesem Code gefunden
+            throw new VerificationFailedException("Invalid or expired link."); // Kein Benutzer mit diesem Code gefunden
         }
         if (userRepository.existsByEmail(regReq.get().getEmail())) {
-            return false; // E-Mail ist bereits registriert
+            throw new VerificationFailedException("Invalid or expired link."); // E-Mail ist bereits registriert
         }
 
         User user = new User(
@@ -96,8 +95,7 @@ public boolean verifyUserEmail(@NotBlank(message = "Ungültiger Verifizierungsco
         userRepository.save(user);
         registrationRepository.delete(regReq.get());
 
-        return true; // Erfolgreich verifiziert
-
+        return new ApiMessageModel("Email successfully verified.");
     }
 
     public UUID getUserIdByEmail(String email) {
diff --git a/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java b/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
index 05ba58f..8604d7f 100644
--- a/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
+++ b/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
@@ -1,7 +1,7 @@
 package com.projektsse.backend.controller.Unit.Authentication;
 
 import com.projektsse.backend.controller.AuthController;
-import com.projektsse.backend.controller.dto.RegisterReq;
+import com.projektsse.backend.controller.dto.RegisterRequest;
 import com.projektsse.backend.exceptions.GlobalExceptionHandler;
 import com.projektsse.backend.service.JwtService;
 import com.projektsse.backend.service.PasswortResetService;
@@ -45,7 +45,7 @@ void setUp() {
     void registerStrongPass() {
         client.post()
                 .uri("/api/auth/register")
-                .body(new RegisterReq("frankestein@gmail.com", "Xfr@nke41!g+6&4"))
+                .body(new RegisterRequest("frankestein@gmail.com", "Xfr@nke41!g+6&4"))
                 .exchange()
                 .expectStatus().isCreated()
                 .expectBody()
@@ -57,7 +57,7 @@ void registerWeakPass() {
         client.post()
                 .uri("/api/auth/register")
                 .accept(MediaType.APPLICATION_JSON)
-                .body(new RegisterReq("frankestein@gmail.com", "Password123"))
+                .body(new RegisterRequest("frankestein@gmail.com", "Password123"))
                 .exchange()
                 .expectStatus().isBadRequest()
                 .expectBody(ProblemDetail.class)
@@ -76,7 +76,7 @@ void registerWithEmailNull() {
         client.post()
                 .uri("/api/auth/register")
                 .accept(MediaType.APPLICATION_JSON)
-                .body(new RegisterReq(null, "Xfr@nke41!g+6&4"))
+                .body(new RegisterRequest(null, "Xfr@nke41!g+6&4"))
                 .exchange()
                 .expectStatus().isBadRequest()
                 .expectBody(ProblemDetail.class)
@@ -99,7 +99,7 @@ void registerWithEmailEmpty() {
         client.post()
                 .uri("/api/auth/register")
                 .accept(MediaType.APPLICATION_JSON)
-                .body(new RegisterReq("", "Xfr@nke41!g+6&4"))
+                .body(new RegisterRequest("", "Xfr@nke41!g+6&4"))
                 .exchange()
                 .expectStatus().isBadRequest()
                 .expectBody(ProblemDetail.class)
@@ -125,7 +125,7 @@ void registerEmailTooLong() {
         client.post()
                 .uri("/api/auth/register")
                 .accept(MediaType.APPLICATION_JSON)
-                .body(new RegisterReq(longEmail, "Xfr@nke41!g+6&4"))
+                .body(new RegisterRequest(longEmail, "Xfr@nke41!g+6&4"))
                 .exchange()
                 .expectStatus().isBadRequest()
                 .expectBody(ProblemDetail.class)
@@ -148,14 +148,14 @@ void passwordContainsEmailCredential() {
         client.post()
                 .uri("/api/auth/register")
                 .accept(MediaType.APPLICATION_JSON)
-                .body(new RegisterReq("maxmustermann@gmail.com", "MaxMustermann!Sec!"))
+                .body(new RegisterRequest("maxmustermann@gmail.com", "MaxMustermann!Sec!"))
                 .exchange()
                 .expectStatus().isBadRequest();
 
         client.post()
                 .uri("/api/auth/register")
                 .accept(MediaType.APPLICATION_JSON)
-                .body(new RegisterReq("seline.schaefer@gmail.com", "MaxMustermann!Sec!"))
+                .body(new RegisterRequest("seline.schaefer@gmail.com", "MaxMustermann!Sec!"))
                 .exchange()
                 .expectStatus().isCreated();
     }

From cceec7ee6bc7344505c7a9466d0bf9022b5bc395 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Mon, 30 Mar 2026 10:34:41 +0200
Subject: [PATCH 11/16] feat: refactoring frontend

---
 projekt/frontend/src/adapters/api.ts          |   2 +-
 .../src/components/CreateDocument.tsx         |  68 +++++-----
 projekt/frontend/src/hooks/useDocuments.ts    | 126 ++++++++++++++++++
 .../frontend/src/services/documentService.ts  |  28 ++--
 .../types/{Document.ts => DocumentType.ts}    |   2 +-
 projekt/frontend/src/utils/apiFetch.ts        |   3 +-
 projekt/frontend/src/utils/useAuth.ts         |   3 +-
 7 files changed, 173 insertions(+), 59 deletions(-)
 create mode 100644 projekt/frontend/src/hooks/useDocuments.ts
 rename projekt/frontend/src/types/{Document.ts => DocumentType.ts} (72%)

diff --git a/projekt/frontend/src/adapters/api.ts b/projekt/frontend/src/adapters/api.ts
index dc8fc81..7468ce0 100644
--- a/projekt/frontend/src/adapters/api.ts
+++ b/projekt/frontend/src/adapters/api.ts
@@ -9,7 +9,7 @@ export interface ApiConfig {
     auth: AuthContextType;
 }
 
-class ApiAdapter {
+export class ApiAdapter {
     private auth: AuthContextType;
 
     constructor(auth: AuthContextType) {
diff --git a/projekt/frontend/src/components/CreateDocument.tsx b/projekt/frontend/src/components/CreateDocument.tsx
index be8dcd3..a8194ef 100644
--- a/projekt/frontend/src/components/CreateDocument.tsx
+++ b/projekt/frontend/src/components/CreateDocument.tsx
@@ -1,11 +1,12 @@
 import { useAuth } from '../utils/useAuth';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { apiFetch } from '../utils/apiFetch';
 import ErrorMessage from './ErrorMessage';
 import Navbar from './Navbar';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBan, faCirclePlus} from "@fortawesome/free-solid-svg-icons";
+import {useCreateDocument} from "../hooks/useDocuments.ts";
+import ApiErrorMessage from "./ApiErrorMessage.tsx";
 
 interface FormData {
     title: string;
@@ -16,12 +17,12 @@ interface FormData {
 interface Errors {
     title?: string;
     content?: string;
-    general?: string;
 }
 
 function CreateDocument() {
     const auth = useAuth();
     const navigate = useNavigate();
+    const { create, isLoading } = useCreateDocument();
 
     const [formData, setFormData] = useState<FormData>({
         title: '',
@@ -30,7 +31,7 @@ function CreateDocument() {
     });
 
     const [errors, setErrors] = useState<Errors>({});
-    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [apiError, setApiError] = useState<string | null>(null);
 
     const handleChange = (
         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -57,14 +58,7 @@ function CreateDocument() {
         }
     };
 
-    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
-        e.preventDefault();
-
-        if (!auth.isAuthenticated) {
-            setErrors({ general: 'You have to be authorized to create a document' });
-            return;
-        }
-
+    const validateForm = (): boolean => {
         const newErrors: Errors = {};
         if (!formData.title.trim()) {
             newErrors.title = 'Title is required.';
@@ -77,35 +71,32 @@ function CreateDocument() {
             newErrors.content = 'Content is required.';
         }
 
-        if (Object.keys(newErrors).length > 0) {
-            setErrors(newErrors);
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
+        e.preventDefault();
+        setApiError(null);
+
+        if (!auth.isAuthenticated) {
+            setApiError("You have to be authenticated to create a document.");
             return;
         }
 
-        setIsSubmitting(true);
-        setErrors({});
+        if (!validateForm()) {
+            return;
+        }
 
         try {
-            const response = await apiFetch(auth, '/api/documents', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(formData)
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.title || 'Failed to create document');
+            const createdDocument = await create(formData);
+            if (!createdDocument) {
+                setApiError("Failed to create document. Please try again.");
+                return;
             }
-
-            const data = await response.json();
-            navigate(data.noteId ? `/documents/${data.noteId}` : '/documents/public');
-
-        } catch (error) {
-            setErrors({
-                general: error instanceof Error ? error.message : 'An error occurred.'
-            });
-        } finally {
-            setIsSubmitting(false);
+            navigate(`/documents/${createdDocument.noteId}`)
+        } catch (err) {
+            setApiError(err instanceof Error ? err.message : "An error occurred while creating the document.");
         }
     };
 
@@ -115,6 +106,8 @@ function CreateDocument() {
             <div className="max-w-3xl mx-auto mt-8 px-4">
                 <h1 className="text-2xl font-bold mb-6">Create new document</h1>
 
+                <ApiErrorMessage error={apiError ? { title: apiError } : undefined} />
+
                 <form className="w-full" onSubmit={handleSubmit}>
                     <div className="mb-6">
                         <label className="block mb-2 font-semibold">Title *</label>
@@ -145,6 +138,7 @@ function CreateDocument() {
                             onChange={handleChange}
                             rows={15}
                             placeholder="Insert document content. You can use Markdown syntax to format your text."
+                            disabled={isLoading}
                         />
                         <ErrorMessage message={errors.content} type="field" />
                     </div>
@@ -162,14 +156,12 @@ function CreateDocument() {
                         </label>
                     </div>
 
-                    <ErrorMessage message={errors.general} type="general" />
-
                     <button
                         className="px-6 py-3 bg-blue-500 text-white rounded-md cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed"
                         type="submit"
-                        disabled={isSubmitting || !auth.isAuthenticated}
+                        disabled={isLoading || !auth.isAuthenticated}
                     >
-                        {isSubmitting
+                        {isLoading
                             ? 'Submitting...'
                             : !auth.isAuthenticated
                                 ? <> <FontAwesomeIcon icon={faBan} /> Unauthorized</>
diff --git a/projekt/frontend/src/hooks/useDocuments.ts b/projekt/frontend/src/hooks/useDocuments.ts
new file mode 100644
index 0000000..29be96e
--- /dev/null
+++ b/projekt/frontend/src/hooks/useDocuments.ts
@@ -0,0 +1,126 @@
+import { useState, useCallback, useEffect } from "react";
+import { createApiAdapter } from "../adapters/api";
+import {useAuth} from "../utils/useAuth.ts";
+import {createDocumentService} from "../services/documentService.ts";
+import type {DocumentInput} from "../types/DocumentInput.ts";
+import type {DocumentType} from "../types/DocumentType.ts";
+
+interface UseDocumentsState {
+    data: DocumentType | null;
+    isLoading: boolean;
+    error: string | null;
+}
+
+export const useGetDocument = (id: string) => {
+    const auth = useAuth();
+    const [state, setState] = useState<UseDocumentsState>({
+        data: null,
+        isLoading: true,
+        error: null,
+    });
+
+    useEffect(() => {
+        if (!id) return;
+
+        const fetchDocument = async () => {
+            try {
+                setState(prev => ({ ...prev, isLoading: true }));
+                const api = createApiAdapter(auth);
+                const service = createDocumentService(api);
+                const document = await service.getById(id);
+                setState({ data: document, isLoading: false, error: null });
+            } catch (err) {
+                setState({
+                    data: null,
+                    isLoading: false,
+                    error: err instanceof Error ? err.message : "Fehler beim Laden",
+                });
+            }
+        };
+
+        fetchDocument();
+    }, [id, auth]);
+
+    return state;
+};
+
+export const useCreateDocument = () => {
+    const auth = useAuth();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const create = useCallback(
+        async (data: DocumentInput): Promise<DocumentType | null> => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const api = createApiAdapter(auth);
+                const service = createDocumentService(api);
+                return await service.create(data);
+            } catch (err) {
+                const message = err instanceof Error ? err.message : "Fehler beim Erstellen";
+                setError(message);
+                throw err;
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [auth]
+    );
+
+    return { create, isLoading, error };
+};
+
+export const useUpdateDocument = () => {
+    const auth = useAuth();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const update = useCallback(
+        async (id: string, data: Partial<DocumentInput>): Promise<DocumentType> => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const api = createApiAdapter(auth);
+                const service = createDocumentService(api);
+                return await service.update(id, data);
+            } catch (err) {
+                const message = err instanceof Error ? err.message : "Fehler beim Aktualisieren";
+                setError(message);
+                throw err;
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [auth]
+    );
+
+    return { update, isLoading, error };
+};
+
+export const useDeleteDocument = () => {
+    const auth = useAuth();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const delete_ = useCallback(
+        async (id: string): Promise<void> => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const api = createApiAdapter(auth);
+                const service = createDocumentService(api);
+                await service.delete(id);
+            } catch (err) {
+                const message = err instanceof Error ? err.message : "Fehler beim Löschen";
+                setError(message);
+                throw err;
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [auth]
+    );
+
+    return { delete: delete_, isLoading, error };
+};
diff --git a/projekt/frontend/src/services/documentService.ts b/projekt/frontend/src/services/documentService.ts
index 8ab943b..686b954 100644
--- a/projekt/frontend/src/services/documentService.ts
+++ b/projekt/frontend/src/services/documentService.ts
@@ -1,17 +1,11 @@
-
-/*
-export const createDocumentService = (api) => ({
-    getAll: () => api.get<{ documents: Document[] }>("/documents"),
-
-    getById: (id: string) => api.get<Document>(`/documents/${id}`),
-
-    create: (data: DocumentInput) =>
-        api.post<Document>("/documents", data),
-
-    update: (id: string, data: Partial<DocumentInput>) =>
-        api.put<Document>(`/documents/${id}`, data),
-
-    delete: (id: string) =>
-        api.delete<void>(`/documents/${id}`),
-});
-*/
\ No newline at end of file
+import type {DocumentInput} from "../types/DocumentInput.ts";
+import {ApiAdapter} from "../adapters/api.ts";
+import type {DocumentType} from "../types/DocumentType.ts";
+
+export const createDocumentService = (api : ApiAdapter) => ({
+    getAll: () => api.get<{ documents: DocumentType[] }>("/documents"),
+    getById: (id: string) => api.get<DocumentType>(`/documents/${id}`),
+    create: (data: DocumentInput) => api.post<DocumentType>("/documents", data),
+    update: (id: string, data: Partial<DocumentInput>) => api.put<DocumentType>(`/documents/${id}`, data),
+    delete: (id: string) => api.delete<void>(`/documents/${id}`),
+});
\ No newline at end of file
diff --git a/projekt/frontend/src/types/Document.ts b/projekt/frontend/src/types/DocumentType.ts
similarity index 72%
rename from projekt/frontend/src/types/Document.ts
rename to projekt/frontend/src/types/DocumentType.ts
index 0f48943..0753321 100644
--- a/projekt/frontend/src/types/Document.ts
+++ b/projekt/frontend/src/types/DocumentType.ts
@@ -1,6 +1,6 @@
 import type {DocumentInput} from "./DocumentInput.ts";
 
-export interface Document extends DocumentInput {
+export interface DocumentType extends DocumentInput {
     noteId: string;
     userId: string;
     created_at: string;
diff --git a/projekt/frontend/src/utils/apiFetch.ts b/projekt/frontend/src/utils/apiFetch.ts
index 4c4e2bb..90e5f9f 100644
--- a/projekt/frontend/src/utils/apiFetch.ts
+++ b/projekt/frontend/src/utils/apiFetch.ts
@@ -1,5 +1,6 @@
 import { getCookie } from "./cookies";
-import type {AuthContextType} from "../components/AuthContext.tsx";
+import type {AuthContextType} from "../types/AuthContextType.ts";
+
 
 const CSRF_HEADER = "X-XSRF-TOKEN";
 const CSRF_COOKIE = "XSRF-TOKEN";
diff --git a/projekt/frontend/src/utils/useAuth.ts b/projekt/frontend/src/utils/useAuth.ts
index b73563d..c4e8637 100644
--- a/projekt/frontend/src/utils/useAuth.ts
+++ b/projekt/frontend/src/utils/useAuth.ts
@@ -1,6 +1,7 @@
 // hooks/useAuth.ts
 import { useContext } from 'react';
-import {AuthContext, type AuthContextType} from '../components/AuthContext.tsx';
+import {AuthContext} from '../components/AuthContext.tsx';
+import type {AuthContextType} from "../types/AuthContextType.ts";
 
 export function useAuth(): AuthContextType {
     const context = useContext(AuthContext);

From 6dc91dc62336aaee9b3de9c995707131f3775a3f Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Mon, 30 Mar 2026 17:24:50 +0200
Subject: [PATCH 12/16] feat: Adding Types for ProblemDetail and adjusting
 error types, new wrapper component

---
 .../projektsse/backend/config/JwtFilter.java  |  18 ++-
 .../backend/controller/AuthController.java    |  15 ++-
 projekt/frontend/src/App.tsx                  |   2 +
 projekt/frontend/src/adapters/api.ts          |  95 -------------
 .../src/components/ApiErrorMessage.tsx        |  21 ++-
 .../frontend/src/components/AuthProvider.tsx  |   1 +
 .../src/components/CreateDocument.tsx         |  77 ++++++-----
 projekt/frontend/src/components/LoginPage.tsx |  55 ++++----
 .../frontend/src/components/PWResetEmail.tsx  |  23 ++--
 .../src/components/PWResetPassword.tsx        |  28 ++--
 projekt/frontend/src/components/Profile.tsx   |   9 ++
 .../frontend/src/components/RegisterPage.tsx  |  57 +++-----
 .../frontend/src/components/SafeMarkdown.tsx  |   2 +-
 .../src/components/SuccessWrapper.tsx         |  26 ++++
 projekt/frontend/src/hooks/useDocuments.ts    | 126 ------------------
 .../frontend/src/services/documentService.ts  |  11 --
 projekt/frontend/src/types/ErrorType.ts       |  10 --
 projekt/frontend/src/types/FormErrorType.ts   |   4 +-
 .../src/types/ProblemDetail/ApiErrorType.ts   |   7 +
 .../src/types/ProblemDetail/DetailError.ts    |  10 ++
 .../types/ProblemDetail/IsErrorTypeGuards.ts  |  11 ++
 .../ProblemDetail/ProblemDetailBaseType.ts    |  10 ++
 .../types/ProblemDetail/ValidationError.ts    |  12 ++
 .../ProblemDetail/ValidationFieldError.ts     |   7 +
 24 files changed, 263 insertions(+), 374 deletions(-)
 delete mode 100644 projekt/frontend/src/adapters/api.ts
 create mode 100644 projekt/frontend/src/components/Profile.tsx
 create mode 100644 projekt/frontend/src/components/SuccessWrapper.tsx
 delete mode 100644 projekt/frontend/src/hooks/useDocuments.ts
 delete mode 100644 projekt/frontend/src/services/documentService.ts
 delete mode 100644 projekt/frontend/src/types/ErrorType.ts
 create mode 100644 projekt/frontend/src/types/ProblemDetail/ApiErrorType.ts
 create mode 100644 projekt/frontend/src/types/ProblemDetail/DetailError.ts
 create mode 100644 projekt/frontend/src/types/ProblemDetail/IsErrorTypeGuards.ts
 create mode 100644 projekt/frontend/src/types/ProblemDetail/ProblemDetailBaseType.ts
 create mode 100644 projekt/frontend/src/types/ProblemDetail/ValidationError.ts
 create mode 100644 projekt/frontend/src/types/ProblemDetail/ValidationFieldError.ts

diff --git a/projekt/backend/src/main/java/com/projektsse/backend/config/JwtFilter.java b/projekt/backend/src/main/java/com/projektsse/backend/config/JwtFilter.java
index cf2944a..0c47704 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/config/JwtFilter.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/config/JwtFilter.java
@@ -1,12 +1,14 @@
 package com.projektsse.backend.config;
 
 import com.projektsse.backend.service.JwtService;
+import jakarta.annotation.PostConstruct;
 import jakarta.servlet.FilterChain;
 import jakarta.servlet.ServletException;
 import jakarta.servlet.http.Cookie;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 import org.jspecify.annotations.NonNull;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.security.core.userdetails.UserDetails;
@@ -21,7 +23,9 @@
 @Component
 public class JwtFilter extends OncePerRequestFilter {
 
-    private static final String FINGERPRINT_COOKIE_NAME = "__Secure-Fgp";
+    @Value("${app.cookie.secure}")
+    private boolean cookieSecure;
+    private String FINGERPRINT_COOKIE_NAME;
 
     private final JwtService jwtService;
     private final UserDetailsService userDetailsService;
@@ -31,6 +35,11 @@ public JwtFilter(JwtService jwtService, UserDetailsService userDetailsService) {
         this.userDetailsService = userDetailsService;
     }
 
+    @PostConstruct
+    public void init() {
+        FINGERPRINT_COOKIE_NAME = cookieSecure ? "__Secure-Fgp" : "Fgp";
+    }
+
     @Override
     protected void doFilterInternal(
             HttpServletRequest request,
@@ -99,6 +108,11 @@ protected boolean shouldNotFilter(HttpServletRequest request) {
         return path.startsWith("/api/auth/register") ||
                 path.startsWith("/api/auth/login") ||
                 path.startsWith("/api/auth/verify-email") ||
-                path.startsWith("/api/documents/public");
+                path.startsWith("/api/documents/public") ||
+                path.startsWith("/api/auth/rt/refresh-token") ||
+                path.startsWith("/api/auth/rt/logout") ||
+                path.startsWith("/api/auth/forgot-password") ||
+                path.startsWith("/api/auth/reset-password") ||
+                path.startsWith("/api/auth/csrf");
     }
 }
diff --git a/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java b/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
index 8181e5d..76dd4ef 100644
--- a/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
+++ b/projekt/backend/src/main/java/com/projektsse/backend/controller/AuthController.java
@@ -6,6 +6,7 @@
 import com.projektsse.backend.service.PasswortResetService;
 import com.projektsse.backend.service.TokenService;
 import com.projektsse.backend.service.UserService;
+import jakarta.annotation.PostConstruct;
 import jakarta.validation.Valid;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Pattern;
@@ -28,6 +29,7 @@ public class AuthController {
 
     @Value("${app.cookie.secure}")
     private boolean cookieSecure;
+    private String FINGERPRINT_COOKIE_NAME;
 
     private final UserService userService;
     private final JwtService jwtService;
@@ -41,6 +43,11 @@ public AuthController(UserService userService, JwtService jwtService, TokenServi
         this.passwortResetService = passwortResetService;
     }
 
+    @PostConstruct
+    private void init() {
+        this.FINGERPRINT_COOKIE_NAME = cookieSecure ? "__Secure-Fgp" : "Fgp"; // Runs after @Value injection
+    }
+
     @PostMapping(value = "/register", consumes = "application/json", produces = "application/json")
     public ResponseEntity<ApiMessage> register(@Validated @RequestBody RegisterRequest req) {
         userService.registerUser(req.toModel());
@@ -77,7 +84,7 @@ public ResponseEntity<?> login(@Validated @RequestBody LoginRequest loginRequest
         Duration accessTokenDuration = Duration.ofMinutes(jwtService.getAccessTokenExpiration()); // Gleich wie JWT Expiry
 
         // Fingerprint Cookie (HttpOnly, Secure, SameSite=Strict)
-        ResponseCookie fingerprintCookie = ResponseCookie.from("__Secure-Fgp", fingerprint)
+        ResponseCookie fingerprintCookie = ResponseCookie.from(FINGERPRINT_COOKIE_NAME, fingerprint)
                                                          .httpOnly(true)
                                                          .secure(cookieSecure)
                                                          .path("/")
@@ -128,9 +135,9 @@ public ResponseEntity<?> refreshToken(@CookieValue(name = "REFRESH_TOKEN") Strin
         String newAccessToken = jwtService.generateAccessToken(userId, newFingerprintHash);
         String newRefreshToken = tokenService.rotateRefreshToken(refreshToken);
 
-        Duration accessTokenDuration = Duration.ofMinutes(10);
+        Duration accessTokenDuration = Duration.ofMinutes(jwtService.getAccessTokenExpiration());
 
-        ResponseCookie fingerprintCookie = ResponseCookie.from("__Secure-Fgp", newFingerprint)
+        ResponseCookie fingerprintCookie = ResponseCookie.from(FINGERPRINT_COOKIE_NAME, newFingerprint)
                                                          .httpOnly(true).secure(cookieSecure).path("/")
                                                          .maxAge(accessTokenDuration).sameSite("Strict").build();
 
@@ -161,7 +168,7 @@ public ResponseEntity<ApiMessage> logout(
                 .sameSite("Strict")
                 .build();
 
-        ResponseCookie deleteFingerprintCookie = ResponseCookie.from("__Secure-Fgp", "")
+        ResponseCookie deleteFingerprintCookie = ResponseCookie.from(FINGERPRINT_COOKIE_NAME, "")
                 .httpOnly(true)
                 .secure(cookieSecure)
                 .path("/")
diff --git a/projekt/frontend/src/App.tsx b/projekt/frontend/src/App.tsx
index 7fb993f..b6e1f81 100644
--- a/projekt/frontend/src/App.tsx
+++ b/projekt/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import Navbar from "./components/Navbar.tsx";
 import UserDocumentsPage from "./components/UserDocumentsPage.tsx";
 import {PWResetEmail} from "./components/PWResetEmail.tsx";
 import {PWResetPassword} from "./components/PWResetPassword.tsx";
+import {Profile} from "./components/Profile.tsx";
 
 
 function App() {
@@ -28,6 +29,7 @@ function App() {
                 </Route>
                 <Route path="users">
                     <Route path="my-documents" element={<UserDocumentsPage />} />
+                    <Route path="profile" element={<Profile />} />
                 </Route>
                 <Route path="*" element={<> <Navbar /> <div>Main Page</div> </>} />
             </Routes>
diff --git a/projekt/frontend/src/adapters/api.ts b/projekt/frontend/src/adapters/api.ts
deleted file mode 100644
index 7468ce0..0000000
--- a/projekt/frontend/src/adapters/api.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { getCookie } from "../utils/cookies";
-import type {AuthContextType} from "../types/AuthContextType.ts";
-
-const API_BASE = "/api";
-const CSRF_HEADER = "X-XSRF-TOKEN";
-const CSRF_COOKIE = "XSRF-TOKEN";
-
-export interface ApiConfig {
-    auth: AuthContextType;
-}
-
-export class ApiAdapter {
-    private auth: AuthContextType;
-
-    constructor(auth: AuthContextType) {
-        this.auth = auth;
-    }
-
-    private getHeaders(): HeadersInit {
-        const headers: Record<string, string> = {
-            "Content-Type": "application/json",
-        };
-
-        if (this.auth.token) {
-            headers["Authorization"] = `Bearer ${this.auth.token}`;
-        }
-
-        const csrf = getCookie(CSRF_COOKIE);
-        if (csrf) {
-            headers[CSRF_HEADER] = csrf;
-        }
-
-        // Fingerprint Cookie will be sent automatically with credentials: "include", no need to add it to headers
-
-        return headers;
-    }
-
-    async get<T>(endpoint: string): Promise<T> {
-        const response = await fetch(`${API_BASE}${endpoint}`, {
-            method: "GET",
-            headers: this.getHeaders(),
-            credentials: "include",
-        });
-        return this.handleResponse<T>(response);
-    }
-
-    async post<T>(endpoint: string, body?: unknown): Promise<T> {
-        const response = await fetch(`${API_BASE}${endpoint}`, {
-            method: "POST",
-            headers: this.getHeaders(),
-            body: body ? JSON.stringify(body) : undefined,
-            credentials: "include",
-        });
-        return this.handleResponse<T>(response);
-    }
-
-    async put<T>(endpoint: string, body?: unknown): Promise<T> {
-        const response = await fetch(`${API_BASE}${endpoint}`, {
-            method: "PUT",
-            headers: this.getHeaders(),
-            body: body ? JSON.stringify(body) : undefined,
-            credentials: "include",
-        });
-        return this.handleResponse<T>(response);
-    }
-
-    async delete<T>(endpoint: string): Promise<T> {
-        const response = await fetch(`${API_BASE}${endpoint}`, {
-            method: "DELETE",
-            headers: this.getHeaders(),
-            credentials: "include",
-        });
-        return this.handleResponse<T>(response);
-    }
-
-    private async handleResponse<T>(response: Response): Promise<T> {
-        if (response.status === 401) {
-            const newToken = await this.auth.refreshAccessToken();
-            if (!newToken) {
-                throw new Error("Authentication required.");
-            }
-        }
-
-        if (!response.ok) {
-            const error = await response.json().catch(() => ({}));
-            throw new Error(error.title || "API request failed");
-        }
-
-        return response.json();
-    }
-}
-
-export const createApiAdapter = (auth: AuthContextType): ApiAdapter => {
-    return new ApiAdapter(auth);
-};
diff --git a/projekt/frontend/src/components/ApiErrorMessage.tsx b/projekt/frontend/src/components/ApiErrorMessage.tsx
index 77f2a95..4e0a34f 100644
--- a/projekt/frontend/src/components/ApiErrorMessage.tsx
+++ b/projekt/frontend/src/components/ApiErrorMessage.tsx
@@ -1,20 +1,29 @@
 import React from 'react';
-import type { ErrorType } from '../types/ErrorType';
 import '../styling/ErrorMessage.css';
 import {faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
+import {isDetailError, isValidationError} from "../types/ProblemDetail/IsErrorTypeGuards.ts";
 
-interface ApiErrorMessageProps {
-    error?: Partial<ErrorType>;
+interface Props {
+    error: ApiErrorType | undefined;
 }
 
-const ApiErrorMessage: React.FC<ApiErrorMessageProps> = ({ error }) => {
-    if (!error || !error.title) return null;
+const ApiErrorMessage: React.FC<Props> = ({ error }: Props ) => {
+    if (!error) return null;
 
     return (
         <div className="error-message error-message--general">
             <FontAwesomeIcon icon={faTriangleExclamation} /> <strong>{error.title}</strong>
-            {error.detail && <p>{error.detail}</p>}
+            {isDetailError(error) && <p>{error.detail}</p>}
+
+            {isValidationError(error) && (
+                <ul>
+                    {error.errors.map((validationError, index) => (
+                        <li key={index}>{validationError.message}</li>
+                    ))}
+                </ul>
+            )}
             {error.status && <span>Status: {error.status}</span>}
         </div>
     );
diff --git a/projekt/frontend/src/components/AuthProvider.tsx b/projekt/frontend/src/components/AuthProvider.tsx
index 0843179..22776e5 100644
--- a/projekt/frontend/src/components/AuthProvider.tsx
+++ b/projekt/frontend/src/components/AuthProvider.tsx
@@ -64,6 +64,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
         refreshAccessToken().finally(() => setIsLoading(false));
     }, [refreshAccessToken]);
 
+    // TODO: AuthContext.Provider ist deprecated. => Neuen Ansatz anschauen
     return (
         <AuthContext.Provider
             value={{
diff --git a/projekt/frontend/src/components/CreateDocument.tsx b/projekt/frontend/src/components/CreateDocument.tsx
index a8194ef..cc78fcc 100644
--- a/projekt/frontend/src/components/CreateDocument.tsx
+++ b/projekt/frontend/src/components/CreateDocument.tsx
@@ -1,12 +1,13 @@
 import { useAuth } from '../utils/useAuth';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
+import { apiFetch } from '../utils/apiFetch';
 import ErrorMessage from './ErrorMessage';
 import Navbar from './Navbar';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBan, faCirclePlus} from "@fortawesome/free-solid-svg-icons";
-import {useCreateDocument} from "../hooks/useDocuments.ts";
-import ApiErrorMessage from "./ApiErrorMessage.tsx";
+import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
+import {isDetailError} from "../types/ProblemDetail/IsErrorTypeGuards.ts";
 
 interface FormData {
     title: string;
@@ -17,12 +18,12 @@ interface FormData {
 interface Errors {
     title?: string;
     content?: string;
+    general?: string;
 }
 
 function CreateDocument() {
     const auth = useAuth();
     const navigate = useNavigate();
-    const { create, isLoading } = useCreateDocument();
 
     const [formData, setFormData] = useState<FormData>({
         title: '',
@@ -31,7 +32,7 @@ function CreateDocument() {
     });
 
     const [errors, setErrors] = useState<Errors>({});
-    const [apiError, setApiError] = useState<string | null>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     const handleChange = (
         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -58,7 +59,14 @@ function CreateDocument() {
         }
     };
 
-    const validateForm = (): boolean => {
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
+        e.preventDefault();
+
+        if (!auth.isAuthenticated) {
+            setErrors({ general: 'You have to be authorized to create a document' });
+            return;
+        }
+
         const newErrors: Errors = {};
         if (!formData.title.trim()) {
             newErrors.title = 'Title is required.';
@@ -71,32 +79,40 @@ function CreateDocument() {
             newErrors.content = 'Content is required.';
         }
 
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    }
-
-    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
-        e.preventDefault();
-        setApiError(null);
-
-        if (!auth.isAuthenticated) {
-            setApiError("You have to be authenticated to create a document.");
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors);
             return;
         }
 
-        if (!validateForm()) {
-            return;
-        }
+        setIsSubmitting(true);
+        setErrors({});
 
         try {
-            const createdDocument = await create(formData);
-            if (!createdDocument) {
-                setApiError("Failed to create document. Please try again.");
-                return;
+            const response = await apiFetch(auth, '/api/documents', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData)
+            });
+
+            if (!response.ok) {
+                const errorData : ApiErrorType = await response.json();
+                if (isDetailError(errorData)) {
+                    setErrors({general: errorData.detail});
+                    return;
+                }
+                // TODO: Handle validation errors (if backend returns them in a specific format)
+                // if (isValidationError(errorData)) {}
             }
-            navigate(`/documents/${createdDocument.noteId}`)
-        } catch (err) {
-            setApiError(err instanceof Error ? err.message : "An error occurred while creating the document.");
+
+            const data = await response.json();
+            navigate(data.noteId ? `/documents/${data.noteId}` : '/documents/public');
+
+        } catch (error) {
+            setErrors({
+                general: error instanceof Error ? error.message : 'An error occurred.'
+            });
+        } finally {
+            setIsSubmitting(false);
         }
     };
 
@@ -106,8 +122,6 @@ function CreateDocument() {
             <div className="max-w-3xl mx-auto mt-8 px-4">
                 <h1 className="text-2xl font-bold mb-6">Create new document</h1>
 
-                <ApiErrorMessage error={apiError ? { title: apiError } : undefined} />
-
                 <form className="w-full" onSubmit={handleSubmit}>
                     <div className="mb-6">
                         <label className="block mb-2 font-semibold">Title *</label>
@@ -138,7 +152,6 @@ function CreateDocument() {
                             onChange={handleChange}
                             rows={15}
                             placeholder="Insert document content. You can use Markdown syntax to format your text."
-                            disabled={isLoading}
                         />
                         <ErrorMessage message={errors.content} type="field" />
                     </div>
@@ -156,12 +169,14 @@ function CreateDocument() {
                         </label>
                     </div>
 
+                    <ErrorMessage message={errors.general} type="general" />
+
                     <button
                         className="px-6 py-3 bg-blue-500 text-white rounded-md cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed"
                         type="submit"
-                        disabled={isLoading || !auth.isAuthenticated}
+                        disabled={isSubmitting || !auth.isAuthenticated}
                     >
-                        {isLoading
+                        {isSubmitting
                             ? 'Submitting...'
                             : !auth.isAuthenticated
                                 ? <> <FontAwesomeIcon icon={faBan} /> Unauthorized</>
@@ -174,4 +189,4 @@ function CreateDocument() {
     );
 }
 
-export { CreateDocument };
+export { CreateDocument };
\ No newline at end of file
diff --git a/projekt/frontend/src/components/LoginPage.tsx b/projekt/frontend/src/components/LoginPage.tsx
index fbe1f96..5ac0069 100644
--- a/projekt/frontend/src/components/LoginPage.tsx
+++ b/projekt/frontend/src/components/LoginPage.tsx
@@ -6,8 +6,9 @@ import Navbar from "./Navbar.tsx";
 import "../styling/DocumentDetailPage.css";
 import {apiFetch} from "../utils/apiFetch.ts";
 import {NavLink, redirect} from "react-router";
-import type {ErrorType} from "../types/ErrorType.ts";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
+import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
+import {isDetailError} from "../types/ProblemDetail/IsErrorTypeGuards.ts";
 
 
 interface FormData {
@@ -33,7 +34,7 @@ function LoginPage() {
     const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
     const [errors, setErrors] = useState<Errors>({});
-    const [apiError, setApiError] = useState<Partial<ErrorType> | undefined>(undefined);
+    const [apiError, setApiError] = useState<ApiErrorType>();
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
     const [cookieConsent, setCookieConsent] = useState<boolean>(false);
 
@@ -54,7 +55,7 @@ function LoginPage() {
 
     const handleSubmit = (): void => {
         if (!cookieConsent) {
-            setErrors({ general: 'Bitte stimmen Sie der Verwendung von notwendigen Cookies zu.' });
+            setErrors({ general: 'Please accept the cookie consent to proceed.' });
             return;
         }
 
@@ -91,8 +92,8 @@ function LoginPage() {
             });
 
             if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.message || 'Logout fehlgeschlagen');
+                const errorData : ApiErrorType = await response.json();
+                throw new Error(errorData.title);
             }
 
             logout();
@@ -111,7 +112,7 @@ function LoginPage() {
 
     const handleDeleteAccount = async (): Promise<void> => {
         if (!deletePassword) {
-            setErrors({ general: "Bitte Passwort eingeben." });
+            setErrors({ general: "Please enter password." });
             return;
         }
 
@@ -124,13 +125,16 @@ function LoginPage() {
                 body: JSON.stringify({ password: deletePassword })
             })
             if (!res.ok) {
-                const errorData = await res.json();
-                throw new Error(errorData.message || 'Konto-Löschung fehlgeschlagen');
+                const errorData: ApiErrorType = await res.json();
+                if (isDetailError(errorData)) {
+                    setErrors({ general: errorData.detail });
+                    throw new Error(errorData.detail);
+                }
+                throw new Error(errorData.title);
             }
 
             setErrors({})
-            // Nach erfolgreicher Löschung ausloggen
-            logout();
+            logout(); // After account deletion, log the user out
             redirect('/');
         } catch (error) {
             setErrors({
@@ -141,11 +145,12 @@ function LoginPage() {
 
     // Wenn eingeloggt: Logout-View anzeigen
     if (isAuthenticated) {
+        // TODO: Refactor in a separate component
         return (
             <>
                 <Navbar/>
                 <div className="auth-form-wrapper">
-                    <h1>Sie sind angemeldet</h1>
+                    <h1>You are currently logged in.</h1>
 
                     <ErrorMessage
                         message={errors.general}
@@ -155,19 +160,19 @@ function LoginPage() {
                         onClick={handleLogout}
                         disabled={isSubmitting}
                     >
-                        {isSubmitting ? 'Wird abgemeldet...' : 'Abmelden'}
+                        {isSubmitting ? 'Loading...' : 'Logout'}
                     </button>
 
                     <button
                         className="delete-button"
                         onClick={() => setShowDeleteConfirm(!showDeleteConfirm)}
                     >
-                        Nutzerkonto löschen
+                        Delete Account
                     </button>
 
                     {showDeleteConfirm && (
                         <div className="delete-confirm-box">
-                            <p>Bitte Passwort zur Bestätigung eingeben:</p>
+                            <p>Please enter password to confirm account deletion:</p>
                             <input
                                 type="password"
                                 value={deletePassword}
@@ -180,7 +185,7 @@ function LoginPage() {
                                 onClick={handleDeleteAccount}
                                 disabled={isSubmitting}
                             >
-                                {isSubmitting ? "Lösche..." : "Konto endgültig löschen"}
+                                {isSubmitting ? "Deleting..." : "Confirm Delete"}
                             </button>
 
                         </div>
@@ -200,7 +205,7 @@ function LoginPage() {
                 <h1>Login Page</h1>
 
                 <div className="form-group">
-                    <label>Email-Adresse </label>
+                    <label>Email-Address </label>
                     <input
                         type="email"
                         name="email"
@@ -213,7 +218,7 @@ function LoginPage() {
                 </div>
 
                 <div className="form-group">
-                    <label>Passwort </label>
+                    <label>Password </label>
                     <input
                         type="password"
                         name="password"
@@ -233,7 +238,7 @@ function LoginPage() {
                             onChange={(e) => setCookieConsent(e.target.checked)}
                             required
                         />
-                        {' '}Ich stimme der Verwendung von notwendigen Cookies zu.
+                        {' '}I consent to the use of cookies for authentication purposes.
                     </label>
                 </div>
 
@@ -244,7 +249,7 @@ function LoginPage() {
                     type="general"/>
 
                 <button className="primary-button" onClick={handleSubmit} disabled={isSubmitting}>
-                    {isSubmitting ? 'Lädt...' : 'Login'}
+                    {isSubmitting ? 'Loading...' : 'Login'}
                 </button>
 
                 <NavLink to="/forgot-password">Forgot password?</NavLink>
@@ -257,7 +262,7 @@ async function submitLogin(
     formData: FormData,
     setIsSubmitting: React.Dispatch<React.SetStateAction<boolean>>,
     setErrors: React.Dispatch<React.SetStateAction<Errors>>,
-    setApiError: React.Dispatch<React.SetStateAction<Partial<ErrorType> | undefined>>,
+    setApiError: React.Dispatch<React.SetStateAction<ApiErrorType | undefined>>,
     login: (token: string) => void
 ): Promise<void> {
     const newErrors: Errors = {};
@@ -291,14 +296,18 @@ async function submitLogin(
         });
         // Rate Limit CHECK (aus Proxy)
         if (response.status === 429) {
-            const errorData : ErrorType = await response.json();
+            const errorData : ApiErrorType = await response.json();
             setApiError(errorData);
             return;
         }
 
         if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.message || 'Falsche E-Mail Adresse oder Passwort');
+            const errorData : ApiErrorType  = await response.json();
+            if (isDetailError(errorData)) {
+                setErrors({ general: errorData.detail });
+                throw new Error(errorData.detail);
+            }
+            throw new Error(errorData.title); // Fallback
         }
 
         const data = await response.json();
diff --git a/projekt/frontend/src/components/PWResetEmail.tsx b/projekt/frontend/src/components/PWResetEmail.tsx
index 1676c77..868632b 100644
--- a/projekt/frontend/src/components/PWResetEmail.tsx
+++ b/projekt/frontend/src/components/PWResetEmail.tsx
@@ -2,18 +2,13 @@ import Navbar from "./Navbar.tsx";
 import ErrorMessage from "./ErrorMessage.tsx";
 import React from "react";
 import type {MessageType} from "../types/MessageType.ts";
-import type {ErrorType} from "../types/ErrorType.ts";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
 import type {FormErrorType} from "../types/FormErrorType.ts";
-
-
+import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
+import type {DetailError} from "../types/ProblemDetail/DetailError.ts";
 
 export function PWResetEmail() {
-
-
-    const [formData, setFormData] = React.useState({
-        email: ''
-    });
+    const [formData, setFormData] = React.useState({email: ''});
 
     const [errors, setErrors] = React.useState<FormErrorType>({});
     const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -27,7 +22,6 @@ export function PWResetEmail() {
         }));
     }
 
-
     const handleSubmit = async () => {
         setIsSubmitting(true);
         setErrors({});
@@ -42,20 +36,20 @@ export function PWResetEmail() {
             });
 
             if (response.status === 429) {
-                const errorData: ErrorType = await response.json();
+                const errorData : ApiErrorType = await response.json() as DetailError;
                 setErrors({api: errorData});
                 return;
             }
 
             if (!response.ok) {
-                const errorData: ErrorType = await response.json();
+                const errorData: ApiErrorType = await response.json();
                 setErrors({api: errorData});
                 return;
             }
             const data: MessageType = await response.json();
             setResponseMessage(data.message);
-        } catch (error) {
-            setErrors({general: error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'});
+        } catch (error : unknown) {
+            setErrors({general: error instanceof Error ? error.message : 'An error occurred'});
         } finally {
             setIsSubmitting(false);
         }
@@ -66,7 +60,6 @@ export function PWResetEmail() {
             <Navbar/>
             <div className="auth-form-wrapper">
                 <h1>Password Reset</h1>
-
                 <div className="form-group">
                     <label>Email-Address</label>
                     <input
@@ -87,7 +80,7 @@ export function PWResetEmail() {
                     onClick={handleSubmit}
                     disabled={isSubmitting}
                 >
-                    {isSubmitting ? 'Lädt...' : 'Send'}
+                    {isSubmitting ? 'Loading...' : 'Send'}
                 </button>
 
             </div>
diff --git a/projekt/frontend/src/components/PWResetPassword.tsx b/projekt/frontend/src/components/PWResetPassword.tsx
index fcf4e6a..6f8797d 100644
--- a/projekt/frontend/src/components/PWResetPassword.tsx
+++ b/projekt/frontend/src/components/PWResetPassword.tsx
@@ -1,11 +1,13 @@
 import React, {useEffect} from "react";
-import type {ErrorType} from "../types/ErrorType.ts";
 import type {MessageType} from "../types/MessageType.ts";
 import Navbar from "./Navbar.tsx";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
 import ErrorMessage from "./ErrorMessage.tsx";
 import type {FormErrorType} from "../types/FormErrorType.ts";
-import {NavLink, useSearchParams} from "react-router";
+import {useNavigate, useSearchParams} from "react-router";
+import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
+import type {DetailError} from "../types/ProblemDetail/DetailError.ts";
+import {SuccessWrapper} from "./SuccessWrapper.tsx";
 
 type PageState = "validating" | "form" | "success" | "error";
 
@@ -19,8 +21,9 @@ export function PWResetPassword() {
         password_confirm: ''
     });
 
+    const navigate = useNavigate();
     const [errors, setErrors] = React.useState<FormErrorType>({});
-    const [tokenError, setTokenError] = React.useState<Partial<ErrorType> | null>(null);
+    const [tokenError, setTokenError] = React.useState<ApiErrorType | undefined>(undefined);
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [responseMessage, setResponseMessage] = React.useState<string | null>(null);
 
@@ -45,14 +48,14 @@ export function PWResetPassword() {
                 });
 
                 if (!response.ok) {
-                    const errorData: ErrorType = await response.json();
+                    const errorData : ApiErrorType = await response.json();
                     setTokenError(errorData);
                     setPageState("error");
                     return;
                 }
                 setPageState("form");
             } catch {
-                setTokenError({title: "Token-Validierung fehlgeschlagen", detail: "Es gab ein Problem bei der Validierung des Tokens. Bitte versuchen Sie es erneut."});
+                // setTokenError();
                 setPageState("error");
             }
         };
@@ -89,13 +92,13 @@ export function PWResetPassword() {
             });
 
             if (response.status === 429) {
-                const errorData: ErrorType = await response.json();
+                const errorData : ApiErrorType = await response.json() as DetailError;
                 setErrors({api: errorData});
                 return;
             }
 
             if (!response.ok) {
-                const errorData: ErrorType = await response.json();
+                const errorData: ApiErrorType = await response.json();
                 setErrors({api: errorData});
                 return;
             }
@@ -103,7 +106,7 @@ export function PWResetPassword() {
             setResponseMessage(data.message);
             setPageState("success");
         } catch (error) {
-            setErrors({general: error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'});
+            setErrors({general: error instanceof Error ? error.message : 'An error occurred'});
         } finally {
             setIsSubmitting(false);
         }
@@ -128,7 +131,7 @@ export function PWResetPassword() {
                 <Navbar/>
                 <div className="auth-form-wrapper">
                     <h1>Password Reset</h1>
-                    <ApiErrorMessage error={tokenError ?? undefined} />
+                    <ApiErrorMessage error={tokenError} />
                 </div>
             </>
         );
@@ -138,11 +141,10 @@ export function PWResetPassword() {
         return (
             <>
                 <Navbar/>
-                <div className="auth-form-wrapper">
+                <SuccessWrapper buttonLabel="To Login" onButtonClick={() => navigate('/login')}>
                     <h1>Password Reset</h1>
                     {responseMessage && <div className="success-message">{responseMessage}</div>}
-                    <NavLink to="/login" className="primary-button">Go to Login</NavLink>
-                </div>
+                </SuccessWrapper>
             </>
         );
     }
@@ -182,7 +184,7 @@ export function PWResetPassword() {
                     onClick={handleSubmit}
                     disabled={isSubmitting}
                 >
-                    {isSubmitting ? 'Lädt...' : 'Send'}
+                    {isSubmitting ? 'Loading...' : 'Send'}
                 </button>
 
             </div>
diff --git a/projekt/frontend/src/components/Profile.tsx b/projekt/frontend/src/components/Profile.tsx
new file mode 100644
index 0000000..14ba18b
--- /dev/null
+++ b/projekt/frontend/src/components/Profile.tsx
@@ -0,0 +1,9 @@
+function Profile() {
+    return (
+        <div className="max-w-350 mx-auto px-8 py-4">
+            <h1 className="text-2xl font-bold mb-4">User Profile</h1>
+            <p>This is the user profile page. You can display user information here.</p>
+        </div>
+    );
+}
+export { Profile };
\ No newline at end of file
diff --git a/projekt/frontend/src/components/RegisterPage.tsx b/projekt/frontend/src/components/RegisterPage.tsx
index 13bf000..46cc91b 100644
--- a/projekt/frontend/src/components/RegisterPage.tsx
+++ b/projekt/frontend/src/components/RegisterPage.tsx
@@ -5,11 +5,13 @@ import * as common from "@zxcvbn-ts/language-common";
 import * as de from "@zxcvbn-ts/language-de";
 import { useNavigate } from 'react-router';
 import Navbar from "./Navbar.tsx";
-import type {ErrorType} from "../types/ErrorType.ts";
 import ApiErrorMessage from "./ApiErrorMessage.tsx";
 import {faLightbulb, faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import LoadingBar from "./LoadingBar.tsx";
+import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
+import type {DetailError} from "../types/ProblemDetail/DetailError.ts";
+import {SuccessWrapper} from "./SuccessWrapper.tsx";
 
 zxcvbnOptions.setOptions({
     translations: de.translations,
@@ -36,7 +38,7 @@ async function submitRegister(
     setIsSubmitting: (value: boolean) => void,
     setErrors: (value: Errors) => void,
     setIsSuccess: (value: boolean) => void,
-    setApiError: React.Dispatch<React.SetStateAction<Partial<ErrorType> | undefined>>
+    setApiError: React.Dispatch<React.SetStateAction<ApiErrorType | undefined>>
 ) {
 
     const newErrors: Errors = {};
@@ -81,22 +83,18 @@ async function submitRegister(
         });
 
         if (response.status === 429) {
-            const errorData : ErrorType = await response.json();
+            const errorData : ApiErrorType = await response.json() as DetailError;
             setApiError(errorData);
             return;
         }
 
         if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.message || 'Registrierung fehlgeschlagen');
+            const errorData : ApiErrorType = await response.json();
+            setApiError(errorData);
+            return;
         }
 
-        // const data = await response.json();
-        // console.log('Registrierungsantwort: %o', data);
-
-        // Success anzeigen
         setIsSuccess(true);
-
     } catch (error) {
         setErrors({
             general: error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'
@@ -113,7 +111,7 @@ function RegisterPage() {
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [passwordData, setPasswordData] = useState<ZxcvbnResult | null>(null);
-    const [apiError, setApiError] = useState<Partial<ErrorType> | undefined>(undefined);
+    const [apiError, setApiError] = useState<ApiErrorType | undefined>(undefined);
     const score = passwordData?.score ?? 0;
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -137,10 +135,8 @@ function RegisterPage() {
 
     const handleSubmit = (): void => {
         submitRegister(formData, setIsSubmitting, setErrors, setIsSuccess, setApiError).catch(
-            error => {
-                setErrors({
-                    general: error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'
-                });
+            (error : ApiErrorType) => {
+                setErrors({general: error.title});
             }
         )
     };
@@ -150,26 +146,17 @@ function RegisterPage() {
         return (
             <>
                 <Navbar />
-                <div className="max-w-2xl mx-auto mt-12 px-8 text-center">
-                    <div className="bg-green-50 border-2 border-green-500 rounded-xl p-8 mb-8">
-                        <h1 className="text-2xl font-bold text-green-800 mb-4">
-                            Registration successful!
-                        </h1>
-                        <p className="text-lg text-gray-700 leading-relaxed">
-                            We have sent a confirmation email to <strong>{formData.email}</strong>.
-                        </p>
-                        <p className="text-base text-gray-500 mt-4">
-                            Please confirm your email to activate your account.
-                        </p>
-                    </div>
-
-                    <button
-                        className="w-full py-3 text-base font-semibold bg-blue-500 hover:bg-blue-600 text-white rounded-md cursor-pointer transition-colors"
-                        onClick={() => navigate('/login')}
-                    >
-                        To Login
-                    </button>
-                </div>
+                <SuccessWrapper buttonLabel="To Login" onButtonClick={() => navigate('/login')}>
+                    <h1 className="text-2xl font-bold text-green-800 mb-4">
+                        Registration successful!
+                    </h1>
+                    <p className="text-lg text-gray-700 leading-relaxed">
+                        We have sent a confirmation email to <strong>{formData.email}</strong>.
+                    </p>
+                    <p className="text-base text-gray-500 mt-4">
+                        Please confirm your email to activate your account.
+                    </p>
+                </SuccessWrapper>
             </>
         );
     }
diff --git a/projekt/frontend/src/components/SafeMarkdown.tsx b/projekt/frontend/src/components/SafeMarkdown.tsx
index bedc4a7..4fc9979 100644
--- a/projekt/frontend/src/components/SafeMarkdown.tsx
+++ b/projekt/frontend/src/components/SafeMarkdown.tsx
@@ -19,7 +19,7 @@ export function SafeMarkdown({ markdown }: { markdown: string }) {
                         const url = href.replace(/^embed:/, '').trim();
                         const youtubeId = getYoutubeIdFromUrl(url);
 
-                        if (!youtubeId) return '<p>Ungültiger Video-Link</p>';
+                        if (!youtubeId) return '<p>Invalid link</p>';
 
                         // Platzhalter statt iframe - kein Tracking bis Klick
                         return `
diff --git a/projekt/frontend/src/components/SuccessWrapper.tsx b/projekt/frontend/src/components/SuccessWrapper.tsx
new file mode 100644
index 0000000..c1e4464
--- /dev/null
+++ b/projekt/frontend/src/components/SuccessWrapper.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+interface Props {
+    children: React.ReactNode;
+    buttonLabel: string;
+    onButtonClick: () => void;
+}
+
+export function SuccessWrapper({children, buttonLabel, onButtonClick} : Props) {
+
+    return (
+        <div className="max-w-2xl mx-auto mt-12 px-8 text-center">
+            <div className="bg-green-50 border-2 border-green-500 rounded-xl p-8 mb-8">
+                {children}
+            </div>
+
+            <button
+                className="w-full py-3 text-base font-semibold bg-blue-500 hover:bg-blue-600 text-white rounded-md cursor-pointer transition-colors"
+                onClick={onButtonClick}
+            >
+                {buttonLabel}
+            </button>
+        </div>
+    );
+
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/hooks/useDocuments.ts b/projekt/frontend/src/hooks/useDocuments.ts
deleted file mode 100644
index 29be96e..0000000
--- a/projekt/frontend/src/hooks/useDocuments.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useState, useCallback, useEffect } from "react";
-import { createApiAdapter } from "../adapters/api";
-import {useAuth} from "../utils/useAuth.ts";
-import {createDocumentService} from "../services/documentService.ts";
-import type {DocumentInput} from "../types/DocumentInput.ts";
-import type {DocumentType} from "../types/DocumentType.ts";
-
-interface UseDocumentsState {
-    data: DocumentType | null;
-    isLoading: boolean;
-    error: string | null;
-}
-
-export const useGetDocument = (id: string) => {
-    const auth = useAuth();
-    const [state, setState] = useState<UseDocumentsState>({
-        data: null,
-        isLoading: true,
-        error: null,
-    });
-
-    useEffect(() => {
-        if (!id) return;
-
-        const fetchDocument = async () => {
-            try {
-                setState(prev => ({ ...prev, isLoading: true }));
-                const api = createApiAdapter(auth);
-                const service = createDocumentService(api);
-                const document = await service.getById(id);
-                setState({ data: document, isLoading: false, error: null });
-            } catch (err) {
-                setState({
-                    data: null,
-                    isLoading: false,
-                    error: err instanceof Error ? err.message : "Fehler beim Laden",
-                });
-            }
-        };
-
-        fetchDocument();
-    }, [id, auth]);
-
-    return state;
-};
-
-export const useCreateDocument = () => {
-    const auth = useAuth();
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const create = useCallback(
-        async (data: DocumentInput): Promise<DocumentType | null> => {
-            try {
-                setIsLoading(true);
-                setError(null);
-                const api = createApiAdapter(auth);
-                const service = createDocumentService(api);
-                return await service.create(data);
-            } catch (err) {
-                const message = err instanceof Error ? err.message : "Fehler beim Erstellen";
-                setError(message);
-                throw err;
-            } finally {
-                setIsLoading(false);
-            }
-        },
-        [auth]
-    );
-
-    return { create, isLoading, error };
-};
-
-export const useUpdateDocument = () => {
-    const auth = useAuth();
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const update = useCallback(
-        async (id: string, data: Partial<DocumentInput>): Promise<DocumentType> => {
-            try {
-                setIsLoading(true);
-                setError(null);
-                const api = createApiAdapter(auth);
-                const service = createDocumentService(api);
-                return await service.update(id, data);
-            } catch (err) {
-                const message = err instanceof Error ? err.message : "Fehler beim Aktualisieren";
-                setError(message);
-                throw err;
-            } finally {
-                setIsLoading(false);
-            }
-        },
-        [auth]
-    );
-
-    return { update, isLoading, error };
-};
-
-export const useDeleteDocument = () => {
-    const auth = useAuth();
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const delete_ = useCallback(
-        async (id: string): Promise<void> => {
-            try {
-                setIsLoading(true);
-                setError(null);
-                const api = createApiAdapter(auth);
-                const service = createDocumentService(api);
-                await service.delete(id);
-            } catch (err) {
-                const message = err instanceof Error ? err.message : "Fehler beim Löschen";
-                setError(message);
-                throw err;
-            } finally {
-                setIsLoading(false);
-            }
-        },
-        [auth]
-    );
-
-    return { delete: delete_, isLoading, error };
-};
diff --git a/projekt/frontend/src/services/documentService.ts b/projekt/frontend/src/services/documentService.ts
deleted file mode 100644
index 686b954..0000000
--- a/projekt/frontend/src/services/documentService.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {DocumentInput} from "../types/DocumentInput.ts";
-import {ApiAdapter} from "../adapters/api.ts";
-import type {DocumentType} from "../types/DocumentType.ts";
-
-export const createDocumentService = (api : ApiAdapter) => ({
-    getAll: () => api.get<{ documents: DocumentType[] }>("/documents"),
-    getById: (id: string) => api.get<DocumentType>(`/documents/${id}`),
-    create: (data: DocumentInput) => api.post<DocumentType>("/documents", data),
-    update: (id: string, data: Partial<DocumentInput>) => api.put<DocumentType>(`/documents/${id}`, data),
-    delete: (id: string) => api.delete<void>(`/documents/${id}`),
-});
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ErrorType.ts b/projekt/frontend/src/types/ErrorType.ts
deleted file mode 100644
index cd2c589..0000000
--- a/projekt/frontend/src/types/ErrorType.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * ErrorType defines the structure of an error object
- * It is oriented on the structure of the ProblemDetail object defined in the backend
- */
-export type ErrorType = {
-    status: number; // HTTP status code
-    title: string; // Short, human-readable summary of the problem
-    detail?: string; // Detailed description of the problem (optional)
-    path? : string; // The request path that caused the error (optional)
-}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/FormErrorType.ts b/projekt/frontend/src/types/FormErrorType.ts
index b0ce5db..9d14973 100644
--- a/projekt/frontend/src/types/FormErrorType.ts
+++ b/projekt/frontend/src/types/FormErrorType.ts
@@ -1,6 +1,6 @@
-import type {ErrorType} from "./ErrorType.ts";
+import type {ApiErrorType} from "./ProblemDetail/ApiErrorType.ts";
 
 export type FormErrorType = {
-    api?: Partial<ErrorType>
+    api?: ApiErrorType
     general?: string;
 }
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ProblemDetail/ApiErrorType.ts b/projekt/frontend/src/types/ProblemDetail/ApiErrorType.ts
new file mode 100644
index 0000000..3954ec2
--- /dev/null
+++ b/projekt/frontend/src/types/ProblemDetail/ApiErrorType.ts
@@ -0,0 +1,7 @@
+import type {ValidationError} from "./ValidationError.ts";
+import type {DetailError} from "./DetailError.ts";
+
+/**
+ * The ApiErrorType is a union type that represents either a ValidationError or a DetailError.
+ */
+export type ApiErrorType = ValidationError | DetailError;
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ProblemDetail/DetailError.ts b/projekt/frontend/src/types/ProblemDetail/DetailError.ts
new file mode 100644
index 0000000..db8f0a7
--- /dev/null
+++ b/projekt/frontend/src/types/ProblemDetail/DetailError.ts
@@ -0,0 +1,10 @@
+import type {ProblemDetailBaseType} from "./ProblemDetailBaseType.ts";
+
+/**
+ * The DetailError interface represents a specific type of problem detail response that includes a detailed error message.
+ * It extends the ProblemDetailBaseType interface, inheriting its common fields (instance, status, title) and adding a new field called detail,
+ * which contains a string describing the specific error in more detail.
+ */
+export interface DetailError extends ProblemDetailBaseType {
+    detail: string;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ProblemDetail/IsErrorTypeGuards.ts b/projekt/frontend/src/types/ProblemDetail/IsErrorTypeGuards.ts
new file mode 100644
index 0000000..f1e79f3
--- /dev/null
+++ b/projekt/frontend/src/types/ProblemDetail/IsErrorTypeGuards.ts
@@ -0,0 +1,11 @@
+import type {ValidationError} from "./ValidationError.ts";
+import type {ApiErrorType} from "./ApiErrorType.ts";
+import type {DetailError} from "./DetailError.ts";
+
+export function isValidationError(error: ApiErrorType): error is ValidationError {
+    return "errors" in error && Array.isArray(error.errors);
+}
+
+export function isDetailError(error: ApiErrorType): error is DetailError {
+    return "detail" in error;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ProblemDetail/ProblemDetailBaseType.ts b/projekt/frontend/src/types/ProblemDetail/ProblemDetailBaseType.ts
new file mode 100644
index 0000000..576a595
--- /dev/null
+++ b/projekt/frontend/src/types/ProblemDetail/ProblemDetailBaseType.ts
@@ -0,0 +1,10 @@
+/**
+ * The ProblemDetailBaseType interface represents the base structure of a problem detail response
+ * after the RFC 7807 standard. It includes the common fields that are present in all problem detail responses, such as instance, status, and title.
+ * This interface can be extended by other specific problem detail types, such as DetailError and ValidationError, to include additional fields relevant to those specific error cases.
+ */
+export interface ProblemDetailBaseType {
+    instance: string;
+    status: number;
+    title: string;
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ProblemDetail/ValidationError.ts b/projekt/frontend/src/types/ProblemDetail/ValidationError.ts
new file mode 100644
index 0000000..4d2bfe7
--- /dev/null
+++ b/projekt/frontend/src/types/ProblemDetail/ValidationError.ts
@@ -0,0 +1,12 @@
+import type {ValidationFieldError} from "./ValidationFieldError.ts";
+import type {ProblemDetailBaseType} from "./ProblemDetailBaseType.ts";
+
+/**
+ * The ValidationError interface represents a specific type of problem detail response that includes validation errors for specific fields.
+ * It extends the ProblemDetailBaseType interface, inheriting its common fields (instance, status, title) and adding a new field called errors,
+ * which is an array of ValidationFieldError objects. Each ValidationFieldError object contains information about a specific field that failed validation,
+ * including the field name and the corresponding error message.
+ */
+export interface ValidationError extends ProblemDetailBaseType {
+    errors: ValidationFieldError[];
+}
\ No newline at end of file
diff --git a/projekt/frontend/src/types/ProblemDetail/ValidationFieldError.ts b/projekt/frontend/src/types/ProblemDetail/ValidationFieldError.ts
new file mode 100644
index 0000000..c9a5bdc
--- /dev/null
+++ b/projekt/frontend/src/types/ProblemDetail/ValidationFieldError.ts
@@ -0,0 +1,7 @@
+/**
+ * Represents a validation error for a specific field in a problem detail response.
+ */
+export interface ValidationFieldError {
+    field: string;
+    message: string;
+}
\ No newline at end of file

From 09924f0ba8270b20c1ab8a07dd9ad150907b057d Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 31 Mar 2026 13:41:27 +0200
Subject: [PATCH 13/16] feat: Adding Edit Notes feature, splitting components

---
 projekt/frontend/src/App.tsx                  |   9 +-
 .../src/components/CreateDocument.tsx         | 192 ---------------
 .../frontend/src/components/DeleteButton.tsx  |   2 +-
 .../src/components/DocumentDetailPage.tsx     |   8 +-
 .../frontend/src/components/DocumentForm.tsx  | 230 ++++++++++++++++++
 .../frontend/src/components/EditButton.tsx    |  16 ++
 .../src/components/SuccessWrapper.tsx         |  11 +
 .../src/components/UpdateDocument.tsx         |  92 +++++++
 8 files changed, 360 insertions(+), 200 deletions(-)
 delete mode 100644 projekt/frontend/src/components/CreateDocument.tsx
 create mode 100644 projekt/frontend/src/components/DocumentForm.tsx
 create mode 100644 projekt/frontend/src/components/EditButton.tsx
 create mode 100644 projekt/frontend/src/components/UpdateDocument.tsx

diff --git a/projekt/frontend/src/App.tsx b/projekt/frontend/src/App.tsx
index b6e1f81..9417cf9 100644
--- a/projekt/frontend/src/App.tsx
+++ b/projekt/frontend/src/App.tsx
@@ -4,12 +4,13 @@ import RegisterPage from "./components/RegisterPage.tsx";
 import AuthProvider from "./components/AuthProvider.tsx";
 import {PublicDocumentsPage} from "./components/PublicDocumentsPage.tsx";
 import DocumentDetailPage from "./components/DocumentDetailPage.tsx";
-import {CreateDocument} from "./components/CreateDocument.tsx";
 import Navbar from "./components/Navbar.tsx";
 import UserDocumentsPage from "./components/UserDocumentsPage.tsx";
 import {PWResetEmail} from "./components/PWResetEmail.tsx";
 import {PWResetPassword} from "./components/PWResetPassword.tsx";
 import {Profile} from "./components/Profile.tsx";
+import {UpdateDocument} from "./components/UpdateDocument.tsx";
+import {DocumentForm} from "./components/DocumentForm.tsx";
 
 
 function App() {
@@ -19,13 +20,13 @@ function App() {
                 <Route path="login" element={<LoginPage />} />
                 <Route path="register" element={<RegisterPage />} />
                 <Route path="forgot-password" element={<PWResetEmail /> } />
-
                 <Route path="reset-password" element={<PWResetPassword />} />
 
                 <Route path="documents">
                     <Route path="public" element={<PublicDocumentsPage />} />
                     <Route path=":documentId" element={<DocumentDetailPage />} />
-                    <Route path="create" element={<CreateDocument /> } />
+                    <Route path="create" element={<> <Navbar /> <DocumentForm isEdit={false} /> </> } />
+                    <Route path=":documentId/edit" element={<UpdateDocument />} />
                 </Route>
                 <Route path="users">
                     <Route path="my-documents" element={<UserDocumentsPage />} />
@@ -36,5 +37,5 @@ function App() {
         </AuthProvider>
     );
 }
-
+// TODO: Add a main page with some welcome text and links to public documents, login, etc.
 export { App };
diff --git a/projekt/frontend/src/components/CreateDocument.tsx b/projekt/frontend/src/components/CreateDocument.tsx
deleted file mode 100644
index cc78fcc..0000000
--- a/projekt/frontend/src/components/CreateDocument.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { useAuth } from '../utils/useAuth';
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router';
-import { apiFetch } from '../utils/apiFetch';
-import ErrorMessage from './ErrorMessage';
-import Navbar from './Navbar';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBan, faCirclePlus} from "@fortawesome/free-solid-svg-icons";
-import type {ApiErrorType} from "../types/ProblemDetail/ApiErrorType.ts";
-import {isDetailError} from "../types/ProblemDetail/IsErrorTypeGuards.ts";
-
-interface FormData {
-    title: string;
-    mdContent: string;
-    isPrivate: boolean;
-}
-
-interface Errors {
-    title?: string;
-    content?: string;
-    general?: string;
-}
-
-function CreateDocument() {
-    const auth = useAuth();
-    const navigate = useNavigate();
-
-    const [formData, setFormData] = useState<FormData>({
-        title: '',
-        mdContent: '',
-        isPrivate: false
-    });
-
-    const [errors, setErrors] = useState<Errors>({});
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    const handleChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ): void => {
-        const { name, value, type } = e.target;
-
-        if (type === 'checkbox') {
-            setFormData(prev => ({
-                ...prev,
-                [name]: (e.target as HTMLInputElement).checked
-            }));
-        } else {
-            setFormData(prev => ({
-                ...prev,
-                [name]: value
-            }));
-        }
-
-        if (errors[name as keyof Errors]) {
-            setErrors(prev => ({
-                ...prev,
-                [name]: ''
-            }));
-        }
-    };
-
-    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
-        e.preventDefault();
-
-        if (!auth.isAuthenticated) {
-            setErrors({ general: 'You have to be authorized to create a document' });
-            return;
-        }
-
-        const newErrors: Errors = {};
-        if (!formData.title.trim()) {
-            newErrors.title = 'Title is required.';
-        }
-        else if (formData.title.length > 100) {
-            newErrors.title = 'Title cannot exceed 100 characters.';
-        }
-
-        if (!formData.mdContent.trim()) {
-            newErrors.content = 'Content is required.';
-        }
-
-        if (Object.keys(newErrors).length > 0) {
-            setErrors(newErrors);
-            return;
-        }
-
-        setIsSubmitting(true);
-        setErrors({});
-
-        try {
-            const response = await apiFetch(auth, '/api/documents', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(formData)
-            });
-
-            if (!response.ok) {
-                const errorData : ApiErrorType = await response.json();
-                if (isDetailError(errorData)) {
-                    setErrors({general: errorData.detail});
-                    return;
-                }
-                // TODO: Handle validation errors (if backend returns them in a specific format)
-                // if (isValidationError(errorData)) {}
-            }
-
-            const data = await response.json();
-            navigate(data.noteId ? `/documents/${data.noteId}` : '/documents/public');
-
-        } catch (error) {
-            setErrors({
-                general: error instanceof Error ? error.message : 'An error occurred.'
-            });
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    return (
-        <>
-            <Navbar />
-            <div className="max-w-3xl mx-auto mt-8 px-4">
-                <h1 className="text-2xl font-bold mb-6">Create new document</h1>
-
-                <form className="w-full" onSubmit={handleSubmit}>
-                    <div className="mb-6">
-                        <label className="block mb-2 font-semibold">Title *</label>
-                        <input
-                            className="w-full px-3 py-3 text-base border border-gray-300 rounded-md"
-                            type="text"
-                            name="title"
-                            value={formData.title}
-                            onChange={handleChange}
-                            placeholder="Insert document title"
-                        />
-                        <ErrorMessage message={errors.title} type="field" />
-                    </div>
-
-                    <div className="mb-6">
-                        <div className="flex justify-between items-center mb-2">
-                            <label className="block mb-2 font-semibold">
-                                Content * (Markdown supported)
-                            </label>
-                            <p>
-                                Chars: {formData.mdContent.length} / 10000
-                            </p>
-                        </div>
-                        <textarea
-                            className="w-full px-3 py-3 text-base border border-gray-300 rounded-md font-mono resize-y"
-                            name="mdContent"
-                            value={formData.mdContent}
-                            onChange={handleChange}
-                            rows={15}
-                            placeholder="Insert document content. You can use Markdown syntax to format your text."
-                        />
-                        <ErrorMessage message={errors.content} type="field" />
-                    </div>
-
-                    <div className="mb-6">
-                        <label className="inline-flex items-center gap-2 cursor-pointer font-semibold">
-                            <input
-                                className="w-4 h-4"
-                                type="checkbox"
-                                name="isPrivate"
-                                checked={formData.isPrivate}
-                                onChange={handleChange}
-                            />
-                            Private document (only visible to you)
-                        </label>
-                    </div>
-
-                    <ErrorMessage message={errors.general} type="general" />
-
-                    <button
-                        className="px-6 py-3 bg-blue-500 text-white rounded-md cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed"
-                        type="submit"
-                        disabled={isSubmitting || !auth.isAuthenticated}
-                    >
-                        {isSubmitting
-                            ? 'Submitting...'
-                            : !auth.isAuthenticated
-                                ? <> <FontAwesomeIcon icon={faBan} /> Unauthorized</>
-                                : <> <FontAwesomeIcon icon={faCirclePlus} /> Create</>
-                        }
-                    </button>
-                </form>
-            </div>
-        </>
-    );
-}
-
-export { CreateDocument };
\ No newline at end of file
diff --git a/projekt/frontend/src/components/DeleteButton.tsx b/projekt/frontend/src/components/DeleteButton.tsx
index 7756df9..c8e02c9 100644
--- a/projekt/frontend/src/components/DeleteButton.tsx
+++ b/projekt/frontend/src/components/DeleteButton.tsx
@@ -21,7 +21,7 @@ function DeleteButton({ onDeleteClick, title = "Delete", message = "Are you sure
         <>
             <button data-model-target="popup-modal"
                     onClick={() : void => setShowModal(true)}
-                    className="mt-8 px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-md cursor-pointer transition-colors"
+                    className="px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-md cursor-pointer transition-colors"
             >
                 <FontAwesomeIcon icon={faTrash} /> Delete
             </button>
diff --git a/projekt/frontend/src/components/DocumentDetailPage.tsx b/projekt/frontend/src/components/DocumentDetailPage.tsx
index f82882e..8f3a4e0 100644
--- a/projekt/frontend/src/components/DocumentDetailPage.tsx
+++ b/projekt/frontend/src/components/DocumentDetailPage.tsx
@@ -13,6 +13,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import LoadingBar from "./LoadingBar.tsx";
 import BackButton from "./BackButton.tsx";
 import DeleteButton from "./DeleteButton.tsx";
+import EditButton from "./EditButton.tsx";
 
 interface DocumentDetail {
     noteId: string;
@@ -153,13 +154,14 @@ function DocumentDetailPage() {
                     </div>
                 </div>
 
-                { isOwner && (<DeleteButton title="Delete document" message="Are you sure you want to delete this document? This action cannot be undone." onDeleteClick={handleDelete} />)}
+                <div className="flex justify-end mt-2 gap-2">
+                    { isOwner && (<EditButton docId={documentId} />)}
+                    { isOwner && (<DeleteButton title="Delete document" message="Are you sure you want to delete this document? This action cannot be undone." onDeleteClick={handleDelete} />)}
+                </div>
 
             </div>
         </>
     );
 }
 
-
-
 export default DocumentDetailPage
diff --git a/projekt/frontend/src/components/DocumentForm.tsx b/projekt/frontend/src/components/DocumentForm.tsx
new file mode 100644
index 0000000..b381d9b
--- /dev/null
+++ b/projekt/frontend/src/components/DocumentForm.tsx
@@ -0,0 +1,230 @@
+import { useAuth } from '../utils/useAuth';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router';
+import ErrorMessage from './ErrorMessage';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faBan, faCirclePlus, faPenToSquare} from "@fortawesome/free-solid-svg-icons";
+import { apiFetch } from '../utils/apiFetch';
+import type {AuthContextType} from "../types/AuthContextType.ts";
+import type { ApiErrorType } from "../types/ProblemDetail/ApiErrorType.ts";
+import type { DetailError } from "../types/ProblemDetail/DetailError.ts";
+import ApiErrorMessage from "./ApiErrorMessage.tsx";
+
+interface FormData {
+    title: string;
+    mdContent: string;
+    isPrivate: boolean;
+}
+
+interface Errors {
+    title?: string;
+    content?: string;
+}
+
+interface DocumentFormProps {
+    docId?: string;
+    initialData?: FormData;
+    isEdit?: boolean;
+}
+
+function DocumentForm({ docId, initialData, isEdit = false }: DocumentFormProps) {
+    const auth: AuthContextType = useAuth();
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState<FormData>(
+        initialData || {
+            title: '',
+            mdContent: '',
+            isPrivate: false
+        }
+    );
+
+    const [errors, setErrors] = useState<Errors>({});
+    const [apiError, setApiError] = useState<ApiErrorType | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleChange = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ): void => {
+        const { name, value, type } = e.target;
+
+        if (type === 'checkbox') {
+            setFormData(prev => ({
+                ...prev,
+                [name]: (e.target as HTMLInputElement).checked
+            }));
+        } else {
+            setFormData(prev => ({
+                ...prev,
+                [name]: value
+            }));
+        }
+
+        if (errors[name as keyof Errors]) {
+            setErrors(prev => ({
+                ...prev,
+                [name]: ''
+            }));
+        }
+    };
+
+    const validateForm = (): boolean => {
+        const newErrors: Errors = {};
+        if (!formData.title.trim()) {
+            newErrors.title = 'Title is required.';
+        }
+        else if (formData.title.length > 100) {
+            newErrors.title = 'Title cannot exceed 100 characters.';
+        }
+
+        if (!formData.mdContent.trim()) {
+            newErrors.content = 'Content is required.';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>): Promise<void> => {
+        e.preventDefault();
+        setApiError(null);
+
+        if (!auth.isAuthenticated) {
+            setApiError({
+                title: 'Not Authenticated',
+                detail: 'You have to be authenticated to create a document.',
+                status: 401
+            } as DetailError);
+            return;
+        }
+
+        if (!validateForm()) {
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            const body = {
+                title: formData.title,
+                mdContent: formData.mdContent,
+                isPrivate: formData.isPrivate
+            };
+
+            let response: Response;
+
+            if (isEdit && docId) {
+                // UPDATE
+                response = await apiFetch(auth, `/api/documents/${docId}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                });
+            } else {
+                // CREATE
+                response = await apiFetch(auth, '/api/documents', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                });
+            }
+
+            if (!response.ok) {
+                const error = await response.json();
+                setApiError(error);
+                return;
+            }
+
+            const result = await response.json();
+            navigate(`/documents/${result.noteId || result.id}`);
+
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "An error occurred.";
+            setApiError({
+                title: 'Error',
+                detail: errorMessage,
+                status: 500
+            } as DetailError);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-3xl mx-auto mt-8 px-4">
+            <h1 className="text-2xl font-bold mb-6">
+                {isEdit ? 'Edit document' : 'Create new document'}
+            </h1>
+
+            {apiError && <ApiErrorMessage error={apiError} />}
+
+            <form className="w-full" onSubmit={handleSubmit}>
+                <div className="mb-6">
+                    <label className="block mb-2 font-semibold">Title *</label>
+                    <input
+                        className="w-full px-3 py-3 text-base border border-gray-300 rounded-md disabled:bg-gray-100"
+                        type="text"
+                        name="title"
+                        value={formData.title}
+                        onChange={handleChange}
+                        placeholder="Insert document title"
+                        disabled={isLoading}
+                    />
+                    <ErrorMessage message={errors.title} type="field" />
+                </div>
+
+                <div className="mb-6">
+                    <div className="flex justify-between items-center mb-2">
+                        <label className="block mb-2 font-semibold">
+                            Content * (Markdown supported)
+                        </label>
+                        <p>
+                            Chars: {formData.mdContent.length} / 10000
+                        </p>
+                    </div>
+                    <textarea
+                        className="w-full px-3 py-3 text-base border border-gray-300 rounded-md font-mono resize-y disabled:bg-gray-100"
+                        name="mdContent"
+                        value={formData.mdContent}
+                        onChange={handleChange}
+                        rows={15}
+                        placeholder="Insert document content. You can use Markdown syntax to format your text."
+                        disabled={isLoading}
+                    />
+                    <ErrorMessage message={errors.content} type="field" />
+                </div>
+
+                <div className="mb-6">
+                    <label className="inline-flex items-center gap-2 cursor-pointer font-semibold">
+                        <input
+                            className="w-4 h-4 disabled:cursor-not-allowed"
+                            type="checkbox"
+                            name="isPrivate"
+                            checked={formData.isPrivate}
+                            onChange={handleChange}
+                            disabled={isLoading}
+                        />
+                        Private document (only visible to you)
+                    </label>
+                </div>
+
+                <button
+                    className="px-6 py-3 bg-blue-500 text-white rounded-md cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed"
+                    type="submit"
+                    disabled={isLoading || !auth.isAuthenticated}
+                >
+                    {isLoading
+                        ? 'Submitting...'
+                        : !auth.isAuthenticated
+                            ? <> <FontAwesomeIcon icon={faBan} /> Unauthorized</>
+                            : isEdit
+                                ? <> <FontAwesomeIcon icon={faPenToSquare} /> Update</>
+                                : <> <FontAwesomeIcon icon={faCirclePlus} /> Create</>
+                    }
+                </button>
+            </form>
+        </div>
+    );
+}
+
+export { DocumentForm };
diff --git a/projekt/frontend/src/components/EditButton.tsx b/projekt/frontend/src/components/EditButton.tsx
new file mode 100644
index 0000000..850d0a4
--- /dev/null
+++ b/projekt/frontend/src/components/EditButton.tsx
@@ -0,0 +1,16 @@
+import {faPenToSquare} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {useNavigate} from "react-router";
+
+function EditButton({docId} : {docId : string | undefined}) {
+    const navigate = useNavigate();
+    return (
+        <button
+            onClick={() => navigate(`/documents/${docId}/edit`)}
+            className="px-6 py-3 rounded-md bg-orange-400 hover:bg-orange-600 hover:underline text-white font-semibold cursor-pointer">
+            <FontAwesomeIcon icon={faPenToSquare} /> Edit
+        </button>
+    );
+}
+
+export default EditButton;
\ No newline at end of file
diff --git a/projekt/frontend/src/components/SuccessWrapper.tsx b/projekt/frontend/src/components/SuccessWrapper.tsx
index c1e4464..9cc44bd 100644
--- a/projekt/frontend/src/components/SuccessWrapper.tsx
+++ b/projekt/frontend/src/components/SuccessWrapper.tsx
@@ -1,11 +1,22 @@
 import React from "react";
 
+/**
+ * A wrapper component for displaying success messages and a button to proceed.
+ */
 interface Props {
     children: React.ReactNode;
     buttonLabel: string;
     onButtonClick: () => void;
 }
 
+/**
+ * SuccessWrapper is a reusable component that displays a success message (passed as children) and a button with a customizable label and click handler.
+ * It is styled to provide a visually distinct success message area and a prominent button for user interaction.
+ * @param children The HTML content to be displayed as the success message.
+ * @param buttonLabel The label for the button that will be displayed below the success message.
+ * @param onButtonClick The callback function that will be executed when the button is clicked.
+ * @constructor
+ */
 export function SuccessWrapper({children, buttonLabel, onButtonClick} : Props) {
 
     return (
diff --git a/projekt/frontend/src/components/UpdateDocument.tsx b/projekt/frontend/src/components/UpdateDocument.tsx
new file mode 100644
index 0000000..e50bdf6
--- /dev/null
+++ b/projekt/frontend/src/components/UpdateDocument.tsx
@@ -0,0 +1,92 @@
+import { useParams } from 'react-router';
+import { useEffect, useState } from 'react';
+import { DocumentForm } from './DocumentForm.tsx';
+import Navbar from "./Navbar.tsx";
+import { useAuth } from '../utils/useAuth';
+import { apiFetch } from '../utils/apiFetch';
+import type { ApiErrorType } from "../types/ProblemDetail/ApiErrorType.ts";
+import type { DetailError } from "../types/ProblemDetail/DetailError.ts";
+
+interface FormData {
+    title: string;
+    mdContent: string;
+    isPrivate: boolean;
+}
+
+interface Document {
+    noteId: string;
+    title: string;
+    md_content: string;
+    is_private: boolean;
+    created_at: string;
+    updated_at: string;
+    userId: string;
+}
+
+function UpdateDocument() {
+    const auth = useAuth();
+    const { documentId } = useParams<{ documentId: string }>();
+    const [document, setDocument] = useState<Document | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<ApiErrorType | null>(null);
+
+    useEffect(() => {
+        const fetchDocument = async () => {
+            try {
+                setIsLoading(true);
+                const response = await apiFetch(auth, `/api/documents/${documentId}`);
+
+                if (!response.ok) {
+                    const errData = await response.json();
+                    setError(errData);
+                    return;
+                }
+
+                const data = await response.json();
+                setDocument(data);
+            } catch (err) {
+                // Fehler in DetailError umwandeln
+                const errorMessage = err instanceof Error ? err.message : 'Error loading document';
+                setError({
+                    title: 'Error',
+                    detail: errorMessage,
+                    status: 500
+                } as DetailError);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchDocument();
+    }, [documentId, auth]);
+
+    if (isLoading) return <><Navbar /><div className="text-center mt-8">Loading...</div></>;
+    if (error) return <><Navbar /><div className="text-red-500 text-center mt-8"><ApiErrorMessageDisplay error={error} /></div></>;
+    if (!document) return <><Navbar /><div className="text-center mt-8">Document not found</div></>;
+
+    const initialData: FormData = {
+        title: document.title,
+        mdContent: document.md_content,
+        isPrivate: document.is_private
+    };
+
+    return (
+        <>
+            <Navbar />
+            <DocumentForm docId={documentId!} initialData={initialData} isEdit={true} />
+        </>
+    );
+}
+
+// Helper Component für Error Display
+const ApiErrorMessageDisplay = ({ error }: { error: ApiErrorType }) => {
+    if ('detail' in error) {
+        return <>{(error as DetailError).detail}</>;
+    }
+    if ('errors' in error) {
+        return <>{error.title}</>;
+    }
+    return <>Error</>;
+};
+
+export { UpdateDocument };

From 1852c89262f889b146040eba2f4fbd5d61548b52 Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 31 Mar 2026 13:46:49 +0200
Subject: [PATCH 14/16] chore: adjusting frontend tests

---
 projekt/frontend/src/tests/Navbar.test.tsx    | 25 ++++------
 projekt/frontend/src/tests/SearchBar.test.tsx | 47 -------------------
 2 files changed, 10 insertions(+), 62 deletions(-)
 delete mode 100644 projekt/frontend/src/tests/SearchBar.test.tsx

diff --git a/projekt/frontend/src/tests/Navbar.test.tsx b/projekt/frontend/src/tests/Navbar.test.tsx
index 8645e65..d018a1f 100644
--- a/projekt/frontend/src/tests/Navbar.test.tsx
+++ b/projekt/frontend/src/tests/Navbar.test.tsx
@@ -4,12 +4,11 @@ import Navbar from "../components/Navbar.tsx";
 import { vi, describe, it, expect } from "vitest";
 import { useAuth } from "../utils/useAuth.ts";
 
-// useAuth mocken
 vi.mock("../utils/useAuth");
 const mockedUseAuth = vi.mocked(useAuth);
 
 describe("Navbar", () => {
-    it("zeigt Benutzer-Navigation wenn eingeloggt", () => {
+    it("shows User Navigation when authenticated", () => {
         mockedUseAuth.mockReturnValue({
             isAuthenticated: true,
             token: "some-token",
@@ -17,21 +16,19 @@ describe("Navbar", () => {
             logout: vi.fn(),
             refreshAccessToken: vi.fn(),
         });
-
         render(
             <MemoryRouter>
                 <Navbar />
             </MemoryRouter>
         );
-
-        expect(screen.getByText("Erstellen")).toBeInTheDocument();
-        expect(screen.getByText("Meine Dokumente")).toBeInTheDocument();
-        expect(screen.getByText("Profil")).toBeInTheDocument();
+        expect(screen.getByText("Create")).toBeInTheDocument();
+        expect(screen.getByText("My Documents")).toBeInTheDocument();
+        expect(screen.getByText("Profile")).toBeInTheDocument();
         expect(screen.queryByText("Login")).not.toBeInTheDocument();
-        expect(screen.queryByText("Registrieren")).not.toBeInTheDocument();
+        expect(screen.queryByText("Register")).not.toBeInTheDocument();
     });
 
-    it("zeigt Login & Registrieren wenn NICHT eingeloggt", () => {
+    it("shows Login and Registration when NOT authenticated", () => {
         mockedUseAuth.mockReturnValue({
             isAuthenticated: false,
             token: null,
@@ -39,16 +36,14 @@ describe("Navbar", () => {
             logout: vi.fn(),
             refreshAccessToken: vi.fn(),
         });
-
         render(
             <MemoryRouter>
                 <Navbar />
             </MemoryRouter>
         );
-
         expect(screen.getByText("Login")).toBeInTheDocument();
-        expect(screen.getByText("Registrieren")).toBeInTheDocument();
-        expect(screen.queryByText("Erstellen")).not.toBeInTheDocument();
-        expect(screen.queryByText("Meine Dokumente")).not.toBeInTheDocument();
+        expect(screen.getByText("Register")).toBeInTheDocument();
+        expect(screen.queryByText("Create")).not.toBeInTheDocument();
+        expect(screen.queryByText("My Documents")).not.toBeInTheDocument();
     });
-});
+});
\ No newline at end of file
diff --git a/projekt/frontend/src/tests/SearchBar.test.tsx b/projekt/frontend/src/tests/SearchBar.test.tsx
deleted file mode 100644
index 1d20585..0000000
--- a/projekt/frontend/src/tests/SearchBar.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import SearchBar from "../components/Searchbar.tsx";
-import "@testing-library/jest-dom";
-
-describe("SearchBar", () => {
-    it("rendert Input und Button", () => {
-        render(
-            <SearchBar value="" onChange={() => {}} onSubmit={() => {}} />
-        );
-
-        expect(screen.getByPlaceholderText("Eingabe...")).toBeInTheDocument();
-        expect(screen.getByRole("button", { name: /suchen/i })).toBeInTheDocument();
-    });
-
-    it("ruft onChange auf, wenn getippt wird", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        render(
-            <SearchBar value="" onChange={onChange} onSubmit={() => {}} />
-        );
-
-        const input = screen.getByPlaceholderText("Eingabe...");
-        await user.type(input, "test");
-
-        // wird für jedes Zeichen aufgerufen
-        expect(onChange).toHaveBeenCalled();
-    });
-
-    it("ruft onSubmit auf bei gültiger Eingabe", async () => {
-        const user = userEvent.setup();
-        const onSubmit = vi.fn();
-
-        render(
-            <SearchBar value="hello" onChange={() => {}} onSubmit={onSubmit} />
-        );
-
-        const button = screen.getByRole("button", { name: /suchen/i });
-        await user.click(button);
-
-        expect(onSubmit).toHaveBeenCalledTimes(1);
-    });
-
-});

From c7ada6987a896187645fdd360b26f4194517b79d Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 31 Mar 2026 13:51:37 +0200
Subject: [PATCH 15/16] chore: adjusting backend tests

---
 .../controller/Unit/Authentication/AuthControllerTest.java      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java b/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
index 8604d7f..4a93e1d 100644
--- a/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
+++ b/projekt/backend/src/test/java/com/projektsse/backend/controller/Unit/Authentication/AuthControllerTest.java
@@ -49,7 +49,7 @@ void registerStrongPass() {
                 .exchange()
                 .expectStatus().isCreated()
                 .expectBody()
-                .jsonPath("$.message").isEqualTo("Benutzer erfolgreich registriert. Bitte überprüfen Sie Ihre E-Mails zur Verifizierung.");
+                .jsonPath("$.message").isEqualTo("User successfully registered. Please check your email for verification.");
     }
 
     @Test

From cea2b4feff651659fa3f3159aaafbba60bf54d6c Mon Sep 17 00:00:00 2001
From: mwlt39 <maxim.walter@mni.thm.de>
Date: Tue, 31 Mar 2026 13:54:06 +0200
Subject: [PATCH 16/16] chore: adjusting backend tests

---
 .../com/projektsse/backend/service/NoteServiceTest.java    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java b/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java
index a1db012..48ad7fe 100644
--- a/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java
+++ b/projekt/backend/src/test/java/com/projektsse/backend/service/NoteServiceTest.java
@@ -4,7 +4,6 @@
 import com.projektsse.backend.repository.UserRepository;
 import com.projektsse.backend.repository.entities.User;
 import org.junit.jupiter.api.BeforeEach;
-import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.context.SpringBootTest;
 import org.springframework.test.web.servlet.client.RestTestClient;
@@ -56,7 +55,7 @@ void setUp(WebApplicationContext context) {
 //                .expectStatus().isCreated();
 //    }
 
-    @Test
-    void updateNote() {
-    }
+//    @Test
+//    void updateNote() {
+//    }
 }
\ No newline at end of file