code/apps/frontend/src/pages/settings.vue at 6e814826b8959f59f1295bc78d2160f53b7fe294 · modrinth/code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
	<div>
		<div class="normal-page no-sidebar">
			<h1>{{ formatMessage(commonMessages.settingsLabel) }}</h1>
		</div>
		<div class="normal-page">
			<div class="normal-page__sidebar">
				<NavStack
					:items="
						[
							{ type: 'heading', label: 'Display' },
							{
								link: '/settings',
								label: formatMessage(commonSettingsMessages.appearance),
								icon: PaintbrushIcon,
							},
							{
								link: '/settings/language',
								label: formatMessage(commonSettingsMessages.language),
								icon: LanguagesIcon,
								badge: `${formatMessage(commonMessages.beta)}`,
							},
							auth.user ? { type: 'heading', label: 'Account' } : null,
							auth.user
								? {
										link: '/settings/profile',
										label: formatMessage(commonSettingsMessages.profile),
										icon: UserIcon,
									}
								: null,
							auth.user
								? {
										link: '/settings/account',
										label: formatMessage(commonSettingsMessages.account),
										icon: ShieldIcon,
									}
								: null,
							auth.user?.email
								? {
										link: '/settings/notifications',
										label: formatMessage(commonSettingsMessages.notifications),
										icon: BellIcon,
									}
								: null,
							auth.user
								? {
										link: '/settings/authorizations',
										label: formatMessage(commonSettingsMessages.authorizedApps),
										icon: GridIcon,
									}
								: null,
							auth.user
								? {
										link: '/settings/sessions',
										label: formatMessage(commonSettingsMessages.sessions),
										icon: MonitorSmartphoneIcon,
									}
								: null,
							auth.user
								? {
										link: '/settings/billing',
										label: formatMessage(commonSettingsMessages.billing),
										icon: CardIcon,
									}
								: null,
							auth.user ? { type: 'heading', label: 'Developer' } : null,
							auth.user
								? {
										link: '/settings/pats',
										label: formatMessage(commonSettingsMessages.pats),
										icon: KeyIcon,
									}
								: null,
							auth.user
								? {
										link: '/settings/applications',
										label: formatMessage(commonSettingsMessages.applications),
										icon: ServerIcon,
									}
								: null,
						].filter(Boolean)
					"
				/>
			</div>
			<div class="normal-page__content mt-3 lg:mt-0">
				<NuxtPage :route="route" />
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	BellIcon,
	CardIcon,
	GridIcon,
	KeyIcon,
	LanguagesIcon,
	MonitorSmartphoneIcon,
	PaintbrushIcon,
	ServerIcon,
	ShieldIcon,
	UserIcon,
} from '@modrinth/assets'
import { commonMessages, commonSettingsMessages, useVIntl } from '@modrinth/ui'

import NavStack from '~/components/ui/NavStack.vue'

const { formatMessage } = useVIntl()

const route = useNativeRoute()
const auth = await useAuth()

useSeoMeta({
	robots: 'noindex',
})
</script>