first commit

2026-10-09 08:21:06 +02:00
parent db7456df87
commit d259c62304
3761 changed files with 896046 additions and 0 deletions
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue';
+import Tooltip from '@/components/ui/Tooltip.vue';
+import { useConfirmDelete } from '@/composables/useConfirmDelete';
+import { useTranslations } from '@/composables/useVanguard';
+import AppLayout from '@/layouts/AppLayout.vue';
+
+interface UserSession {
+    id: string;
+    ipAddress: string;
+    device: string;
+    platform: string;
+    browser: string;
+    lastActivity: string;
+    invalidateUrl: string;
+}
+
+const props = defineProps<{
+    user: { id: number; nameOrEmail: string };
+    sessions: UserSession[];
+    /** Admin viewing another user, rather than a user viewing their own. */
+    adminView: boolean;
+}>();
+
+const { __ } = useTranslations();
+const { confirmDelete } = useConfirmDelete();
+
+const breadcrumbs = props.adminView
+    ? [
+          { label: __('Users'), href: route('users.index') },
+          { label: props.user.nameOrEmail, href: route('users.show', props.user.id) },
+          { label: __('Sessions') },
+      ]
+    : [{ label: __('Sessions') }];
+
+function invalidate(session: UserSession): void {
+    confirmDelete({
+        url: session.invalidateUrl,
+        message: __('Are you sure that you want to invalidate this session?'),
+        confirmLabel: __('Yes, proceed!'),
+    });
+}
+</script>
+
+<template>
+    <AppLayout
+        :title="`${user.nameOrEmail} - ${__('Active Sessions')}`"
+        :heading="`${__('Sessions')} (${user.nameOrEmail})`"
+        :breadcrumbs="breadcrumbs"
+    >
+        <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+            <div class="overflow-x-auto">
+                <table class="w-full min-w-2xl text-left">
+                    <thead>
+                        <tr class="border-b border-slate-100">
+                            <th class="px-4 py-3 font-medium">{{ __('IP Address') }}</th>
+                            <th class="px-4 py-3 font-medium">{{ __('Device') }}</th>
+                            <th class="px-4 py-3 font-medium">{{ __('Browser') }}</th>
+                            <th class="px-4 py-3 font-medium">{{ __('Last Activity') }}</th>
+                            <th class="px-4 py-3 text-center font-medium">{{ __('Action') }}</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr v-if="!sessions.length">
+                            <td colspan="5" class="px-4 py-3">
+                                <em class="text-slate-500">{{ __('No records found.') }}</em>
+                            </td>
+                        </tr>
+
+                        <tr
+                            v-for="session in sessions"
+                            :key="session.id"
+                            class="odd:bg-body border-b border-slate-50"
+                        >
+                            <td class="px-4 py-3">{{ session.ipAddress }}</td>
+                            <td class="px-4 py-3">{{ session.device }} ({{ session.platform }})</td>
+                            <td class="px-4 py-3">{{ session.browser }}</td>
+                            <td class="px-4 py-3">{{ session.lastActivity }}</td>
+                            <td class="px-4 py-3 text-center">
+                                <Tooltip :text="__('Invalidate Session')">
+                                    <Button
+                                        icon="fas fa-times"
+                                        text
+                                        rounded
+                                        severity="secondary"
+                                        :aria-label="__('Invalidate Session')"
+                                        @click="invalidate(session)"
+                                    />
+                                </Tooltip>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </AppLayout>
+</template>