feat: restyle unauthenticated screens (#1103)

I wanted to give the no-auth screens a new look. Here's what I ended up with:

![image](/attachments/d272f36b-03c1-40ca-91f6-30f34e03e5fd)

The image is something we could change with every release.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1103
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

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/>
@@ -101,7 +101,7 @@ export default {
 
 				// Set it + save it to local storage to save us the hoops
 				this.errorMsg = ''
-				this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
+				this.$message.success({message: this.$t('apiConfig.success', {domain: this.apiDomain})})
 				this.configureApi = false
 				this.apiUrl = url
 				this.$emit('foundApi', this.apiUrl)

src/components/misc/message.vue

@@ -1,7 +1,9 @@
 <template>
+	<div class="message-wrapper">
 		<div class="message" :class="variant">
 			<slot/>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -14,6 +16,11 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
+.message-wrapper {
+	border-radius: $radius;
+	background: var(--white);
+}
+
 .message {
 	padding: .75rem 1rem;
 	border-radius: $radius;

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

@@ -1,40 +1,134 @@
 <template>
 	<div class="no-auth-wrapper">
+		<Logo class="logo" width="200" height="58"/>
 		<div class="noauth-container">
-			<Logo class="logo" width="400" height="117" />
+			<section class="image" :class="{'has-message': motd !== ''}">
-			<Message v-if="motd !== ''" class="my-2">
+				<Message v-if="motd !== ''">
 					{{ motd }}
 				</Message>
+				<h2 class="image-title">
+					{{ $t('misc.welcomeBack') }}
+				</h2>
+			</section>
+			<section class="content">
+				<div>
+					<h2 class="title" v-if="title">{{ title }}</h2>
+					<api-config @foundApi="hasApiUrl = true"/>
 					<slot/>
 				</div>
+				<legal/>
+			</section>
+		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import Logo from '@/components/home/Logo.vue'
+import Logo from '@/components/home/Logo'
-import Message from '@/components/misc/message.vue'
+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>
 .no-auth-wrapper {
-	background: url('@/assets/llama.svg?url') no-repeat bottom left fixed var(--site-background);
+	background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
 	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	place-items: center;
+
+	@media screen and (max-width: $fullhd) {
+		padding-bottom: 15rem;
+	}
 }
 
 .noauth-container {
-	max-width: 450px;
+	max-width: $desktop;
 	width: 100%;
-	margin: 0 auto;
+	min-height: 60vh;
+	display: flex;
+	background-color: var(--white);
+	box-shadow: var(--shadow-md);
+	overflow: hidden;
+
+	@media screen and (min-width: $desktop) {
+		border-radius: $radius;
+	}
+}
+
+.image {
+	width: 50%;
 	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+
+	@media screen and (max-width: $tablet) {
+		display: none;
+	}
+
+	@media screen and (min-width: $tablet) {
+		background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
+		position: relative;
+
+		&.has-message {
+			justify-content: space-between;
+		}
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: rgba(0, 0, 0, .2);
+		}
+
+		> * {
+			position: relative;
+		}
+	}
+}
+
+.content {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	padding: 2rem 2rem 1.5rem;
+
+	@media screen and (max-width: $desktop) {
+		width: 100%;
+		max-width: 450px;
+		margin-inline: auto;
+	}
+
+	@media screen and (min-width: $desktop) {
+		width: 50%;
+	}
 }
 
 .logo {
-	color: var(--logo-text-color);
 	max-width: 100%;
+	margin: 1rem 0;
+}
+
+.image-title {
+	color: var(--white);
+	font-size: 2.5rem;
 }
 </style>

src/i18n/lang/en.json

@@ -36,6 +36,7 @@
       "password": "Password",
       "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
+      "forgotPassword": "Forgot your password?",
       "resetPassword": "Reset your password",
       "resetPasswordAction": "Send me a password reset link",
       "resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@@ -473,7 +474,8 @@
     "download": "Download",
     "showMenu": "Show the menu",
     "hideMenu": "Hide the menu",
-    "forExample": "For example:"
+    "forExample": "For example:",
+    "welcomeBack": "Welcome Back!"
   },
   "input": {
     "resetColor": "Reset Color",
@@ -811,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 at {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,12 +1,12 @@
 <template>
 	<div>
-		<h2 class="title has-text-centered">Login</h2>
-		<div class="box">
 		<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
 			{{ $t('user.auth.confirmEmailSuccess') }}
 		</message>
-			<api-config @foundApi="hasApiUrl = true"/>
+		<message variant="danger" v-if="errorMessage">
-			<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && localAuthEnabled">
+			{{ errorMessage }}
+		</message>
+		<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">
@@ -74,13 +74,10 @@
 				</div>
 				<div class="control">
 					<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
-							{{ $t('user.auth.resetPassword') }}
+						{{ $t('user.auth.forgotPassword') }}
 					</router-link>
 				</div>
 			</div>
-				<message variant="danger" v-if="errorMessage">
-					{{ errorMessage }}
-				</message>
 		</form>
 
 		<div
@@ -96,9 +93,6 @@
 				{{ $t('user.auth.loginWith', {provider: p.name}) }}
 			</x-button>
 		</div>
-
-			<legal/>
-		</div>
 	</div>
 </template>
 
@@ -107,8 +101,6 @@ import {mapState} from 'vuex'
 
 import {HTTPFactory} from '@/http-common'
 import {LOADING} from '@/store/mutation-types'
-import legal from '../../components/misc/legal'
-import ApiConfig from '@/components/misc/api-config.vue'
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message'
 import {redirectToProvider} from '../../helpers/redirectToProvider'
@@ -117,13 +109,10 @@ import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 export default {
 	components: {
 		Message,
-		ApiConfig,
-		legal,
 	},
 	data() {
 		return {
 			confirmedEmailSuccess: false,
-			hasApiUrl: false,
 			errorMessage: '',
 		}
 	},
@@ -161,13 +150,11 @@ export default {
 		}
 	},
 	created() {
-		this.hasApiUrl = window.API_URL !== ''
 		this.setTitle(this.$t('user.auth.login'))
 	},
 	computed: {
 		hasOpenIdProviders() {
-			return this.hasApiUrl &&
+			return this.openidConnect.enabled &&
-				this.openidConnect.enabled &&
 				this.openidConnect.providers &&
 				this.openidConnect.providers.length > 0
 		},

src/views/user/PasswordReset.vue

@@ -1,7 +1,16 @@
 <template>
 	<div>
-		<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
+		<message v-if="errorMsg">
-		<div class="box">
+			{{ errorMsg }}
+		</message>
+		<div class="has-text-centered" v-if="successMessage">
+			<message variant="success">
+				{{ successMessage }}
+			</message>
+			<x-button :to="{ name: 'user.login' }">
+				{{ $t('user.auth.login') }}
+			</x-button>
+		</div>
 		<form @submit.prevent="submit" id="form" v-if="!successMessage">
 			<div class="field">
 				<label class="label" for="password1">{{ $t('user.auth.password') }}</label>
@@ -45,23 +54,7 @@
 					</x-button>
 				</div>
 			</div>
-				<message v-if="this.passwordResetService.loading">
-					{{ $t('misc.loading') }}
-				</message>
-				<message v-if="errorMsg">
-					{{ errorMsg }}
-				</message>
 		</form>
-			<div class="has-text-centered" v-if="successMessage">
-				<message variant="success">
-					{{ successMessage }}
-				</message>
-				<x-button :to="{ name: 'user.login' }">
-					{{ $t('user.auth.login') }}
-				</x-button>
-			</div>
-			<Legal/>
-		</div>
 	</div>
 </template>
 
@@ -69,14 +62,11 @@
 import {ref, reactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import Legal from '@/components/misc/legal'
 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,7 +1,8 @@
 <template>
 	<div>
-		<h2 class="title has-text-centered">{{ $t('user.auth.register') }}</h2>
+		<message variant="danger" v-if="errorMessage !== ''">
-		<div class="box">
+			{{ errorMessage }}
+		</message>
 		<form @submit.prevent="submit" id="registerform">
 			<div class="field">
 				<label class="label" for="username">{{ $t('user.auth.username') }}</label>
@@ -83,15 +84,7 @@
 					</x-button>
 				</div>
 			</div>
-				<message v-if="loading">
-					{{ $t('misc.loading') }}
-				</message>
-				<message variant="danger" v-if="errorMessage !== ''">
-					{{ errorMessage }}
-				</message>
 		</form>
-			<legal/>
-		</div>
 	</div>
 </template>
 
@@ -101,8 +94,6 @@ import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
 import {store} from '@/store'
-import {useTitle} from '@/composables/useTitle'
-import Legal from '@/components/misc/legal'
 import Message from '@/components/misc/message'
 
 // FIXME: use the `beforeEnter` hook of vue-router
@@ -114,7 +105,6 @@ onBeforeMount(() => {
 })
 
 const {t} = useI18n()
-useTitle(() => t('user.auth.register'))
 
 const credentials = reactive({
 	username: '',

src/views/user/RequestPasswordReset.vue

@@ -1,7 +1,16 @@
 <template>
 	<div>
-		<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
+		<message variant="danger" v-if="errorMsg">
-		<div class="box">
+			{{ errorMsg }}
+		</message>
+		<div class="has-text-centered" v-if="isSuccess">
+			<message variant="success">
+				{{ $t('user.auth.resetPasswordSuccess') }}
+			</message>
+			<x-button :to="{ name: 'user.login' }">
+				{{ $t('user.auth.login') }}
+			</x-button>
+		</div>
 		<form @submit.prevent="submit" v-if="!isSuccess">
 			<div class="field">
 				<label class="label" for="email">{{ $t('user.auth.email') }}</label>
@@ -31,37 +40,17 @@
 					</x-button>
 				</div>
 			</div>
-				<message variant="danger" v-if="errorMsg">
-					{{ errorMsg }}
-				</message>
 		</form>
-			<div class="has-text-centered" v-if="isSuccess">
-				<message variant="success">
-					{{ $t('user.auth.resetPasswordSuccess') }}
-				</message>
-				<x-button :to="{ name: 'user.login' }">
-					{{ $t('user.auth.login') }}
-				</x-button>
-			</div>
-			<Legal />
-		</div>
 	</div>
 </template>
 
 <script setup>
 import {ref, reactive} from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Legal from '@/components/misc/legal'
 
 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())
 const passwordReset = ref(new PasswordResetModel())
@@ -73,7 +62,7 @@ async function submit() {
 	try {
 		await passwordResetService.requestResetPassword(passwordReset.value)
 		isSuccess.value = true
-	} catch(e) {
+	} catch (e) {
 		errorMsg.value = e.response.data.message
 	}
 }