Follow upstream recommendation to have html templates below script in .vue files
This commit is contained in:
Johannes Zellner
@@ -1,69 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<InputDialog ref="inputDialog" />
|
||||
|
||||
<Dialog ref="newDialog"
|
||||
:title="$t('profile.createApiToken.title')"
|
||||
:confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
|
||||
confirm-style="success"
|
||||
:reject-label="$t('main.dialog.close')"
|
||||
@confirm="onSubmitAddApiToken()"
|
||||
@close="onReset()"
|
||||
>
|
||||
<div>
|
||||
<Transition name="slide-left" mode="out-in">
|
||||
<div v-if="!addedToken">
|
||||
<form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
|
||||
<input style="display: none" type="submit" :disabled="!isValid"/>
|
||||
<FormGroup>
|
||||
<label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
|
||||
<TextInput id="apiTokenName" v-model="tokenName" required/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label>{{ $t('profile.createApiToken.access') }}</label>
|
||||
<Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
|
||||
<Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ $t('profile.createApiToken.description') }}
|
||||
<TextInput v-model="addedToken" readonly/>
|
||||
<Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
|
||||
<p>{{ $t('profile.createApiToken.copyNow') }}</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Section :title="$t('profile.apiTokens.title')">
|
||||
<template #header-buttons>
|
||||
<Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
|
||||
</template>
|
||||
|
||||
<p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
|
||||
<br/>
|
||||
|
||||
<TableView :columns="columns" :model="apiTokens">
|
||||
<template #lastUsedTime="slotProps">
|
||||
<span v-if="slotProps.lastUsedTime">{{ prettyLongDate(slotProps.lastUsedTime) }}</span>
|
||||
<span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
|
||||
</template>
|
||||
<template #scope="slotProps">
|
||||
<span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
|
||||
<span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
|
||||
</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="table-actions">
|
||||
<Button small outline tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
|
||||
@@ -168,3 +102,69 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<InputDialog ref="inputDialog" />
|
||||
|
||||
<Dialog ref="newDialog"
|
||||
:title="$t('profile.createApiToken.title')"
|
||||
:confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
|
||||
confirm-style="success"
|
||||
:reject-label="$t('main.dialog.close')"
|
||||
@confirm="onSubmitAddApiToken()"
|
||||
@close="onReset()"
|
||||
>
|
||||
<div>
|
||||
<Transition name="slide-left" mode="out-in">
|
||||
<div v-if="!addedToken">
|
||||
<form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
|
||||
<input style="display: none" type="submit" :disabled="!isValid"/>
|
||||
<FormGroup>
|
||||
<label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
|
||||
<TextInput id="apiTokenName" v-model="tokenName" required/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label>{{ $t('profile.createApiToken.access') }}</label>
|
||||
<Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
|
||||
<Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ $t('profile.createApiToken.description') }}
|
||||
<TextInput v-model="addedToken" readonly/>
|
||||
<Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
|
||||
<p>{{ $t('profile.createApiToken.copyNow') }}</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Section :title="$t('profile.apiTokens.title')">
|
||||
<template #header-buttons>
|
||||
<Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
|
||||
</template>
|
||||
|
||||
<p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
|
||||
<br/>
|
||||
|
||||
<TableView :columns="columns" :model="apiTokens">
|
||||
<template #lastUsedTime="slotProps">
|
||||
<span v-if="slotProps.lastUsedTime">{{ prettyLongDate(slotProps.lastUsedTime) }}</span>
|
||||
<span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
|
||||
</template>
|
||||
<template #scope="slotProps">
|
||||
<span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
|
||||
<span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
|
||||
</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="table-actions">
|
||||
<Button small outline tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user