Centered key management on page.
This commit is contained in:
parent
a16d17399b
commit
7c59479f29
|
|
@ -1,94 +1,96 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="keys-header">
|
||||
<h2 class="heading">API keys</h2>
|
||||
<div class="manager">
|
||||
<div class="keys-header">
|
||||
<h2 class="heading">API keys</h2>
|
||||
|
||||
<div class="keys-actions">
|
||||
<Icon
|
||||
v-tooltip="'Flush all keys'"
|
||||
icon="stack-cancel"
|
||||
@click="flushKeys"
|
||||
/>
|
||||
<div class="keys-actions">
|
||||
<Icon
|
||||
v-tooltip="'Flush all keys'"
|
||||
icon="stack-cancel"
|
||||
@click="flushKeys"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="button"
|
||||
@click="createKey"
|
||||
>New key</button>
|
||||
<button
|
||||
class="button"
|
||||
@click="createKey"
|
||||
>New key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="newKey"
|
||||
class="newkey"
|
||||
>
|
||||
<p class="key-info">
|
||||
Your new key identified by <strong>{{ newKey.identifier }}</strong> is
|
||||
<input
|
||||
:value="newKey.key"
|
||||
class="input"
|
||||
@click="copyKey"
|
||||
>
|
||||
</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>
|
||||
|
||||
<ul
|
||||
v-if="keys.length > 0"
|
||||
class="keys nolist"
|
||||
>
|
||||
<li
|
||||
v-for="key in keys"
|
||||
:key="`key-${key.id}`"
|
||||
class="key"
|
||||
<div
|
||||
v-if="newKey"
|
||||
class="newkey"
|
||||
>
|
||||
<div class="key-row key-header">
|
||||
<strong class="key-value key-identifier ellipsis">{{ key.identifier }}</strong>
|
||||
<p class="key-info">
|
||||
Your new key identified by <strong>{{ newKey.identifier }}</strong> is
|
||||
<input
|
||||
:value="newKey.key"
|
||||
class="input"
|
||||
@click="copyKey"
|
||||
>
|
||||
</p>
|
||||
|
||||
<span class="key-actions">
|
||||
<Icon
|
||||
icon="bin"
|
||||
@click="removeKey(key)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="key-row key-details">
|
||||
<span class="key-value key-created">
|
||||
<Icon icon="plus-circle" />
|
||||
<ul
|
||||
v-if="keys.length > 0"
|
||||
class="keys nolist"
|
||||
>
|
||||
<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>
|
||||
|
||||
<time
|
||||
v-tooltip="format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')"
|
||||
:datetime="key.createdAt.toISOString()"
|
||||
>{{ formatDistanceToNowStrict(key.createdAt) }} ago</time>
|
||||
</span>
|
||||
<span class="key-actions">
|
||||
<Icon
|
||||
icon="bin"
|
||||
@click="removeKey(key)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="key-value key-used">
|
||||
<Icon icon="history" />
|
||||
<div class="key-row key-details">
|
||||
<span class="key-value key-created">
|
||||
<Icon icon="plus-circle" />
|
||||
|
||||
<template v-if="key.lastUsedAt">
|
||||
<time
|
||||
v-tooltip="`${key.lastUsedIp} at ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')}`"
|
||||
:datetime="key.lastUsedAt.toISOString()"
|
||||
>{{ formatDistanceToNowStrict(key.lastUsedAt) }} ago</time>
|
||||
</template>
|
||||
v-tooltip="format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')"
|
||||
:datetime="key.createdAt.toISOString()"
|
||||
>{{ formatDistanceToNowStrict(key.createdAt) }} 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="`${key.lastUsedIp} at ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')}`"
|
||||
:datetime="key.lastUsedAt.toISOString()"
|
||||
>{{ formatDistanceToNowStrict(key.lastUsedAt) }} 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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -147,7 +149,15 @@ function copyKey(event) {
|
|||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.manager {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue