140 lines
5.9 KiB
Vue
140 lines
5.9 KiB
Vue
<template>
|
|
<div class="flex justify-end px-4">
|
|
<sl-dropdown>
|
|
<div slot="trigger">
|
|
<sl-icon-button name="three-dots"></sl-icon-button>
|
|
</div>
|
|
<sl-menu>
|
|
<sl-menu-item value="edit" @click="updateDrawerOpen = true"> Edit client </sl-menu-item>
|
|
<sl-menu-item value="delete">
|
|
<span class="text-red-600" @click="showConfirm = true">Delete client</span>
|
|
</sl-menu-item>
|
|
</sl-menu>
|
|
</sl-dropdown>
|
|
</div>
|
|
<sl-tab-group>
|
|
<sl-tab slot="nav" panel="client_data">Client Data</sl-tab>
|
|
<sl-tab slot="nav" panel="events">Events</sl-tab>
|
|
|
|
<sl-tab-panel name="client_data">
|
|
<div id="client_details">
|
|
<div class="w-full p-2">
|
|
<div class="px-4 sm:px-0">
|
|
<h3 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">
|
|
{{ localClient.name }}
|
|
</h3>
|
|
<p
|
|
class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-100"
|
|
v-if="localClient.description"
|
|
>
|
|
{{ localClient.description }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-6 border-t border-gray-100">
|
|
<dl class="divide-y divide-gray-100">
|
|
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Client ID</dt>
|
|
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
|
|
{{ localClient.id }}
|
|
</dd>
|
|
</div>
|
|
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
|
|
Client Description
|
|
</dt>
|
|
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
|
|
{{ localClient.description }}
|
|
</dd>
|
|
</div>
|
|
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
|
|
Client Version
|
|
</dt>
|
|
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
|
|
{{ localClient.version }}
|
|
</dd>
|
|
</div>
|
|
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">Public Key</dt>
|
|
<dd
|
|
class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300 truncate"
|
|
>
|
|
{{ localClient.public_key }}
|
|
</dd>
|
|
</div>
|
|
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
|
|
Assigned Secrets
|
|
</dt>
|
|
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
|
|
{{ clientSecretCount }}
|
|
</dd>
|
|
</div>
|
|
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
|
|
<dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
|
|
Allowed sources
|
|
</dt>
|
|
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
|
|
{{ clientPolicies }}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</sl-tab-panel>
|
|
<sl-tab-panel name="events"> </sl-tab-panel>
|
|
</sl-tab-group>
|
|
|
|
<sl-drawer label="Edit Client" :open="updateDrawerOpen" @sl-hide="updateDrawerOpen = false">
|
|
<ClientForm @submit="updateClient" @cancel="updateDrawerOpen = false" :client="client" />
|
|
</sl-drawer>
|
|
<sl-dialog label="Are you sure?" :open="showConfirm">
|
|
Are you sure you want to delete this client?
|
|
<div slot="footer">
|
|
<sl-button variant="default" @click="showConfirm = false" class="mr-2">Cancel</sl-button>
|
|
<sl-button variant="danger" @click="deleteClient">Delete</sl-button>
|
|
</div>
|
|
</sl-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import type { Client, ClientCreate } from '@/client/types.gen'
|
|
import '@shoelace-style/shoelace/dist/components/button/button.js'
|
|
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js'
|
|
import '@shoelace-style/shoelace/dist/components/divider/divider.js'
|
|
import '@shoelace-style/shoelace/dist/components/drawer/drawer.js'
|
|
import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js'
|
|
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js'
|
|
import '@shoelace-style/shoelace/dist/components/menu/menu.js'
|
|
import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js'
|
|
import '@shoelace-style/shoelace/dist/components/menu-label/menu-label.js'
|
|
import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js'
|
|
import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js'
|
|
import '@shoelace-style/shoelace/dist/components/tab/tab.js'
|
|
import ClientForm from '@/components/clients/ClientForm.vue'
|
|
const props = defineProps<{ client: Client }>()
|
|
const emit = defineEmits<{
|
|
(e: 'update', data: ClientCreate): void
|
|
(e: 'deleted', data: string): void
|
|
}>()
|
|
|
|
const localClient = ref({ ...props.client })
|
|
|
|
const updateDrawerOpen = ref<boolean>(false)
|
|
const showConfirm = ref<boolean>(false)
|
|
const clientSecretCount = computed(() => localClient.value.secrets.length)
|
|
const clientPolicies = computed(() => localClient.value.policies.join(', '))
|
|
async function updateClient(data: ClientCreate) {
|
|
emit('update', data)
|
|
updateDrawerOpen.value = false
|
|
}
|
|
|
|
async function deleteClient() {
|
|
showConfirm.value = false
|
|
emit('deleted', localClient.value.id)
|
|
}
|
|
</script>
|