65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<template>
|
|
<q-card class="col-12">
|
|
<q-card-section class="fit row justify-start content-center items-center">
|
|
<div class="col-12 text-center text-h6">{{ apiKey.name }}</div>
|
|
<q-btn
|
|
class="absolute-top-right q-ma-sm"
|
|
color="negative"
|
|
icon="mdi-delete"
|
|
round
|
|
@click="deleteKey"
|
|
/>
|
|
</q-card-section>
|
|
<q-card-section
|
|
v-if="apiKey.token"
|
|
class="fit row justify-start content-center items-center q-gutter-sm"
|
|
>
|
|
<q-input class="col" outlined label="API Key" :model-value="apiKey.token" />
|
|
<div class="row justify-end content-end items-end">
|
|
<q-btn color="primary" icon="mdi-content-copy" round @click="copyApiKey" />
|
|
</div>
|
|
<q-banner class="fit bg-primary text-white" inline dense rounded>
|
|
ApiKey wird nur einmalig angezeigt. Bitte kopieren!
|
|
</q-banner>
|
|
</q-card-section>
|
|
<q-card-section class="fit row justify-start content-center items-center q-gutter-sm">
|
|
<q-input
|
|
class="fit"
|
|
type="textarea"
|
|
outlined
|
|
label="Description"
|
|
readonly
|
|
:model-value="apiKey.description"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
export default defineComponent({
|
|
name: 'ApiKey',
|
|
props: {
|
|
apiKey: {
|
|
type: Object as PropType<FG.ApiKey>,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: {
|
|
delete: (apiKey: FG.ApiKey) => !!apiKey,
|
|
},
|
|
setup(props, { emit }) {
|
|
async function copyApiKey() {
|
|
await navigator.clipboard.writeText(<string>props.apiKey.token);
|
|
console.log('copying api key', props.apiKey.token);
|
|
}
|
|
function deleteKey() {
|
|
emit('delete', props.apiKey);
|
|
}
|
|
return {
|
|
deleteKey,
|
|
copyApiKey,
|
|
};
|
|
},
|
|
});
|
|
</script>
|