api page + model edit dialog

vue3/src/apps/tandoor/main.ts

@@ -28,7 +28,7 @@ import ApiSettings from "@/components/settings/ApiSettings.vue";
 const routes = [
     {path: '/', component: StartPage, name: 'view_home'},
     {path: '/test', component: TestPage, name: 'view_test'},
-    {path: '/settings', component: SettingsPage, name: 'view_settings', redirect: 'settings/account',
+    {path: '/settings', component: SettingsPage, name: 'view_settings', redirect: '/settings/account',
         children: [
             {path: 'account', component: AccountSettings, name: 'view_settings_account'},
             {path: 'cosmetic', component: CosmeticSettings, name: 'view_settings_cosmetic'},

vue3/src/components/dialogs/ModelEditorDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <v-dialog max-width="600" activator="parent" v-model="dialog">
-        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" v-if="model == SupportedModels.AccessToken"></access-token-editor>
+        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.AccessToken"></access-token-editor>
     </v-dialog>
 </template>
 
@@ -19,7 +19,7 @@ const emit = defineEmits(['create', 'save', 'delete'])
 
 const props = defineProps({
     model: {
-        type: '',
+        type: String,
         required: true,
         validator: (val) => ['AccessToken'].includes(val)
     },

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -1,13 +1,20 @@
 <template>
     <v-card>
-        <v-card-title>{{ $t(OBJ_LOCALIZATION_KEY) }}</v-card-title>
+        <v-card-title>
+            {{ $t(OBJ_LOCALIZATION_KEY) }}
+            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
+        </v-card-title>
         <v-card-text>
             <v-form>
-                <v-text-field label="Token" v-model="editingObj.token" disabled>
-                    <template #append>
-                        <v-btn color="info" variant="tonal" icon="$copy"></v-btn>
-                    </template>
-                </v-text-field>
+                <v-row>
+                    <v-col cols="10">
+                        <v-text-field label="Token" v-model="editingObj.token" disabled></v-text-field>
+                    </v-col>
+                    <v-col cols="2">
+                        <v-btn color="info" variant="tonal" icon="$copy" @click="copy(editingObj.token)"></v-btn>
+                    </v-col>
+                </v-row>
+
                 <v-text-field label="Scope" v-model="editingObj.scope"></v-text-field>
                 <v-date-input :label="$t('Valid Until')" v-model="editingObj.expires"></v-date-input>
             </v-form>
@@ -30,13 +37,16 @@ import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {useI18n} from "vue-i18n";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
+import {useClipboard} from "@vueuse/core";
 
 const {t} = useI18n()
+const {copy} = useClipboard()
 
-const emit = defineEmits(['create', 'save', 'delete'])
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
 
 const props = defineProps({
-     item: {type: {} as AccessToken, required: false},
+    item: {type: {} as AccessToken, required: false},
+    dialog: {type: Boolean, default: false}
 })
 
 const OBJ_LOCALIZATION_KEY = 'Access_Token'

vue3/src/components/settings/ApiSettings.vue

@@ -25,20 +25,18 @@
 
         <v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards.</v-alert>
 
-        <v-btn prepend-icon="$create" color="create">{{$t('New')}}
-             <model-editor-dialog model="AccessToken" @create="loadAccessTokens()" :close-after-create="false"></model-editor-dialog>
+        <v-btn prepend-icon="$create" color="create" class="mt-2">{{ $t('New') }}
+            <model-editor-dialog model="AccessToken" @create="loadAccessTokens()" :close-after-create="false"></model-editor-dialog>
         </v-btn>
 
-        <v-list>
-            <v-list-item v-for="at in accessTokenList">
+        <v-list class="mt-2" border>
+            <v-list-item v-for="at in accessTokenList" >
                 <v-list-item-title>{{ at.token }}</v-list-item-title>
                 <v-list-item-subtitle>Scope {{ at.scope }}
-                    <v-chip color="error" density="compact" v-if="at.expires < DateTime.now().toJSDate()">Expired</v-chip>
-                    <span v-if="at.expires >= DateTime.now().toJSDate()">
-                        Expires {{ DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL) }}
-                    </span>
+                    Expires {{ DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL) }}
                 </v-list-item-subtitle>
                 <template #append>
+                    <v-chip color="error" class="me-2" v-if="at.expires < DateTime.now().toJSDate()">Expired</v-chip>
                     <v-btn color="edit">
                         <v-icon icon="$edit"></v-icon>
                         <model-editor-dialog model="AccessToken" :item="at" class="mt-2" @delete="loadAccessTokens()"></model-editor-dialog>
@@ -48,7 +46,6 @@
         </v-list>
 
 
-
     </v-form>
 </template>
 

vue3/src/vuetify.ts

@@ -63,6 +63,7 @@ export default createVuetify({
             create: 'fa-solid fa-circle-plus',
             search: 'fa-solid fa-magnifying-glass',
             copy: 'fa-solid fa-copy',
+            close: 'fa-solid fa-xmark',
             settings: 'fa-solid fa-sliders',
             spaces: 'fa-solid fa-database',
             shopping: 'fa-solid fa-cart-shopping',