From bb1e0eebf54d3b6230274b1c95ab4ae2894d68c2 Mon Sep 17 00:00:00 2001
From: Kilian Hofmann <llego03@yahoo.com>
Date: Thu, 25 Jul 2024 20:55:35 +0200
Subject: [PATCH] Initial Post list

---
 exam/api/docs/api.yaml                        |   2 +-
 exam/api/docs/index.html                      |   4 +-
 exam/classes/Models/Post/Post.php             |  19 ++-
 exam/classes/Models/User/User.php             |   6 +-
 exam/react/package.json                       |   1 +
 exam/react/pnpm-lock.yaml                     |   8 ++
 exam/react/src/api/Api.ts                     |  44 ++++++-
 .../src/components/Forms/Login/Login.tsx      |  17 ++-
 exam/react/src/components/Header/Header.tsx   | 122 +++++++++++-------
 exam/react/src/components/Post/Post.tsx       |  38 ++++++
 exam/react/src/main.tsx                       |   6 +
 exam/react/src/routes/__root.tsx              |  24 ++--
 exam/react/src/routes/index.tsx               |  52 +++++++-
 exam/react/src/store/store.ts                 |  24 +++-
 exam/react/src/types/Post.ts                  |  29 +++++
 exam/react/src/utils/errors.ts                |  27 ++--
 16 files changed, 327 insertions(+), 96 deletions(-)
 create mode 100644 exam/react/src/components/Post/Post.tsx
 create mode 100644 exam/react/src/types/Post.ts

