feat(settings): show extra settings links on user settings page

frontend/src/components/misc/Icon.ts

@@ -6,6 +6,7 @@ import {
 	faArchive,
 	faArrowLeft,
 	faArrowUpFromBracket,
+	faArrowUpRightFromSquare,
 	faBold,
 	faItalic,
 	faStrikethrough,
@@ -195,6 +196,7 @@ library.add(faRulerHorizontal)
 library.add(faUnderline)
 library.add(faFaceLaugh)
 library.add(faExclamation)
+library.add(faArrowUpRightFromSquare)
 
 // overwriting the wrong types
 export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes

frontend/src/modelTypes/IUserSettings.ts

@@ -19,6 +19,15 @@ export interface IFrontendSettings {
 	dateDisplay: DateDisplay
 }
 
+export interface IExtraSettingsLink {
+	text: string
+	url: string
+}
+
+export interface IExtraSettingsLinks {
+	[key: string]: IExtraSettingsLink
+}
+
 export interface IUserSettings extends IAbstract {
 	name: string
 	emailRemindersEnabled: boolean
@@ -31,4 +40,5 @@ export interface IUserSettings extends IAbstract {
 	timezone: string
 	language: SupportedLocale | null
 	frontendSettings: IFrontendSettings
+	extraSettingsLinks: IExtraSettingsLinks
 }

frontend/src/models/userSettings.ts

@@ -27,6 +27,7 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 		minimumPriority: PRIORITIES.MEDIUM,
 		dateDisplay: DATE_DISPLAY.RELATIVE,
 	}
+	extraSettingsLinks = {}
 
 	constructor(data: Partial<IUserSettings> = {}) {
 		super()

frontend/src/views/user/Settings.vue

@@ -15,6 +15,24 @@
 							{{ title }}
 						</RouterLink>
 					</li>
+					<li
+						v-for="({url, text}, index) in extraSettingsLinks"
+						:key="index"
+					>
+						<BaseButton
+							class="navigation-link is-flex is-align-items-center"
+							:href="url"
+						>
+							<span>
+								{{ text }}
+							</span>
+							<span class="ml-1 has-text-grey-light is-size-7">
+								<Icon
+									icon="arrow-up-right-from-square"
+								/>
+							</span>
+						</BaseButton>
+					</li>
 				</ul>
 			</nav>
 			<section class="view">
@@ -32,6 +50,8 @@ import { useConfigStore } from '@/stores/config'
 import { useAuthStore } from '@/stores/auth'
 import {useRoute} from 'vue-router'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('user.settings.title'))
 
@@ -97,6 +117,8 @@ const navigationItems = computed(() => {
 	
 	return items.filter(({condition}) => condition !== false)
 })
+
+const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 </script>
 
 <style lang="scss" scoped>

pkg/routes/api/v1/user_settings.go

@@ -62,6 +62,8 @@ type UserSettings struct {
 	Timezone string `json:"timezone"`
 	// Additional settings only used by the frontend
 	FrontendSettings interface{} `json:"frontend_settings"`
+	// Additional settings links as provided by openid
+	ExtraSettingsLinks map[string]any `json:"extra_settings_links"`
 }
 
 // GetUserAvatarProvider returns the currently set user avatar

pkg/routes/api/v1/user_show.go

@@ -80,6 +80,7 @@ func UserShow(c echo.Context) error {
 			Timezone:                     u.Timezone,
 			OverdueTasksRemindersTime:    u.OverdueTasksRemindersTime,
 			FrontendSettings:             u.FrontendSettings,
+			ExtraSettingsLinks:           u.ExtraSettingsLinks,
 		},
 		DeletionScheduledAt: u.DeletionScheduledAt,
 		IsLocalUser:         u.Issuer == user.IssuerLocal,