fix(frontend): update logout messages for clarity and consistency

Author: Lasim

services/frontend/src/i18n/locales/en/auth.ts

@@ -2,6 +2,7 @@
 export default {
   logout: {
     title: 'Logout',
-    inProgressMessage: 'Logout in Progress... Redirecting to login.',
+    inProgressMessage: 'Logging out...',
+    successMessage: 'You have been logged out successfully. Redirecting to login...',
   },
 }

services/frontend/src/views/Logout.vue

@@ -1,65 +1,59 @@
-<template>
-  <div class="flex items-center justify-center min-h-screen bg-background">
-    <Card class="w-full max-w-md p-6">
-      <CardHeader>
-        <CardTitle class="text-center text-2xl font-bold">{{ t('logout.title') }}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p class="text-center text-muted-foreground">
-          {{ message }}
-        </p>
-        <div class="mt-4 flex justify-center">
-          <svg v-if="isLoading" class="animate-spin h-8 w-8 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-        </div>
-      </CardContent>
-    </Card>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardContent } from '@/components/ui/card'
+import { Spinner } from '@/components/ui/spinner'
 import { UserService } from '@/services/userService'
 
 const router = useRouter()
 const { t } = useI18n()
 
 const isLoading = ref(true)
-const message = ref(t('logout.inProgressMessage'))
+const message = ref('')
 
 onMounted(async () => {
-  isLoading.value = true;
-  message.value = t('logout.inProgressMessage');
+  isLoading.value = true
+  message.value = t('logout.inProgressMessage')
   try {
-    // Use the UserService logout method which handles cache clearing
-    await UserService.logout();
-    message.value = t('logout.successMessage') || t('logout.inProgressMessage');
+    await UserService.logout()
+    message.value = t('logout.successMessage')
   } catch (error) {
-    console.error('Error during logout:', error);
-    message.value = t('common.error');
+    console.error('Error during logout:', error)
+    message.value = t('common.error')
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
     setTimeout(() => {
-      router.push('/login');
-    }, 2000); // Redirect after 2 seconds to allow user to see final message
+      router.push('/login')
+    }, 2000)
   }
 })
 </script>
 
-<style scoped>
-/* Add any additional styles if needed */
-.bg-background {
-  background-color: hsl(var(--background));
-}
-.text-primary {
-  color: hsl(var(--primary));
-}
-.text-muted-foreground {
-  color: hsl(var(--muted-foreground));
-}
-</style>
+<template>
+  <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+      <img
+        class="mx-auto h-20 w-auto"
+        src="/deploystack-logo-80x80.png"
+        alt="DeployStack Logo"
+      />
+      <h2 class="mt-10 text-center text-2xl font-bold tracking-tight text-gray-900">
+        {{ $t('logout.title') }}
+      </h2>
+    </div>
+
+    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+      <Card>
+        <CardContent class="pt-6">
+          <p class="text-center text-muted-foreground">
+            {{ message }}
+          </p>
+          <div v-if="isLoading" class="mt-4 flex justify-center">
+            <Spinner class="h-8 w-8" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>