99 lines
3.9 KiB
Vue
99 lines
3.9 KiB
Vue
<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>
|