From 1170e030f62428ce67eddd34107a3ba5f34acdbb Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Thu, 30 Jan 2020 21:47:08 +0000
Subject: [PATCH] Use message mixin for handling success and error messages
 (#51)

Use message mixin everywhere

Add mixin for success and error messages

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/51
---
 src/App.vue                                   |  3 +--
 src/components/labels/ListLabels.vue          | 11 +++++------
 src/components/lists/EditList.vue             | 11 +++++------
 src/components/lists/NewList.vue              |  5 ++---
 src/components/lists/ShowList.vue             |  3 +--
 src/components/migrator/wunderlist.vue        |  7 +++----
 src/components/namespaces/EditNamespace.vue   | 11 +++++------
 src/components/namespaces/NewNamespace.vue    |  5 ++---
 src/components/sharing/linkSharing.vue        | 11 +++++------
 src/components/sharing/linkSharingAuth.vue    |  3 +--
 src/components/sharing/userTeam.vue           | 17 ++++++++---------
 src/components/tasks/ShowListTasks.vue        | 12 +++++-------
 src/components/tasks/ShowTasks.vue            |  3 +--
 src/components/tasks/TaskDetailView.vue       | 11 +++++------
 src/components/tasks/edit-task.vue            |  5 ++---
 src/components/tasks/gantt-component.vue      |  9 ++++-----
 src/components/tasks/reusable/attachments.vue | 11 +++++------
 .../tasks/reusable/editAssignees.vue          | 11 +++++------
 src/components/tasks/reusable/editLabels.vue  | 13 ++++++-------
 .../tasks/reusable/relatedTasks.vue           | 11 +++++------
 src/components/teams/EditTeam.vue             | 19 +++++++++----------
 src/components/teams/ListTeams.vue            |  3 +--
 src/components/teams/NewTeam.vue              |  5 ++---
 src/main.js                                   |  9 ++++++---
 src/message/index.js                          |  1 -
 25 files changed, 94 insertions(+), 116 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0eb44d218..78762fe32 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -193,7 +193,6 @@
 
 <script>
 	import auth from './auth'
-	import message from './message'
 	import router from './router'
 
 	import NamespaceService from './services/namespace'
@@ -284,7 +283,7 @@
 						this.$set(this, 'namespaces', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			loadNamespacesIfNeeded(e) {
diff --git a/src/components/labels/ListLabels.vue b/src/components/labels/ListLabels.vue
index 18366c379..bbba1b835 100644
--- a/src/components/labels/ListLabels.vue
+++ b/src/components/labels/ListLabels.vue
@@ -95,7 +95,6 @@
 
 	import LabelService from '../../services/label'
 	import LabelModel from '../../models/label'
-	import message from '../../message'
 	import auth from '../../auth'
 
 	export default {
@@ -124,7 +123,7 @@
 						this.$set(this, 'labels', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteLabel(label) {
@@ -136,10 +135,10 @@
 								this.labels.splice(l, 1)
 							}
 						}
-						message.success({message: 'The label was successfully deleted.'}, this)
+						this.success({message: 'The label was successfully deleted.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			editLabelSubmit() {
@@ -150,10 +149,10 @@
 								this.$set(this.labels, l, r)
 							}
 						}
-						message.success({message: 'The label was successfully updated.'}, this)
+						this.success({message: 'The label was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			editLabel(label) {
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index be004d753..eb5e1edd8 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -60,7 +60,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import manageSharing from '../sharing/userTeam'
 	import LinkSharing from '../sharing/linkSharing';
 
@@ -114,7 +113,7 @@
 						this.manageUsersComponent = 'manageSharing'
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			submit() {
@@ -129,20 +128,20 @@
 								}
 							}
 						}
-						message.success({message: 'The list was successfully updated.'}, this)
+						this.success({message: 'The list was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteList() {
 				this.listService.delete(this.list)
 					.then(() => {
-						message.success({message: 'The list was successfully deleted.'}, this)
+						this.success({message: 'The list was successfully deleted.'}, this)
 						router.push({name: 'home'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		}
diff --git a/src/components/lists/NewList.vue b/src/components/lists/NewList.vue
index ce3c58868..1b6bd7ea8 100644
--- a/src/components/lists/NewList.vue
+++ b/src/components/lists/NewList.vue
@@ -26,7 +26,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import ListService from '../../services/list'
 	import ListModel from '../../models/list'
 
@@ -55,11 +54,11 @@
 				this.listService.create(this.list)
 					.then(response => {
 						this.$parent.loadNamespaces()
-						message.success({message: 'The list was successfully created.'}, this)
+						this.success({message: 'The list was successfully created.'}, this)
 						router.push({name: 'showList', params: {id: response.id}})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			back() {
diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue
index da41c47c8..b7a39c82c 100644
--- a/src/components/lists/ShowList.vue
+++ b/src/components/lists/ShowList.vue
@@ -19,7 +19,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 
 	import ShowListTask from '../tasks/ShowListTasks'
 	import Gantt from '../tasks/Gantt'
@@ -69,7 +68,7 @@
 						this.$set(this, 'list', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		}
diff --git a/src/components/migrator/wunderlist.vue b/src/components/migrator/wunderlist.vue
index 9d27994d8..e6e0b13ea 100644
--- a/src/components/migrator/wunderlist.vue
+++ b/src/components/migrator/wunderlist.vue
@@ -47,7 +47,6 @@
 
 <script>
 	import WunderlistMigrationService from '../../services/migrator/wunderlist'
-	import message from '../../message'
 
 	export default {
 		name: 'wunderlist',
@@ -77,7 +76,7 @@
 						this.migrate()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			}
 		},
@@ -88,7 +87,7 @@
 						this.authUrl = r.url
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			migrate() {
@@ -99,7 +98,7 @@
 						this.message = r.message
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 					.finally(() => {
 						this.isMigrating = false
diff --git a/src/components/namespaces/EditNamespace.vue b/src/components/namespaces/EditNamespace.vue
index 481a92e83..3e38e73cd 100644
--- a/src/components/namespaces/EditNamespace.vue
+++ b/src/components/namespaces/EditNamespace.vue
@@ -58,7 +58,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import manageSharing from '../sharing/userTeam'
 
 	import NamespaceService from '../../services/namespace'
@@ -111,7 +110,7 @@
 						this.manageUsersComponent = 'manageSharing'
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			submit() {
@@ -124,20 +123,20 @@
 								this.$set(this.$parent.namespaces, n, r)
 							}
 						}
-						message.success({message: 'The namespace was successfully updated.'}, this)
+						this.success({message: 'The namespace was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteNamespace() {
 				this.namespaceService.delete(this.namespace)
 					.then(() => {
-						message.success({message: 'The namespace was successfully deleted.'}, this)
+						this.success({message: 'The namespace was successfully deleted.'}, this)
 						router.push({name: 'home'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			}
 		}
diff --git a/src/components/namespaces/NewNamespace.vue b/src/components/namespaces/NewNamespace.vue
index c43699a44..df007a328 100644
--- a/src/components/namespaces/NewNamespace.vue
+++ b/src/components/namespaces/NewNamespace.vue
@@ -27,7 +27,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import NamespaceModel from "../../models/namespace";
 	import NamespaceService from "../../services/namespace";
 
@@ -55,11 +54,11 @@
 				this.namespaceService.create(this.namespace)
 					.then(() => {
 						this.$parent.loadNamespaces()
-						message.success({message: 'The namespace was successfully created.'}, this)
+						this.success({message: 'The namespace was successfully created.'}, this)
 						router.push({name: 'home'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			back() {
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 85f689224..1f3f77371 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -104,7 +104,6 @@
 </template>
 
 <script>
-	import message from '../../message'
 	import rights from '../../models/rights'
 
 	import LinkShareService from '../../services/linkShare'
@@ -155,7 +154,7 @@
 						this.linkShares = r
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			add() {
@@ -163,22 +162,22 @@
 				this.linkShareService.create(newLinkShare)
 					.then(() => {
 						this.selectedRight = rights.READ
-						message.success({message: 'The link share was successfully created'}, this)
+						this.success({message: 'The link share was successfully created'}, this)
 						this.load()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			remove() {
 				let linkshare = new LinkShareModel({id: this.linkIDToDelete, listID: this.listID})
 				this.linkShareService.delete(linkshare)
 					.then(() => {
-						message.success({message: 'The link share was successfully deleted'}, this)
+						this.success({message: 'The link share was successfully deleted'}, this)
 						this.load()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 					.finally(() => {
 						this.showDeleteModal = false
diff --git a/src/components/sharing/linkSharingAuth.vue b/src/components/sharing/linkSharingAuth.vue
index 031e0527d..da95896e4 100644
--- a/src/components/sharing/linkSharingAuth.vue
+++ b/src/components/sharing/linkSharingAuth.vue
@@ -11,7 +11,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 
 	export default {
 		name: 'linkSharingAuth',
@@ -32,7 +31,7 @@
 						router.push({name: 'showList', params: {id: r.list_id}})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			}
 		},
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index 423e45049..03bd90cc7 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -106,7 +106,6 @@
 
 <script>
 	import auth from '../../auth'
-	import message from '../../message'
 	import multiselect from 'vue-multiselect'
 
 	import UserNamespaceService from '../../services/userNamespace'
@@ -215,7 +214,7 @@
 						this.$set(this, 'sharables', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteSharable() {
@@ -236,10 +235,10 @@
 								this.sharables.splice(i, 1)
 							}
 						}
-						message.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
+						this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			add(admin) {
@@ -259,11 +258,11 @@
 
 				this.stuffService.create(this.stuffModel)
 					.then(() => {
-						message.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
+						this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
 						this.load()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			toggleType() {
@@ -292,10 +291,10 @@
 								this.$set(this.sharables[i], 'right', r.right)
 							}
 						}
-						message.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
+						this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			find(query) {
@@ -309,7 +308,7 @@
 						this.$set(this, 'found', response)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			clearAll () {
diff --git a/src/components/tasks/ShowListTasks.vue b/src/components/tasks/ShowListTasks.vue
index c689c4761..755c1f7d4 100644
--- a/src/components/tasks/ShowListTasks.vue
+++ b/src/components/tasks/ShowListTasks.vue
@@ -93,8 +93,6 @@
 </template>
 
 <script>
-	import message from '../../message'
-
 	import ListService from '../../services/list'
 	import TaskService from '../../services/task'
 	import ListModel from '../../models/list'
@@ -155,10 +153,10 @@
 						this.tasks.push(r)
 						this.sortTasks()
 						this.newTaskText = ''
-						message.success({message: 'The task was successfully created.'}, this)
+						this.success({message: 'The task was successfully created.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			loadTasks(page) {
@@ -198,7 +196,7 @@
 						}
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			loadTasksForPage(e) {
@@ -217,10 +215,10 @@
 					this.taskService.update(task)
 						.then(() => {
 							this.sortTasks()
-							message.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
+							this.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
 						})
 						.catch(e => {
-							message.error(e, this)
+							this.error(e, this)
 						})
 				}
 
diff --git a/src/components/tasks/ShowTasks.vue b/src/components/tasks/ShowTasks.vue
index 05d655c04..5e51c07cc 100644
--- a/src/components/tasks/ShowTasks.vue
+++ b/src/components/tasks/ShowTasks.vue
@@ -31,7 +31,6 @@
 </template>
 <script>
 	import router from '../../router'
-	import message from '../../message'
 	import TaskService from '../../services/task'
 	import PriorityLabel from './reusable/priorityLabel'
 
@@ -81,7 +80,7 @@
 						this.$set(this, 'tasks', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			gotoList(lid) {
diff --git a/src/components/tasks/TaskDetailView.vue b/src/components/tasks/TaskDetailView.vue
index 77a56b145..e805ee90c 100644
--- a/src/components/tasks/TaskDetailView.vue
+++ b/src/components/tasks/TaskDetailView.vue
@@ -261,7 +261,6 @@
 </template>
 
 <script>
-	import message from '../../message'
 	import TaskService from '../../services/task'
 	import TaskModel from '../../models/task'
 	import relationKinds from '../../models/relationKinds'
@@ -361,17 +360,17 @@
 						this.activeFields.relatedTasks = Object.keys(this.task.related_tasks).length > 0
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			saveTask() {
 				this.taskService.update(this.task)
 					.then(r => {
 						this.$set(this, 'task', r)
-						message.success({message: 'The task was saved successfully.'}, this)
+						this.success({message: 'The task was saved successfully.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			setListAndNamespaceTitleFromParent() {
@@ -393,11 +392,11 @@
 			deleteTask() {
 				this.taskService.delete(this.task)
 					.then(() => {
-						message.success({message: 'The task been deleted successfully.'}, this)
+						this.success({message: 'The task been deleted successfully.'}, this)
 						router.push({name: 'showList', params: {id: this.list.id}})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		},
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index e51637d1b..d2b073c1c 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -134,7 +134,6 @@
 </template>
 
 <script>
-	import message from '../../message'
 	import flatPickr from 'vue-flatpickr-component'
 	import 'flatpickr/dist/flatpickr.css'
 	import verte from 'verte'
@@ -208,10 +207,10 @@
 				this.taskService.update(this.taskEditTask)
 					.then(r => {
 						this.$set(this, 'taskEditTask', r)
-						message.success({message: 'The task was successfully updated.'}, this)
+						this.success({message: 'The task was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		},
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index a23365f14..da857c457 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -126,7 +126,6 @@
 
 <script>
 	import VueDragResize from 'vue-drag-resize'
-	import message from '../../message'
 	import EditTask from './edit-task'
 
 	import TaskService from '../../services/task'
@@ -297,10 +296,10 @@
 								}
 							}
 
-							message.success({message: 'The task was successfully updated.'}, this)
+							this.success({message: 'The task was successfully updated.'}, this)
 						})
 						.catch(e => {
-							message.error(e, this)
+							this.error(e, this)
 						})
 				}, 100)
 			},
@@ -332,10 +331,10 @@
 						this.tasksWithoutDates.push(this.addGantAttributes(r))
 						this.newTaskTitle = ''
 						this.hideCrateNewTask()
-						message.success({message: 'The task was successfully created.'}, this)
+						this.success({message: 'The task was successfully created.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		},
diff --git a/src/components/tasks/reusable/attachments.vue b/src/components/tasks/reusable/attachments.vue
index 380323f72..a5b926617 100644
--- a/src/components/tasks/reusable/attachments.vue
+++ b/src/components/tasks/reusable/attachments.vue
@@ -76,7 +76,6 @@
 <script>
 	import AttachmentService from '../../../services/attachment'
 	import AttachmentModel from '../../../models/attachment'
-	import message from '../../../message'
 
 	export default {
 		name: 'attachments',
@@ -153,18 +152,18 @@
 					.then(r => {
 						if(r.success !== null) {
 							r.success.forEach(a => {
-								message.success({message: 'Successfully uploaded ' + a.file.name}, this)
+								this.success({message: 'Successfully uploaded ' + a.file.name}, this)
 								this.attachments.push(a)
 							})
 						}
 						if(r.errors !== null) {
 							r.errors.forEach(m => {
-								message.error(m, this)
+								this.error(m)
 							})
 						}
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 
 			},
@@ -177,10 +176,10 @@
 								this.attachments.splice(a, 1)
 							}
 						}
-						message.success(r, this)
+						this.success(r, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 					.finally(() => {
 						this.showDeleteModal = false
diff --git a/src/components/tasks/reusable/editAssignees.vue b/src/components/tasks/reusable/editAssignees.vue
index 7fcca06cc..3e2e47631 100644
--- a/src/components/tasks/reusable/editAssignees.vue
+++ b/src/components/tasks/reusable/editAssignees.vue
@@ -34,7 +34,6 @@
 
 <script>
 	import {differenceWith} from 'lodash'
-	import message from '../../../message'
 	import multiselect from 'vue-multiselect'
 
 	import UserModel from '../../../models/user'
@@ -88,10 +87,10 @@
 				const taskAssignee = new TaskAssigneeModel({user_id: user.id, task_id: this.taskID})
 				this.taskAssigneeService.create(taskAssignee)
 					.then(() => {
-						message.success({message: 'The user was successfully assigned.'}, this)
+						this.success({message: 'The user was successfully assigned.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			removeAssignee(user) {
@@ -104,10 +103,10 @@
 								this.assignees.splice(a, 1)
 							}
 						}
-						message.success({message: 'The user was successfully unassigned.'}, this)
+						this.success({message: 'The user was successfully unassigned.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			findUser(query) {
@@ -124,7 +123,7 @@
 						}))
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			clearAllFoundUsers() {
diff --git a/src/components/tasks/reusable/editLabels.vue b/src/components/tasks/reusable/editLabels.vue
index d2b28f1c3..122571cfb 100644
--- a/src/components/tasks/reusable/editLabels.vue
+++ b/src/components/tasks/reusable/editLabels.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-	import message from '../../../message'
 	import { differenceWith } from 'lodash'
 	import multiselect from 'vue-multiselect'
 
@@ -101,7 +100,7 @@
 							this.labelTimeout = null
 						})
 						.catch(e => {
-							message.error(e, this)
+							this.error(e, this)
 						})
 				}, 300)
 			},
@@ -112,10 +111,10 @@
 				let labelTask = new LabelTaskModel({taskID: this.taskID, label_id: label.id})
 				this.labelTaskService.create(labelTask)
 					.then(() => {
-						message.success({message: 'The label was successfully added.'}, this)
+						this.success({message: 'The label was successfully added.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			removeLabel(label) {
@@ -128,10 +127,10 @@
 								this.labels.splice(l, 1)
 							}
 						}
-						message.success({message: 'The label was successfully removed.'}, this)
+						this.success({message: 'The label was successfully removed.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			createAndAddLabel(title) {
@@ -142,7 +141,7 @@
 						this.labels.push(r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 
diff --git a/src/components/tasks/reusable/relatedTasks.vue b/src/components/tasks/reusable/relatedTasks.vue
index da752c677..191c51711 100644
--- a/src/components/tasks/reusable/relatedTasks.vue
+++ b/src/components/tasks/reusable/relatedTasks.vue
@@ -79,7 +79,6 @@
 	import TaskRelationModel from '../../../models/taskRelation'
 
 	import multiselect from 'vue-multiselect'
-	import message from '../../../message'
 
 	export default {
 		name: 'relatedTasks',
@@ -138,7 +137,7 @@
 						this.$set(this, 'foundTasks', response)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			clearAllFoundTasks() {
@@ -158,10 +157,10 @@
 						this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
 						this.newTaskRelationKind = 'unset'
 						this.newTaskRelationTask = new TaskModel()
-						message.success({message: 'The task relation was created successfully'}, this)
+						this.success({message: 'The task relation was created successfully'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			removeTaskRelation() {
@@ -179,10 +178,10 @@
 								}
 							}
 						})
-						message.success(r, this)
+						this.success(r, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 					.finally(() => {
 						this.showDeleteModal = false
diff --git a/src/components/teams/EditTeam.vue b/src/components/teams/EditTeam.vue
index 926d03c89..3551eb0a1 100644
--- a/src/components/teams/EditTeam.vue
+++ b/src/components/teams/EditTeam.vue
@@ -137,7 +137,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 
 	import TeamService from '../../services/team'
 	import TeamModel from '../../models/team'
@@ -190,37 +189,37 @@
 						}
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			submit() {
 				this.teamService.update(this.team)
 					.then(response => {
 						this.team = response
-						message.success({message: 'The team was successfully updated.'}, this)
+						this.success({message: 'The team was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteTeam() {
 				this.teamService.delete(this.team)
 					.then(() => {
-						message.success({message: 'The team was successfully deleted.'}, this)
+						this.success({message: 'The team was successfully deleted.'}, this)
 						router.push({name: 'listTeams'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteUser() {
 				this.teamMemberService.delete(this.member)
 					.then(() => {
-						message.success({message: 'The user was successfully deleted from the team.'}, this)
+						this.success({message: 'The user was successfully deleted from the team.'}, this)
 						this.loadTeam()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 					.finally(() => {
 						this.showUserDeleteModal = false
@@ -230,10 +229,10 @@
 				this.teamMemberService.create(this.member)
 					.then(() => {
 						this.loadTeam()
-						message.success({message: 'The team member was successfully added.'}, this)
+						this.success({message: 'The team member was successfully added.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			toggleUserType(member) {
diff --git a/src/components/teams/ListTeams.vue b/src/components/teams/ListTeams.vue
index 7cb203351..6b2758f79 100644
--- a/src/components/teams/ListTeams.vue
+++ b/src/components/teams/ListTeams.vue
@@ -20,7 +20,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import TeamService from '../../services/team'
 	
 	export default {
@@ -48,7 +47,7 @@
 						this.$set(this, 'teams', response)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		}
diff --git a/src/components/teams/NewTeam.vue b/src/components/teams/NewTeam.vue
index 9a92883ea..acc25663b 100644
--- a/src/components/teams/NewTeam.vue
+++ b/src/components/teams/NewTeam.vue
@@ -26,7 +26,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import TeamModel from '../../models/team'
 	import TeamService from '../../services/team'
 
@@ -54,10 +53,10 @@
 				this.teamService.create(this.team)
 					.then(response => {
 						router.push({name:'editTeam', params:{id: response.id}})
-						message.success({message: 'The team was successfully created.'}, this)
+						this.success({message: 'The team was successfully created.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			back() {
diff --git a/src/main.js b/src/main.js
index 0653d04b2..6db875809 100644
--- a/src/main.js
+++ b/src/main.js
@@ -120,16 +120,19 @@ Vue.directive('focus', {
 // Check the user's auth status when the app starts
 auth.checkAuth()
 
-// Format date mixin
+// Mixins
 import moment from 'moment'
+import message from './message'
 Vue.mixin({
 	methods: {
 		formatDateSince: date => moment(date).fromNow(),
 		formatDate: date => moment(date).format('LLL'),
+		error: (e, context) => message.error(e, context),
+		success: (s, context) => message.success(s, context),
 	}
 })
 
 new Vue({
-    router,
-    render: h => h(App)
+	router,
+	render: h => h(App)
 }).$mount('#app')
diff --git a/src/message/index.js b/src/message/index.js
index 71cf82b25..8cbf9dad6 100644
--- a/src/message/index.js
+++ b/src/message/index.js
@@ -40,5 +40,4 @@ export default {
 
 		context.loading = false
     },
-
 }
\ No newline at end of file