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