Move ApiTokens into their own component
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user