diff --git a/exam/api/docs/api.yaml b/exam/api/docs/api.yaml
index 7003808..9b9af57 100644
--- a/exam/api/docs/api.yaml
+++ b/exam/api/docs/api.yaml
@@ -124,7 +124,7 @@ paths:
                         [
                           {
                             "id": 0,
-                            "user": { "username": "string" },
+                            "user": { "username": "string", "image": "string" },
                             "content": "string",
                             "postedAt":
                               {
diff --git a/exam/api/docs/index.html b/exam/api/docs/index.html
index b47c4d3..55f8f01 100644
--- a/exam/api/docs/index.html
+++ b/exam/api/docs/index.html
@@ -428,7 +428,7 @@ data-styled.g137[id="sc-kvXgyf"]{content:"fBvPoH,"}/*!sc*/
 " class="sc-euGpHm sc-exayXG fwfkcU jYGAQp"><p>The number of items to return.</p>
 </div></div></div></td></tr></tbody></table></div><div><h3 class="sc-eiLgtK dbBFCU">Responses</h3><div><button class="sc-giOWAb gcYfHW"><svg class="sc-cBYhjr fqtTpb" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg><strong class="sc-catHVh gXPvFO">200<!-- --> </strong><div html="&lt;p&gt;Success.&lt;/p&gt;
 " class="sc-euGpHm sc-exayXG fwfkcU kqJXdD sc-dHrNzZ dRdjww"><p>Success.</p>
-</div></button></div></div></div><div class="sc-iKTcqh sc-gnpbhQ fTxZsC drGLlX"><div class="sc-dKsqdn dCbPd"><button class="sc-iAlELC gsBSOU"><span type="get" class="sc-oeqTF ffmPnn http-verb get">get</span><span class="sc-eowDPD jcAXWA">/posts</span><svg class="sc-cBYhjr iMxoRf" style="margin-right:-25px" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg></button><div aria-hidden="true" class="sc-ezTrPE bFiOkX"><div class="sc-drnuxz hdRKqQ"><div html="" class="sc-euGpHm sc-exayXG fwfkcU jYGAQp"></div><div tabindex="0" role="button"><div class="sc-hDcvty jpmGrk"><span>https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api</span>/posts</div></div></div></div></div><div><h3 class="sc-kkmypM jKNCPF"> <!-- -->Response samples<!-- --> </h3><div class="sc-bSlUec jxQggo" data-rttabs="true"><ul class="react-tabs__tab-list" role="tablist"><li class="tab-success react-tabs__tab--selected" role="tab" id="tab:R174pa:0" aria-selected="true" aria-disabled="false" aria-controls="panel:R174pa:0" tabindex="0" data-rttab="true">200</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="panel:R174pa:0" aria-labelledby="tab:R174pa:0"><div><div class="sc-WChnI iLXIA-d"><span class="sc-foMnoT dmNpjh">Content type</span><div class="sc-ZubPq KmnOC">application/json</div></div><div class="sc-AmOMz gDrQpr"><div class="sc-WChnI iLXIA-d"><span class="sc-foMnoT dmNpjh">Example</span><div class="sc-dorvvM sc-flUsNl dQFPeA hzaARH"><svg class="sc-kTYLvb FdjRy" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg><select class="dropdown-select"><option value="Not authenticated" selected="">Not authenticated</option><option value="Authenticated">Authenticated</option></select><label>Not authenticated</label></div></div><div><div class="sc-eTdEpr dgzSkD"><div class="sc-pFPEP bMXXJy"><button><div class="sc-eHujzY ecCAmX">Copy</div></button><button> Expand all </button><button> Collapse all </button></div><div class="sc-euGpHm fwfkcU sc-fTgapq bDqsIm"><div class="redoc-json"><code><button class="collapser" aria-label="collapse"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable "><span class="property token string">"pages"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"data"</span>: <button class="collapser" aria-label="collapse"></button><span class="token punctuation">[</span><span class="ellipsis"></span><ul class="array collapsible"><li><div class="hoverable collapsed"><button class="collapser" aria-label="expand"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"id"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"user"</span>: <button class="collapser" aria-label="expand"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"username"</span>: <span class="token string">&quot;string&quot;</span></div></li></ul><span class="token punctuation">}</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"content"</span>: <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"postedAt"</span>: <button class="collapser" aria-label="expand"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"date"</span>: <span class="token string">&quot;2019-08-24T14:15:22Z&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"timezone_type"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"timezone"</span>: <span class="token string">&quot;string&quot;</span></div></li></ul><span class="token punctuation">}</span></div></li></ul><span class="token punctuation">}</span></div></li></ul><span class="token punctuation">]</span></div></li></ul><span class="token punctuation">}</span></code></div></div></div></div></div></div></div></div></div></div></div></div><div id="tag/Post/paths/~1posts/post" data-section-id="tag/Post/paths/~1posts/post" class="sc-dsLQwm kcRA-dj"><div class="sc-la-DxNn dSIRVR"><div class="sc-fQpRED htdgPt"><h2 class="sc-knesRu cbpGTP"><a class="sc-jCbFiK hSvuOo" href="#tag/Post/paths/~1posts/post" aria-label="tag/Post/paths/~1posts/post"></a>New post<!-- --> </h2><div class="sc-fpJhiv cQxXyG"><div html="&lt;p&gt;Create a new post.&lt;/p&gt;
+</div></button></div></div></div><div class="sc-iKTcqh sc-gnpbhQ fTxZsC drGLlX"><div class="sc-dKsqdn dCbPd"><button class="sc-iAlELC gsBSOU"><span type="get" class="sc-oeqTF ffmPnn http-verb get">get</span><span class="sc-eowDPD jcAXWA">/posts</span><svg class="sc-cBYhjr iMxoRf" style="margin-right:-25px" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg></button><div aria-hidden="true" class="sc-ezTrPE bFiOkX"><div class="sc-drnuxz hdRKqQ"><div html="" class="sc-euGpHm sc-exayXG fwfkcU jYGAQp"></div><div tabindex="0" role="button"><div class="sc-hDcvty jpmGrk"><span>https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api</span>/posts</div></div></div></div></div><div><h3 class="sc-kkmypM jKNCPF"> <!-- -->Response samples<!-- --> </h3><div class="sc-bSlUec jxQggo" data-rttabs="true"><ul class="react-tabs__tab-list" role="tablist"><li class="tab-success react-tabs__tab--selected" role="tab" id="tab:R174pa:0" aria-selected="true" aria-disabled="false" aria-controls="panel:R174pa:0" tabindex="0" data-rttab="true">200</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="panel:R174pa:0" aria-labelledby="tab:R174pa:0"><div><div class="sc-WChnI iLXIA-d"><span class="sc-foMnoT dmNpjh">Content type</span><div class="sc-ZubPq KmnOC">application/json</div></div><div class="sc-AmOMz gDrQpr"><div class="sc-WChnI iLXIA-d"><span class="sc-foMnoT dmNpjh">Example</span><div class="sc-dorvvM sc-flUsNl dQFPeA hzaARH"><svg class="sc-kTYLvb FdjRy" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg><select class="dropdown-select"><option value="Not authenticated" selected="">Not authenticated</option><option value="Authenticated">Authenticated</option></select><label>Not authenticated</label></div></div><div><div class="sc-eTdEpr dgzSkD"><div class="sc-pFPEP bMXXJy"><button><div class="sc-eHujzY ecCAmX">Copy</div></button><button> Expand all </button><button> Collapse all </button></div><div class="sc-euGpHm fwfkcU sc-fTgapq bDqsIm"><div class="redoc-json"><code><button class="collapser" aria-label="collapse"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable "><span class="property token string">"pages"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"data"</span>: <button class="collapser" aria-label="collapse"></button><span class="token punctuation">[</span><span class="ellipsis"></span><ul class="array collapsible"><li><div class="hoverable collapsed"><button class="collapser" aria-label="expand"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"id"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"user"</span>: <button class="collapser" aria-label="expand"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"username"</span>: <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"image"</span>: <span class="token string">&quot;string&quot;</span></div></li></ul><span class="token punctuation">}</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"content"</span>: <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"postedAt"</span>: <button class="collapser" aria-label="expand"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"date"</span>: <span class="token string">&quot;2019-08-24T14:15:22Z&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"timezone_type"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"timezone"</span>: <span class="token string">&quot;string&quot;</span></div></li></ul><span class="token punctuation">}</span></div></li></ul><span class="token punctuation">}</span></div></li></ul><span class="token punctuation">]</span></div></li></ul><span class="token punctuation">}</span></code></div></div></div></div></div></div></div></div></div></div></div></div><div id="tag/Post/paths/~1posts/post" data-section-id="tag/Post/paths/~1posts/post" class="sc-dsLQwm kcRA-dj"><div class="sc-la-DxNn dSIRVR"><div class="sc-fQpRED htdgPt"><h2 class="sc-knesRu cbpGTP"><a class="sc-jCbFiK hSvuOo" href="#tag/Post/paths/~1posts/post" aria-label="tag/Post/paths/~1posts/post"></a>New post<!-- --> </h2><div class="sc-fpJhiv cQxXyG"><div html="&lt;p&gt;Create a new post.&lt;/p&gt;
 " class="sc-euGpHm sc-exayXG fwfkcU kqJXdD"><p>Create a new post.</p>
 </div></div><div class="sc-hWiVxH cCfxdS"><div class="sc-jHofgq febKCY"><h5 class="sc-dkjaqt sc-jRHPII gwrByh eGMvsx">Authorizations:</h5><svg class="sc-cBYhjr dJanPw" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg></div><div class="sc-iRFtIJ juVMxG"><span class="sc-iHlJgr lkBZak"><span class="sc-blcnQh fyveIh"><i>BasicAuth</i></span></span></div></div><h5 class="sc-dkjaqt gwrByh">Request Body schema: <span class="sc-dwYcXH fafqZb">application/json</span><div class="sc-xuUkR sc-hrDJJk sc-kGqRax bJcEcT gLEAmN HCLfY">required</div></h5><div html="" class="sc-euGpHm sc-exayXG fwfkcU kqJXdD"></div><table class="sc-dENhDJ ceVHDP"><tbody><tr class="last "><td kind="field" title="content" class="sc-tOkKi sc-epPVmt gbdrVc bUksBx"><span class="sc-hfvVTD hTjFRU"></span><span class="property-name">content</span><div class="sc-xuUkR sc-hrDJJk bJcEcT gLEAmN">required</div></td><td class="sc-fpSrms exGrJC"><div><div><span class="sc-xuUkR sc-cvzDha bJcEcT kDPMlG"></span><span class="sc-xuUkR sc-gKROGD bJcEcT etUsjc">string</span></div> <div><div html="" class="sc-euGpHm sc-exayXG fwfkcU jYGAQp"></div></div></div></td></tr></tbody></table><div><h3 class="sc-eiLgtK dbBFCU">Responses</h3><div><button class="sc-giOWAb gcYfHW"><svg class="sc-cBYhjr fqtTpb" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg><strong class="sc-catHVh gXPvFO">200<!-- --> </strong><div html="&lt;p&gt;Success.&lt;/p&gt;
 " class="sc-euGpHm sc-exayXG fwfkcU kqJXdD sc-dHrNzZ dRdjww"><p>Success.</p>
@@ -506,7 +506,7 @@ data-styled.g137[id="sc-kvXgyf"]{content:"fBvPoH,"}/*!sc*/
 " class="sc-euGpHm sc-exayXG fwfkcU kqJXdD sc-dHrNzZ dRdjww"><p>User not found.</p>
 </div></button></div></div></div><div class="sc-iKTcqh sc-gnpbhQ fTxZsC drGLlX"><div class="sc-dKsqdn dCbPd"><button class="sc-iAlELC gsBSOU"><span type="delete" class="sc-oeqTF ByFMv http-verb delete">delete</span><span class="sc-eowDPD jcAXWA">/users/{id}</span><svg class="sc-cBYhjr iMxoRf" style="margin-right:-25px" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg></button><div aria-hidden="true" class="sc-ezTrPE bFiOkX"><div class="sc-drnuxz hdRKqQ"><div html="" class="sc-euGpHm sc-exayXG fwfkcU jYGAQp"></div><div tabindex="0" role="button"><div class="sc-hDcvty jpmGrk"><span>https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api</span>/users/{id}</div></div></div></div></div><div><h3 class="sc-kkmypM jKNCPF"> <!-- -->Response samples<!-- --> </h3><div class="sc-bSlUec jxQggo" data-rttabs="true"><ul class="react-tabs__tab-list" role="tablist"><li class="tab-success react-tabs__tab--selected" role="tab" id="tab:R176aa:0" aria-selected="true" aria-disabled="false" aria-controls="panel:R176aa:0" tabindex="0" data-rttab="true">200</li><li class="tab-error" role="tab" id="tab:R176aa:1" aria-selected="false" aria-disabled="false" aria-controls="panel:R176aa:1" data-rttab="true">404</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="panel:R176aa:0" aria-labelledby="tab:R176aa:0"><div><div class="sc-WChnI iLXIA-d"><span class="sc-foMnoT dmNpjh">Content type</span><div class="sc-ZubPq KmnOC">application/json</div></div><div class="sc-AmOMz gDrQpr"><div class="sc-eTdEpr dgzSkD"><div class="sc-pFPEP bMXXJy"><button><div class="sc-eHujzY ecCAmX">Copy</div></button><button> Expand all </button><button> Collapse all </button></div><div class="sc-euGpHm fwfkcU sc-fTgapq bDqsIm"><div class="redoc-json"><code><button class="collapser" aria-label="collapse"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable "><span class="property token string">"id"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"username"</span>: <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"status"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"email"</span>: <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"image"</span>: <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"isAdmin"</span>: <span class="token boolean">true</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"memberSince"</span>: <button class="collapser" aria-label="collapse"></button><span class="token punctuation">{</span><span class="ellipsis"></span><ul class="obj collapsible"><li><div class="hoverable collapsed"><span class="property token string">"date"</span>: <span class="token string">&quot;2019-08-24T14:15:22Z&quot;</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"timezone_type"</span>: <span class="token number">0</span><span class="token punctuation">,</span></div></li><li><div class="hoverable collapsed"><span class="property token string">"timezone"</span>: <span class="token string">&quot;string&quot;</span></div></li></ul><span class="token punctuation">}</span><span class="token punctuation">,</span></div></li><li><div class="hoverable "><span class="property token string">"postCount"</span>: <span class="token number">0</span></div></li></ul><span class="token punctuation">}</span></code></div></div></div></div></div></div><div class="react-tabs__tab-panel" role="tabpanel" id="panel:R176aa:1" aria-labelledby="tab:R176aa:1"></div></div></div></div></div></div></div><div class="sc-epzHnm bWkBKa"></div></div></div>
       <script>
-      const __redoc_state = {"menu":{"activeItemIdx":-1},"spec":{"data":{"openapi":"3.0.0","info":{"title":"PHP Course Exam","version":"1.0.0","contact":{"name":"Kilian Kurt Hofmann","email":"khofmann@zedat.fu-berlin.de"},"description":"PHP Course (ABV FU Berlin) 2024 Exam"},"paths":{"/login":{"post":{"summary":"Login","description":"Log in user.","requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/LoginRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/LoginResponse"}}}},"400":{"description":"Missing fields.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MissingFieldResponse"},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["email","password"]}}}}}},"401":{"description":"Invalid credentials.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UnauthorizedResponse"},"examples":{"Invalid username or password":{"value":{"code":"Unauthorized","message":"Invalid username or password"}}}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}},"500":{"description":"Failed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedResponse"},"examples":{"Failed":{"value":{"code":"Failed","message":"Login failed"}}}}}}},"tags":["Login/Logout"]}},"/logout":{"post":{"summary":"Logout","description":"Log out user.","security":[{"BasicAuth":[]}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/BooleanResponse"},"examples":{"Success":{"value":true}}}}}},"tags":["Login/Logout"]}},"/posts":{"get":{"summary":"List posts","description":"List all posts, return full user data if authenticated.","security":[{},{"BasicAuth":[]}],"parameters":[{"in":"query","name":"p","schema":{"type":"integer","minimum":0,"default":0},"description":"Current page."},{"in":"query","name":"l","schema":{"type":"integer","minimum":0,"maximum":30,"default":10},"description":"The number of items to return."}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostListResponse"},"examples":{"Not authenticated":{"value":{"pages":0,"data":[{"id":0,"user":{"username":"string"},"content":"string","postedAt":{"date":"2019-08-24T14:15:22Z","timezone_type":0,"timezone":"string"}}]}},"Authenticated":{"value":{"pages":1,"data":[{"id":1,"user":{"id":0,"username":"string","status":0,"email":"string","image":"string","isAdmin":true,"memberSince":{"date":"2019-08-24T14:15:22Z","timezone_type":0,"timezone":"string"},"postCount":0},"content":"string","postedAt":{"date":"2019-08-24T14:15:22Z","timezone_type":0,"timezone":"string"}}]}}}}}}},"tags":["Post"]},"post":{"summary":"New post","description":"Create a new post.","security":[{"BasicAuth":[]}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostCreateRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostResponse"}}}},"400":{"description":"Missing fields.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MissingFieldResponse"},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["content"]}}}}}}},"tags":["Post"]}},"/posts/{id}":{"patch":{"summary":"Update post","description":"Update post with ID. <br> Requires logged in user to have admin permissions for posts not made by them.","security":[{"BasicAuth":[]},{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"Post ID","required":true,"schema":{"type":"integer","format":"int14"}}],"requestBody":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostUpdateRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostResponse"}}}},"401":{"description":"Not allowed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UnauthorizedResponse"},"examples":{"Not allowed":{"value":{"code":"Unauthorized","message":"Not allowed"}}}}}},"404":{"description":"Post not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"Post not found":{"value":{"code":"NotFound","entity":"post"}}}}}},"500":{"description":"Update failed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedUpdateResponse"},"examples":{"Failed":{"value":{"code":"FailedUpdate","fields":["content"]}}}}}}},"tags":["Post"]},"delete":{"summary":"Delete post","description":"Delete post with ID.","security":[{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"Post ID","required":true,"schema":{"type":"integer","format":"int14"}}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostResponse"}}}},"404":{"description":"Post not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"Post not found":{"value":{"code":"NotFound","entity":"post"}}}}}}},"tags":["Post"]}},"/register":{"post":{"summary":"Register","description":"Register a new user.","requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/RegisterRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"400":{"description":"Missing fields or duplicate.","content":{"application/json":{"schema":{"oneOf":[{"$ref":"#/components/schemas/MissingFieldResponse"},{"$ref":"#/components/schemas/DuplicateResponse"}]},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["username","email","password"]}},"Duplicate":{"value":{"code":"Duplicate","entity":"user"}}}}}},"404":{"description":"Failed to create","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedResponse"},"examples":{"Failed to create":{"value":{"code":"Failed","message":"Failed to create user"}}}}}}},"tags":["Register"]},"patch":{"summary":"Confirm register","description":"Confirm a registration.","requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfirmRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"400":{"description":"Missing fields.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MissingFieldResponse"},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["code"]}}}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}}},"tags":["Register"]}},"/users":{"get":{"summary":"List users","description":"List all users.","security":[{"BasicAuth":["isAdmin"]}],"parameters":[{"in":"query","name":"p","schema":{"type":"integer","minimum":0,"default":0},"description":"Current page."},{"in":"query","name":"l","schema":{"type":"integer","minimum":0,"maximum":30,"default":10},"description":"The number of items to return."}],"responses":{"200":{"description":"Success","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserListResponse"}}}}},"tags":["User"]}},"/users/{id}":{"get":{"summary":"Get user","description":"Get user by ID.","security":[{"BasicAuth":[]}],"parameters":[{"name":"id","in":"path","description":"User ID","required":true,"schema":{"type":"integer","format":"int14"}}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}}},"tags":["User"]},"patch":{"summary":"Update user","description":"Update user with ID. <br> Use special ID <code>self</code> to update logged in user. <br> Requires logged in user to have admin permissions for any ID other than <code>self</code>.","security":[{"BasicAuth":[]},{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"User ID","required":true,"schema":{"type":"integer","format":"int14"}}],"requestBody":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserUpdateRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"username"}}}}}},"500":{"description":"Update failed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedUpdateResponse"},"examples":{"Failed username":{"value":{"code":"FailedUpdate","fields":["username","email","password"]}}}}}}},"tags":["User"]},"delete":{"summary":"Delete user","description":"Delete user with ID.","security":[{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"User ID","required":true,"schema":{"type":"integer","format":"int14"}}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}}},"tags":["User"]}}},"externalDocs":{"url":"https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api/docs/"},"security":[],"servers":[{"url":"https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api/"}],"components":{"schemas":{"BooleanResponse":{"type":"boolean"},"MissingFieldResponse":{"type":"object","properties":{"code":{"type":"MissingField"},"fields":{"type":"array","items":{"type":"string"}}}},"NotFoundResponse":{"type":"object","properties":{"code":{"type":"NotFound"},"entity":{"type":"string"}}},"UnauthorizedResponse":{"type":"object","properties":{"code":{"type":"Unauthorized"},"message":{"type":"string"}}},"FailedResponse":{"type":"object","properties":{"code":{"type":"Failed"},"message":{"type":"string"}}},"DuplicateResponse":{"type":"object","properties":{"code":{"type":"Duplicate"},"entity":{"type":"string"}}},"FailedUpdateResponse":{"type":"object","properties":{"code":{"type":"FailedUpdate"},"fields":{"type":"array","items":{"type":"string"}}}},"ErrorResponse":{"type":"object","properties":{"message":{"type":"string"}}},"LoginRequest":{"type":"object","required":["username","password"],"properties":{"username":{"type":"string"},"password":{"type":"string"}}},"LoginResponse":{"type":"object","properties":{"user":{"$ref":"#/components/schemas/UserResponse"},"token":{"type":"string"}}},"UserResponse":{"type":"object","properties":{"id":{"type":"number"},"username":{"type":"string"},"status":{"type":"number"},"email":{"type":"string"},"image":{"type":"string","nullable":true},"isAdmin":{"type":"boolean"},"memberSince":{"type":"object","properties":{"date":{"type":"string","format":"date-time"},"timezone_type":{"type":"number"},"timezone":{"type":"string"}}},"postCount":{"type":"number"}}},"UserUpdateRequest":{"type":"object","properties":{"username":{"type":"string"},"password":{"type":"string"},"image":{"type":"string","format":"binary"}}},"RegisterRequest":{"type":"object","required":["username","email","password"],"properties":{"username":{"type":"string"},"email":{"type":"string"},"password":{"type":"string"}}},"ConfirmRequest":{"type":"object","required":["code"],"properties":{"code":{"type":"string","format":"uuid4"}}},"UserListResponse":{"type":"object","properties":{"pages":{"type":"number"},"data":{"type":"array","items":{"$ref":"#/components/schemas/UserResponse"}}}},"PostResponse":{"type":"object","properties":{"id":{"type":"number"},"user":{"$ref":"#/components/schemas/UserResponse"},"content":{"type":"string"},"postedAt":{"type":"object","properties":{"date":{"type":"string","format":"date-time"},"timezone_type":{"type":"number"},"timezone":{"type":"string"}}}}},"PostListResponse":{"type":"object","properties":{"pages":{"type":"number"},"data":{"type":"array","items":{"$ref":"#/components/schemas/PostResponse"}}}},"PostUpdateRequest":{"type":"object","properties":{"content":{"type":"string"}}},"PostCreateRequest":{"type":"object","required":["content"],"properties":{"content":{"type":"string"}}}},"securitySchemes":{"BasicAuth":{"type":"apiKey","name":"token","in":"header"}}},"tags":[{"name":"Login/Logout"},{"name":"Post"},{"name":"Register"},{"name":"User"}]}},"searchIndex":{"store":["tag/LoginLogout","tag/LoginLogout/paths/~1login/post","tag/LoginLogout/paths/~1logout/post","tag/Post","tag/Post/paths/~1posts/get","tag/Post/paths/~1posts/post","tag/Post/paths/~1posts~1{id}/patch","tag/Post/paths/~1posts~1{id}/delete","tag/Register","tag/Register/paths/~1register/post","tag/Register/paths/~1register/patch","tag/User","tag/User/paths/~1users/get","tag/User/paths/~1users~1{id}/get","tag/User/paths/~1users~1{id}/patch","tag/User/paths/~1users~1{id}/delete"],"index":{"version":"2.3.9","fields":["title","description"],"fieldVectors":[["title/0",[0,2.811]],["description/0",[]],["title/1",[1,2.22]],["description/1",[1,2.22,2,1.539,3,0.184]],["title/2",[4,2.22]],["description/2",[2,1.392,3,0.167,4,2.008,5,2.543]],["title/3",[6,0.674]],["description/3",[]],["title/4",[6,0.512,7,1.17]],["description/4",[3,0.121,6,0.657,7,1.008,8,1.842,9,1.842,10,1.842,11,1.842]],["title/5",[6,0.512,12,1.391]],["description/5",[6,0.826,12,1.656,13,2.543]],["title/6",[6,0.512,14,1.17]],["description/6",[2,0.79,3,0.095,6,0.545,14,0.79,15,0.671,16,1.14,17,1.14,18,1.14,19,1.14,20,1.444,21,1.14]],["title/7",[6,0.512,22,1.17]],["description/7",[6,0.61,15,1.182,21,2.008,22,1.392]],["title/8",[23,1.307]],["description/8",[]],["title/9",[23,1.307]],["description/9",[3,0.167,12,1.656,23,1.602]],["title/10",[23,0.993,24,1.687]],["description/10",[23,1.307,24,2.22,25,2.811]],["title/11",[3,0.184]],["description/11",[]],["title/12",[3,0.14,7,1.17]],["description/12",[3,0.241,7,1.539]],["title/13",[3,0.184]],["description/13",[3,0.184,15,1.307,26,1.83]],["title/14",[3,0.14,14,1.17]],["description/14",[2,0.928,3,0.144,14,0.928,15,1.02,16,1.339,17,0.796,18,0.796,19,0.796,26,0.656,27,1.008,28,1.008,29,1.696]],["title/15",[3,0.14,22,1.17]],["description/15",[3,0.167,15,1.182,22,1.392,26,1.656]]],"invertedIndex":[["admin",{"_index":18,"title":{},"description":{"6":{},"14":{}}}],["authent",{"_index":11,"title":{},"description":{"4":{}}}],["br",{"_index":16,"title":{},"description":{"6":{},"14":{}}}],["code>self</cod",{"_index":29,"title":{},"description":{"14":{}}}],["confirm",{"_index":24,"title":{"10":{}},"description":{"10":{}}}],["creat",{"_index":13,"title":{},"description":{"5":{}}}],["data",{"_index":10,"title":{},"description":{"4":{}}}],["delet",{"_index":22,"title":{"7":{},"15":{}},"description":{"7":{},"15":{}}}],["full",{"_index":9,"title":{},"description":{"4":{}}}],["id",{"_index":15,"title":{},"description":{"6":{},"7":{},"13":{},"14":{},"15":{}}}],["list",{"_index":7,"title":{"4":{},"12":{}},"description":{"4":{},"12":{}}}],["log",{"_index":2,"title":{},"description":{"1":{},"2":{},"6":{},"14":{}}}],["login",{"_index":1,"title":{"1":{}},"description":{"1":{}}}],["login/logout",{"_index":0,"title":{"0":{}},"description":{}}],["logout",{"_index":4,"title":{"2":{}},"description":{"2":{}}}],["made",{"_index":20,"title":{},"description":{"6":{}}}],["new",{"_index":12,"title":{"5":{}},"description":{"5":{},"9":{}}}],["out",{"_index":5,"title":{},"description":{"2":{}}}],["permiss",{"_index":19,"title":{},"description":{"6":{},"14":{}}}],["post",{"_index":6,"title":{"3":{},"4":{},"5":{},"6":{},"7":{}},"description":{"4":{},"5":{},"6":{},"7":{}}}],["posts/{id",{"_index":21,"title":{},"description":{"6":{},"7":{}}}],["regist",{"_index":23,"title":{"8":{},"9":{},"10":{}},"description":{"9":{},"10":{}}}],["registr",{"_index":25,"title":{},"description":{"10":{}}}],["requir",{"_index":17,"title":{},"description":{"6":{},"14":{}}}],["return",{"_index":8,"title":{},"description":{"4":{}}}],["special",{"_index":28,"title":{},"description":{"14":{}}}],["updat",{"_index":14,"title":{"6":{},"14":{}},"description":{"6":{},"14":{}}}],["us",{"_index":27,"title":{},"description":{"14":{}}}],["user",{"_index":3,"title":{"11":{},"12":{},"13":{},"14":{},"15":{}},"description":{"1":{},"2":{},"4":{},"6":{},"9":{},"12":{},"13":{},"14":{},"15":{}}}],["users/{id",{"_index":26,"title":{},"description":{"13":{},"14":{},"15":{}}}]],"pipeline":[]}},"options":{}};
+      const __redoc_state = {"menu":{"activeItemIdx":-1},"spec":{"data":{"openapi":"3.0.0","info":{"title":"PHP Course Exam","version":"1.0.0","contact":{"name":"Kilian Kurt Hofmann","email":"khofmann@zedat.fu-berlin.de"},"description":"PHP Course (ABV FU Berlin) 2024 Exam"},"paths":{"/login":{"post":{"summary":"Login","description":"Log in user.","requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/LoginRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/LoginResponse"}}}},"400":{"description":"Missing fields.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MissingFieldResponse"},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["email","password"]}}}}}},"401":{"description":"Invalid credentials.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UnauthorizedResponse"},"examples":{"Invalid username or password":{"value":{"code":"Unauthorized","message":"Invalid username or password"}}}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}},"500":{"description":"Failed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedResponse"},"examples":{"Failed":{"value":{"code":"Failed","message":"Login failed"}}}}}}},"tags":["Login/Logout"]}},"/logout":{"post":{"summary":"Logout","description":"Log out user.","security":[{"BasicAuth":[]}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/BooleanResponse"},"examples":{"Success":{"value":true}}}}}},"tags":["Login/Logout"]}},"/posts":{"get":{"summary":"List posts","description":"List all posts, return full user data if authenticated.","security":[{},{"BasicAuth":[]}],"parameters":[{"in":"query","name":"p","schema":{"type":"integer","minimum":0,"default":0},"description":"Current page."},{"in":"query","name":"l","schema":{"type":"integer","minimum":0,"maximum":30,"default":10},"description":"The number of items to return."}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostListResponse"},"examples":{"Not authenticated":{"value":{"pages":0,"data":[{"id":0,"user":{"username":"string","image":"string"},"content":"string","postedAt":{"date":"2019-08-24T14:15:22Z","timezone_type":0,"timezone":"string"}}]}},"Authenticated":{"value":{"pages":1,"data":[{"id":1,"user":{"id":0,"username":"string","status":0,"email":"string","image":"string","isAdmin":true,"memberSince":{"date":"2019-08-24T14:15:22Z","timezone_type":0,"timezone":"string"},"postCount":0},"content":"string","postedAt":{"date":"2019-08-24T14:15:22Z","timezone_type":0,"timezone":"string"}}]}}}}}}},"tags":["Post"]},"post":{"summary":"New post","description":"Create a new post.","security":[{"BasicAuth":[]}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostCreateRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostResponse"}}}},"400":{"description":"Missing fields.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MissingFieldResponse"},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["content"]}}}}}}},"tags":["Post"]}},"/posts/{id}":{"patch":{"summary":"Update post","description":"Update post with ID. <br> Requires logged in user to have admin permissions for posts not made by them.","security":[{"BasicAuth":[]},{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"Post ID","required":true,"schema":{"type":"integer","format":"int14"}}],"requestBody":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostUpdateRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostResponse"}}}},"401":{"description":"Not allowed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UnauthorizedResponse"},"examples":{"Not allowed":{"value":{"code":"Unauthorized","message":"Not allowed"}}}}}},"404":{"description":"Post not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"Post not found":{"value":{"code":"NotFound","entity":"post"}}}}}},"500":{"description":"Update failed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedUpdateResponse"},"examples":{"Failed":{"value":{"code":"FailedUpdate","fields":["content"]}}}}}}},"tags":["Post"]},"delete":{"summary":"Delete post","description":"Delete post with ID.","security":[{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"Post ID","required":true,"schema":{"type":"integer","format":"int14"}}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/PostResponse"}}}},"404":{"description":"Post not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"Post not found":{"value":{"code":"NotFound","entity":"post"}}}}}}},"tags":["Post"]}},"/register":{"post":{"summary":"Register","description":"Register a new user.","requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/RegisterRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"400":{"description":"Missing fields or duplicate.","content":{"application/json":{"schema":{"oneOf":[{"$ref":"#/components/schemas/MissingFieldResponse"},{"$ref":"#/components/schemas/DuplicateResponse"}]},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["username","email","password"]}},"Duplicate":{"value":{"code":"Duplicate","entity":"user"}}}}}},"404":{"description":"Failed to create","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedResponse"},"examples":{"Failed to create":{"value":{"code":"Failed","message":"Failed to create user"}}}}}}},"tags":["Register"]},"patch":{"summary":"Confirm register","description":"Confirm a registration.","requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfirmRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"400":{"description":"Missing fields.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MissingFieldResponse"},"examples":{"Missing fields":{"value":{"code":"MissingField","fields":["code"]}}}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}}},"tags":["Register"]}},"/users":{"get":{"summary":"List users","description":"List all users.","security":[{"BasicAuth":["isAdmin"]}],"parameters":[{"in":"query","name":"p","schema":{"type":"integer","minimum":0,"default":0},"description":"Current page."},{"in":"query","name":"l","schema":{"type":"integer","minimum":0,"maximum":30,"default":10},"description":"The number of items to return."}],"responses":{"200":{"description":"Success","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserListResponse"}}}}},"tags":["User"]}},"/users/{id}":{"get":{"summary":"Get user","description":"Get user by ID.","security":[{"BasicAuth":[]}],"parameters":[{"name":"id","in":"path","description":"User ID","required":true,"schema":{"type":"integer","format":"int14"}}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}}},"tags":["User"]},"patch":{"summary":"Update user","description":"Update user with ID. <br> Use special ID <code>self</code> to update logged in user. <br> Requires logged in user to have admin permissions for any ID other than <code>self</code>.","security":[{"BasicAuth":[]},{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"User ID","required":true,"schema":{"type":"integer","format":"int14"}}],"requestBody":{"content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserUpdateRequest"}}}},"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"username"}}}}}},"500":{"description":"Update failed.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/FailedUpdateResponse"},"examples":{"Failed username":{"value":{"code":"FailedUpdate","fields":["username","email","password"]}}}}}}},"tags":["User"]},"delete":{"summary":"Delete user","description":"Delete user with ID.","security":[{"BasicAuth":["isAdmin"]}],"parameters":[{"name":"id","in":"path","description":"User ID","required":true,"schema":{"type":"integer","format":"int14"}}],"responses":{"200":{"description":"Success.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/UserResponse"}}}},"404":{"description":"User not found.","content":{"application/json":{"schema":{"$ref":"#/components/schemas/NotFoundResponse"},"examples":{"User not found":{"value":{"code":"NotFound","entity":"user"}}}}}}},"tags":["User"]}}},"externalDocs":{"url":"https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api/docs/"},"security":[],"servers":[{"url":"https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api/"}],"components":{"schemas":{"BooleanResponse":{"type":"boolean"},"MissingFieldResponse":{"type":"object","properties":{"code":{"type":"MissingField"},"fields":{"type":"array","items":{"type":"string"}}}},"NotFoundResponse":{"type":"object","properties":{"code":{"type":"NotFound"},"entity":{"type":"string"}}},"UnauthorizedResponse":{"type":"object","properties":{"code":{"type":"Unauthorized"},"message":{"type":"string"}}},"FailedResponse":{"type":"object","properties":{"code":{"type":"Failed"},"message":{"type":"string"}}},"DuplicateResponse":{"type":"object","properties":{"code":{"type":"Duplicate"},"entity":{"type":"string"}}},"FailedUpdateResponse":{"type":"object","properties":{"code":{"type":"FailedUpdate"},"fields":{"type":"array","items":{"type":"string"}}}},"ErrorResponse":{"type":"object","properties":{"message":{"type":"string"}}},"LoginRequest":{"type":"object","required":["username","password"],"properties":{"username":{"type":"string"},"password":{"type":"string"}}},"LoginResponse":{"type":"object","properties":{"user":{"$ref":"#/components/schemas/UserResponse"},"token":{"type":"string"}}},"UserResponse":{"type":"object","properties":{"id":{"type":"number"},"username":{"type":"string"},"status":{"type":"number"},"email":{"type":"string"},"image":{"type":"string","nullable":true},"isAdmin":{"type":"boolean"},"memberSince":{"type":"object","properties":{"date":{"type":"string","format":"date-time"},"timezone_type":{"type":"number"},"timezone":{"type":"string"}}},"postCount":{"type":"number"}}},"UserUpdateRequest":{"type":"object","properties":{"username":{"type":"string"},"password":{"type":"string"},"image":{"type":"string","format":"binary"}}},"RegisterRequest":{"type":"object","required":["username","email","password"],"properties":{"username":{"type":"string"},"email":{"type":"string"},"password":{"type":"string"}}},"ConfirmRequest":{"type":"object","required":["code"],"properties":{"code":{"type":"string","format":"uuid4"}}},"UserListResponse":{"type":"object","properties":{"pages":{"type":"number"},"data":{"type":"array","items":{"$ref":"#/components/schemas/UserResponse"}}}},"PostResponse":{"type":"object","properties":{"id":{"type":"number"},"user":{"$ref":"#/components/schemas/UserResponse"},"content":{"type":"string"},"postedAt":{"type":"object","properties":{"date":{"type":"string","format":"date-time"},"timezone_type":{"type":"number"},"timezone":{"type":"string"}}}}},"PostListResponse":{"type":"object","properties":{"pages":{"type":"number"},"data":{"type":"array","items":{"$ref":"#/components/schemas/PostResponse"}}}},"PostUpdateRequest":{"type":"object","properties":{"content":{"type":"string"}}},"PostCreateRequest":{"type":"object","required":["content"],"properties":{"content":{"type":"string"}}}},"securitySchemes":{"BasicAuth":{"type":"apiKey","name":"token","in":"header"}}},"tags":[{"name":"Login/Logout"},{"name":"Post"},{"name":"Register"},{"name":"User"}]}},"searchIndex":{"store":["tag/LoginLogout","tag/LoginLogout/paths/~1login/post","tag/LoginLogout/paths/~1logout/post","tag/Post","tag/Post/paths/~1posts/get","tag/Post/paths/~1posts/post","tag/Post/paths/~1posts~1{id}/patch","tag/Post/paths/~1posts~1{id}/delete","tag/Register","tag/Register/paths/~1register/post","tag/Register/paths/~1register/patch","tag/User","tag/User/paths/~1users/get","tag/User/paths/~1users~1{id}/get","tag/User/paths/~1users~1{id}/patch","tag/User/paths/~1users~1{id}/delete"],"index":{"version":"2.3.9","fields":["title","description"],"fieldVectors":[["title/0",[0,2.811]],["description/0",[]],["title/1",[1,2.22]],["description/1",[1,2.22,2,1.539,3,0.184]],["title/2",[4,2.22]],["description/2",[2,1.392,3,0.167,4,2.008,5,2.543]],["title/3",[6,0.674]],["description/3",[]],["title/4",[6,0.512,7,1.17]],["description/4",[3,0.121,6,0.657,7,1.008,8,1.842,9,1.842,10,1.842,11,1.842]],["title/5",[6,0.512,12,1.391]],["description/5",[6,0.826,12,1.656,13,2.543]],["title/6",[6,0.512,14,1.17]],["description/6",[2,0.79,3,0.095,6,0.545,14,0.79,15,0.671,16,1.14,17,1.14,18,1.14,19,1.14,20,1.444,21,1.14]],["title/7",[6,0.512,22,1.17]],["description/7",[6,0.61,15,1.182,21,2.008,22,1.392]],["title/8",[23,1.307]],["description/8",[]],["title/9",[23,1.307]],["description/9",[3,0.167,12,1.656,23,1.602]],["title/10",[23,0.993,24,1.687]],["description/10",[23,1.307,24,2.22,25,2.811]],["title/11",[3,0.184]],["description/11",[]],["title/12",[3,0.14,7,1.17]],["description/12",[3,0.241,7,1.539]],["title/13",[3,0.184]],["description/13",[3,0.184,15,1.307,26,1.83]],["title/14",[3,0.14,14,1.17]],["description/14",[2,0.928,3,0.144,14,0.928,15,1.02,16,1.339,17,0.796,18,0.796,19,0.796,26,0.656,27,1.008,28,1.008,29,1.696]],["title/15",[3,0.14,22,1.17]],["description/15",[3,0.167,15,1.182,22,1.392,26,1.656]]],"invertedIndex":[["admin",{"_index":18,"title":{},"description":{"6":{},"14":{}}}],["authent",{"_index":11,"title":{},"description":{"4":{}}}],["br",{"_index":16,"title":{},"description":{"6":{},"14":{}}}],["code>self</cod",{"_index":29,"title":{},"description":{"14":{}}}],["confirm",{"_index":24,"title":{"10":{}},"description":{"10":{}}}],["creat",{"_index":13,"title":{},"description":{"5":{}}}],["data",{"_index":10,"title":{},"description":{"4":{}}}],["delet",{"_index":22,"title":{"7":{},"15":{}},"description":{"7":{},"15":{}}}],["full",{"_index":9,"title":{},"description":{"4":{}}}],["id",{"_index":15,"title":{},"description":{"6":{},"7":{},"13":{},"14":{},"15":{}}}],["list",{"_index":7,"title":{"4":{},"12":{}},"description":{"4":{},"12":{}}}],["log",{"_index":2,"title":{},"description":{"1":{},"2":{},"6":{},"14":{}}}],["login",{"_index":1,"title":{"1":{}},"description":{"1":{}}}],["login/logout",{"_index":0,"title":{"0":{}},"description":{}}],["logout",{"_index":4,"title":{"2":{}},"description":{"2":{}}}],["made",{"_index":20,"title":{},"description":{"6":{}}}],["new",{"_index":12,"title":{"5":{}},"description":{"5":{},"9":{}}}],["out",{"_index":5,"title":{},"description":{"2":{}}}],["permiss",{"_index":19,"title":{},"description":{"6":{},"14":{}}}],["post",{"_index":6,"title":{"3":{},"4":{},"5":{},"6":{},"7":{}},"description":{"4":{},"5":{},"6":{},"7":{}}}],["posts/{id",{"_index":21,"title":{},"description":{"6":{},"7":{}}}],["regist",{"_index":23,"title":{"8":{},"9":{},"10":{}},"description":{"9":{},"10":{}}}],["registr",{"_index":25,"title":{},"description":{"10":{}}}],["requir",{"_index":17,"title":{},"description":{"6":{},"14":{}}}],["return",{"_index":8,"title":{},"description":{"4":{}}}],["special",{"_index":28,"title":{},"description":{"14":{}}}],["updat",{"_index":14,"title":{"6":{},"14":{}},"description":{"6":{},"14":{}}}],["us",{"_index":27,"title":{},"description":{"14":{}}}],["user",{"_index":3,"title":{"11":{},"12":{},"13":{},"14":{},"15":{}},"description":{"1":{},"2":{},"4":{},"6":{},"9":{},"12":{},"13":{},"14":{},"15":{}}}],["users/{id",{"_index":26,"title":{},"description":{"13":{},"14":{},"15":{}}}]],"pipeline":[]}},"options":{}};
 
       var container = document.getElementById('redoc');
       Redoc.hydrate(__redoc_state, container);
