UPD: Refactored date-time-picker into it's own component

frontend/src/components/date-time-picker.vue

+<template>
+    <b-form-group :label="label" label-for="id" class="mb-0">
+        <VueCtkDateTimePicker
+                :inline="!isMobile()"
+                format="DD-MM-YYYY HH:mm"
+                locale="de"
+                noButtonNow
+                minute-interval="5"
+                noLabel
+                no-keyboard
+                noClearButton
+                id="id"
+                color="#007BFF"
+                button-color="#007BFF"
+                :v-model="model"/>
+    </b-form-group>
+</template>
+
+<script>
+    export default {
+        name: "date-time-picker",
+        props: ['label', 'model'],
+        data () {
+            return {
+                id: null,
+            }
+        },
+        mounted() {
+            this.id = this._uid
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

frontend/src/views/netdb/tokens.vue

@@ -102,21 +102,7 @@
                     />
                 </b-form-group>
                 <div v-if="new_token.expiration_date != null">
-                    <b-form-group label="Ablaufdatum:" label-for="input-token-create-expiration_date" class="mb-0">
-                        <VueCtkDateTimePicker
-                                :inline="!isMobile()"
-                                format="DD-MM-YYYY HH:mm"
-                                locale="de"
-                                noButtonNow
-                                minute-interval="5"
-                                noLabel
-                                no-keyboard
-                                noClearButton
-                                id="input-token-create-expiration_date"
-                                color="#007BFF"
-                                button-color="#007BFF"
-                                v-model="new_token.expiration_date"/>
-                    </b-form-group>
+                    <date-time-picker label="Ablaufdatum:" :model="new_token.expiration_date"/>
                     <b-button block variant="outline-secondary" @click="new_token.expiration_date = null">
                         Ablaufdatum entfernen
                     </b-button>
@@ -173,21 +159,7 @@
                 </b-form-group>
             </b-form>
             <div v-if="new_token.expiration_date != null">
-                <b-form-group label="Ablaufdatum:" label-for="input-token-edit-expiration_date" class="mb-0">
-                    <VueCtkDateTimePicker
-                            :inline="!isMobile()"
-                            format="DD-MM-YYYY HH:mm"
-                            locale="de"
-                            noButtonNow
-                            minute-interval="5"
-                            noLabel
-                            no-keyboard
-                            noClearButton
-                            id="input-token-edit-expiration_date"
-                            color="#007BFF"
-                            button-color="#007BFF"
-                            v-model="new_token.expiration_date"/>
-                </b-form-group>
+                <date-time-picker label="Ablaufdatum:" :model="new_token.expiration_date"/>
                 <b-button block variant="outline-secondary" @click="new_token.expiration_date = null">
                     Ablaufdatum entfernen
                 </b-button>
@@ -315,7 +287,6 @@
                             </template>
                         </template>
                         <template v-slot:cell(expiration_date)="data">
-                            <!-- TODO: Expired tokens should be red; might be ugly / difficult -->
                             {{formatDate(data.item.expiration_date)}}
                             <template v-if="data.item.is_expired">
                                 (Expired)
@@ -345,9 +316,11 @@
     import TokenService from '@/api-services.gen/cntl.wapi_auth'
     import ApiUtil from '@/util/apiutil'
     import '@/util/colorutil'
+    import DateTimePicker from "../../components/date-time-picker";
 
     export default {
         name: 'tokens',
+        components: {DateTimePicker},
         data() {
             return {
                 // TODO: remove test/wip data aka implement role management