From 726f73f177df41f8901cf339aebb9612da119521 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 30 Dec 2024 11:52:48 +0100
Subject: [PATCH] feat(ui): logout page

---
 front/src/components/auth/Logout.vue | 62 ++++++++++++++--------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/front/src/components/auth/Logout.vue b/front/src/components/auth/Logout.vue
index cf9ebef16..63e6898f6 100644
--- a/front/src/components/auth/Logout.vue
+++ b/front/src/components/auth/Logout.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
 
 const store = useStore()
 const { t } = useI18n()
@@ -18,37 +19,38 @@ const labels = computed(() => ({
     v-title="labels.title"
     class="main"
   >
-    <section class="ui vertical stripe segment">
-      <div
-        v-if="store.state.auth.authenticated"
-        class="ui small text container"
+    <div
+      v-if="store.state.auth.authenticated"
+      class="ui small text container"
+    >
+      <h2>
+        {{ t('components.auth.Logout.header.confirm') }}
+      </h2>
+      <p>
+        {{ t('components.auth.Logout.message.loggedIn', { username: store.state.auth.username }) }}
+      </p>
+      <Spacer />
+      <Button
+        solid
+        primary
+        @click="store.dispatch('auth/logout')"
       >
-        <h2>
-          {{ t('components.auth.Logout.header.confirm') }}
-        </h2>
-        <p>
-          {{ t('components.auth.Logout.message.loggedIn', { username: store.state.auth.username }) }}
-        </p>
-        <Button
-          @click="store.dispatch('auth/logout')"
-        >
-          {{ t('components.auth.Logout.button.logout') }}
-        </Button>
-      </div>
-      <div
-        v-else
-        class="ui small text container"
+        {{ t('components.auth.Logout.button.logout') }}
+      </Button>
+    </div>
+    <div
+      v-else
+      class="ui small text container"
+    >
+      <h2>
+        {{ t('components.auth.Logout.header.unauthenticated') }}
+      </h2>
+      <router-link
+        to="/login"
+        class="ui button"
       >
-        <h2>
-          {{ t('components.auth.Logout.header.unauthenticated') }}
-        </h2>
-        <router-link
-          to="/login"
-          class="ui button"
-        >
-          {{ t('components.auth.Logout.link.login') }}
-        </router-link>
-      </div>
-    </section>
+        {{ t('components.auth.Logout.link.login') }}
+      </router-link>
+    </div>
   </main>
 </template>