262 lines
11 KiB
Vue
262 lines
11 KiB
Vue
<template>
|
|
<div class="api-tokens-panel">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div>
|
|
<h4 class="fw-black mb-1">API Tokens</h4>
|
|
<p class="text-muted small mb-0">
|
|
Issue bearer tokens for batch endpoints and external integrations. Scope each token to specific abilities and IPs.
|
|
</p>
|
|
</div>
|
|
<button class="btn btn-primary" @click="openCreate">
|
|
<i class="fas fa-key me-1"></i> New Token
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="freshToken" class="alert alert-warning d-flex align-items-start gap-3">
|
|
<i class="fas fa-exclamation-triangle mt-1"></i>
|
|
<div class="flex-fill">
|
|
<div class="fw-bold mb-1">Copy this token now — it will not be shown again.</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<code class="flex-fill px-2 py-1 bg-light rounded text-break">{{ freshToken }}</code>
|
|
<button class="btn btn-sm btn-outline-secondary" @click="copyFresh">
|
|
<i class="fas" :class="copied ? 'fa-check' : 'fa-copy'"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-close" @click="freshToken = null" aria-label="Dismiss"></button>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Abilities</th>
|
|
<th>IPs</th>
|
|
<th>Expires</th>
|
|
<th>Last Used</th>
|
|
<th>Status</th>
|
|
<th class="text-end">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td colspan="7" class="text-center text-muted py-4">Loading...</td>
|
|
</tr>
|
|
<tr v-else-if="!tokens.length">
|
|
<td colspan="7" class="text-center text-muted py-4">No tokens yet.</td>
|
|
</tr>
|
|
<tr v-for="t in tokens" :key="t.id">
|
|
<td>
|
|
<div class="fw-bold">{{ t.name }}</div>
|
|
<div class="text-muted small">{{ t.description }}</div>
|
|
</td>
|
|
<td>
|
|
<span v-for="a in t.abilities" :key="a" class="badge bg-light text-dark border me-1">{{ a }}</span>
|
|
</td>
|
|
<td>
|
|
<div v-if="!t.allowed_ips?.length" class="text-muted small">any</div>
|
|
<div v-else>
|
|
<code v-for="ip in t.allowed_ips" :key="ip" class="d-block small">{{ ip }}</code>
|
|
</div>
|
|
</td>
|
|
<td>{{ fmt(t.expires_at) || '—' }}</td>
|
|
<td>
|
|
<div>{{ fmt(t.last_used_at) || 'never' }}</div>
|
|
<div class="text-muted small">{{ t.last_used_ip || '' }}</div>
|
|
</td>
|
|
<td>
|
|
<span v-if="t.revoked_at" class="badge bg-danger">revoked</span>
|
|
<span v-else-if="!t.is_active" class="badge bg-secondary">expired</span>
|
|
<span v-else class="badge bg-success">active</span>
|
|
</td>
|
|
<td class="text-end">
|
|
<button v-if="!t.revoked_at" class="btn btn-sm btn-outline-warning me-1" @click="revoke(t)">Revoke</button>
|
|
<button class="btn btn-sm btn-outline-danger" @click="destroy(t)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Create Modal -->
|
|
<div v-if="showCreate" class="modal-backdrop-custom" @click.self="showCreate = false">
|
|
<div class="modal-panel">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0 fw-bold">Create API Token</h5>
|
|
<button class="btn-close" @click="showCreate = false"></button>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-bold">Name</label>
|
|
<input v-model="form.name" type="text" class="form-control" placeholder="e.g. cooperative-import-prod" />
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-bold">Description</label>
|
|
<input v-model="form.description" type="text" class="form-control" placeholder="What is this token for?" />
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-bold">Expires At (optional)</label>
|
|
<input v-model="form.expires_at" type="datetime-local" class="form-control" />
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-bold">Allowed IPs (one per line, supports CIDR)</label>
|
|
<textarea v-model="form.allowed_ips_text" rows="3" class="form-control font-monospace small"
|
|
placeholder="203.0.113.5 10.0.0.0/8"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-bold d-flex justify-content-between">
|
|
<span>Abilities</span>
|
|
<span class="text-muted">{{ form.abilities.length }} selected</span>
|
|
</label>
|
|
<div class="border rounded p-2" style="max-height: 320px; overflow-y: auto;">
|
|
<div v-for="(items, group) in catalog" :key="group" class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<strong class="small">{{ group }}</strong>
|
|
<button type="button" class="btn btn-sm btn-link p-0" @click="toggleGroup(items)">toggle all</button>
|
|
</div>
|
|
<label v-for="item in items" :key="item.key" class="form-check d-inline-flex me-2 small">
|
|
<input type="checkbox" class="form-check-input me-1" :value="item.key" v-model="form.abilities" />
|
|
{{ item.label }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<label class="form-check small text-danger">
|
|
<input type="checkbox" class="form-check-input me-1" v-model="form.wildcard" />
|
|
Grant wildcard (<code>*</code>) — full access
|
|
</label>
|
|
<div>
|
|
<button class="btn btn-light me-2" @click="showCreate = false">Cancel</button>
|
|
<button class="btn btn-primary" :disabled="creating || !canSubmit" @click="submit">
|
|
<span v-if="creating"><i class="fas fa-spinner fa-spin me-1"></i> Creating...</span>
|
|
<span v-else>Create Token</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted } from 'vue';
|
|
import axios from 'axios';
|
|
|
|
const tokens = ref([]);
|
|
const catalog = ref({});
|
|
const loading = ref(true);
|
|
const showCreate = ref(false);
|
|
const creating = ref(false);
|
|
const freshToken = ref(null);
|
|
const copied = ref(false);
|
|
|
|
const form = reactive({
|
|
name: '',
|
|
description: '',
|
|
expires_at: '',
|
|
allowed_ips_text: '',
|
|
abilities: [],
|
|
wildcard: false,
|
|
});
|
|
|
|
const canSubmit = computed(() => form.name.trim().length > 0 && (form.wildcard || form.abilities.length > 0));
|
|
|
|
const fmt = (v) => v ? new Date(v).toLocaleString() : '';
|
|
|
|
async function load() {
|
|
loading.value = true;
|
|
try {
|
|
const [list, cat] = await Promise.all([
|
|
axios.get('/admin/ultimate/api-tokens'),
|
|
axios.get('/admin/ultimate/api-tokens/catalog'),
|
|
]);
|
|
tokens.value = list.data.data || [];
|
|
catalog.value = cat.data.data.abilities || {};
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function openCreate() {
|
|
Object.assign(form, {
|
|
name: '', description: '', expires_at: '', allowed_ips_text: '',
|
|
abilities: [], wildcard: false,
|
|
});
|
|
showCreate.value = true;
|
|
}
|
|
|
|
function toggleGroup(items) {
|
|
const keys = items.map(i => i.key);
|
|
const allSelected = keys.every(k => form.abilities.includes(k));
|
|
if (allSelected) {
|
|
form.abilities = form.abilities.filter(a => !keys.includes(a));
|
|
} else {
|
|
form.abilities = Array.from(new Set([...form.abilities, ...keys]));
|
|
}
|
|
}
|
|
|
|
async function submit() {
|
|
creating.value = true;
|
|
try {
|
|
const abilities = form.wildcard ? ['*'] : form.abilities;
|
|
const allowed_ips = form.allowed_ips_text.split('\n').map(s => s.trim()).filter(Boolean);
|
|
const payload = {
|
|
name: form.name.trim(),
|
|
description: form.description.trim() || null,
|
|
abilities,
|
|
allowed_ips: allowed_ips.length ? allowed_ips : null,
|
|
expires_at: form.expires_at || null,
|
|
};
|
|
const { data } = await axios.post('/admin/ultimate/api-tokens', payload);
|
|
freshToken.value = data.data.plain_text_token;
|
|
showCreate.value = false;
|
|
await load();
|
|
} catch (e) {
|
|
alert(e.response?.data?.message || 'Failed to create token');
|
|
} finally {
|
|
creating.value = false;
|
|
}
|
|
}
|
|
|
|
async function revoke(t) {
|
|
if (!confirm(`Revoke token "${t.name}"? It will stop working immediately.`)) return;
|
|
await axios.post(`/admin/ultimate/api-tokens/${t.id}/revoke`);
|
|
await load();
|
|
}
|
|
|
|
async function destroy(t) {
|
|
if (!confirm(`Permanently delete token "${t.name}"? This removes audit history.`)) return;
|
|
await axios.delete(`/admin/ultimate/api-tokens/${t.id}`);
|
|
await load();
|
|
}
|
|
|
|
async function copyFresh() {
|
|
if (!freshToken.value) return;
|
|
await navigator.clipboard.writeText(freshToken.value);
|
|
copied.value = true;
|
|
setTimeout(() => (copied.value = false), 1500);
|
|
}
|
|
|
|
onMounted(load);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal-backdrop-custom {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 1050;
|
|
}
|
|
.modal-panel {
|
|
background: #fff; border-radius: 12px; padding: 20px;
|
|
width: min(720px, 95vw); max-height: 92vh; overflow-y: auto;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
</style>
|