From bcfcf264f6807b4699566da6811952bceb0cbe25 Mon Sep 17 00:00:00 2001
From: kritzl <kritzl@kritzl.dev>
Date: Mon, 11 May 2026 20:55:58 +0200
Subject: [PATCH] improve recent logout information

---
 app/src/components/Alert.astro   |  3 ++-
 app/src/i18n/ui.ts               |  8 ++++----
 app/src/pages/[lang]/index.astro | 24 ++++++++++++++++--------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/app/src/components/Alert.astro b/app/src/components/Alert.astro
index 99e8724..8f3413e 100644
--- a/app/src/components/Alert.astro
+++ b/app/src/components/Alert.astro
@@ -38,8 +38,9 @@ const {id, classList = "", color = "info", title, description} = Astro.props
           <TriangleAlert class="size-7"/>
       )}
   </slot>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2 w-full">
     <span>{title}</span>
     <span class="text-sm opacity-90 mt-1" set:html={description}/>
+    <slot></slot>
   </div>
 </div>
diff --git a/app/src/i18n/ui.ts b/app/src/i18n/ui.ts
index 72b0d3b..a36c612 100644
--- a/app/src/i18n/ui.ts
+++ b/app/src/i18n/ui.ts
@@ -26,8 +26,8 @@ export const ui = {
         "button.close": "Close",
         "login": "Login",
         "loggedOut.title": "Signed out",
-        "loggedOut.description": `Your Session is expired and you were logged out. 
-             Log in again: <a class='underline' href='/auth/login'>Login</a>`,
+        "loggedOut.description": `Your session has expired and you have been logged out.<br>
+             Please log in again.`,
         "serverError.title": "Server Error",
         "serverError.description": `Please try again later.`,
     },
@@ -51,8 +51,8 @@ export const ui = {
         "button.close": "Schließen",
         "login": "Anmelden",
         "loggedOut.title": "Abgemeldet",
-        "loggedOut.description": `Deine Sitzung ist abgelaufen und du wurdest abgemeldet. 
-             Melde dich hier erneut an: <a class='underline' href='/auth/login'>Anmelden</a>`,
+        "loggedOut.description": `Deine Sitzung ist abgelaufen und du wurdest abgemeldet.<br>
+             Melde dich erneut an.`,
         "serverError.title": "Serverfehler",
         "serverError.description": `Bitte versuche es später erneut.`,
     },
diff --git a/app/src/pages/[lang]/index.astro b/app/src/pages/[lang]/index.astro
index b554dbd..f717817 100644
--- a/app/src/pages/[lang]/index.astro
+++ b/app/src/pages/[lang]/index.astro
@@ -89,7 +89,8 @@ const t = useTranslations(lang)
                     const error = e.getActualType()
 
                     if (error.status === 401) {
-                        auth.recentLogout = auth.authenticated // set recentLogout true, if user was logged in before
+                        if (!auth.recentLogout)
+                            auth.recentLogout = auth.authenticated // set recentLogout true, if user was logged in before
                         auth.authenticated = false
                         auth.authorized = false
                         auth.until = null
@@ -237,6 +238,20 @@ const t = useTranslations(lang)
     </script>
   </Fragment>
   <div class="grid place-items-center grid-cols-1 gap-4 max-w-xl mx-auto" id="list">
+    <Alert
+        classList="hidden"
+        id="alert-loggedout"
+        color="warning"
+        title={t("loggedOut.title")}
+        description={t("loggedOut.description")}
+    >
+      <div class="flex justify-end">
+        <a href="/auth/login" class="btn btn-sm btn-warning">
+          <LogIn/>
+            {t("login")}
+        </a>
+      </div>
+    </Alert>
     <Alert
         classList="hidden"
         id="alert-unauthenticated"
@@ -259,13 +274,6 @@ const t = useTranslations(lang)
         <Lock class="size-7"/>
       </Fragment>
     </Alert>
-    <Alert
-        classList="hidden"
-        id="alert-loggedout"
-        color="warning"
-        title={t("loggedOut.title")}
-        description={t("loggedOut.description")}
-    />
     <Alert
         classList="hidden"
         id="alert-serverError"