99 lines
4.0 KiB
Vue
99 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
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>
|
|
<div class="auth-page">
|
|
<div class="auth-page__glow"></div>
|
|
|
|
<div class="auth-card auth-card--wide">
|
|
<template v-if="data">
|
|
<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">
|
|
<template #client><strong>{{ data.client.name }}</strong></template>
|
|
<template #email>{{ data.user.email }}</template>
|
|
</i18n-t>
|
|
</p>
|
|
|
|
<ul class="auth-card__scopes">
|
|
<li v-for="scope in data.scopes" :key="scope.id" class="auth-card__scope">
|
|
<span class="auth-card__scope-check">✓</span>
|
|
{{ scope.description }}
|
|
</li>
|
|
<li v-if="!data.scopes.length" class="auth-card__scope">
|
|
{{ t('authorize.noScopes') }}
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="auth-card__actions">
|
|
<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">
|
|
{{ t('authorize.approve') }}
|
|
</button>
|
|
</form>
|
|
|
|
<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" />
|
|
<button type="submit" class="btn btn--secondary btn--pill btn--full">
|
|
{{ t('authorize.cancel') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<h1 class="auth-card__title">{{ t('authorize.notFoundTitle') }}</h1>
|
|
<p class="auth-card__subtitle">
|
|
<i18n-t keypath="authorize.notFoundBody" tag="span">
|
|
<template #path><code>/oauth/authorize</code></template>
|
|
</i18n-t>
|
|
</p>
|
|
<p class="auth-card__footer">
|
|
<router-link to="/" class="link">{{ t('authorize.goDashboard') }}</router-link>
|
|
</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|