feat(api tokens): allow custom selection of expiry dates

src/views/user/settings/ApiTokens.vue

@@ -7,6 +7,10 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import ApiTokenModel from '@/models/apiTokenModel'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import {MILLISECONDS_A_DAY} from '@/constants/date'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+import {useI18n} from 'vue-i18n'
+import {useAuthStore} from '@/stores/auth'
 
 const service = new ApiTokenService()
 const tokens = ref([])
@@ -15,10 +19,27 @@ const showCreateForm = ref(false)
 const availableRoutes = ref(null)
 const newToken = ref(new ApiTokenModel())
 const newTokenExpiry = ref<string | number>(30)
+const newTokenExpiryCustom = ref(new Date())
 const newTokenPermissions = ref({})
 const newTokenTitleValid = ref(true)
 const apiTokenTitle = ref()
 
+const {t} = useI18n()
+const authStore = useAuthStore()
+
+const now = new Date()
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: true,
+	time_24hr: true,
+	locale: {
+		firstDayOfWeek: authStore.settings.weekStart,
+	},
+	minDate: now,
+}))
+
 onMounted(async () => {
 	tokens.value = await service.getAll()
 	availableRoutes.value = await service.getAvailableRoutes()
@@ -49,6 +70,8 @@ async function createToken() {
 	if (!isNaN(expiry)) {
 		// if it's a number, we assume it's the number of days in the future
 		newToken.value.expiresAt = new Date((new Date()) + expiry * MILLISECONDS_A_DAY)
+	} else {
+		newToken.value.expiresAt = new Date(newTokenExpiryCustom.value)
 	}
 
 	newToken.value.permissions = {}
@@ -65,6 +88,7 @@ async function createToken() {
 	const token = await service.create(newToken.value)
 	newToken.value = new ApiTokenModel()
 	newTokenExpiry.value = 30
+	newTokenExpiryCustom.value = new Date()
 	resetPermissions()
 	tokens.value.push(token)
 	showCreateForm.value = false
@@ -139,6 +163,7 @@ async function createToken() {
 				<label class="label" for="apiTokenExpiry">
 					{{ $t('user.settings.apiTokens.attributes.expiresAt') }}
 				</label>
+				<div class="is-flex">
 					<div class="control select">
 						<select class="select" v-model="newTokenExpiry" id="apiTokenExpiry">
 							<option value="30">{{ $t('user.settings.apiTokens.30d') }}</option>
@@ -147,6 +172,13 @@ async function createToken() {
 							<option value="custom">{{ $t('misc.custom') }}</option>
 						</select>
 					</div>
+					<flat-pickr
+						v-if="newTokenExpiry === 'custom'"
+						class="ml-2"
+						:config="flatPickerConfig"
+						v-model="newTokenExpiryCustom"
+					/>
+				</div>
 			</div>
 
 			<!-- Permissions -->