feat: move title and api config to no auth wrapper

src/components/misc/api-config.vue

@@ -23,7 +23,7 @@
 			</div>
 		</div>
 		<div class="api-url-info" v-else>
-			<i18n-t keypath="apiConfig.signInOn">
+			<i18n-t keypath="apiConfig.use">
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
 			<br/>

src/components/misc/no-auth-wrapper.vue

@@ -6,12 +6,16 @@
 				<Message v-if="motd !== ''">
 					{{ motd }}
 				</Message>
-				<h2 class="title">
+				<h2 class="image-title">
 					{{ $t('misc.welcomeBack') }}
 				</h2>
 			</section>
 			<section class="content">
-				<slot/>
+				<div>
+					<h2 class="title" v-if="title">{{ title }}</h2>
+					<api-config @foundApi="hasApiUrl = true"/>
+					<slot/>
+				</div>
 				<legal/>
 			</section>
 		</div>
@@ -22,11 +26,21 @@
 import Logo from '@/components/home/Logo'
 import Message from '@/components/misc/message'
 import Legal from '@/components/misc/legal'
+import ApiConfig from '@/components/misc/api-config.vue'
 import {useStore} from 'vuex'
 import {computed} from 'vue'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import {useTitle} from '@/composables/useTitle'
 
+const route = useRoute()
 const store = useStore()
+const {t} = useI18n()
+
 const motd = computed(() => store.state.config.motd)
+// @ts-ignore
+const title = computed(() => t(route.meta.title ?? ''))
+useTitle(() => title.value)
 </script>
 
 <style lang="scss" scoped>
@@ -109,7 +123,7 @@ const motd = computed(() => store.state.config.motd)
 	margin: 1rem 0;
 }
 
-.title {
+.image-title {
 	color: var(--white);
 	font-size: 2.5rem;
 }

src/i18n/lang/en.json

@@ -813,7 +813,7 @@
     "url": "Vikunja URL",
     "urlPlaceholder": "eg. https://localhost:3456",
     "change": "change",
-    "signInOn": "Sign in to your Vikunja account on {0}",
+    "use": "Using Vikunja installation on {0}",
     "error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
     "success": "Using Vikunja installation at \"{domain}\".",
     "urlRequired": "A url is required."

src/router/index.js

@@ -105,21 +105,33 @@ const router = createRouter({
 			path: '/login',
 			name: 'user.login',
 			component: LoginComponent,
+			meta: {
+				title: 'user.auth.login',
+			},
 		},
 		{
 			path: '/get-password-reset',
 			name: 'user.password-reset.request',
 			component: GetPasswordResetComponent,
+			meta: {
+				title: 'user.auth.resetPassword',
+			},
 		},
 		{
 			path: '/password-reset',
 			name: 'user.password-reset.reset',
 			component: PasswordResetComponent,
+			meta: {
+				title: 'user.auth.resetPassword',
+			},
 		},
 		{
 			path: '/register',
 			name: 'user.register',
 			component: RegisterComponent,
+			meta: {
+				title: 'user.auth.register',
+			},
 		},
 		{
 			path: '/user/settings',

src/views/user/Login.vue

@@ -1,14 +1,12 @@
 <template>
 	<div>
-		<h2 class="title">Login</h2>
-		<api-config @foundApi="hasApiUrl = true"/>
 		<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
 			{{ $t('user.auth.confirmEmailSuccess') }}
 		</message>
 		<message variant="danger" v-if="errorMessage">
 			{{ errorMessage }}
 		</message>
-		<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && localAuthEnabled">
+		<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
 			<div class="field">
 				<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
 				<div class="control">
@@ -103,7 +101,6 @@ import {mapState} from 'vuex'
 
 import {HTTPFactory} from '@/http-common'
 import {LOADING} from '@/store/mutation-types'
-import ApiConfig from '@/components/misc/api-config.vue'
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message'
 import {redirectToProvider} from '../../helpers/redirectToProvider'
@@ -112,12 +109,10 @@ import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 export default {
 	components: {
 		Message,
-		ApiConfig,
 	},
 	data() {
 		return {
 			confirmedEmailSuccess: false,
-			hasApiUrl: false,
 			errorMessage: '',
 		}
 	},
@@ -155,13 +150,11 @@ export default {
 		}
 	},
 	created() {
-		this.hasApiUrl = window.API_URL !== ''
 		this.setTitle(this.$t('user.auth.login'))
 	},
 	computed: {
 		hasOpenIdProviders() {
-			return this.hasApiUrl &&
-				this.openidConnect.enabled &&
+			return this.openidConnect.enabled &&
 				this.openidConnect.providers &&
 				this.openidConnect.providers.length > 0
 		},

src/views/user/PasswordReset.vue

@@ -1,6 +1,5 @@
 <template>
 	<div>
-		<h2 class="title">{{ $t('user.auth.resetPassword') }}</h2>
 		<message v-if="errorMsg">
 			{{ errorMsg }}
 		</message>
@@ -65,11 +64,9 @@ import {useI18n} from 'vue-i18n'
 
 import PasswordResetModel from '@/models/passwordReset'
 import PasswordResetService from '@/services/passwordReset'
-import {useTitle} from '@/composables/useTitle'
 import Message from '@/components/misc/message'
 
 const {t} = useI18n()
-useTitle(() => t('user.auth.resetPassword'))
 
 const credentials = reactive({
 	password: '',

src/views/user/Register.vue

@@ -1,6 +1,8 @@
 <template>
 	<div>
-		<h2 class="title">{{ $t('user.auth.register') }}</h2>
+		<message variant="danger" v-if="errorMessage !== ''">
+			{{ errorMessage }}
+		</message>
 		<form @submit.prevent="submit" id="registerform">
 			<div class="field">
 				<label class="label" for="username">{{ $t('user.auth.username') }}</label>
@@ -82,12 +84,6 @@
 					</x-button>
 				</div>
 			</div>
-			<message v-if="loading">
-				{{ $t('misc.loading') }}
-			</message>
-			<message variant="danger" v-if="errorMessage !== ''">
-				{{ errorMessage }}
-			</message>
 		</form>
 	</div>
 </template>
@@ -98,7 +94,6 @@ import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
 import {store} from '@/store'
-import {useTitle} from '@/composables/useTitle'
 import Message from '@/components/misc/message'
 
 // FIXME: use the `beforeEnter` hook of vue-router
@@ -110,7 +105,6 @@ onBeforeMount(() => {
 })
 
 const {t} = useI18n()
-useTitle(() => t('user.auth.register'))
 
 const credentials = reactive({
 	username: '',

src/views/user/RequestPasswordReset.vue

@@ -1,6 +1,5 @@
 <template>
 	<div>
-		<h2 class="title">{{ $t('user.auth.resetPassword') }}</h2>
 		<message variant="danger" v-if="errorMsg">
 			{{ errorMsg }}
 		</message>
@@ -51,11 +50,9 @@ import {useI18n} from 'vue-i18n'
 
 import PasswordResetModel from '@/models/passwordReset'
 import PasswordResetService from '@/services/passwordReset'
-import {useTitle} from '@/composables/useTitle'
 import Message from '@/components/misc/message'
 
 const {t} = useI18n()
-useTitle(() => t('user.auth.resetPassword'))
 
 // Not sure if this instance needs a shalloRef at all
 const passwordResetService = reactive(new PasswordResetService())