Mike
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-4">
|
|
<SettingsSectionHeader
|
|
subheading
|
|
title="Authorized Apps"
|
|
:buttons="[
|
|
{
|
|
props: {
|
|
color: 'outline',
|
|
to: 'https://speckle.guide/dev/apps.html',
|
|
target: '_blank',
|
|
external: true
|
|
},
|
|
label: 'Open docs'
|
|
}
|
|
]"
|
|
>
|
|
<p class="text-sm pt-6 md:pt-4">
|
|
Here you can review the apps that you have granted access to. If something looks
|
|
suspicious, revoke the access.
|
|
</p>
|
|
</SettingsSectionHeader>
|
|
<LayoutTable
|
|
:columns="[
|
|
{ id: 'name', header: 'Name', classes: 'col-span-3 ' },
|
|
{ id: 'author', header: 'Author', classes: 'col-span-3 ' },
|
|
{
|
|
id: 'description',
|
|
header: 'Description',
|
|
classes: 'col-span-6 !pt-1.5'
|
|
}
|
|
]"
|
|
:items="authorizedApps"
|
|
:buttons="[
|
|
{
|
|
icon: XMarkIcon,
|
|
label: 'Revoke Access',
|
|
action: (item) => $emit('delete', item),
|
|
class: 'text-danger'
|
|
}
|
|
]"
|
|
row-items-align="stretch"
|
|
>
|
|
<template #name="{ item }">
|
|
{{ item.name }}
|
|
</template>
|
|
<template #author="{ item }">
|
|
<div class="flex space-x-2 items-center">
|
|
<template v-if="item.author">
|
|
<UserAvatar :user="item.author" />
|
|
<span>{{ item.author.name }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<HeaderLogoBlock minimal no-link />
|
|
<span>Speckle</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template #description="{ item }">
|
|
{{ item.description }}
|
|
</template>
|
|
</LayoutTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useQuery } from '@vue/apollo-composable'
|
|
import { XMarkIcon } from '@heroicons/vue/24/outline'
|
|
import { developerSettingsAuthorizedAppsQuery } from '~~/lib/developer-settings/graphql/queries'
|
|
import type { AuthorizedAppItem } from '~~/lib/developer-settings/helpers/types'
|
|
|
|
defineEmits<{
|
|
(e: 'delete', item: AuthorizedAppItem): void
|
|
}>()
|
|
|
|
const { result: authorizedAppsResult } = useQuery(developerSettingsAuthorizedAppsQuery)
|
|
|
|
const authorizedApps = computed(() =>
|
|
(authorizedAppsResult.value?.activeUser?.authorizedApps || []).filter(
|
|
(app) => app.id !== 'spklwebapp'
|
|
)
|
|
)
|
|
</script>
|