Files
RenewCMS/web/src/components/SessionOnlyGroup.vue
T

75 lines
2.1 KiB
Vue

<script setup lang="ts">
import { t, translate } from '@/i18n'
import ApiRouteRow from '@/components/ApiRouteRow.vue'
import type { PublicRow, SessionGroup } from '@/data/apiCatalogue'
import { CHIP_CLASS } from '@/lib/apiReference'
defineProps<{
groups: SessionGroup[]
publicRows: PublicRow[]
}>()
const SUBGROUP_TITLE_CLASS =
'px-3.5 pt-2 pb-1 text-xs font-medium tracking-wide text-muted uppercase'
</script>
<template>
<div class="flex flex-col gap-3">
<div class="border border-dashed border-accented bg-muted">
<div class="flex gap-2.5 px-3.5 py-3 text-pretty text-toned">
<UIcon name="i-lucide-lock" class="mt-0.5 size-4 shrink-0 text-muted" />
<span>{{
t(
'These routes are made for a signed-in browser session. With an API key, verify, DELETE /auth/register, /api-key/* and /system/* answer 403 "This action needs a real session."',
)
}}</span>
</div>
<div
v-for="group in groups"
:key="group.title"
class="border-t border-dashed border-accented"
>
<div :class="SUBGROUP_TITLE_CLASS">{{ translate(group.title) }}</div>
<ApiRouteRow
v-for="row in group.rows"
:key="`${row.method} ${row.path}`"
:method="row.method"
:path="row.path"
:description="row.description"
data-session-row
>
<UBadge
v-if="row.answers403"
:label="t('Session only')"
icon="i-lucide-lock"
color="neutral"
variant="outline"
:class="[CHIP_CLASS.dashed, 'self-start lg:self-center']"
:ui="{ leadingIcon: 'size-3' }"
/>
</ApiRouteRow>
</div>
</div>
<div class="border border-default bg-default">
<div :class="SUBGROUP_TITLE_CLASS">{{ t('Public auth flow') }}</div>
<ApiRouteRow
v-for="row in publicRows"
:key="`${row.method} ${row.path}`"
:method="row.method"
:path="row.path"
:description="row.description"
data-public-row
>
<UBadge
:label="t('Public')"
color="neutral"
variant="outline"
:class="[CHIP_CLASS.neutral, 'self-start lg:self-center']"
/>
</ApiRouteRow>
</div>
</div>
</template>