Files
portal/app/resources/js/components/admin/ImpersonationSessionBanner.vue
T

42 lines
1.4 KiB
Vue

<script setup lang="ts">
import { computed } from 'vue';
import { useAuthStore } from '../../stores/auth';
import { impersonationLeave } from '../../api/auth';
const auth = useAuthStore();
const imp = computed(() => auth.user?.impersonation);
async function leave(): Promise<void> {
try {
await impersonationLeave();
} finally {
window.location.assign('/admin/tenants');
}
}
</script>
<template>
<div v-if="imp?.active" class="imp-session-banner" role="alert" data-testid="impersonation-session-banner">
<v-icon size="16" class="imp-session-banner__icon">mdi-account-switch</v-icon>
<span class="imp-session-banner__label">
Вы в кабинете клиента «{{ imp.tenant_name ?? '—' }}» режим поддержки.
</span>
<button type="button" class="imp-session-banner__leave" data-testid="impersonation-leave-btn" @click="leave">
Выйти
</button>
</div>
</template>
<style scoped>
.imp-session-banner {
display: flex; align-items: center; gap: 8px;
background: #b3261e; color: #fff; font-size: 13px; padding: 8px 24px;
position: sticky; top: 0; z-index: 2000;
}
.imp-session-banner__label { flex: 1; }
.imp-session-banner__leave {
background: #fff; color: #b3261e; border: 0; border-radius: 4px;
padding: 2px 12px; font-weight: 600; cursor: pointer;
}
</style>