From 830a3745bacbb72ad82216a068afad95b00e8e0a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 1 Sep 2023 13:32:00 +0200
Subject: [PATCH] feat(api tokens): show warning if token has expired

---
 src/i18n/lang/en.json                 | 1 +
 src/views/user/settings/ApiTokens.vue | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index d67014b2a..ca93154db 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -151,6 +151,7 @@
         "90d": "90 Days",
         "permissionExplanation": "Permissions allow you to scope what an api token is allowed to do.",
         "titleRequired": "The title is required",
+        "expired": "This token has expired {ago}.",
         "delete": {
           "header": "Delete this token",
           "text1": "Are you sure you want to delete the token \"{token}\"?",
diff --git a/src/views/user/settings/ApiTokens.vue b/src/views/user/settings/ApiTokens.vue
index 12983286e..9b5d8bb7a 100644
--- a/src/views/user/settings/ApiTokens.vue
+++ b/src/views/user/settings/ApiTokens.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ApiTokenService from '@/services/apiToken'
 import {computed, onMounted, ref} from 'vue'
-import {formatDateShort} from '@/helpers/time/formatDate'
+import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import XButton from '@/components/input/button.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import ApiTokenModel from '@/models/apiTokenModel'
@@ -138,7 +138,12 @@ function formatPermissionTitle(title: string): string {
 						<br/>
 					</template>
 				</td>
-				<td>{{ formatDateShort(tk.expiresAt) }}</td>
+				<td>
+					{{ formatDateShort(tk.expiresAt) }}
+					<p v-if="tk.expiresAt < new Date()" class="has-text-danger">
+						{{ $t('user.settings.apiTokens.expired', {ago: formatDateSince(tk.expiresAt)}) }}
+					</p>
+				</td>
 				<td>{{ formatDateShort(tk.created) }}</td>
 				<td class="has-text-right">
 					<x-button variant="secondary" @click="() => {tokenToDelete = tk; showDeleteModal = true}">