new funcionality

resources/js/pages/Authorize.vue

@@ -1,12 +1,40 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import AppLogo from '../components/AppLogo.vue';
 
 const { t } = useI18n();
 
 const data = window.__OAUTH_AUTHORIZE__ ?? null;
 const approveForm = ref<HTMLFormElement | null>(null);
 const denyForm = ref<HTMLFormElement | null>(null);
+
+function logAuthorizationEvent(outcome: 'attempted' | 'approved' | 'denied'): Promise<void> {
+    if (!data) {
+        return Promise.resolve();
+    }
+
+    return axios
+        .post('/web-api/oauth/authorize-events', {
+            client_id: data.client.id,
+            outcome,
+            scopes: data.scopes.map((scope) => scope.id),
+        })
+        .then(() => undefined)
+        .catch(() => {
+            // Analíticas best-effort: nunca debe bloquear el flujo real de OAuth.
+        });
+}
+
+onMounted(() => {
+    logAuthorizationEvent('attempted');
+});
+
+async function submitWithOutcome(outcome: 'approved' | 'denied', form: HTMLFormElement | null): Promise<void> {
+    await logAuthorizationEvent(outcome);
+    form?.submit();
+}
 </script>
 
 <template>
@@ -15,7 +43,7 @@ const denyForm = ref<HTMLFormElement | null>(null);
 
         <div class="auth-card auth-card--wide">
             <template v-if="data">
-                <span class="auth-card__logo">O2</span>
+                <AppLogo class="auth-card__logo" />
                 <h1 class="auth-card__title">{{ t('authorize.title') }}</h1>
                 <p class="auth-card__subtitle">
                     <i18n-t keypath="authorize.wantsAccess" tag="span">
@@ -35,7 +63,7 @@ const denyForm = ref<HTMLFormElement | null>(null);
                 </ul>
 
                 <div class="auth-card__actions">
-                    <form ref="approveForm" method="POST" action="/oauth/authorize">
+                    <form ref="approveForm" method="POST" action="/oauth/authorize" @submit.prevent="submitWithOutcome('approved', approveForm)">
                         <input type="hidden" name="_token" :value="data.csrfToken" />
                         <input type="hidden" name="auth_token" :value="data.authToken" />
                         <button type="submit" class="btn btn--primary btn--pill btn--full">
@@ -43,7 +71,7 @@ const denyForm = ref<HTMLFormElement | null>(null);
                         </button>
                     </form>
 
-                    <form ref="denyForm" method="POST" action="/oauth/authorize">
+                    <form ref="denyForm" method="POST" action="/oauth/authorize" @submit.prevent="submitWithOutcome('denied', denyForm)">
                         <input type="hidden" name="_token" :value="data.csrfToken" />
                         <input type="hidden" name="_method" value="DELETE" />
                         <input type="hidden" name="auth_token" :value="data.authToken" />