diff --git a/exam/classes/Models/Post/Post.php b/exam/classes/Models/Post/Post.php
index 9e4525e..82fdbba 100644
--- a/exam/classes/Models/Post/Post.php
+++ b/exam/classes/Models/Post/Post.php
@@ -16,16 +16,18 @@ class Post implements JsonSerializable
   private int $id;
   // User is set if the post was fetched by an authenticated user
   private ?User $user;
-  // Name is set if the post was fetched by a non authenticated user
+  // Name and image are set if the post was fetched by a non authenticated user
   private ?string $name;
+  private ?string $image;
   private string $content;
   private DateTime $postedAt;
 
-  private function __construct(int $id, ?User $user, ?string $name, string $content, string $postedAt)
+  private function __construct(int $id, ?User $user, ?string $name, ?string $image, string $content, string $postedAt)
   {
     $this->id = $id;
     $this->user = $user;
     $this->name = $name;
+    $this->image = $image;
     $this->content = $content;
     $this->postedAt = new DateTime($postedAt);
   }
@@ -53,11 +55,13 @@ class Post implements JsonSerializable
     if (!$data) throw new Exception("NotFound");
 
     $user = User::getByID($data["benutzer_id"]);
-    return new Post($data["id"], $user, null, $data["beitrag"], $data["zeitstempel"]);
+    return new Post($data["id"], $user, null, null, $data["beitrag"], $data["zeitstempel"]);
   }
 
   public static function create(User $user, string $content): Post
   {
+    $content = substr(trim($content), 0, 250);
+
     $db = Database::getInstance();
 
     $stmt = $db->prepare(
@@ -98,7 +102,7 @@ class Post implements JsonSerializable
     $list = array_map(
       function ($item) use ($authed) {
         $user = User::getByID($item["benutzer_id"]);
-        return new Post($item["id"], $authed ? $user : null, !$authed ? $user->getUsername() : null, $item["beitrag"], $item["zeitstempel"]);
+        return new Post($item["id"], $authed ? $user : null, !$authed ? $user->getUsername() : null, !$authed ? $user->getImage() : null, $item["beitrag"], $item["zeitstempel"]);
       },
       $data
     );
@@ -115,12 +119,14 @@ class Post implements JsonSerializable
     $db = Database::getInstance();
 
     if (!empty($content)) {
+      $content = substr(trim($content), 0, 250);
+
       $stmt = $db->prepare("UPDATE egb_gaestebuch SET beitrag = :CON WHERE id = :ID");
-      $stmt->bindValue(":CON", $content);
+      $stmt->bindValue(":CON", nl2br(htmlspecialchars($content)));
       $stmt->bindValue(":ID", $this->id);
       try {
         if (!$stmt->execute()) throw ApiError::failedUpdate(["content"]);
-      } catch (Exception $e) {
+      } catch (Exception) {
         throw ApiError::failedUpdate(["content"]);
       }
     }
@@ -169,6 +175,7 @@ class Post implements JsonSerializable
   {
     $user = $this->user ? $this->user : [
       "username" => $this->name,
+      "image" => $this->image,
     ];
 
     return [
diff --git a/exam/classes/Models/User/User.php b/exam/classes/Models/User/User.php
index 1f038ad..8a45dc0 100644
--- a/exam/classes/Models/User/User.php
+++ b/exam/classes/Models/User/User.php
@@ -188,7 +188,7 @@ class User implements JsonSerializable
         egb_benutzer(benutzer, passwort, email, confirmationcode)
       VALUES(:USR, :PAS, :EMA, :COD)"
     );
-    $stmt->bindValue(":USR", $username);
+    $stmt->bindValue(":USR", htmlspecialchars($username));
     $stmt->bindValue(":PAS", password_hash($password, PASSWORD_DEFAULT));
     $stmt->bindValue(":EMA", $email);
     $stmt->bindValue(":COD", $guid);
@@ -277,7 +277,7 @@ class User implements JsonSerializable
     $failed = [];
     if (!empty($username)) {
       $stmt = $db->prepare("UPDATE egb_benutzer SET benutzer = :USR WHERE id = :ID");
-      $stmt->bindValue(":USR", $username);
+      $stmt->bindValue(":USR", htmlspecialchars($username));
       $stmt->bindValue(":ID", $this->id);
       try {
         if (!$stmt->execute()) array_push($failed, "username");
@@ -378,7 +378,7 @@ class User implements JsonSerializable
       'id' => $this->id,
       'username' => $this->username,
       'status' => $this->status,
-      'email' => $this->email,
+      'email' => htmlspecialchars($this->email),
       'image' => $this->image,
       'isAdmin' => $this->isAdmin,
       'memberSince' => $this->memberSince,
diff --git a/exam/react/package.json b/exam/react/package.json
index 5e2e667..5ca26c6 100644
--- a/exam/react/package.json
+++ b/exam/react/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.16.4",
     "@tanstack/react-form": "^0.26.4",
diff --git a/exam/react/pnpm-lock.yaml b/exam/react/pnpm-lock.yaml
index 55db4e4..fc24031 100644
--- a/exam/react/pnpm-lock.yaml
+++ b/exam/react/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@emotion/styled':
         specifier: ^11.13.0
         version: 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@fontsource/roboto':
+        specifier: ^5.0.13
+        version: 5.0.13
       '@mui/icons-material':
         specifier: ^5.16.4
         version: 5.16.4(@mui/material@5.16.4(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
@@ -441,6 +444,9 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@fontsource/roboto@5.0.13':
+    resolution: {integrity: sha512-j61DHjsdUCKMXSdNLTOxcG701FWnF0jcqNNQi2iPCDxU8seN/sMxeh62dC++UiagCWq9ghTypX+Pcy7kX+QOeQ==}
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -2234,6 +2240,8 @@ snapshots:
 
   '@eslint/js@8.57.0': {}
 
+  '@fontsource/roboto@5.0.13': {}
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
diff --git a/exam/react/src/api/Api.ts b/exam/react/src/api/Api.ts
index 3c4e6d8..b255f63 100644
--- a/exam/react/src/api/Api.ts
+++ b/exam/react/src/api/Api.ts
@@ -1,3 +1,4 @@
+import { PostListAuth, PostListNonAuth } from '../types/Post';
 import { User } from '../types/User';
 
 const BASE = 'https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api/';
@@ -5,28 +6,41 @@ const BASE = 'https://khofmann.userpage.fu-berlin.de/phpCourse/exam/api/';
 let instance: ApiImpl;
 
 class ApiImpl {
-  private token: string = '';
+  //FIXME: PRIVATE when reauth token exists
+  public token?: string;
 
   constructor() {
     if (instance) {
       throw new Error('New instance cannot be created!!');
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    //eslint-disable-next-line @typescript-eslint/no-this-alias
     instance = this;
   }
 
-  public logIn = async (email: string, password: string): Promise<User> => {
+  public hasAuth = () => this.token !== undefined;
+
+  //FIXME: Currently returns Auth token, switch to reauth token
+  public logIn = async (email: string, password: string): Promise<[User, string]> => {
     const { user, token } = await (await this.post('login', { email, password })).json();
     this.token = token;
 
-    return user;
+    return [user, token];
   };
 
   public logOut = async (): Promise<boolean> => {
+    this.token = undefined;
     return await (await this.postAuth('logout')).json();
   };
 
+  public posts = async (page?: number): Promise<PostListNonAuth | PostListAuth> => {
+    const url = `posts?p=${page ?? 0}&l=9`;
+
+    if (this.token) return await (await this.getAuth(url)).json();
+
+    return await (await this.get(url)).json();
+  };
+
   private post = async (
     endpoint: string,
     body: Record<string, unknown> | undefined = undefined,
@@ -50,12 +64,32 @@ class ApiImpl {
     const response = await fetch(`${BASE}${endpoint}`, {
       mode: 'cors',
       method: 'post',
-      headers: { token: this.token, ...headers },
+      headers: { token: this.token ?? '', ...headers },
       body: JSON.stringify(body),
     });
     if (response.ok) return response;
     throw await response.json();
   };
+
+  private get = async (endpoint: string, headers: HeadersInit | undefined = undefined) => {
+    const response = await fetch(`${BASE}${endpoint}`, {
+      mode: 'cors',
+      method: 'get',
+      headers,
+    });
+    if (response.ok) return response;
+    throw await response.json();
+  };
+
+  private getAuth = async (endpoint: string, headers: HeadersInit | undefined = undefined) => {
+    const response = await fetch(`${BASE}${endpoint}`, {
+      mode: 'cors',
+      method: 'get',
+      headers: { token: this.token ?? '', ...headers },
+    });
+    if (response.ok) return response;
+    throw await response.json();
+  };
 }
 
 const Api = new ApiImpl();
diff --git a/exam/react/src/components/Forms/Login/Login.tsx b/exam/react/src/components/Forms/Login/Login.tsx
index 4618a65..653106c 100644
--- a/exam/react/src/components/Forms/Login/Login.tsx
+++ b/exam/react/src/components/Forms/Login/Login.tsx
@@ -1,5 +1,6 @@
 import { Box, Button, TextField, Typography } from '@mui/material';
 import { useForm } from '@tanstack/react-form';
+import { useRouter } from '@tanstack/react-router';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Api from '../../../api/Api';
@@ -12,6 +13,7 @@ const Login: FC = () => {
   const setUser = useGuestBookStore((state) => state.setUser);
 
   const { t } = useTranslation();
+  const router = useRouter();
 
   const form = useForm({
     defaultValues: {
@@ -20,8 +22,10 @@ const Login: FC = () => {
     },
     onSubmit: async ({ value }) => {
       try {
-        setUser(await Api.logIn(value.email, value.password));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const [user, token] = await Api.logIn(value.email, value.password);
+        setUser(user, token);
+        router.invalidate();
+        //eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
         setError(error);
       }
@@ -42,7 +46,7 @@ const Login: FC = () => {
       }}
       noValidate
     >
-      <Box sx={{ display: 'grid', gap: 1, padding: 1, minWidth: '100px' }}>
+      <Box sx={{ display: 'grid', gap: 2, padding: 1 }}>
         <form.Field
           name="email"
           validators={{
@@ -67,6 +71,9 @@ const Login: FC = () => {
                   required
                   error={field.state.meta.isTouched && field.state.meta.errors.length > 0}
                   helperText={field.state.meta.isTouched ? field.state.meta.errors.join(',') : ''}
+                  type="email"
+                  autoComplete="username"
+                  inputMode="email"
                 />
               </>
             );
@@ -96,6 +103,8 @@ const Login: FC = () => {
                   required
                   error={field.state.meta.isTouched && field.state.meta.errors.length > 0}
                   helperText={field.state.meta.isTouched ? field.state.meta.errors.join(',') : ''}
+                  type="password"
+                  autoComplete="password"
                 />
               </>
             );
@@ -111,7 +120,7 @@ const Login: FC = () => {
             </>
           )}
         />
-        {error && <Typography color="error.main">{t(...handleError(error, 'login'))}</Typography>}
+        {error && <Typography color="error.main">{handleError(error, 'login', t)}</Typography>}
       </Box>
     </form>
   );
diff --git a/exam/react/src/components/Header/Header.tsx b/exam/react/src/components/Header/Header.tsx
index 20d679f..9e4d50a 100644
--- a/exam/react/src/components/Header/Header.tsx
+++ b/exam/react/src/components/Header/Header.tsx
@@ -1,5 +1,17 @@
 import { AccountCircle } from '@mui/icons-material';
-import { AppBar, Avatar, IconButton, Menu, MenuItem, Toolbar, Typography, useScrollTrigger } from '@mui/material';
+import {
+  AppBar,
+  Avatar,
+  Box,
+  CircularProgress,
+  IconButton,
+  Menu,
+  MenuItem,
+  Link as MUILink,
+  Toolbar,
+  useScrollTrigger,
+} from '@mui/material';
+import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import { cloneElement, FC, ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Api from '../../api/Api';
@@ -24,6 +36,8 @@ const Header: FC = () => {
   const setUser = useGuestBookStore((state) => state.setUser);
 
   const { t } = useTranslation();
+  const router = useRouter();
+  const isLoading = useRouterState({ select: (s) => s.status === 'pending' });
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -35,56 +49,68 @@ const Header: FC = () => {
 
   return (
     <ElevationScroll>
-      <AppBar>
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            {t('GuestBook')}
-          </Typography>
-          {user ? (
-            <IconButton onClick={handleMenu} sx={{ p: 0 }}>
-              <Avatar alt={user.username} src={`storage/${user.image}`} />
-            </IconButton>
-          ) : (
-            <IconButton size="large" onClick={handleMenu} color="inherit">
-              <AccountCircle />
-            </IconButton>
-          )}
-          <Menu
-            id="menu-appbar"
-            anchorEl={anchorEl}
-            anchorOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right',
-            }}
-            keepMounted
-            transformOrigin={{
-              vertical: 'top',
-              horizontal: 'right',
-            }}
-            open={Boolean(anchorEl)}
-            onClose={handleClose}
-          >
+      <>
+        <AppBar>
+          <Toolbar>
+            <Box sx={{ flexGrow: 1, alignItems: 'center', display: 'flex', gap: 1 }}>
+              <MUILink component={Link} to="/" color="#FFF" variant="h6" underline="none">
+                {t('GuestBook')}
+              </MUILink>
+              {isLoading && <CircularProgress size={16} thickness={10} sx={{ color: 'white' }} />}
+            </Box>
             {user ? (
-              [
-                <MenuItem key="profile" onClick={handleClose}>
-                  {t('Profile')}
-                </MenuItem>,
-                <MenuItem
-                  key="logout"
-                  onClick={() => {
-                    Api.logOut();
-                    setUser(undefined);
-                  }}
-                >
-                  {t('Log out')}
-                </MenuItem>,
-              ]
+              <IconButton onClick={handleMenu} sx={{ p: 0 }}>
+                <Avatar alt={user.username} src={`storage/${user.image}`} />
+              </IconButton>
             ) : (
-              <Login />
+              <IconButton size="large" onClick={handleMenu} color="inherit">
+                <AccountCircle />
+              </IconButton>
             )}
-          </Menu>
-        </Toolbar>
-      </AppBar>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+              sx={{
+                '& .MuiMenu-paper': {
+                  minWidth: '240px',
+                },
+              }}
+            >
+              {user ? (
+                [
+                  <MenuItem key="profile" onClick={handleClose}>
+                    {t('Profile')}
+                  </MenuItem>,
+                  <MenuItem
+                    key="logout"
+                    onClick={() => {
+                      Api.logOut();
+                      setUser();
+                      router.invalidate();
+                    }}
+                  >
+                    {t('Log out')}
+                  </MenuItem>,
+                ]
+              ) : (
+                <Login />
+              )}
+            </Menu>
+          </Toolbar>
+        </AppBar>
+        <Toolbar />
+      </>
     </ElevationScroll>
   );
 };
diff --git a/exam/react/src/components/Post/Post.tsx b/exam/react/src/components/Post/Post.tsx
new file mode 100644
index 0000000..4a50867
--- /dev/null
+++ b/exam/react/src/components/Post/Post.tsx
@@ -0,0 +1,38 @@
+import { Avatar, Card, CardContent, CardHeader, Link as MUILink, Typography } from '@mui/material';
+import { Link } from '@tanstack/react-router';
+import { FC } from 'react';
+import { PostAuth, PostNonAuth } from '../../types/Post';
+
+interface Props {
+  post: PostNonAuth | PostAuth;
+}
+
+const Post: FC<Props> = ({ post }) => {
+  return (
+    <Card sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+      <CardHeader
+        avatar={
+          <MUILink component={Link} to="/" color="#FFF" variant="h6" underline="none">
+            <Avatar alt={post.user.username} src={`storage/${post.user.image}`} />
+          </MUILink>
+        }
+        title={post.user.username}
+        subheader={new Date(post.postedAt.date).toLocaleString(navigator.languages[0] ?? 'de-DE', {
+          timeZone: post.postedAt.timezone,
+          weekday: 'short',
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+          hour: '2-digit',
+          hour12: false,
+          minute: '2-digit',
+        })}
+      />
+      <CardContent>
+        <Typography>{post.content}</Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Post;
diff --git a/exam/react/src/main.tsx b/exam/react/src/main.tsx
index bc83666..5c4715e 100644
--- a/exam/react/src/main.tsx
+++ b/exam/react/src/main.tsx
@@ -10,6 +10,12 @@ import { routeTree } from './routeTree.gen';
 // Import i18n
 import './i18n';
 
+// Font
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+
 // Query Client
 const queryClient = new QueryClient();
 
diff --git a/exam/react/src/routes/__root.tsx b/exam/react/src/routes/__root.tsx
index 3b3e78a..7c25d2a 100644
--- a/exam/react/src/routes/__root.tsx
+++ b/exam/react/src/routes/__root.tsx
@@ -2,15 +2,23 @@ import { Toolbar } from '@mui/material';
 import { QueryClient } from '@tanstack/react-query';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+import Api from '../api/Api';
 import Header from '../components/Header/Header';
+import useGuestBookStore from '../store/store';
 
 export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
-  component: () => (
-    <>
-      <Header />
-      <Toolbar />
-      <Outlet />
-      {process.env.NODE_ENV === 'development' && <TanStackRouterDevtools />}
-    </>
-  ),
+  component: () => {
+    //FIXME: REAUTH HERE
+    const token = useGuestBookStore((state) => state.token);
+    Api.token = token;
+
+    return (
+      <>
+        <Header />
+        <Toolbar />
+        <Outlet />
+        {process.env.NODE_ENV === 'development' && <TanStackRouterDevtools />}
+      </>
+    );
+  },
 });
diff --git a/exam/react/src/routes/index.tsx b/exam/react/src/routes/index.tsx
index c1c775d..0d0feaa 100644
--- a/exam/react/src/routes/index.tsx
+++ b/exam/react/src/routes/index.tsx
@@ -1,9 +1,57 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { Grid, Pagination, PaginationItem, Snackbar } from '@mui/material';
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import Api from '../api/Api';
+import Post from '../components/Post/Post';
+
+const postsQueryOptions = (page?: number) =>
+  queryOptions({
+    queryKey: ['posts', { page: page ?? 0, hasAuth: Api.hasAuth() }],
+    queryFn: () => Api.posts(page),
+  });
 
 export const Route = createFileRoute('/')({
+  loaderDeps: ({ search: { page } }) => ({ page }),
+  loader: ({ context: { queryClient }, deps: { page } }) => queryClient.ensureQueryData(postsQueryOptions(page)),
+  validateSearch: (search: Record<string, unknown>): { page?: number } => {
+    return {
+      page: search?.page !== undefined ? Number(search?.page ?? 0) : undefined,
+    };
+  },
   component: Home,
 });
 
 function Home() {
-  return <></>;
+  const { page } = Route.useSearch();
+  const { data: postsQuery, isFetching } = useSuspenseQuery(postsQueryOptions(page));
+
+  return (
+    <>
+      <Snackbar open={isFetching} message="Updating" />
+      <Grid container spacing={2}>
+        {postsQuery.data.map((post) => (
+          <Grid item xs={12} md={6} lg={4} sx={{ display: 'flex' }}>
+            <Post key={post.id} post={post} />
+          </Grid>
+        ))}
+        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Pagination
+            page={(page ?? 0) + 1}
+            count={postsQuery.pages}
+            color="primary"
+            renderItem={(item) => (
+              <PaginationItem
+                {...item}
+                component={Link}
+                to="/"
+                search={{ page: item.page ? item.page - 1 : undefined }}
+                //eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onClick={(e) => item.onClick(e as any)}
+              />
+            )}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
 }
diff --git a/exam/react/src/store/store.ts b/exam/react/src/store/store.ts
index 9a04d5d..b7c7680 100644
--- a/exam/react/src/store/store.ts
+++ b/exam/react/src/store/store.ts
@@ -1,18 +1,28 @@
-import type {} from '@redux-devtools/extension'; // required for devtools typing
+import type {} from '@redux-devtools/extension';
 import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
+import { devtools, persist } from 'zustand/middleware';
 import { User } from '../types/User';
 
 interface GuestBookState {
   user: User | undefined;
-  setUser: (user: User | undefined) => void;
+  token: string | undefined;
+  setUser: (user?: User, token?: string) => void;
 }
 
 const useGuestBookStore = create<GuestBookState>()(
-  devtools((set) => ({
-    user: undefined,
-    setUser: (user: User | undefined) => set(() => ({ user })),
-  }))
+  devtools(
+    persist(
+      (set) => ({
+        user: undefined,
+        // FIXME: Currentlay auth token, switch this to be reauth token
+        token: undefined,
+        setUser: (user?: User, token?: string) => set(() => ({ user, token })),
+      }),
+      {
+        name: 'guestbook-storage',
+      }
+    )
+  )
 );
 
 export default useGuestBookStore;
diff --git a/exam/react/src/types/Post.ts b/exam/react/src/types/Post.ts
new file mode 100644
index 0000000..03f5266
--- /dev/null
+++ b/exam/react/src/types/Post.ts
@@ -0,0 +1,29 @@
+import { Timestamp } from './Timestamp';
+import { User } from './User';
+
+export interface PostNonAuth {
+  id: number;
+  user: {
+    username: string;
+    image: string;
+  };
+  content: string;
+  postedAt: Timestamp;
+}
+
+export interface PostListNonAuth {
+  pages: number;
+  data: PostNonAuth[];
+}
+
+export interface PostAuth {
+  id: number;
+  user: User;
+  content: string;
+  postedAt: Timestamp;
+}
+
+export interface PostListAuth {
+  pages: number;
+  data: PostNonAuth[];
+}
diff --git a/exam/react/src/utils/errors.ts b/exam/react/src/utils/errors.ts
index 693b3fe..aed71b2 100644
--- a/exam/react/src/utils/errors.ts
+++ b/exam/react/src/utils/errors.ts
@@ -1,25 +1,32 @@
+import { TFunction } from 'i18next';
+
 /**
- * Transform error into i18next spreadable input
+ * Return translated error
  * @param error Error object
- * @param context Optional context for translation
- * @returns Array to be spread into i18next `t` function
+ * @param context Optional context
+ * @param t Optional translation function, defautls to pass through
+ * @returns Translated error or inputs if t as unspecified
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const handleError = (error: any, context?: string): [string, { context?: string }] => {
-  if (!error) return ['', {}];
+//eslint-disable-next-line @typescript-eslint/no-explicit-any
+const handleError = (
+  error: any,
+  context?: string,
+  t: TFunction<'translation', undefined> | ((..._in: any) => any) = (..._in: any) => _in
+): string => {
+  if (!error) return t('', {});
 
   if (error.code) {
     switch (error.code) {
       case 'NotFound':
-        return [error.code, { context: `${error.entity}:${context}` }];
+        return t(error.code, { context: `${error.entity}:${context}` });
       case 'Unauthorized':
-        return [error.code, { context }];
+        return t(error.code, { context });
       default:
-        return ['Unknown', { context }];
+        return t('Unknown', { context });
     }
   }
 
-  return [error?.message ?? 'Unknown', { context }];
+  return t(error?.message ?? 'Unknown', { context });
 };
 
 export default handleError;