fix(api tokens): show a token after it was created

src/i18n/lang/en.json

@@ -157,6 +157,8 @@
         "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}.",
+        "tokenCreatedSuccess": "Here is your new api token: {token}",
+        "tokenCreatedNotSeeAgain": "Store it in a secure location, you won't see it again!",
         "delete": {
           "header": "Delete this token",
           "text1": "Are you sure you want to delete the token \"{token}\"?",

src/views/user/settings/ApiTokens.vue

@@ -11,6 +11,7 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import {useI18n} from 'vue-i18n'
 import {useAuthStore} from '@/stores/auth'
+import Message from '@/components/misc/message.vue'
 
 const service = new ApiTokenService()
 const tokens = ref([])
@@ -23,6 +24,7 @@ const newTokenExpiryCustom = ref(new Date())
 const newTokenPermissions = ref({})
 const newTokenTitleValid = ref(true)
 const apiTokenTitle = ref()
+const tokenCreatedSuccessMessage = ref('')
 
 const showDeleteModal = ref(false)
 const tokenToDelete = ref(null)
@@ -97,6 +99,7 @@ async function createToken() {
 	})
 
 	const token = await service.create(newToken.value)
+	tokenCreatedSuccessMessage.value = t('user.settings.apiTokens.tokenCreatedSuccess', {token: token.token})
 	newToken.value = new ApiTokenModel()
 	newTokenExpiry.value = 30
 	newTokenExpiryCustom.value = new Date()
@@ -113,6 +116,11 @@ function formatPermissionTitle(title: string): string {
 <template>
 	<card :title="$t('user.settings.apiTokens.title')">
 
+		<message v-if="tokenCreatedSuccessMessage !== ''" class="has-text-centered mb-4">
+			{{ tokenCreatedSuccessMessage }}<br/>
+			{{ $t('user.settings.apiTokens.tokenCreatedNotSeeAgain') }}
+		</message>
+
 		<p>
 			{{ $t('user.settings.apiTokens.general') }}
 			<BaseButton :href="apiDocsUrl">{{ $t('user.settings.apiTokens.apiDocs') }}</BaseButton>