feat: integration page (PART 3/3)

web/src/components/SessionOnlyGroup.vue

@@ -0,0 +1,74 @@
+<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>