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

src/components/misc/flatpickr/Flatpickr.vue

@@ -100,11 +100,11 @@ const attrs = useAttrs()
 
 const root = ref<HTMLInputElement | null>(null)
 const fp = ref<flatpickr.Instance | null>(null)
-const safeConfig = ref<Options>({ ...props.config })
+const safeConfig = ref<Options>({...props.config})
 
 function prepareConfig() {
 	// Don't mutate original object on parent component
-	const newConfig: Options = { ...props.config }
+	const newConfig: Options = {...props.config}
 
 	props.events.forEach((hook) => {
 		// Respect global callbacks registered via setDefault() method
@@ -179,7 +179,7 @@ watch(config, () => {
 			fp.value.set(name, safeConfig.value[name])
 		}
 	})
-}, {deep:true})
+}, {deep: true})
 
 const fpInput = computed(() => {
 	if (!fp.value) return
@@ -198,8 +198,8 @@ watchEffect(() => fpInput.value?.addEventListener('blur', onBlur))
 onBeforeUnmount(() => fpInput.value?.removeEventListener('blur', onBlur))
 
 /**
-* Watch for the disabled property and sets the value to the real input.
-*/
+ * Watch for the disabled property and sets the value to the real input.
+ */
 watchEffect(() => {
 	if (disabled.value) {
 		fpInput.value?.setAttribute('disabled', '')

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 -->