517 lines
21 KiB
Vue
517 lines
21 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import axios from 'axios';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { OAuthClient, Paginated, WebhookDelivery, WebhookEndpoint } from '../types/models';
|
|
|
|
const { t, locale } = useI18n();
|
|
|
|
const clients = ref<OAuthClient[]>([]);
|
|
const loading = ref(true);
|
|
const creating = ref(false);
|
|
const newSecret = ref<{ name: string; secret: string; id: string; previousSecretExpiresAt?: string } | null>(null);
|
|
|
|
const form = reactive({
|
|
name: '',
|
|
grant_type: 'authorization_code',
|
|
redirect_uris: '',
|
|
confidential: true,
|
|
});
|
|
const errors = ref<Record<string, string[]>>({});
|
|
|
|
const WEBHOOK_EVENTS = ['token.revoked', 'user.deactivated'];
|
|
|
|
const expandedClientId = ref<string | null>(null);
|
|
const webhooks = ref<WebhookEndpoint[]>([]);
|
|
const webhookForm = reactive({ url: '', events: [] as string[] });
|
|
const webhookErrors = ref<Record<string, string[]>>({});
|
|
const webhookCreating = ref(false);
|
|
const newWebhookSecret = ref<{ url: string; secret: string } | null>(null);
|
|
|
|
const historyWebhookId = ref<number | null>(null);
|
|
const deliveries = ref<WebhookDelivery[]>([]);
|
|
const deliveriesLoading = ref(false);
|
|
const deliveriesPage = ref(1);
|
|
const deliveriesLastPage = ref(1);
|
|
const retryingDeliveryId = ref<number | null>(null);
|
|
|
|
async function load(): Promise<void> {
|
|
loading.value = true;
|
|
const { data } = await axios.get<OAuthClient[]>('/web-api/clients');
|
|
clients.value = data;
|
|
loading.value = false;
|
|
}
|
|
|
|
async function createClient(): Promise<void> {
|
|
creating.value = true;
|
|
errors.value = {};
|
|
newSecret.value = null;
|
|
|
|
try {
|
|
const payload = {
|
|
name: form.name,
|
|
grant_type: form.grant_type,
|
|
confidential: form.grant_type === 'client_credentials' ? true : form.confidential,
|
|
redirect_uris: form.redirect_uris
|
|
? form.redirect_uris.split(',').map((u) => u.trim()).filter(Boolean)
|
|
: [],
|
|
};
|
|
|
|
const { data } = await axios.post<{ client: OAuthClient; plain_secret: string | null }>('/web-api/clients', payload);
|
|
|
|
if (data.plain_secret) {
|
|
newSecret.value = { name: data.client.name, secret: data.plain_secret, id: data.client.id };
|
|
}
|
|
|
|
form.name = '';
|
|
form.redirect_uris = '';
|
|
await load();
|
|
} catch (e: any) {
|
|
errors.value = e.response?.data?.errors ?? {};
|
|
} finally {
|
|
creating.value = false;
|
|
}
|
|
}
|
|
|
|
async function revoke(client: OAuthClient): Promise<void> {
|
|
if (!confirm(t('clients.revokeConfirm', { name: client.name }))) return;
|
|
|
|
await axios.delete(`/web-api/clients/${client.id}`);
|
|
await load();
|
|
}
|
|
|
|
async function rotateSecret(client: OAuthClient): Promise<void> {
|
|
if (!confirm(t('clients.rotateSecretConfirm', { name: client.name }))) return;
|
|
|
|
try {
|
|
const { data } = await axios.post<{ plain_secret: string; previous_secret_expires_at: string }>(
|
|
`/web-api/clients/${client.id}/rotate-secret`,
|
|
);
|
|
newSecret.value = {
|
|
name: client.name,
|
|
secret: data.plain_secret,
|
|
id: client.id,
|
|
previousSecretExpiresAt: data.previous_secret_expires_at,
|
|
};
|
|
} catch (e: any) {
|
|
alert(e.response?.data?.message ?? t('clients.rotateSecretFailed'));
|
|
}
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
return new Date(iso).toLocaleString(locale.value, { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function grantLabel(grantTypes: string[]): string {
|
|
if (grantTypes.includes('authorization_code')) return t('clients.grantAuthCode');
|
|
if (grantTypes.includes('client_credentials')) return t('clients.grantClientCredentials');
|
|
if (grantTypes.includes('password')) return t('clients.grantPassword');
|
|
return grantTypes.join(', ');
|
|
}
|
|
|
|
async function toggleWebhooks(client: OAuthClient): Promise<void> {
|
|
if (expandedClientId.value === client.id) {
|
|
expandedClientId.value = null;
|
|
return;
|
|
}
|
|
|
|
expandedClientId.value = client.id;
|
|
webhookForm.url = '';
|
|
webhookForm.events = [];
|
|
webhookErrors.value = {};
|
|
newWebhookSecret.value = null;
|
|
historyWebhookId.value = null;
|
|
await loadWebhooks(client);
|
|
}
|
|
|
|
async function loadWebhooks(client: OAuthClient): Promise<void> {
|
|
const { data } = await axios.get<WebhookEndpoint[]>(`/web-api/clients/${client.id}/webhooks`);
|
|
webhooks.value = data;
|
|
}
|
|
|
|
async function createWebhook(client: OAuthClient): Promise<void> {
|
|
webhookCreating.value = true;
|
|
webhookErrors.value = {};
|
|
|
|
try {
|
|
const { data } = await axios.post<WebhookEndpoint & { secret: string }>(`/web-api/clients/${client.id}/webhooks`, webhookForm);
|
|
newWebhookSecret.value = { url: data.url, secret: data.secret };
|
|
webhookForm.url = '';
|
|
webhookForm.events = [];
|
|
await loadWebhooks(client);
|
|
} catch (e: any) {
|
|
webhookErrors.value = e.response?.data?.errors ?? {};
|
|
} finally {
|
|
webhookCreating.value = false;
|
|
}
|
|
}
|
|
|
|
async function toggleWebhookActive(client: OAuthClient, webhook: WebhookEndpoint): Promise<void> {
|
|
await axios.put(`/web-api/clients/${client.id}/webhooks/${webhook.id}`, { active: !webhook.active });
|
|
await loadWebhooks(client);
|
|
}
|
|
|
|
async function deleteWebhook(client: OAuthClient, webhook: WebhookEndpoint): Promise<void> {
|
|
if (!confirm(t('clients.webhookDeleteConfirm', { url: webhook.url }))) return;
|
|
|
|
await axios.delete(`/web-api/clients/${client.id}/webhooks/${webhook.id}`);
|
|
await loadWebhooks(client);
|
|
}
|
|
|
|
async function toggleHistory(client: OAuthClient, webhook: WebhookEndpoint): Promise<void> {
|
|
if (historyWebhookId.value === webhook.id) {
|
|
historyWebhookId.value = null;
|
|
return;
|
|
}
|
|
|
|
historyWebhookId.value = webhook.id;
|
|
deliveriesPage.value = 1;
|
|
await loadDeliveries(client, webhook);
|
|
}
|
|
|
|
async function loadDeliveries(client: OAuthClient, webhook: WebhookEndpoint): Promise<void> {
|
|
deliveriesLoading.value = true;
|
|
const { data } = await axios.get<Paginated<WebhookDelivery>>(
|
|
`/web-api/clients/${client.id}/webhooks/${webhook.id}/deliveries`,
|
|
{ params: { page: deliveriesPage.value } },
|
|
);
|
|
deliveries.value = data.data;
|
|
deliveriesLastPage.value = data.last_page;
|
|
deliveriesLoading.value = false;
|
|
}
|
|
|
|
function goToDeliveriesPage(client: OAuthClient, webhook: WebhookEndpoint, next: number): void {
|
|
if (next < 1 || next > deliveriesLastPage.value) return;
|
|
deliveriesPage.value = next;
|
|
loadDeliveries(client, webhook);
|
|
}
|
|
|
|
async function retryDelivery(client: OAuthClient, webhook: WebhookEndpoint, delivery: WebhookDelivery): Promise<void> {
|
|
retryingDeliveryId.value = delivery.id;
|
|
try {
|
|
await axios.post(`/web-api/clients/${client.id}/webhooks/${webhook.id}/deliveries/${delivery.id}/retry`);
|
|
await loadDeliveries(client, webhook);
|
|
} finally {
|
|
retryingDeliveryId.value = null;
|
|
}
|
|
}
|
|
|
|
function deliveryStatusClass(delivery: WebhookDelivery): string {
|
|
if (delivery.delivered_at) return 'badge--active';
|
|
if (delivery.response_status) return 'badge--danger';
|
|
return 'badge--inactive';
|
|
}
|
|
|
|
function deliveryStatusLabel(delivery: WebhookDelivery): string {
|
|
if (delivery.response_status) return String(delivery.response_status);
|
|
return t('clients.pending');
|
|
}
|
|
|
|
function eventLabel(event: string): string {
|
|
return event === 'token.revoked' ? t('clients.eventTokenRevoked') : t('clients.eventUserDeactivated');
|
|
}
|
|
|
|
onMounted(load);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1 class="page-title">{{ t('clients.title') }}</h1>
|
|
<p class="page-subtitle">{{ t('clients.subtitle') }}</p>
|
|
|
|
<div v-if="newSecret" class="banner banner--warning">
|
|
<p class="banner__title">{{ t('clients.secretWarning') }}</p>
|
|
<p class="banner__line"><strong>{{ t('clients.clientIdLabel') }}</strong> <code class="banner__code">{{ newSecret.id }}</code></p>
|
|
<p class="banner__line"><strong>{{ t('clients.clientSecretLabel') }}</strong> <code class="banner__code">{{ newSecret.secret }}</code></p>
|
|
<p v-if="newSecret.previousSecretExpiresAt" class="banner__line">
|
|
{{ t('clients.previousSecretStillValid', { date: formatDate(newSecret.previousSecretExpiresAt) }) }}
|
|
</p>
|
|
<button class="banner__close" @click="newSecret = null">{{ t('common.close') }}</button>
|
|
</div>
|
|
|
|
<form class="card clients__form" @submit.prevent="createClient">
|
|
<h2 class="card__title clients__form-title">{{ t('clients.newClient') }}</h2>
|
|
|
|
<div class="field">
|
|
<label class="field__label">{{ t('clients.name') }}</label>
|
|
<input v-model="form.name" required class="field__input" />
|
|
<p v-if="errors.name" class="field__error">{{ errors.name[0] }}</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field__label">{{ t('clients.grantType') }}</label>
|
|
<select v-model="form.grant_type" class="field__select">
|
|
<option value="authorization_code">{{ t('clients.grantAuthCode') }}</option>
|
|
<option value="client_credentials">{{ t('clients.grantClientCredentials') }}</option>
|
|
<option value="password">{{ t('clients.grantPassword') }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div v-if="form.grant_type === 'authorization_code'" class="field clients__form-wide">
|
|
<label class="field__label">{{ t('clients.redirectUris') }}</label>
|
|
<input v-model="form.redirect_uris" placeholder="https://mi-app.com/callback" class="field__input" />
|
|
<p v-if="errors.redirect_uris" class="field__error">{{ errors.redirect_uris[0] }}</p>
|
|
</div>
|
|
|
|
<div v-if="form.grant_type === 'authorization_code'" class="field__checkbox-row">
|
|
<input id="confidential" type="checkbox" v-model="form.confidential" class="field__checkbox" />
|
|
<label for="confidential">{{ t('clients.confidentialLabel') }}</label>
|
|
</div>
|
|
|
|
<div class="clients__form-wide">
|
|
<button type="submit" :disabled="creating" class="btn btn--primary">
|
|
{{ creating ? t('common.creating') : t('clients.create') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="clients__list">
|
|
<p v-if="loading" class="page-subtitle">{{ t('common.loading') }}</p>
|
|
<p v-else-if="!clients.length" class="page-subtitle">{{ t('clients.empty') }}</p>
|
|
|
|
<template v-for="client in clients" :key="client.id">
|
|
<div class="card clients__item">
|
|
<div>
|
|
<p class="card__title">{{ client.name }}</p>
|
|
<p class="card__subtitle">{{ grantLabel(client.grant_types) }}</p>
|
|
<p class="clients__item-meta">{{ t('clients.clientIdShort') }}: {{ client.id }}</p>
|
|
<p v-if="client.redirect_uris?.length" class="clients__item-meta">
|
|
{{ t('clients.redirectLabel') }}: {{ client.redirect_uris.join(', ') }}
|
|
</p>
|
|
</div>
|
|
<div class="clients__item-actions">
|
|
<button @click="toggleWebhooks(client)" class="link">
|
|
{{ expandedClientId === client.id ? t('clients.hideWebhooks') : t('clients.webhooksTitle') }}
|
|
</button>
|
|
<button @click="rotateSecret(client)" class="link">{{ t('clients.rotateSecret') }}</button>
|
|
<button @click="revoke(client)" class="link link--danger">{{ t('clients.revoke') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="expandedClientId === client.id" class="card clients__webhooks">
|
|
<h3 class="card__title">{{ t('clients.webhooksTitle') }}</h3>
|
|
<p class="clients__item-meta">{{ t('clients.webhooksDesc') }}</p>
|
|
|
|
<div v-if="newWebhookSecret" class="banner banner--warning">
|
|
<p class="banner__title">{{ t('clients.webhookSecretWarning') }}</p>
|
|
<p class="banner__line"><strong>{{ t('clients.webhookSecretLabel') }}</strong> <code class="banner__code">{{ newWebhookSecret.secret }}</code></p>
|
|
<button class="banner__close" @click="newWebhookSecret = null">{{ t('common.close') }}</button>
|
|
</div>
|
|
|
|
<ul v-if="webhooks.length" class="clients__webhook-list">
|
|
<template v-for="webhook in webhooks" :key="webhook.id">
|
|
<li class="clients__webhook-row">
|
|
<div>
|
|
<p class="clients__webhook-url">{{ webhook.url }}</p>
|
|
<p class="clients__item-meta">
|
|
{{ webhook.events.map(eventLabel).join(', ') }}
|
|
<span v-if="!webhook.active"> · {{ t('clients.webhookPaused') }}</span>
|
|
<span v-if="webhook.last_delivery">
|
|
· {{ t('clients.lastDelivery') }}: {{ webhook.last_delivery.response_status ?? t('clients.pending') }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="clients__webhook-actions">
|
|
<button @click="toggleHistory(client, webhook)" class="link">
|
|
{{ historyWebhookId === webhook.id ? t('clients.hideHistory') : t('clients.viewHistory') }}
|
|
</button>
|
|
<button @click="toggleWebhookActive(client, webhook)" class="link">
|
|
{{ webhook.active ? t('clients.pause') : t('clients.resume') }}
|
|
</button>
|
|
<button @click="deleteWebhook(client, webhook)" class="link link--danger">{{ t('common.delete') }}</button>
|
|
</div>
|
|
</li>
|
|
|
|
<li v-if="historyWebhookId === webhook.id" class="clients__delivery-history">
|
|
<p v-if="deliveriesLoading" class="clients__item-meta">{{ t('common.loading') }}</p>
|
|
<p v-else-if="!deliveries.length" class="clients__item-meta">{{ t('clients.noDeliveries') }}</p>
|
|
|
|
<ul v-else class="clients__delivery-list">
|
|
<li v-for="delivery in deliveries" :key="delivery.id" class="clients__delivery-row">
|
|
<div class="clients__delivery-info">
|
|
<span class="badge" :class="deliveryStatusClass(delivery)">
|
|
<span class="badge__dot"></span>
|
|
{{ deliveryStatusLabel(delivery) }}
|
|
</span>
|
|
<span class="clients__item-meta">
|
|
{{ eventLabel(delivery.event) }} · {{ formatDate(delivery.created_at) }} ·
|
|
{{ t('clients.attempts', { count: delivery.attempts }) }}
|
|
</span>
|
|
</div>
|
|
<button
|
|
v-if="!delivery.delivered_at"
|
|
@click="retryDelivery(client, webhook, delivery)"
|
|
:disabled="retryingDeliveryId === delivery.id"
|
|
class="link"
|
|
>
|
|
{{ retryingDeliveryId === delivery.id ? t('clients.retrying') : t('clients.retryDelivery') }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div v-if="deliveries.length" class="clients__delivery-pager">
|
|
<button class="link" :disabled="deliveriesPage <= 1" @click="goToDeliveriesPage(client, webhook, deliveriesPage - 1)">
|
|
{{ t('auditLog.prevPage') }}
|
|
</button>
|
|
<span class="clients__item-meta">{{ deliveriesPage }} / {{ deliveriesLastPage }}</span>
|
|
<button class="link" :disabled="deliveriesPage >= deliveriesLastPage" @click="goToDeliveriesPage(client, webhook, deliveriesPage + 1)">
|
|
{{ t('auditLog.nextPage') }}
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<p v-else class="clients__item-meta">{{ t('clients.noWebhooks') }}</p>
|
|
|
|
<form class="clients__webhook-form" @submit.prevent="createWebhook(client)">
|
|
<div class="field">
|
|
<label class="field__label">{{ t('clients.webhookUrl') }}</label>
|
|
<input v-model="webhookForm.url" type="url" required placeholder="https://mi-app.com/webhooks/iam" class="field__input" />
|
|
<p v-if="webhookErrors.url" class="field__error">{{ webhookErrors.url[0] }}</p>
|
|
</div>
|
|
|
|
<div class="field__checkbox-row" v-for="event in WEBHOOK_EVENTS" :key="event">
|
|
<input :id="`event-${client.id}-${event}`" type="checkbox" :value="event" v-model="webhookForm.events" class="field__checkbox" />
|
|
<label :for="`event-${client.id}-${event}`">{{ eventLabel(event) }}</label>
|
|
</div>
|
|
<p v-if="webhookErrors.events" class="field__error">{{ webhookErrors.events[0] }}</p>
|
|
|
|
<button type="submit" :disabled="webhookCreating" class="btn btn--dark">
|
|
{{ webhookCreating ? t('common.creating') : t('clients.addWebhook') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.clients__form {
|
|
margin-top: 1.5rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.clients__form-title {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.clients__form-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.clients__list {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.clients__item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.clients__item-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.clients__item-meta {
|
|
margin-top: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.clients__webhooks {
|
|
margin-top: -0.5rem;
|
|
}
|
|
|
|
.clients__webhook-list {
|
|
margin-top: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.clients__webhook-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.clients__webhook-url {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.clients__webhook-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.clients__delivery-history {
|
|
border: 1px solid var(--color-border);
|
|
border-top: none;
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
margin-top: -0.5rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.clients__delivery-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.clients__delivery-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.clients__delivery-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.clients__delivery-pager {
|
|
margin-top: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.clients__webhook-form {
|
|
margin-top: 1rem;
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.clients__form {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|