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>

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,
@@ -147,7 +149,7 @@ export default {
 	flex-wrap: wrap;
 	max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px);
 	overflow: hidden;
-	
+
 	@media screen and (max-width: $mobile) {
 		max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px);
 	}

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">
-				<div class="message-body">
-					{{ message }}
-				</div>
-			</div>
+			<message class="mb-4">
+				{{ message }}
+			</message>
 			<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'}
 		}
 	},
 
@@ -122,7 +124,7 @@ export default {
 			if (this.migrator.isFileMigrator) {
 				return
 			}
-			
+
 			this.authUrl = await this.migrationService.getAuthUrl().then(({url}) => url)
 
 			this.migratorAuthCode = location.hash.startsWith('#token=')
@@ -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 {
@@ -173,24 +175,24 @@ export default {
 
 <style lang="scss" scoped>
 .migration-in-progress-container {
-  max-width: 400px;
-  margin: 4rem auto 0;
-  text-align: center;
+	max-width: 400px;
+	margin: 4rem auto 0;
+	text-align: center;
 }
 
 .migration-in-progress {
-  text-align: center;
-  display: flex;
-  max-width: 400px;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
+	text-align: center;
+	display: flex;
+	max-width: 400px;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 2rem;
 }
 
 .logo {
-  display: block;
-  max-height: 100px;
-  max-width: 100px;
+	display: block;
+	max-height: 100px;
+	max-width: 100px;
 }
 
 .progress-dots {

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,
 	},
@@ -149,7 +151,7 @@ export default {
 			const last = getLastVisited()
 			if (last !== null) {
 				this.$router.push({
-					name: last.name, 
+					name: last.name,
 					params: last.params,
 				})
 				clearLastVisited()
@@ -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>
-		<div class="notification is-info" v-if="loading">
+		</message>
+		<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>
-				<div class="notification is-danger" v-if="errorMsg">
+				</message>
+				<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>
-				<div class="notification is-danger" v-if="errorMessage !== ''">
+				</message>
+				<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 { useTitle } from '@/composables/useTitle'
-
+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
 // 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'))