Follow upstream recommendation to have html templates below script in .vue files

This commit is contained in:
Johannes Zellner
2025-01-19 12:00:22 +01:00
parent 0280059c13
commit dfb3285e18
21 changed files with 1008 additions and 1021 deletions
+58 -58
View File
@@ -1,61 +1,3 @@
<template>
<div>
<InputDialog ref="inputDialog" />
<Dialog ref="newDialog"
:title="$t('profile.createAppPassword.title')"
:confirm-label="addedPassword ? '' : $t('profile.createAppPassword.generatePassword')"
confirm-style="success"
:reject-label="$t('main.dialog.close')"
@confirm="onSubmit()"
@close="onReset()"
>
<div>
<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-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>
<Section :title="$t('profile.appPasswords.title')">
<template #header-buttons>
<Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
</template>
<p>{{ $t('profile.appPasswords.description') }}</p>
<br/>
<TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
<template #actions="slotProps">
<div class="table-actions">
<Button small outline tool danger @click="onRemove(slotProps.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" 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;
@@ -203,3 +145,61 @@ onMounted(async () => {
});
</script>
<template>
<div>
<InputDialog ref="inputDialog" />
<Dialog ref="newDialog"
:title="$t('profile.createAppPassword.title')"
:confirm-label="addedPassword ? '' : $t('profile.createAppPassword.generatePassword')"
confirm-style="success"
:reject-label="$t('main.dialog.close')"
@confirm="onSubmit()"
@close="onReset()"
>
<div>
<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-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>
<Section :title="$t('profile.appPasswords.title')">
<template #header-buttons>
<Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
</template>
<p>{{ $t('profile.appPasswords.description') }}</p>
<br/>
<TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
<template #actions="slotProps">
<div class="table-actions">
<Button small outline tool danger @click="onRemove(slotProps.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
</div>
</template>
</TableView>
</Section>
</div>
</template>