DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Exposing stashes on scenes GraphQL object.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2025-04-01 00:55:41 +02:00
parent acef14b02c
commit f5d8c30ff3
5 changed files with 206 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
components/user/api-keys.vue
View File

@@ -21,78 +21,80 @@
</div>
</div>
<div
v-if="newKey"
class="newkey"
>
<p class="key-info">Successfully generated key with identifier <strong class="newkey-identifier ellipsis">{{ newKey.identifier }}</strong>:</p>
<input
:value="newKey.key"
class="input ellipsis"
@click="copyKey"
<div class="manager">
<div
v-if="newKey"
class="newkey"
>
<p class="key-info">Successfully generated key with identifier <strong class="newkey-identifier ellipsis">{{ newKey.identifier }}</strong>:</p>
<p class="key-info">Please store this key securely, you will <strong>not</strong> be able to retrieve it later. If you lose it, you must generate a new key.</p>
</div>
<input
:value="newKey.key"
class="input ellipsis"
@click="copyKey"
>
<ul
v-if="keys.length > 0"
class="keys nolist"
>
<li
v-for="key in keys"
:key="`key-${key.id}`"
class="key"
<p class="key-info">Please store this key securely, you will <strong>not</strong> be able to retrieve it later. If you lose it, you must generate a new key.</p>
</div>
<ul
v-if="keys.length > 0"
class="keys nolist"
>
<div class="key-row key-header">
<strong class="key-value key-identifier ellipsis">{{ key.identifier }}</strong>
<li
v-for="key in keys"
:key="`key-${key.id}`"
class="key"
>
<div class="key-row key-header">
<strong class="key-value key-identifier ellipsis">{{ key.identifier }}</strong>
<span class="key-actions">
<Icon
icon="bin"
class="key-remove"
@click="removeKey(key)"
/>
</span>
</div>
<span class="key-actions">
<Icon
icon="bin"
class="key-remove"
@click="removeKey(key)"
/>
</span>
</div>
<div class="key-row key-details">
<span class="key-value key-created">
<Icon icon="plus-circle" />
<div class="key-row key-details">
<span class="key-value key-created">
<Icon icon="plus-circle" />
<time
v-tooltip="`Created ${format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')}`"
:datetime="key.createdAt.toISOString()"
>{{ formatDistanceStrict(key.createdAt, now) }} ago</time>
</span>
<span class="key-value key-used">
<Icon icon="history" />
<template v-if="key.lastUsedAt">
<time
v-tooltip="`Last used ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')} from IP ${key.lastUsedIp}`"
:datetime="key.lastUsedAt.toISOString()"
>{{ formatDistanceStrict(key.lastUsedAt, now) }} ago</time>
</template>
v-tooltip="`Created ${format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')}`"
:datetime="key.createdAt.toISOString()"
>{{ formatDistanceStrict(key.createdAt, now) }} ago</time>
</span>
<template v-else>Never</template>
</span>
</div>
</li>
</ul>
<span class="key-value key-used">
<Icon icon="history" />
<div
v-if="keys.length > 0"
class="info"
>
<h3 class="info-heading">HTTP headers</h3>
<template v-if="key.lastUsedAt">
<time
v-tooltip="`Last used ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')} from IP ${key.lastUsedIp}`"
:datetime="key.lastUsedAt.toISOString()"
>{{ formatDistanceStrict(key.lastUsedAt, now) }} ago</time>
</template>
<code class="headers">
API-User: {{ user.id }}<br>
API-Key: YourSecurelyStoredApiKey12345678
</code>
<template v-else>Never</template>
</span>
</div>
</li>
</ul>
<div
v-if="keys.length > 0"
class="info"
>
<h3 class="info-heading">HTTP headers</h3>
<code class="headers">
API-User: {{ user.id }}<br>
API-Key: YourSecurelyStoredApiKey12345678
</code>
</div>
</div>
</section>
</template>
@@ -151,18 +153,6 @@ function copyKey(event) {
</script>
<style scoped>
.page {
display: flex;
flex-grow: 1;
justify-content: center;
}
.manager {
width: 1200px;
max-width: 100%;
box-sizing: border-box;
}
.keys-header {
display: flex;
justify-content: space-between;
@@ -297,7 +287,17 @@ function copyKey(event) {
margin: 0;
}
@media(--compact) {
.manager {
padding: 0 1rem;
}
}
@media(--small-20) {
.manager {
padding: 0 .5rem;
}
.keys {
grid-template-columns: 1fr;
}