pigui/oauth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new funcionality

Browse Source
This commit is contained in:
Josep
2026-07-27 17:20:02 +02:00
parent c2b5291a74
commit c5ce8a7a36
101 changed files with 6889 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/pages/Authorize.vue
View File

@@ -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" />

358
resources/js/pages/Clients.vue
View File

@@ -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;

5
resources/js/pages/Dashboard.vue
View File

@@ -27,6 +27,11 @@ const { t } = useI18n();
<p class="card__subtitle">{{ t('dashboard.appsDesc') }}</p>
</router-link>
<router-link to="/security" class="card card--interactive">
<h2 class="card__title">{{ t('dashboard.securityTitle') }}</h2>
<p class="card__subtitle">{{ t('dashboard.securityDesc') }}</p>
</router-link>
<router-link v-if="auth.isAdmin" to="/admin/users" class="card card--interactive">
<h2 class="card__title">{{ t('dashboard.usersTitle') }}</h2>
<p class="card__subtitle">{{ t('dashboard.usersDesc') }}</p>

63
resources/js/pages/ForgotPassword.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import AppLogo from '../components/AppLogo.vue';
const { t } = useI18n();
const form = reactive({ email: '' });
const errors = ref<Record<string, string[]>>({});
const loading = ref(false);
const sent = ref(false);
async function submit(): Promise<void> {
loading.value = true;
errors.value = {};
try {
await axios.post('/web-api/forgot-password', form);
sent.value = true;
} catch (e: any) {
errors.value = e.response?.data?.errors ?? {};
} finally {
loading.value = false;
}
}
</script>
<template>
<div class="auth-page">
<div class="auth-page__glow"></div>
<div class="auth-card">
<AppLogo class="auth-card__logo" />
<template v-if="!sent">
<h1 class="auth-card__title">{{ t('forgotPassword.title') }}</h1>
<p class="auth-card__subtitle">{{ t('forgotPassword.subtitle') }}</p>
<form class="auth-card__form" @submit.prevent="submit">
<div class="field">
<label class="field__label">{{ t('forgotPassword.email') }}</label>
<input v-model="form.email" type="email" required autofocus class="field__input" />
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
</div>
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
{{ loading ? t('forgotPassword.submitting') : t('forgotPassword.submit') }}
</button>
</form>
</template>
<template v-else>
<h1 class="auth-card__title">{{ t('forgotPassword.title') }}</h1>
<p class="auth-card__subtitle">{{ t('forgotPassword.sent') }}</p>
</template>
<p class="auth-card__footer">
<router-link to="/login" class="link">{{ t('forgotPassword.backToLogin') }}</router-link>
</p>
</div>
</div>
</template>

107
resources/js/pages/Login.vue
View File

