frontend/app/components/settings/token/TokenCreationComponent.vue
2026-04-12 16:34:07 +02:00

49 lines
1.5 KiB
Vue

<template>
<div>
<div v-if="!token" class="content-l">
<div class="col-2">
<UiInput label="Name" required>
<input type="text" v-model="name">
</UiInput>
<UiInput label="Expires At">
<input type="date" v-model="expiresAt">
</UiInput>
</div>
<div class="center">
<UiButton @click="create" :disabled="name.length === 0">Create</UiButton>
</div>
</div>
<div v-else class="content-l">
<p class="tile-m">{{ token.token }}</p>
<div class="center">
<UiButton class="width-6rem">Copy</UiButton>
<UiButton class="width-6rem" @click="usePopup().close()">Close</UiButton>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {Token, TokenCreation, TokenSecret} from "~/auth/Token";
import {usePopup} from "~/components/ui/popup/Popup";
const name: Ref<string> = ref('');
const expiresAt = ref(new Date().toISOString().substring(0, 10));
const token: Ref<TokenSecret | undefined> = ref(undefined);
function create()
{
if (!name.value)
{
return false;
}
TokenCreation.create(new TokenCreation(name.value, new Date(expiresAt.value)), (_token: TokenSecret) => {
token.value = _token;
usePopup().get()!.config.callback?.(new Token(_token.id, _token.name, _token.createdAt, _token.expiresAt));
})
}
</script>
<style scoped>
</style>