291 lines
8.1 KiB
Vue
291 lines
8.1 KiB
Vue
<script setup>
|
||
import { ref, computed, watch, onMounted } from 'vue'
|
||
import { getDirection, navigateButtonRow } from '@/utils/keynav'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
|
||
const props = defineProps({
|
||
client: Object,
|
||
permissions: Array,
|
||
isNew: { type: Boolean, default: false },
|
||
navigationDisabled: { type: Boolean, default: false }
|
||
})
|
||
|
||
const emit = defineEmits(['save', 'cancel', 'delete', 'resetSecret', 'createPermission', 'navigateOut'])
|
||
|
||
const authStore = useAuthStore()
|
||
const headerRef = ref(null)
|
||
|
||
// Local form state
|
||
const name = ref('')
|
||
const redirectUris = ref('')
|
||
const clientSecret = ref(null)
|
||
|
||
// Computed
|
||
const discoveryUrl = computed(() => `${window.location.origin}/.well-known/openid-configuration`)
|
||
const clientId = computed(() => props.client?.client_id || props.client?.uuid || '')
|
||
|
||
// Groups (permissions) scoped to this client
|
||
const clientGroups = computed(() => {
|
||
if (!props.client || !props.permissions) return []
|
||
const clientUuid = props.client.uuid || props.client.client_id
|
||
return props.permissions.filter(p => p.domain === clientUuid).sort((a, b) => a.scope.localeCompare(b.scope))
|
||
})
|
||
|
||
// Initialize form data from props
|
||
watch(() => props.client, (c) => {
|
||
if (c) {
|
||
name.value = c.name || ''
|
||
redirectUris.value = Array.isArray(c.redirect_uris) ? c.redirect_uris.join('\n') : (c.redirect_uris || '')
|
||
clientSecret.value = c.client_secret || null
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// Copy-to-clipboard helper
|
||
function copyText(value, label) {
|
||
navigator.clipboard.writeText(value).then(() => {
|
||
authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
|
||
})
|
||
}
|
||
|
||
function handleResetSecret() {
|
||
emit('resetSecret', clientId.value)
|
||
}
|
||
|
||
// When parent resets secret, update local state
|
||
watch(() => props.client?.client_secret, (newSecret) => {
|
||
if (newSecret) {
|
||
clientSecret.value = newSecret
|
||
}
|
||
})
|
||
|
||
function handleSave() {
|
||
const trimmedName = name.value.trim()
|
||
if (!trimmedName) {
|
||
authStore.showMessage('Client name is required', 'error')
|
||
return
|
||
}
|
||
const uris = redirectUris.value.trim()
|
||
const redirect_uris = uris ? uris.split('\n').map(u => u.trim()).filter(u => u) : []
|
||
|
||
emit('save', {
|
||
client_id: clientId.value,
|
||
client_secret: clientSecret.value,
|
||
name: trimmedName,
|
||
redirect_uris,
|
||
isNew: props.isNew
|
||
})
|
||
}
|
||
|
||
function handleDelete() {
|
||
emit('delete', props.client)
|
||
}
|
||
|
||
function handleCreatePermission() {
|
||
emit('createPermission', clientId.value)
|
||
}
|
||
|
||
function handleCancel() {
|
||
emit('cancel')
|
||
}
|
||
|
||
// Keyboard navigation
|
||
function handleHeaderKeydown(event) {
|
||
if (props.navigationDisabled) return
|
||
|
||
const direction = getDirection(event)
|
||
if (!direction) return
|
||
|
||
event.preventDefault()
|
||
|
||
if (direction === 'left' || direction === 'right') {
|
||
navigateButtonRow(headerRef.value, event.target, direction, { itemSelector: 'button, a' })
|
||
} else if (direction === 'up') {
|
||
emit('navigateOut', 'up')
|
||
}
|
||
}
|
||
|
||
function focusFirstElement() {
|
||
const firstFocusable = headerRef.value?.querySelector('button, a, input')
|
||
if (firstFocusable) firstFocusable.focus()
|
||
}
|
||
|
||
defineExpose({ focusFirstElement })
|
||
</script>
|
||
|
||
<template>
|
||
<div class="oidc-detail">
|
||
<div class="oidc-header" ref="headerRef" @keydown="handleHeaderKeydown">
|
||
<h2>{{ isNew ? 'New OIDC Client' : (client?.name || 'OIDC Client') }}</h2>
|
||
</div>
|
||
|
||
<form @submit.prevent="handleSave" class="oidc-form">
|
||
<!-- Client credentials section -->
|
||
<section class="oidc-credentials">
|
||
<h3>Client Credentials</h3>
|
||
<p class="section-description">Configure these values in the client application.</p>
|
||
|
||
<dl class="oidc-dl">
|
||
<dt>Authentication Name</dt>
|
||
<dd>
|
||
<output @click="copyText(authStore.settings.rp_name, 'Authentication Name')" title="Click to copy">{{ authStore.settings.rp_name }}</output>
|
||
<span class="small muted"> (Login With, may affect URLs – optional)</span>
|
||
</dd>
|
||
|
||
<dt>Discovery URL</dt>
|
||
<dd><output @click="copyText(discoveryUrl, 'OpenID Connect Discovery URL')" title="Click to copy">{{ discoveryUrl }}</output></dd>
|
||
|
||
<dt>Client ID</dt>
|
||
<dd><output @click="copyText(clientId, 'Client ID')" title="Click to copy">{{ clientId }}</output></dd>
|
||
|
||
<dt>Client Secret <button v-if="!clientSecret" type="button" class="icon-btn" @click="handleResetSecret" title="Revoke and re-generate secret">🔄</button></dt>
|
||
<dd>
|
||
<output v-if="clientSecret" @click="copyText(clientSecret, 'Client Secret')" title="Click to copy">{{ clientSecret }}</output>
|
||
<span v-else class="small muted">(only stored in hashed form)</span>
|
||
</dd>
|
||
|
||
<template v-if="clientGroups.length">
|
||
<dt>Groups Name</dt>
|
||
<dd>
|
||
<output @click="copyText('groups', 'Groups Name')" title="Click to copy">groups</output>
|
||
</dd>
|
||
</template>
|
||
|
||
<dt>Groups <button type="button" class="icon-btn" @click="handleCreatePermission" title="Add permission scoped to this client">➕</button></dt>
|
||
<dd class="oidc-groups">
|
||
<template v-if="clientGroups.length">
|
||
<output v-for="group in clientGroups" :key="group.uuid" class="oidc-group" @click="copyText(group.scope, 'Group Value')" :title="group.display_name">{{ group.scope }}</output>
|
||
</template>
|
||
<span v-else class="small muted">(no permissions defined)</span>
|
||
</dd>
|
||
</dl>
|
||
|
||
<p v-if="clientSecret && isNew" class="warning-text"><strong>⚠️ Save the secret now — it cannot be retrieved later.</strong></p>
|
||
<p v-else-if="clientSecret && !isNew" class="warning-text"><strong>⚠️ Saving will prevent access with the old secret.</strong></p>
|
||
</section>
|
||
|
||
<hr class="oidc-divider" />
|
||
|
||
<!-- Editable fields -->
|
||
<section class="oidc-settings">
|
||
<h3>Client Settings</h3>
|
||
|
||
<label>Client Name
|
||
<input v-model="name" placeholder="My Application" required />
|
||
</label>
|
||
|
||
<label>Redirect URIs
|
||
<p class="small muted">This should be provided by the client application.</p>
|
||
<textarea v-model="redirectUris" placeholder="(autodiscover one on first use)" rows="3"></textarea>
|
||
</label>
|
||
</section>
|
||
|
||
<!-- Actions -->
|
||
<div class="oidc-actions">
|
||
<button type="button" class="btn-secondary" @click="handleCancel">Cancel</button>
|
||
<button v-if="!isNew" type="button" class="btn-danger" @click="handleDelete">Delete Client</button>
|
||
<button type="submit" class="btn-primary">Save</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.oidc-detail {
|
||
max-width: 600px;
|
||
}
|
||
|
||
.oidc-header {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.oidc-header h2 {
|
||
margin: 0;
|
||
}
|
||
|
||
.oidc-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.oidc-credentials,
|
||
.oidc-settings {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.oidc-credentials h3,
|
||
.oidc-settings h3 {
|
||
margin: 0 0 var(--space-xs) 0;
|
||
font-size: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.section-description {
|
||
margin: 0;
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.oidc-dl {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 0.3rem 1rem;
|
||
align-items: baseline;
|
||
margin: var(--space-sm) 0;
|
||
}
|
||
|
||
.oidc-dl dt {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.oidc-dl dd {
|
||
margin: 0;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5em;
|
||
}
|
||
|
||
.oidc-dl output {
|
||
font-family: var(--font-mono, monospace);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
}
|
||
|
||
.warning-text {
|
||
font-size: 0.9rem;
|
||
margin: var(--space-sm) 0 0 0;
|
||
}
|
||
|
||
.oidc-group { display: block; }
|
||
.oidc-group { white-space: normal; word-break: break-all; }
|
||
|
||
.oidc-divider {
|
||
border: none;
|
||
border-top: 1px solid var(--color-border);
|
||
margin: var(--space-sm) 0;
|
||
}
|
||
|
||
.oidc-settings label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.oidc-actions {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
justify-content: flex-end;
|
||
margin-top: var(--space-md);
|
||
}
|
||
</style>
|