@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';
import AppLogo from '../components/AppLogo.vue';
const auth = useAuthStore();
const route = useRoute();
@@ -10,28 +11,59 @@ const router = useRouter();
const { t } = useI18n();
const form = reactive({ email: '', password: '' });
const code = ref('');
const errors = ref<Record<string, string[]>>({});
const loading = ref(false);
const step = ref<'credentials' | 'two_factor'>('credentials');
function redirectAfterLogin(intended: string | null): void {
if (intended) {
window.location.href = intended;
return;
}
router.push((route.query.redirect as string) || { name: 'dashboard' });
}
async function submit(): Promise<void> {
loading.value = true;
errors.value = {};
try {
const intended = await auth.login(form);
const result = await auth.login(form);
if (intended) {
window.location.href = intended;
if (result.twoFactor) {
step.value = 'two_factor';
return;
}
router.push((route.query.redirect as string) || { name: 'dashboard' });
redirectAfterLogin(result.intended);
} catch (e: any) {
errors.value = e.response?.data?.errors ?? { email: [t('login.invalidCredentials')] };
} finally {
loading.value = false;
}
}
async function submitTwoFactor(): Promise<void> {
loading.value = true;
errors.value = {};
try {
const intended = await auth.loginTwoFactor(code.value);
redirectAfterLogin(intended);
} catch (e: any) {
errors.value = e.response?.data?.errors ?? { code: [t('login.invalidTwoFactorCode')] };
} finally {
loading.value = false;
}
}
function backToCredentials(): void {
step.value = 'credentials';
code.value = '';
errors.value = {};
}
</script>
<template>
@@ -39,31 +71,56 @@ async function submit(): Promise<void> {
<div class="auth-page__glow"></div>
<div class="auth-card">
<span class="auth-card__logo">O2</span>
<h1 class="auth-card__title">{{ t('login.title') }}</h1>
<p class="auth-card__subtitle">{{ t('login.subtitle') }}</p>
<AppLogo class="auth-card__logo" />
<form class="auth-card__form" @submit.prevent="submit">
<div class="field">
<label class="field__label">{{ t('login.email') }}</label>
<input v-model="form.email" type="email" required class="field__input" />
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
</div>
<template v-if="step === 'credentials'">
<h1 class="auth-card__title">{{ t('login.title') }}</h1>
<p class="auth-card__subtitle">{{ t('login.subtitle') }}</p>
<div class="field">
<label class="field__label">{{ t('login.password') }}</label>
<input v-model="form.password" type="password" required class="field__input" />
</div>
<form class="auth-card__form" @submit.prevent="submit">
<div class="field">
<label class="field__label">{{ t('login.email') }}</label>
<input v-model="form.email" type="email" required class="field__input" />
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
</div>
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
{{ loading ? t('login.submitting') : t('login.submit') }}
</button>
</form>
<div class="field">
<label class="field__label">{{ t('login.password') }}</label>
<input v-model="form.password" type="password" required class="field__input" />
<router-link to="/forgot-password" class="field__hint link">{{ t('login.forgotPassword') }}</router-link>
</div>
<p class="auth-card__footer">
{{ t('login.noAccount') }}
<router-link to="/register" class="link">{{ t('login.signUp') }}</router-link>
</p>
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
{{ loading ? t('login.submitting') : t('login.submit') }}
</button>
</form>
<p class="auth-card__footer">
{{ t('login.noAccount') }}
<router-link to="/register" class="link">{{ t('login.signUp') }}</router-link>
</p>
</template>
<template v-else>
<h1 class="auth-card__title">{{ t('login.twoFactorTitle') }}</h1>
<p class="auth-card__subtitle">{{ t('login.twoFactorSubtitle') }}</p>
<form class="auth-card__form" @submit.prevent="submitTwoFactor">
<div class="field">
<label class="field__label">{{ t('login.twoFactorCode') }}</label>
<input v-model="code" required autofocus autocomplete="one-time-code" class="field__input" />
<p v-if="errors.code" class="field__error">{{ errors.code[0] }}</p>
</div>
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
{{ loading ? t('login.submitting') : t('login.twoFactorSubmit') }}
</button>
</form>
<p class="auth-card__footer">
<button type="button" @click="backToCredentials" class="link">{{ t('login.backToLogin') }}</button>
</p>
</template>
</div>
</div>
</template>

5
resources/js/pages/Register.vue
View File

@@ -3,6 +3,7 @@ import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';
import AppLogo from '../components/AppLogo.vue';
const auth = useAuthStore();
const router = useRouter();
@@ -49,7 +50,7 @@ async function submit(): Promise<void> {
<div class="auth-card">
<template v-if="registered">
<span class="auth-card__logo">O2</span>
<AppLogo class="auth-card__logo" />
<h1 class="auth-card__title">{{ t('register.pendingTitle') }}</h1>
<p class="auth-card__subtitle">{{ t('register.pendingBody') }}</p>
@@ -59,7 +60,7 @@ async function submit(): Promise<void> {
</template>
<template v-else>
<span class="auth-card__logo">O2</span>
<AppLogo class="auth-card__logo" />
<h1 class="auth-card__title">{{ t('register.title') }}</h1>
<p v-if="isFirstUser" class="auth-card__banner">{{ t('register.firstUserBanner') }}</p>

81
resources/js/pages/ResetPassword.vue Normal file
View File

@@ -0,0 +1,81 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import AppLogo from '../components/AppLogo.vue';
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const token = String(route.query.token ?? '');
const email = String(route.query.email ?? '');
const missingParams = !token || !email;
const form = reactive({ password: '', password_confirmation: '' });
const errors = ref<Record<string, string[]>>({});
const loading = ref(false);
const success = ref(false);
async function submit(): Promise<void> {
loading.value = true;
errors.value = {};
try {
await axios.post('/web-api/reset-password', { ...form, token, email });
success.value = true;
} catch (e: any) {
errors.value = e.response?.data?.errors ?? {};
} finally {
loading.value = false;
}
}
</script>
<template>
<div class="auth-page">
<div class="auth-page__glow"></div>
<div class="auth-card">
<AppLogo class="auth-card__logo" />
<template v-if="missingParams">
<h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
<p class="field__error">{{ t('resetPassword.missingParams') }}</p>
</template>
<template v-else-if="!success">
<h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
<p class="auth-card__subtitle">{{ t('resetPassword.subtitle') }}</p>
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
<form class="auth-card__form" @submit.prevent="submit">
<div class="field">
<label class="field__label">{{ t('resetPassword.password') }}</label>
<input v-model="form.password" type="password" required minlength="8" autofocus class="field__input" />
<p v-if="errors.password" class="field__error">{{ errors.password[0] }}</p>
</div>
<div class="field">
<label class="field__label">{{ t('resetPassword.passwordConfirm') }}</label>
<input v-model="form.password_confirmation" type="password" required minlength="8" class="field__input" />
</div>
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
{{ loading ? t('resetPassword.submitting') : t('resetPassword.submit') }}
</button>
</form>
</template>
<template v-else>
<h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
<p class="auth-card__subtitle">{{ t('resetPassword.success') }}</p>
<button type="button" class="btn btn--primary btn--pill btn--full" @click="router.push({ name: 'login' })">
{{ t('resetPassword.goToLogin') }}
</button>
</template>
</div>
</div>
</template>

259
resources/js/pages/Security.vue Normal file
View File

@@ -0,0 +1,259 @@
<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import QRCode from 'qrcode';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';
const auth = useAuthStore();
const { t } = useI18n();
const loading = ref(false);
const errors = ref<Record<string, string[]>>({});
const settingUp = ref(false);
const otpauthUrl = ref('');
const secret = ref('');
const qrDataUrl = ref('');
const confirmCode = ref('');
const recoveryCodes = ref<string[] | null>(null);
const showDisableForm = ref(false);
const showRegenerateForm = ref(false);
const password = ref('');
async function startSetup(): Promise<void> {
loading.value = true;
errors.value = {};
try {
const { data } = await axios.post<{ secret: string; otpauth_url: string }>('/web-api/2fa/setup');
secret.value = data.secret;
otpauthUrl.value = data.otpauth_url;
qrDataUrl.value = await QRCode.toDataURL(data.otpauth_url);
settingUp.value = true;
} catch (e: any) {
alert(e.response?.data?.message ?? t('security.setupFailed'));
} finally {
loading.value = false;
}
}
async function confirmSetup(): Promise<void> {
loading.value = true;
errors.value = {};
try {
const { data } = await axios.post<{ recovery_codes: string[] }>('/web-api/2fa/confirm', { code: confirmCode.value });
recoveryCodes.value = data.recovery_codes;
cancelSetup();
await auth.fetchUser();
} catch (e: any) {
errors.value = e.response?.data?.errors ?? { code: [t('security.invalidCode')] };
} finally {
loading.value = false;
}
}
function cancelSetup(): void {
settingUp.value = false;
secret.value = '';
otpauthUrl.value = '';
qrDataUrl.value = '';
confirmCode.value = '';
errors.value = {};
}
async function disable(): Promise<void> {
loading.value = true;
errors.value = {};
try {
await axios.post('/web-api/2fa/disable', { password: password.value });
password.value = '';
showDisableForm.value = false;
recoveryCodes.value = null;
await auth.fetchUser();
} catch (e: any) {
errors.value = e.response?.data?.errors ?? { password: [t('security.invalidPassword')] };
} finally {
loading.value = false;
}
}
async function regenerateRecoveryCodes(): Promise<void> {
loading.value = true;
errors.value = {};
try {
const { data } = await axios.post<{ recovery_codes: string[] }>('/web-api/2fa/recovery-codes', { password: password.value });
recoveryCodes.value = data.recovery_codes;
password.value = '';
showRegenerateForm.value = false;
} catch (e: any) {
errors.value = e.response?.data?.errors ?? { password: [t('security.invalidPassword')] };
} finally {
loading.value = false;
}
}
</script>
<template>
<div class="security">
<div class="page-header">
<div>
<h1 class="page-title">{{ t('security.title') }}</h1>
<p class="page-subtitle">{{ t('security.subtitle') }}</p>
</div>
</div>
<div v-if="recoveryCodes" class="banner banner--warning">
<p class="banner__title">{{ t('security.recoveryCodesTitle') }}</p>
<p class="banner__line">{{ t('security.recoveryCodesWarning') }}</p>
<ul class="security__codes">
<li v-for="rc in recoveryCodes" :key="rc"><code class="banner__code">{{ rc }}</code></li>
</ul>
<button class="banner__close" @click="recoveryCodes = null">{{ t('common.close') }}</button>
</div>
<div v-if="auth.user?.two_factor_enabled && !settingUp" class="card security__card">
<p class="security__status security__status--on">{{ t('security.enabled') }}</p>
<p class="security__desc">{{ t('security.enabledDesc') }}</p>
<div class="security__actions">
<button
@click="showRegenerateForm = !showRegenerateForm; showDisableForm = false; errors = {}"
type="button"
class="btn btn--secondary"
>
{{ t('security.regenerateCodes') }}
</button>
<button
@click="showDisableForm = !showDisableForm; showRegenerateForm = false; errors = {}"
type="button"
class="btn btn--secondary"
>
{{ t('security.disable') }}
</button>
</div>
<form v-if="showRegenerateForm" class="security__password-form" @submit.prevent="regenerateRecoveryCodes">
<div class="field">
<label class="field__label">{{ t('security.confirmPassword') }}</label>
<input v-model="password" type="password" required class="field__input" />
<p v-if="errors.password" class="field__error">{{ errors.password[0] }}</p>
</div>
<button type="submit" :disabled="loading" class="btn btn--primary">{{ t('security.confirm') }}</button>
</form>
<form v-if="showDisableForm" class="security__password-form" @submit.prevent="disable">
<div class="field">
<label class="field__label">{{ t('security.confirmPassword') }}</label>
<input v-model="password" type="password" required class="field__input" />
<p v-if="errors.password" class="field__error">{{ errors.password[0] }}</p>
</div>
<button type="submit" :disabled="loading" class="btn btn--primary">{{ t('security.disableConfirm') }}</button>
</form>
</div>
<div v-else-if="!settingUp" class="card security__card">
<p class="security__status security__status--off">{{ t('security.disabled') }}</p>
<p class="security__desc">{{ t('security.disabledDesc') }}</p>
<button @click="startSetup" :disabled="loading" type="button" class="btn btn--primary">{{ t('security.enable') }}</button>
</div>
<div v-else class="card security__card">
<h3 class="card__title">{{ t('security.setupTitle') }}</h3>
<p class="security__desc">{{ t('security.setupDesc') }}</p>
<img :src="qrDataUrl" :alt="t('security.qrAlt')" class="security__qr" />
<p class="security__manual">
{{ t('security.manualEntry') }} <code class="banner__code">{{ secret }}</code>
</p>
<form class="security__confirm-form" @submit.prevent="confirmSetup">
<div class="field">
<label class="field__label">{{ t('security.enterCode') }}</label>
<input v-model="confirmCode" required autofocus autocomplete="one-time-code" class="field__input" />
<p v-if="errors.code" class="field__error">{{ errors.code[0] }}</p>
</div>
<div class="security__actions">
<button type="submit" :disabled="loading" class="btn btn--primary">{{ t('security.confirm') }}</button>
<button type="button" @click="cancelSetup" class="btn btn--secondary">{{ t('common.cancel') }}</button>
</div>
</form>
</div>
</div>
</template>
<style scoped>
.security__card {
margin-top: 1.5rem;
max-width: 32rem;
}
.security__status {
font-weight: 600;
}
.security__status--on {
color: var(--color-accent-strong);
}
.security__status--off {
color: var(--color-text-secondary);
}
.security__desc {
margin-top: 0.25rem;
color: var(--color-text-secondary);
font-size: 0.875rem;
}
.security__actions {
margin-top: 1rem;
display: flex;
gap: 0.75rem;
}
.security__password-form {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.security__qr {
margin-top: 1rem;
width: 200px;
height: 200px;
border-radius: 0.5rem;
border: 1px solid var(--color-border);
}
.security__manual {
margin-top: 0.75rem;
font-size: 0.8125rem;
color: var(--color-text-secondary);
}
.security__confirm-form {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.security__codes {
margin-top: 0.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.375rem;
list-style: none;
padding: 0;
}
</style>

93
resources/js/pages/admin/Analytics.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import StatTile from '../../components/charts/StatTile.vue';
@@ -26,10 +26,28 @@ onMounted(load);
const appItems = computed(() => (summary.value?.logins_by_app ?? []).map((a) => ({ label: a.client_name, value: a.count })));
const userItems = computed(() => (summary.value?.top_users ?? []).map((u) => ({ label: u.name, value: u.count })));
const activeTokenItems = computed(() => (summary.value?.active_tokens_by_client ?? []).map((c) => ({ label: c.client_name, value: c.count })));
const scopeItems = computed(() => (summary.value?.scope_usage ?? []).map((s) => ({ label: s.description, value: s.count })));
function formatDateTime(iso: string): string {
return new Date(iso).toLocaleString(locale.value, { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
}
async function exportPdf(): Promise<void> {
const tableWasHidden = !showTable.value;
if (tableWasHidden) showTable.value = true;
await nextTick();
// Fuerza tema claro para la impresión (ahorra tinta, evita fondos oscuros
// recortados) y lo restaura después de que el usuario cierre el diálogo.
const wasDark = document.documentElement.classList.contains('dark');
document.documentElement.classList.remove('dark');
window.print();
if (wasDark) document.documentElement.classList.add('dark');
if (tableWasHidden) showTable.value = false;
}
</script>
<template>
@@ -40,12 +58,18 @@ function formatDateTime(iso: string): string {
<p class="page-subtitle">{{ t('analytics.subtitle') }}</p>
</div>
<!-- filtro de rango de fechas: una fila, arriba de todo, escopa todo lo de abajo -->
<select v-model.number="days" class="pill-select">
<option :value="7">{{ t('analytics.last7') }}</option>
<option :value="30">{{ t('analytics.last30') }}</option>
<option :value="90">{{ t('analytics.last90') }}</option>
</select>
<div class="analytics__header-controls no-print">
<!-- filtro de rango de fechas: una fila, arriba de todo, escopa todo lo de abajo -->
<select v-model.number="days" class="pill-select">
<option :value="7">{{ t('analytics.last7') }}</option>
<option :value="30">{{ t('analytics.last30') }}</option>
<option :value="90">{{ t('analytics.last90') }}</option>
</select>
<button v-if="summary" @click="exportPdf" type="button" class="btn btn--secondary">
{{ t('analytics.exportPdf') }}
</button>
</div>
</div>
<p v-if="loading && !summary" class="analytics__loading">{{ t('common.loading') }}</p>
@@ -56,6 +80,16 @@ function formatDateTime(iso: string): string {
<StatTile :label="t('analytics.activeSessions')" :value="summary.kpis.active_sessions" :hint="t('analytics.activeSessionsHint')" />
<StatTile :label="t('analytics.loginsToday')" :value="summary.kpis.logins_today" />
<StatTile :label="t('analytics.logins7d')" :value="summary.kpis.logins_7d" />
<StatTile
:label="t('analytics.loginFailureRate')"
:value="`${summary.kpis.login_failure_rate_7d}%`"
:hint="t('analytics.loginFailureRateHint', { count: summary.kpis.login_failures_7d })"
/>
<StatTile
:label="t('analytics.oauthApprovalRate')"
:value="`${summary.oauth_funnel.approval_rate}%`"
:hint="t('analytics.oauthApprovalRateHint', { approved: summary.oauth_funnel.approved, attempted: summary.oauth_funnel.attempted })"
/>
</div>
<div class="analytics__chart" :class="{ 'analytics__section--loading': loading }">
@@ -67,10 +101,43 @@ function formatDateTime(iso: string): string {
<BarList :title="t('analytics.topUsers')" :items="userItems" :empty-text="t('analytics.noUserActivity')" />
</div>
<div class="card analytics__funnel" :class="{ 'analytics__section--loading': loading }">
<h3 class="card__title">{{ t('analytics.funnelTitle') }}</h3>
<p v-if="!summary.oauth_funnel_by_client.length" class="analytics__recent-count">{{ t('analytics.funnelEmpty') }}</p>
<div v-else class="analytics__table-wrap">
<table class="table">
<thead>
<tr>
<th class="table__head-cell">{{ t('analytics.colClient') }}</th>
<th class="table__head-cell">{{ t('analytics.colAttempted') }}</th>
<th class="table__head-cell">{{ t('analytics.colApproved') }}</th>
<th class="table__head-cell">{{ t('analytics.colDenied') }}</th>
<th class="table__head-cell">{{ t('analytics.colApprovalRate') }}</th>
</tr>
</thead>
<tbody class="table__body">
<tr v-for="row in summary.oauth_funnel_by_client" :key="row.client_name">
<td class="table__cell table__cell--primary">{{ row.client_name }}</td>
<td class="table__cell">{{ row.attempted }}</td>
<td class="table__cell">{{ row.approved }}</td>
<td class="table__cell">{{ row.denied }}</td>
<td class="table__cell">{{ row.attempted ? Math.round((row.approved / row.attempted) * 100) : 0 }}%</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="analytics__bar-lists" :class="{ 'analytics__section--loading': loading }">
<BarList :title="t('analytics.activeTokensByClient')" :items="activeTokenItems" :empty-text="t('analytics.noActiveTokens')" />
<BarList :title="t('analytics.scopeUsageTitle')" :items="scopeItems" :empty-text="t('analytics.noScopeUsage')" />
</div>
<div class="card analytics__recent" :class="{ 'analytics__section--loading': loading }">
<div class="analytics__recent-header">
<h3 class="card__title">{{ t('analytics.recentActivity') }}</h3>
<button @click="showTable = !showTable" class="link analytics__toggle">
<button @click="showTable = !showTable" class="link analytics__toggle no-print">
{{ showTable ? t('analytics.hide') : t('analytics.viewAll') }}
</button>
</div>
@@ -109,6 +176,12 @@ function formatDateTime(iso: string): string {
--series-2: #eb6834;
}
.analytics__header-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.analytics__loading {
margin-top: 1.5rem;
color: var(--color-text-secondary);
@@ -132,6 +205,10 @@ function formatDateTime(iso: string): string {
gap: 1rem;
}
.analytics__funnel {
margin-top: 1rem;
}
.analytics__recent {
margin-top: 1rem;
}

211
resources/js/pages/admin/AuditLog.vue Normal file
View File

@@ -0,0 +1,211 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import type { AuditLogEntry, Paginated } from '../../types/models';
const { t, locale } = useI18n();
const loading = ref(true);
const entries = ref<AuditLogEntry[]>([]);
const page = ref(1);
const lastPage = ref(1);
const total = ref(0);
const subjectType = ref<'' | 'user' | 'client'>('');
const action = ref('');
const actionOptions = [
'user.created',
'user.updated',
'user.deleted',
'user.restored',
'user.force_deleted',
'user.approved',
'user.app_role_assigned',
'user.app_role_revoked',
'client.created',
'client.revoked',
'user.2fa_enabled',
'user.2fa_disabled',
'user.2fa_recovery_regenerated',
'user.session_revoked',
'user.sessions_revoked_all',
'client.webhook_created',
'client.webhook_deleted',
'client.secret_rotated',
'user.password_reset',
];
const actionLabelKeys: Record<string, string> = {
'user.created': 'auditLog.actions.userCreated',
'user.updated': 'auditLog.actions.userUpdated',
'user.deleted': 'auditLog.actions.userDeleted',
'user.restored': 'auditLog.actions.userRestored',
'user.force_deleted': 'auditLog.actions.userForceDeleted',
'user.approved': 'auditLog.actions.userApproved',
'user.app_role_assigned': 'auditLog.actions.appRoleAssigned',
'user.app_role_revoked': 'auditLog.actions.appRoleRevoked',
'client.created': 'auditLog.actions.clientCreated',
'client.revoked': 'auditLog.actions.clientRevoked',
'user.2fa_enabled': 'auditLog.actions.twoFactorEnabled',
'user.2fa_disabled': 'auditLog.actions.twoFactorDisabled',
'user.2fa_recovery_regenerated': 'auditLog.actions.twoFactorRecoveryRegenerated',
'user.session_revoked': 'auditLog.actions.sessionRevoked',
'user.sessions_revoked_all': 'auditLog.actions.sessionsRevokedAll',
'client.webhook_created': 'auditLog.actions.webhookCreated',
'client.webhook_deleted': 'auditLog.actions.webhookDeleted',
'client.secret_rotated': 'auditLog.actions.secretRotated',
'user.password_reset': 'auditLog.actions.passwordReset',
};
function actionLabel(value: string): string {
const key = actionLabelKeys[value];
return key ? t(key) : value;
}
async function load(): Promise<void> {
loading.value = true;
const { data } = await axios.get<Paginated<AuditLogEntry>>('/web-api/admin/audit-log', {
params: {
page: page.value,
...(subjectType.value ? { subject_type: subjectType.value } : {}),
...(action.value ? { action: action.value } : {}),
},
});
entries.value = data.data;
lastPage.value = data.last_page;
total.value = data.total;
loading.value = false;
}
function goToPage(next: number): void {
if (next < 1 || next > lastPage.value) return;
page.value = next;
}
watch([subjectType, action], () => {
page.value = 1;
load();
});
watch(page, load);
onMounted(load);
function formatDateTime(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 formatMetadata(metadata: Record<string, unknown> | null): string {
if (!metadata || !Object.keys(metadata).length) return '—';
return Object.entries(metadata)
.map(([key, value]) => {
if (value && typeof value === 'object' && 'from' in value && 'to' in value) {
const { from, to } = value as { from: unknown; to: unknown };
return `${key}: ${from ?? '—'} → ${to ?? '—'}`;
}
if (value && typeof value === 'object' && 'changed' in value) {
return t('auditLog.fieldChanged', { field: key });
}
return `${key}: ${value}`;
})
.join(' · ');
}
</script>
<template>
<div class="audit-log">
<div class="page-header">
<div>
<h1 class="page-title">{{ t('auditLog.title') }}</h1>
<p class="page-subtitle">{{ t('auditLog.subtitle') }}</p>
</div>
</div>
<div class="audit-log__filters">
<select v-model="subjectType" class="pill-select">
<option value="">{{ t('auditLog.allSubjects') }}</option>
<option value="user">{{ t('auditLog.subjectUser') }}</option>
<option value="client">{{ t('auditLog.subjectClient') }}</option>
</select>
<select v-model="action" class="pill-select">
<option value="">{{ t('auditLog.allActions') }}</option>
<option v-for="a in actionOptions" :key="a" :value="a">{{ actionLabel(a) }}</option>
</select>
</div>
<div class="table-card audit-log__table-card">
<p v-if="loading" class="table__empty">{{ t('common.loading') }}</p>
<p v-else-if="!entries.length" class="table__empty">{{ t('auditLog.empty') }}</p>
<table v-else class="table">
<thead class="table__head">
<tr>
<th class="table__head-cell">{{ t('auditLog.colWhen') }}</th>
<th class="table__head-cell">{{ t('auditLog.colActor') }}</th>
<th class="table__head-cell">{{ t('auditLog.colAction') }}</th>
<th class="table__head-cell">{{ t('auditLog.colSubject') }}</th>
<th class="table__head-cell">{{ t('auditLog.colDetails') }}</th>
<th class="table__head-cell">{{ t('auditLog.colIp') }}</th>
</tr>
</thead>
<tbody class="table__body">
<tr v-for="entry in entries" :key="entry.id">
<td class="table__cell audit-log__when">{{ formatDateTime(entry.created_at) }}</td>
<td class="table__cell">{{ entry.actor_name ?? t('auditLog.systemActor') }}</td>
<td class="table__cell table__cell--primary">{{ actionLabel(entry.action) }}</td>
<td class="table__cell">{{ entry.subject_label ?? entry.subject_id }}</td>
<td class="table__cell audit-log__details">{{ formatMetadata(entry.metadata) }}</td>
<td class="table__cell">{{ entry.ip_address }}</td>
</tr>
</tbody>
</table>
<div v-if="!loading && entries.length" class="audit-log__pager">
<button class="link" :disabled="page <= 1" @click="goToPage(page - 1)">{{ t('auditLog.prevPage') }}</button>
<span class="audit-log__pager-info">{{ t('auditLog.pageInfo', { page, lastPage, total }) }}</span>
<button class="link" :disabled="page >= lastPage" @click="goToPage(page + 1)">{{ t('auditLog.nextPage') }}</button>
</div>
</div>
</div>
</template>
<style scoped>
.audit-log__filters {
margin-top: 1rem;
display: flex;
gap: 0.75rem;
}
.audit-log__table-card {
margin-top: 1rem;
}
.audit-log__when {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.audit-log__details {
color: var(--color-text-secondary);
font-size: 0.8125rem;
}
.audit-log__pager {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.8125rem;
}
.audit-log__pager button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.audit-log__pager-info {
color: var(--color-text-secondary);
}
</style>

84
resources/js/pages/admin/Users.vue
View File

@@ -3,7 +3,7 @@ import { computed, onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../../stores/auth';
import type { AppRoleGroup, OAuthApp, User } from '../../types/models';
import type { AppRoleGroup, OAuthApp, User, UserSession } from '../../types/models';
type View = 'active' | 'pending' | 'trashed';
@@ -16,6 +16,7 @@ const trashedUsers = ref<User[]>([]);
const view = ref<View>('active');
const apps = ref<OAuthApp[]>([]);
const appRoles = ref<AppRoleGroup[]>([]);
const sessions = ref<UserSession[]>([]);
const loading = ref(true);
const creating = ref(false);
const editingId = ref<number | null>(null);
@@ -133,6 +134,25 @@ async function removeAppRole(user: User, clientId: string, role: string): Promis
await loadAppRoles(user);
}
async function loadSessions(user: User): Promise<void> {
const { data } = await axios.get<UserSession[]>(`/web-api/admin/users/${user.id}/sessions`);
sessions.value = data;
}
async function revokeSession(user: User, session: UserSession): Promise<void> {
if (!confirm(t('adminUsers.revokeSessionConfirm', { name: session.client_name ?? session.name ?? t('adminUsers.sessionUnknownClient') }))) return;
await axios.delete(`/web-api/admin/users/${user.id}/sessions/${session.id}`);
await loadSessions(user);
}
async function revokeAllSessions(user: User): Promise<void> {
if (!confirm(t('adminUsers.revokeAllSessionsConfirm', { name: user.name }))) return;
await axios.delete(`/web-api/admin/users/${user.id}/sessions`);
await loadSessions(user);
}
async function create(): Promise<void> {
creating.value = true;
errors.value = {};
@@ -160,7 +180,9 @@ function startEdit(user: User): void {
editForm.is_active = user.is_active;
errors.value = {};
appRoles.value = [];
sessions.value = [];
loadAppRoles(user);
loadSessions(user);
}
function cancelEdit(): void {
@@ -357,6 +379,31 @@ onMounted(load);
</button>
</div>
</div>
<div class="users__app-roles">
<div class="users__sessions-header">
<h3 class="users__app-roles-title">{{ t('adminUsers.sessionsTitle') }}</h3>
<button v-if="sessions.length" @click="revokeAllSessions(user)" class="link link--danger">
{{ t('adminUsers.revokeAllSessions') }}
</button>
</div>
<p class="users__app-roles-desc">{{ t('adminUsers.sessionsDesc') }}</p>
<div v-if="!sessions.length" class="users__app-roles-empty">{{ t('adminUsers.noSessions') }}</div>
<ul v-else class="users__sessions-list">
<li v-for="session in sessions" :key="session.id" class="users__session-row">
<div>
<span class="users__session-client">{{ session.client_name ?? t('adminUsers.sessionUnknownClient') }}</span>
<span class="users__session-meta">
{{ session.scopes?.join(', ') || t('common.none') }} · {{ formatDate(session.created_at) }}
</span>
</div>
<button @click="revokeSession(user, session)" class="link link--danger">
{{ t('adminUsers.revokeSession') }}
</button>
</li>
</ul>
</div>
</td>
</tr>
</template>
@@ -553,6 +600,41 @@ onMounted(load);
color: var(--color-text-muted);
}
.users__sessions-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.users__sessions-list {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.users__session-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;
}
.users__session-client {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-primary);
}
.users__session-meta {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
}
@media (min-width: 640px) {
.users__form {
grid-template-columns: 1fr 1fr;