new funcionality

resources/js/pages/Clients.vue

@@ -2,14 +2,14 @@
 import { onMounted, reactive, ref } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
-import type { OAuthClient } from '../types/models';
+import type { OAuthClient, Paginated, WebhookDelivery, WebhookEndpoint } from '../types/models';
 
-const { t } = useI18n();
+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 } | null>(null);
+const newSecret = ref<{ name: string; secret: string; id: string; previousSecretExpiresAt?: string } | null>(null);
 
 const form = reactive({
     name: '',
@@ -19,6 +19,22 @@ const form = reactive({
 });
 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');
@@ -64,6 +80,28 @@ async function revoke(client: OAuthClient): Promise<void> {
     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');
@@ -71,6 +109,108 @@ function grantLabel(grantTypes: string[]): string {
     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>
 
@@ -83,6 +223,9 @@ onMounted(load);
             <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>
 
@@ -126,17 +269,119 @@ onMounted(load);
             <p v-if="loading" class="page-subtitle">{{ t('common.loading') }}</p>
             <p v-else-if="!clients.length" class="page-subtitle">{{ t('clients.empty') }}</p>
 
-            <div v-for="client in clients" :key="client.id" 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>
+            <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>
-                <button @click="revoke(client)" class="link link--danger">{{ t('clients.revoke') }}</button>
-            </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>
@@ -170,12 +415,99 @@ onMounted(load);
     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;