feat: add message component (#1082)

This PR adds a simple message component that replaces bulma's default message.

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

cypress/integration/user/login.spec.js

@@ -8,7 +8,7 @@ const testAndAssertFailed = fixture => {
 
 	cy.wait(5000) // It can take waaaayy too long to log the user in
 	cy.url().should('include', '/')
-	cy.get('div.notification.is-danger').contains('Wrong username or password.')
+	cy.get('div.message.danger').contains('Wrong username or password.')
 }
 
 context('Login', () => {

cypress/integration/user/registration.spec.js

@@ -32,7 +32,7 @@ context('Registration', () => {
 		cy.get('h2').should('contain', `Hi ${fixture.username}!`)
 	})
 
-	it('Should fail', () => {
+	it.only('Should fail', () => {
 		const fixture = {
 			username: 'test',
 			password: '123456',
@@ -45,6 +45,6 @@ context('Registration', () => {
 		cy.get('#password').type(fixture.password)
 		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
-		cy.get('div.notification.is-danger').contains('A user with this username already exists.')
+		cy.get('div.message.danger').contains('A user with this username already exists.')
 	})
 })

package.json

@@ -130,7 +130,10 @@
     "ignorePatterns": [
       "*.test.*",
       "cypress/*"
-    ]
+    ],
+    "globals": {
+      "defineProps": "readonly"
+    }
   },
   "postcss": {
     "plugins": {

src/components/misc/api-config.vue

@@ -30,27 +30,25 @@
 			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
 		</div>
 
-		<div
+		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
-			class="notification is-success mt-2"
-			v-if="successMsg !== '' && errorMsg === ''"
-		>
 			{{ successMsg }}
-		</div>
+		</message>
-		<div
+		<message variant="danger" v-if="errorMsg !== '' && successMsg === ''" class="mt-2">
-			class="notification is-danger mt-2"
-			v-if="errorMsg !== '' && successMsg === ''"
-		>
 			{{ errorMsg }}
-		</div>
+		</message>
 	</div>
 </template>
 
 <script>
+import Message from '@/components/misc/message'
 import {parseURL} from 'ufo'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 export default {
 	name: 'apiConfig',
+	components: {
+		Message,
+	},
 	data() {
 		return {
 			configureApi: false,

src/components/misc/error.vue

@@ -1,15 +1,18 @@
 <template>
-	<div class="notification is-danger">
+	<message variant="danger">
 		<i18n-t keypath="loadingError.failed">
 			<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
 			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
 		</i18n-t>
-	</div>
+	</message>
 </template>
 
 <script>
+import Message from '@/components/misc/message'
+
 export default {
 	name: 'error',
+	components: {Message},
 	methods: {
 		reload() {
 			window.location.reload()

src/components/misc/keyboard-shortcuts/index.vue

@@ -4,13 +4,11 @@
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
-				<div class="message is-primary">
+				<message>
-					<div class="message-body">
 					{{
 						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
 					}}
-					</div>
+				</message>
-				</div>
 
 				<dl class="shortcut-list">
 					<template v-for="(sc, si) in s.shortcuts" :key="si">
@@ -30,11 +28,15 @@
 <script>
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message'
 import {KEYBOARD_SHORTCUTS} from './shortcuts'
 
 export default {
 	name: 'keyboard-shortcuts',
-	components: {Shortcut},
+	components: {
+		Message, 
+		Shortcut,
+	},
 	data() {
 		return {
 			shortcuts: KEYBOARD_SHORTCUTS,

src/components/misc/message.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="message" :class="variant">
+		<slot/>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	variant: {
+		type: String,
+		default: 'info',
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.message {
+	padding: .75rem 1rem;
+	border-radius: $radius;
+}
+
+.info {
+	border: 1px solid var(--primary);
+	background: hsla(var(--primary-hsl), .05);
+}
+
+.danger {
+	border: 1px solid var(--danger);
+	background: hsla(var(--danger-h), var(--danger-s), var(--danger-l), .05);
+}
+
+.warning {
+	border: 1px solid var(--warning);
+	background: hsla(var(--warning-h), var(--warning-s), var(--warning-l), .05);
+}
+
+.success {
+	border: 1px solid var(--success);
+	background: hsla(var(--success-h), var(--success-s), var(--success-l), .05);
+}
+</style>

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

@@ -2,14 +2,9 @@
 	<div class="no-auth-wrapper">
 		<div class="noauth-container">
 			<Logo class="logo" width="400" height="117" />
-			<div class="message is-info" v-if="motd !== ''">
+			<message v-if="motd !== ''" class="my-2">
-				<div class="message-header">
-					<p>{{ $t('misc.info') }}</p>
-				</div>
-				<div class="message-body">
 				{{ motd }}
-				</div>
+			</message>
-			</div>
 			<slot/>
 		</div>
 	</div>
@@ -17,6 +12,7 @@
 
 <script setup>
 import Logo from '@/components/home/Logo.vue'
+import message from '@/components/misc/message'
 import {useStore} from 'vuex'
 import {computed} from 'vue'
 

src/components/misc/ready.vue

@@ -16,7 +16,7 @@
 				<p v-if="error === errorNoApiUrl">
 					{{ $t('ready.noApiUrlConfigured') }}
 				</p>
-				<div class="notification is-danger" v-else>
+				<message variant="danger" v-else>
 					<p>
 						{{ $t('ready.errorOccured') }}<br/>
 						{{ error }}
@@ -24,7 +24,7 @@
 					<p>
 						{{ $t('ready.checkApiUrl') }}
 					</p>
-				</div>
+				</message>
 				<api-config :configure-open="true" @found-api="load"/>
 			</card>
 		</no-auth-wrapper>
@@ -43,6 +43,7 @@
 <script>
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config'
+import Message from '@/components/misc/message'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
 import {mapState} from 'vuex'
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
@@ -50,6 +51,7 @@ import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 export default {
 	name: 'ready',
 	components: {
+		Message,
 		Logo,
 		NoAuthWrapper,
 		ApiConfig,

src/components/modal/modal.vue

@@ -193,10 +193,6 @@ export default {
 			align-items: center;
 
 		}
-
-		.message-body {
-			padding: .5rem .75rem;
-		}
 	}
 }
 

src/styles/global.scss

@@ -23,7 +23,7 @@
 @import "bulma-css-variables/sass/elements/content";
 @import "bulma-css-variables/sass/elements/icon";
 @import "bulma-css-variables/sass/elements/image";
-@import "bulma-css-variables/sass/elements/notification";
+//@import "bulma-css-variables/sass/elements/notification"; // not used
 @import "bulma-css-variables/sass/elements/progress";
 @import "bulma-css-variables/sass/elements/table";
 @import "bulma-css-variables/sass/elements/tag";
@@ -48,7 +48,7 @@
 // @import "bulma-css-variables/sass/components/level"; // not used
 @import "bulma-css-variables/sass/components/media"; 
 @import "bulma-css-variables/sass/components/menu";
-@import "bulma-css-variables/sass/components/message";
+//@import "bulma-css-variables/sass/components/message"; // not used
 @import "bulma-css-variables/sass/components/modal";
 @import "bulma-css-variables/sass/components/navbar";
 @import "bulma-css-variables/sass/components/pagination";

src/styles/theme/_index.scss

@@ -7,5 +7,4 @@
 @import "form";
 @import "link-share";
 @import "loading";
-@import "notification";
 @import "flatpickr";

src/styles/theme/notification.scss

@@ -1,12 +0,0 @@
-.notification {
-  border: $thickness solid $border;
-}
-
-.notifications {
-  left: 0.5rem !important;
-  bottom: 1rem !important;
-}
-
-.message .message-body {
-	border: $thickness solid;
-}

src/views/Home.vue

@@ -3,7 +3,7 @@
 		<h2 v-if="userInfo">
 			{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
 		</h2>
-		<div class="notification is-danger" v-if="deletionScheduledAt !== null">
+		<message variant="danger" v-if="deletionScheduledAt !== null">
 			{{
 				$t('user.deletion.scheduled', {
 					date: formatDateShort(deletionScheduledAt),
@@ -13,7 +13,7 @@
 			<router-link :to="{name: 'user.settings', hash: '#deletion'}">
 				{{ $t('user.deletion.scheduledCancel') }}
 			</router-link>
-		</div>
+		</message>
 		<add-task
 			:listId="defaultListId"
 			@taskAdded="updateTaskList"
@@ -57,6 +57,7 @@
 
 <script>
 import {mapState} from 'vuex'
+import Message from '@/components/misc/message'
 import ShowTasks from './tasks/ShowTasks.vue'
 import {getHistory} from '../modules/listHistory'
 import ListCard from '@/components/list/partials/list-card.vue'
@@ -67,6 +68,7 @@ import {parseDateOrNull} from '../helpers/parseDateOrNull'
 export default {
 	name: 'Home',
 	components: {
+		Message,
 		ListCard,
 		ShowTasks,
 		AddTask,

src/views/list/ShowList.vue

@@ -36,9 +36,9 @@
 			</div>
 		</div>
 		<transition name="fade">
-			<div class="notification is-warning" v-if="currentList.isArchived">
+			<message variant="warning" v-if="currentList.isArchived" class="mb-4">
 				{{ $t('list.archived') }}
-			</div>
+			</message>
 		</transition>
 
 		<router-view/>
@@ -46,6 +46,7 @@
 </template>
 
 <script>
+import Message from '@/components/misc/message'
 import ListModel from '../../models/list'
 import ListService from '../../services/list'
 import {CURRENT_LIST} from '../../store/mutation-types'
@@ -53,6 +54,7 @@ import {getListView} from '../../helpers/saveListView'
 import {saveListToHistory} from '../../modules/listHistory'
 
 export default {
+	components: {Message},
 	data() {
 		return {
 			listService: new ListService(),

src/views/migrator/MigrateService.vue

@@ -39,7 +39,7 @@
 				<div class="migration-in-progress">
 					<img :alt="migrator.name" :src="migrator.icon" class="logo"/>
 					<div class="progress-dots">
-						<span v-for="i in progressDotsCount" :key="i" />
+						<span v-for="i in progressDotsCount" :key="i"/>
 					</div>
 					<Logo class="logo"/>
 				</div>
@@ -57,11 +57,9 @@
 			</div>
 		</div>
 		<div v-else>
-			<div class="message is-primary">
+			<message class="mb-4">
-				<div class="message-body">
 				{{ message }}
-				</div>
+			</message>
-			</div>
 			<x-button :to="{name: 'home'}">{{ $t('misc.refresh') }}</x-button>
 		</div>
 	</div>
@@ -71,6 +69,7 @@
 import AbstractMigrationService from '@/services/migrator/abstractMigration'
 import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
 import Logo from '@/assets/logo.svg?component'
+import Message from '@/components/misc/message'
 
 import {MIGRATORS} from './migrators'
 
@@ -79,7 +78,10 @@ const PROGRESS_DOTS_COUNT = 8
 export default {
 	name: 'MigrateService',
 
-	components: { Logo },
+	components: {
+		Logo,
+		Message,
+	},
 
 	data() {
 		return {
@@ -101,7 +103,7 @@ export default {
 
 	beforeRouteEnter(to) {
 		if (MIGRATORS[to.params.service] === undefined) {
-			return { name: 'not-found' }
+			return {name: 'not-found'}
 		}
 	},
 
@@ -150,7 +152,7 @@ export default {
 			this.lastMigrationDate = null
 			this.message = ''
 
-			let migrationConfig = { code: this.migratorAuthCode }
+			let migrationConfig = {code: this.migratorAuthCode}
 
 			if (this.migrator.isFileMigrator) {
 				if (this.$refs.uploadInput.files.length === 0) {
@@ -160,7 +162,7 @@ export default {
 			}
 
 			try {
-				const { message } = await this.migrationService.migrate(migrationConfig)
+				const {message} = await this.migrationService.migrate(migrationConfig)
 				this.message = message
 				return this.$store.dispatch('namespaces/loadNamespaces')
 			} finally {

src/views/namespaces/NewNamespace.vue

@@ -28,19 +28,20 @@
 		<div class="field">
 			<label class="label">{{ $t('namespace.attributes.color') }}</label>
 			<div class="control">
-				<color-picker v-model="namespace.hexColor" />
+				<color-picker v-model="namespace.hexColor"/>
 			</div>
 		</div>
 
-		<div class="notification is-info mt-4">
+		<message class="mt-4">
 			<h4 class="title">{{ $t('namespace.create.tooltip') }}</h4>
 
 			{{ $t('namespace.create.explanation') }}
-		</div>
+		</message>
 	</create-edit>
 </template>
 
 <script>
+import Message from '@/components/misc/message'
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
 import CreateEdit from '@/components/misc/create-edit.vue'
@@ -56,6 +57,7 @@ export default {
 		}
 	},
 	components: {
+		Message,
 		ColorPicker,
 		CreateEdit,
 	},
@@ -72,7 +74,7 @@ export default {
 
 			const namespace = await this.namespaceService.create(this.namespace)
 			this.$store.commit('namespaces/addNamespace', namespace)
-			this.$message.success({message: this.$t('namespace.create.success') })
+			this.$message.success({message: this.$t('namespace.create.success')})
 			this.$router.back()
 		},
 	},

src/views/sharing/LinkSharingAuth.vue

@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<div class="notification is-info is-light has-text-centered" v-if="loading">
+		<message v-if="loading">
 			{{ $t('sharing.authenticating') }}
-		</div>
+		</message>
 		<div v-if="authenticateWithPassword" class="box">
 			<p class="pb-2">
 				{{ $t('sharing.passwordRequired') }}
@@ -25,18 +25,20 @@
 				{{ $t('user.auth.login') }}
 			</x-button>
 
-			<div class="notification is-danger mt-4" v-if="errorMessage !== ''">
+			<message variant="danger" class="mt-4" v-if="errorMessage !== ''">
 				{{ errorMessage }}
-			</div>
+			</message>
 		</div>
 	</div>
 </template>
 
 <script>
 import {mapGetters} from 'vuex'
+import Message from '@/components/misc/message'
 
 export default {
 	name: 'LinkSharingAuth',
+	components: {Message},
 	data() {
 		return {
 			loading: true,
@@ -72,7 +74,7 @@ export default {
 					password: this.password,
 				})
 				this.$router.push({name: 'list.list', params: {listId: r.list_id}})
-			} catch(e) {
+			} catch (e) {
 				if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13001) {
 					this.authenticateWithPassword = true
 					return

src/views/user/Login.vue

@@ -2,9 +2,9 @@
 	<div>
 		<h2 class="title has-text-centered">Login</h2>
 		<div class="box">
-			<div class="notification is-success has-text-centered" v-if="confirmedEmailSuccess">
+			<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
 				{{ $t('user.auth.confirmEmailSuccess') }}
-			</div>
+			</message>
 			<api-config @foundApi="hasApiUrl = true"/>
 			<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && localAuthEnabled">
 				<div class="field">
@@ -78,9 +78,9 @@
 						</router-link>
 					</div>
 				</div>
-				<div class="notification is-danger" v-if="errorMessage">
+				<message variant="danger" v-if="errorMessage">
 					{{ errorMessage }}
-				</div>
+				</message>
 			</form>
 
 			<div
@@ -110,11 +110,13 @@ 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'
 import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 
 export default {
 	components: {
+		Message,
 		ApiConfig,
 		legal,
 	},
@@ -206,7 +208,7 @@ export default {
 			try {
 				await this.$store.dispatch('auth/login', credentials)
 				this.$store.commit('auth/needsTotpPasscode', false)
-			} catch(e) {
+			} catch (e) {
 				if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
 					return
 				}

src/views/user/OpenIdAuth.vue

@@ -1,11 +1,11 @@
 <template>
 	<div>
-		<div class="notification is-danger" v-if="errorMessage">
+		<message variant="danger" v-if="errorMessage">
 			{{ errorMessage }}
-		</div>
+		</message>
-		<div class="notification is-info" v-if="loading">
+		<message v-if="loading">
 			{{ $t('user.auth.authenticating') }}
-		</div>
+		</message>
 	</div>
 </template>
 
@@ -14,10 +14,12 @@ import {mapState} from 'vuex'
 
 import {LOADING} from '@/store/mutation-types'
 import {getErrorText} from '@/message'
+import Message from '@/components/misc/message'
 import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
 
 export default {
 	name: 'Auth',
+	components: {Message},
 	data() {
 		return {
 			errorMessage: '',

src/views/user/PasswordReset.vue

@@ -45,37 +45,37 @@
 						</x-button>
 					</div>
 				</div>
-				<div class="notification is-info" v-if="this.passwordResetService.loading">
+				<message v-if="this.passwordResetService.loading">
 					{{ $t('misc.loading') }}
-				</div>
+				</message>
-				<div class="notification is-danger" v-if="errorMsg">
+				<message v-if="errorMsg">
 					{{ errorMsg }}
-				</div>
+				</message>
 			</form>
 			<div class="has-text-centered" v-if="successMessage">
-				<div class="notification is-success">
+				<message variant="success">
 					{{ successMessage }}
-				</div>
+				</message>
 				<x-button :to="{ name: 'user.login' }">
 					{{ $t('user.auth.login') }}
 				</x-button>
 			</div>
-			<Legal />
+			<Legal/>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import {ref, reactive} from 'vue'
-import { useI18n } from 'vue-i18n'
+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 {useTitle} from '@/composables/useTitle'
+import Message from '@/components/misc/message'
 
-const { t } = useI18n()
+const {t} = useI18n()
 useTitle(() => t('user.auth.resetPassword'))
 
 const credentials = reactive({
@@ -97,10 +97,10 @@ async function submit() {
 
 	const passwordReset = new PasswordResetModel({newPassword: credentials.password})
 	try {
-		const { message } = passwordResetService.resetPassword(passwordReset)
+		const {message} = passwordResetService.resetPassword(passwordReset)
 		successMessage.value = message
 		localStorage.removeItem('passwordResetToken')
-	} catch(e) {
+	} catch (e) {
 		errorMsg.value = e.response.data.message
 	}
 }

src/views/user/Register.vue

@@ -83,12 +83,12 @@
 						</x-button>
 					</div>
 				</div>
-				<div class="notification is-info" v-if="loading">
+				<message v-if="loading">
 					{{ $t('misc.loading') }}
-				</div>
+				</message>
-				<div class="notification is-danger" v-if="errorMessage !== ''">
+				<message variant="danger" v-if="errorMessage !== ''">
 					{{ errorMessage }}
-				</div>
+				</message>
 			</form>
 			<legal/>
 		</div>
@@ -97,13 +97,13 @@
 
 <script setup>
 import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
-import { useI18n } from 'vue-i18n'
+import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
-import { store } from '@/store'
+import {store} from '@/store'
-import { useTitle } from '@/composables/useTitle'
+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
 // Check if the user is already logged in, if so, redirect them to the homepage
@@ -113,7 +113,7 @@ onBeforeMount(() => {
 	}
 })
 
-const { t } = useI18n()
+const {t} = useI18n()
 useTitle(() => t('user.auth.register'))
 
 const credentials = reactive({
@@ -137,7 +137,7 @@ async function submit() {
 
 	try {
 		await store.dispatch('auth/register', toRaw(credentials))
-	} catch(e) {
+	} catch (e) {
 		errorMessage.value = e.message
 	}
 }

src/views/user/RequestPasswordReset.vue

@@ -31,14 +31,14 @@
 						</x-button>
 					</div>
 				</div>
-				<div class="notification is-danger" v-if="errorMsg">
+				<message variant="danger" v-if="errorMsg">
 					{{ errorMsg }}
-				</div>
+				</message>
 			</form>
 			<div class="has-text-centered" v-if="isSuccess">
-				<div class="notification is-success">
+				<message variant="success">
 					{{ $t('user.auth.resetPasswordSuccess') }}
-				</div>
+				</message>
 				<x-button :to="{ name: 'user.login' }">
 					{{ $t('user.auth.login') }}
 				</x-button>
@@ -57,6 +57,7 @@ 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'))