Move ApiTokens into their own component

This commit is contained in:
Johannes Zellner
2025-01-15 16:32:21 +01:00
parent 6e2007aeca
commit da4215afbd
6 changed files with 214 additions and 193 deletions
+34 -19
View File
@@ -8,28 +8,31 @@
confirm-style="success"
:reject-label="$t('main.dialog.close')"
@confirm="onSubmit()"
@close="onReset()"
>
<div>
<div v-show="!addedPassword">
<form novalidate @submit="onSubmit()" autocomplete="off">
<input style="display: none" type="submit" :disabled="!isValid"/>
<FormGroup>
<label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
<TextInput id="passwordName" v-model="passwordName" required/>
</FormGroup>
<Transition name="slide-left" mode="out-in">
<div v-if="!addedPassword">
<form novalidate @submit="onSubmit()" autocomplete="off">
<input style="display: none" type="submit" :disabled="!isValid"/>
<FormGroup>
<label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
<TextInput id="passwordName" v-model="passwordName" required/>
</FormGroup>
<FormGroup>
<label>{{ $t('profile.createAppPassword.app') }}</label>
<Dropdown outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" /> {{ dropdownValueWithKey }}
</FormGroup>
</form>
</div>
<div v-show="addedPassword">
{{ $t('profile.createAppPassword.description') }}
<TextInput v-model="addedPassword" readonly/>
<Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
<p>{{ $t('profile.createAppPassword.copyNow') }}</p>
</div>
<FormGroup>
<label>{{ $t('profile.createAppPassword.app') }}</label>
<Dropdown outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" /> {{ dropdownValueWithKey }}
</FormGroup>
</form>
</div>
<div v-else>
{{ $t('profile.createAppPassword.description') }}
<TextInput v-model="addedPassword" readonly/>
<Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
<p>{{ $t('profile.createAppPassword.copyNow') }}</p>
</div>
</Transition>
</div>
</Dialog>
@@ -70,6 +73,10 @@
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { Button, Dialog, Dropdown, FormGroup, TextInput, InputDialog } from 'pankow';
import { prettyLongDate, copyToClipboard } from 'pankow/utils';
@@ -109,6 +116,14 @@ async function refresh() {
passwords.value = result;
}
function onReset() {
setTimeout(() => {
passwordName.value = '';
identifier.value = '';
addedPassword.value = '';
}, 500);
}
const isValid = computed(() => {
if (!passwordName.value) return false;
if (!identifier.value) return false;