style: update notyf !

package-lock.json

@@ -915,24 +915,24 @@
       }
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.21",
+      "version": "0.2.22",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.21.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.22.tgz",
-      "integrity": "sha512-iJtcrU2BtF9Wyr0zm3tHEJy3HqA6sADExhCqCv3SKaJJKKp4ORJ40t4nyHvcWXSVFtd7r1gcdqcRsAfoREGTFA=="
+      "integrity": "sha512-QmEuZsipX5/cR9JOg0fsTN4Yr/9lieYWM8AQpmRa0eIfeOcl/HLYoEa366BCGRSrgNJEexuvOgbq9jnJ22IY5g=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.21",
+      "version": "1.2.22",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.21.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.22.tgz",
-      "integrity": "sha512-EhrgMZLJS0tTYZhUbodurZBqDgAFLDNdxJP/q5unrZJwiFo8Dd7xGvJdhAhY5WcX4khzkPQcbLTCMPHBtutD7Q==",
+      "integrity": "sha512-Q941E4x8UfnMH3308n0qrgoja+GoqyiV846JTLoCcCWAKokLKrixCkq6RDBs8r+TtAWaLUrBpI+JFxQNX/WNPQ==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.21"
+        "@fortawesome/fontawesome-common-types": "^0.2.22"
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.10.1",
+      "version": "5.10.2",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.1.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.2.tgz",
-      "integrity": "sha512-MKH+SCt0DnVoXdemxf6JEdTRtCPwYLMCWZcwgGccYU/ab6QcDtbAMn6Xm4Zub6YqQCcaiy0hU294YdHOldSBRA==",
+      "integrity": "sha512-9Os/GRUcy+iVaznlg8GKcPSQFpIQpAg14jF0DWsMdnpJfIftlvfaQCWniR/ex9FoOpSEOrlXqmUCFL+JGeciuA==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.21"
+        "@fortawesome/fontawesome-common-types": "^0.2.22"
       }
     },
     "@fortawesome/vue-fontawesome": {
@@ -10638,9 +10638,9 @@
       "dev": true
     },
     "notyf": {
-      "version": "2.0.1",
+      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/notyf/-/notyf-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/notyf/-/notyf-3.0.4.tgz",
-      "integrity": "sha1-DLq0jpyYUYBdcLpXWJEUXAhAoyw="
+      "integrity": "sha512-hVK6uQAJEIdobprIpi9t40GdGIPCHtCWKqbF5d7l7585lmWdgkjtgt/gqll1g7dU8o2T73SXf2N9ZgXjDMAYfw=="
     },
     "npm-run-path": {
       "version": "2.0.2",
@@ -11994,7 +11994,7 @@
         },
         "readable-stream": {
           "version": "1.0.33",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
           "integrity": "sha1-OjYN1mwbHX/UcFOJhg7aHQ9hEmw=",
           "requires": {
             "core-util-is": "~1.0.0",
@@ -15244,9 +15244,9 @@
       "dev": true
     },
     "vue-i18n": {
-      "version": "8.13.0",
+      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.14.0.tgz",
-      "integrity": "sha512-nVwwh5m7gFtVusbcyR4WLowKcZs1r95yHMNtugwijSw9vGUiSZFt2QHVFJNO9AOXYQeLU8dgnUq7mXSBmzPWIA=="
+      "integrity": "sha512-utI1Rvc8i+fmmUkkKRmHaf4QQ87s7rGVL5ZZLsKvvRzmgaIr1l+GfGxxxRmsZxHpPlgeB8OxoUZ4noqZgDL6xg=="
     },
     "vue-jest": {
       "version": "3.0.4",
@@ -16108,7 +16108,7 @@
       "dependencies": {
         "readable-stream": {
           "version": "0.0.4",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-0.0.4.tgz",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-0.0.4.tgz",
           "integrity": "sha1-8y124/uGM0SlSNeZIwBxc2ZbO40="
         }
       }

package.json

@@ -9,8 +9,8 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.21",
+    "@fortawesome/fontawesome-svg-core": "^1.2.22",
-    "@fortawesome/free-solid-svg-icons": "^5.10.1",
+    "@fortawesome/free-solid-svg-icons": "^5.10.2",
     "@fortawesome/vue-fontawesome": "^0.1.6",
     "@xkeshi/vue-qrcode": "^1.0.0",
     "axios": "^0.19.0",
@@ -22,7 +22,7 @@
     "lightness": "^1.0.0",
     "lodash-es": "^4.17.15",
     "md5": "^2.2.1",
-    "notyf": "^2.0.1",
+    "notyf": "^3.0.4",
     "pouchdb": "^7.1.1",
     "pouchdb-authentication": "^1.1.3",
     "pouchdb-browser": "^7.1.1",
@@ -30,7 +30,7 @@
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
     "vue-click-outside": "^1.0.7",
-    "vue-i18n": "^8.13.0",
+    "vue-i18n": "^8.14.0",
     "vue-property-decorator": "^8.2.1",
     "vue-router": "^3.1.2",
     "vuex": "^3.1.1",

src/components/AccountEncrypted.vue

@@ -38,7 +38,7 @@ export default class AccountEncrypted extends Vue {
     if (retrieved) {
       bus.$emit(SYNC, [this.id])
     } else {
-      notif.alert(`
+      notif.error(`
         Impossible de récupérer la clé,
         veuillez réessayer plus tard...
       `)

src/components/AccountShare.vue

@@ -67,7 +67,7 @@ export default class Home extends Vue {
   public async copy(): Promise<void> {
     if (this.canClipboard) {
       await navigator.clipboard.writeText(this.accountUrl)
-      notif.confirm('Adresse copiée')
+      notif.success('Adresse copiée')
     }
   }
 

src/components/TransactionCreate.vue

@@ -333,14 +333,14 @@ export default class TransactionCreate extends Vue {
       (!this.currency && !this.date && this.payFor.length === 0)
     ) {
       if (this.amount === 0) {
-        notif.alert('Le montant doit être supérieur à 0.')
+        notif.error('Le montant doit être supérieur à 0.')
       } else {
-        notif.alert('Tous les champs sont requis.')
+        notif.error('Tous les champs sont requis.')
       }
       return false
     }
     if (isNaN(this.amount) || this.amount > this.maxAmount) {
-      notif.alert(
+      notif.error(
         `Veuillez saisir un montant numérique inférieur à ${money(
           this.maxAmount,
           this.currency
@@ -349,7 +349,7 @@ export default class TransactionCreate extends Vue {
       return false
     }
     if (this.amount < 0) {
-      notif.alert('Le montant doit être supérieur à 0.')
+      notif.error('Le montant doit être supérieur à 0.')
       return false
     }
     return true

src/main.ts

@@ -1,4 +1,3 @@
-import './utils/notyf'
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import App from './App.vue'

src/registerServiceWorker.ts

@@ -24,7 +24,7 @@ if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     registrationOptions: {},
     ready() {
-      notif.confirm('Application mise à jour !')
+      notif.success('Application mise à jour !')
       console.log(
         'App is being served from cache by a service worker.\n' +
           'For more details, visit https://goo.gl/AFskqB'

src/services/CouchService.ts

@@ -99,7 +99,7 @@ class CouchService {
         // tslint:disable-next-line:no-console
         console.warn('on error', { error })
         if (error.name !== 'unauthorized') {
-          notif.alert(`une erreur s'est produite`)
+          notif.error(`une erreur s'est produite`)
         }
       })
     return true

src/store.ts

@@ -102,7 +102,7 @@ export default new Vuex.Store<IState>({
       if (response.ok) {
         commit(SET_USER, { user, replicate })
       } else {
-        notif.alert(response.message)
+        notif.error(response.message || '')
       }
     },
     async login({ commit, state }, { userId, password }: IIdPassword) {
@@ -111,7 +111,7 @@ export default new Vuex.Store<IState>({
         const user: IUser | null = await userService.getUser(state.user)
         commit(SET_USER, { user })
       } else {
-        notif.alert(response.message)
+        notif.error(response.message || '')
       }
     },
     async logout({ commit }) {
@@ -119,7 +119,7 @@ export default new Vuex.Store<IState>({
       if (response.ok) {
         commit(SET_USER, { user: null })
       } else {
-        notif.alert(response.message)
+        notif.error(response.message || '')
       }
     },
     async remove({ commit, state }) {
@@ -128,7 +128,7 @@ export default new Vuex.Store<IState>({
         if (response.ok) {
           commit(SET_USER, { user: null })
         } else {
-          notif.alert(response.message)
+          notif.error(response.message || '')
         }
       }
     },

src/styles/_notyf-colors.scss

@@ -1,3 +0,0 @@
-// sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth
-$red-notyf: #ed3d3d;
-$green-notyf: #3dc763;

src/styles/index.scss

@@ -4,7 +4,6 @@
 @import './variables';
 @import '~bulma';
 @import '~bulma-pricingtable';
-@import './notyf';
 @import './transitions';
 
 :root {

src/styles/notyf.scss

@@ -1,196 +0,0 @@
-// sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth
-@import './notyf-colors';
-@import './variables';
-@keyframes fadeinup {
-  0% {
-    bottom: -15px;
-    margin-top: 0;
-    max-height: 0;
-    max-width: 0;
-    opacity: 0;
-  }
-  30% {
-    bottom: -3px;
-    opacity: .8;
-  }
-  100% {
-    bottom: 0;
-    margin-top: 12px;
-    max-height: 200px;
-    max-width: 420px;
-    opacity: 1;
-  }
-}
-
-@keyframes fadeoutdown {
-  0% {
-    bottom: 0;
-    opacity: 1;
-  }
-  30% {
-    bottom: -3px;
-    opacity: .2;
-  }
-  100% {
-    bottom: -15px;
-    opacity: 0;
-  }
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  30% {
-    opacity: .5;
-  }
-  100% {
-    opacity: .6;
-  }
-}
-
-@keyframes disappear {
-  0% {
-    opacity: .6;
-  }
-  30% {
-    opacity: .1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.notyf__icon--alert,
-.notyf__icon--confirm {
-  background: white;
-  border-radius: 50%;
-  display: block;
-  height: 21px;
-  margin: 0 auto;
-  position: relative;
-  width: 21px;
-}
-
-.notyf__icon--alert {
-  &::after,
-  &::before {
-    background: $red-notyf;
-    border-radius: 3px;
-    content: '';
-    display: block;
-    left: 9px;
-    position: absolute;
-    width: 3px;
-  }
-  &::after {
-    height: 3px;
-    top: 14px;
-  }
-  &::before {
-    height: 8px;
-    top: 4px;
-  }
-}
-
-.notyf__icon--confirm {
-  &::after,
-  &::before {
-    background: $primary;
-    border-radius: 3px;
-    content: '';
-    display: block;
-    position: absolute;
-    width: 3px;
-  }
-  &::after {
-    height: 6px;
-    left: 6px;
-    top: 9px;
-    transform: rotate(-45deg);
-  }
-  &::before {
-    height: 11px;
-    left: 10px;
-    top: 5px;
-    transform: rotate(45deg);
-  }
-}
-
-.notyf__toast {
-  animation: fadeinup .3s forwards;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .45);
-  display: block;
-  overflow: hidden;
-  padding-right: 13px;
-  position: relative;
-  &.notyf--alert {
-    background: $red-notyf;
-  }
-  &.notyf--confirm {
-    background: $primary;
-  }
-  &.notyf--disappear {
-    animation: fadeoutdown .3s 1 forwards;
-    animation-delay: .25s;
-    .notyf__message {
-      animation: fadeoutdown .3s 1 forwards;
-      animation-delay: .1s;
-      opacity: 1;
-    }
-    .notyf__icon {
-      animation: disappear .3s 1 forwards;
-      opacity: 1;
-    }
-  }
-}
-
-.notyf__wrapper {
-  border-radius: 3px;
-  display: table;
-  padding-bottom: 20px;
-  padding-right: 15px;
-  padding-top: 20px;
-  width: 100%;
-}
-
-.notyf__icon {
-  animation: appear .5s forwards;
-  animation-delay: .25s;
-  display: table-cell;
-  font-size: 1.3em;
-  opacity: 0;
-  text-align: center;
-  vertical-align: middle;
-  width: 20%;
-}
-
-.notyf__message {
-  animation: fadeinup .3s forwards;
-  animation-delay: .15s;
-  display: table-cell;
-  opacity: 0;
-  position: relative;
-  vertical-align: middle;
-  width: 80%;
-}
-
-.notyf {
-  bottom: 20px;
-  color: white;
-  position: fixed;
-  right: 30px;
-  width: 20%;
-  z-index: 9999;
-}
-
-// Small screens
-@media only screen and (max-width: 736px) {
-  .notyf__container {
-    display: block;
-    left: 0;
-    margin: 0 auto;
-    right: 0;
-    width: 90%;
-  }
-}

src/utils/index.ts

@@ -5,7 +5,7 @@ import colors from '@/data/colors'
 
 export const confirmation = debounce(
   (message: string) => {
-    notif.confirm(message)
+    notif.success(message)
   },
   3000,
   {
@@ -15,7 +15,7 @@ export const confirmation = debounce(
 
 export const alertMessage = debounce(
   (message: string) => {
-    notif.alert(message)
+    notif.error(message)
   },
   3000,
   {

src/utils/notif.ts

@@ -1,3 +1,14 @@
-declare const Notyf: any
+import { Notyf } from 'notyf'
+import 'notyf/notyf.min.css'
 
-export default new Notyf()
+// success: #3f4fa6, error: #c7435d
+
+export default new Notyf({
+  types: [{
+    type: 'success',
+    backgroundColor: '#3f4fa6'
+  }, {
+    type: 'error',
+    backgroundColor: '#c7435d'
+  }]
+})

src/utils/notyf.js

@@ -1,125 +0,0 @@
-(function () {
-  var $this = window
-  $this.Notyf = function () {
-    //List of notifications currently active
-    this.notifications = [];
-
-    var defaults = {
-      delay: 2000,
-      alertIcon: 'notyf__icon--alert',
-      confirmIcon: 'notyf__icon--confirm'
-    }
-
-    if (arguments[0] && typeof arguments[0] == "object") {
-      this.options = extendDefaults(defaults, arguments[0]);
-    } else {
-      this.options = defaults;
-    }
-
-    //Creates the main notifications container
-    var docFrag = document.createDocumentFragment();
-    var notyfContainer = document.createElement('div');
-    notyfContainer.className = 'notyf';
-    docFrag.appendChild(notyfContainer);
-    document.body.appendChild(docFrag);
-    this.container = notyfContainer;
-
-    //Stores which transitionEnd event this browser supports
-    this.animationEnd = animationEndSelect();
-  }
-
-  //---------- Public methods ---------------
-  /**
-   * Shows an alert card
-   */
-  $this.Notyf.prototype.alert = function (alertMessage) {
-    var card = buildNotificationCard.call(this, alertMessage, this.options.alertIcon);
-    card.className += ' notyf--alert';
-    this.container.appendChild(card);
-    this.notifications.push(card);
-  }
-
-  /**
-   * Shows a confirm card
-   */
-  $this.Notyf.prototype.confirm = function (alertMessage) {
-    var card = buildNotificationCard.call(this, alertMessage, this.options.confirmIcon);
-    card.className += ' notyf--confirm';
-    this.container.appendChild(card);
-    this.notifications.push(card);
-  }
-
-  //---------- Private methods ---------------
-
-  /**
-   * Populates the source object with the value from the same keys found in destination
-   */
-  function extendDefaults(source, destination) {
-    for (const property in destination) {
-      //Avoid asigning inherited properties of destination, only asign to source the destination own properties
-      if (destination.hasOwnProperty(property)) {
-        source[property] = destination[property];
-      }
-    }
-    return source;
-  }
-
-  /**
-   * Creates a generic card with the param message. Returns a document fragment.
-   */
-  function buildNotificationCard(messageText, iconClass) {
-    //Card wrapper
-    var notification = document.createElement('div');
-    notification.className = 'notyf__toast';
-
-    var wrapper = document.createElement('div');
-    wrapper.className = 'notyf__wrapper';
-
-    var iconContainer = document.createElement('div');
-    iconContainer.className = 'notyf__icon';
-
-    var icon = document.createElement('i');
-    icon.className = iconClass;
-
-    var message = document.createElement('div');
-    message.className = 'notyf__message';
-    message.innerHTML = messageText;
-
-    //Build the card
-    iconContainer.appendChild(icon);
-    wrapper.appendChild(iconContainer);
-    wrapper.appendChild(message);
-    notification.appendChild(wrapper);
-
-    var _this = this;
-    setTimeout(function () {
-      notification.className += " notyf--disappear";
-      notification.addEventListener(_this.animationEnd, function (event) {
-        event.target == notification && _this.container.removeChild(notification);
-      });
-      var index = _this.notifications.indexOf(notification);
-      _this.notifications.splice(index, 1);
-    }, _this.options.delay);
-
-    return notification;
-  }
-
-  // Determine which animationend event is supported
-  function animationEndSelect() {
-    var t;
-    var el = document.createElement('fake');
-    var transitions = {
-      'transition': 'animationend',
-      'OTransition': 'oAnimationEnd',
-      'MozTransition': 'animationend',
-      'WebkitTransition': 'webkitAnimationEnd'
-    }
-
-    for (t in transitions) {
-      if (el.style[t] !== undefined) {
-        return transitions[t];
-      }
-    }
-  }
-
-})();

src/views/User.vue

@@ -298,7 +298,7 @@ export default class User extends Vue {
         return
       }
     } catch (error) {
-      notif.alert(
+      notif.error(
         `Une erreur est survenue à la vérification d'un compte anonyme déjà créé.`
       )
       // tslint:disable-next-line
@@ -320,7 +320,7 @@ export default class User extends Vue {
         replicate: this.replicate
       })
     } catch (error) {
-      notif.alert(
+      notif.error(
         `Une erreur est survenue à la création du compte utilisateur.`
       )
       // tslint:disable-next-line
@@ -331,11 +331,11 @@ export default class User extends Vue {
 
   public validateRegistration(): boolean {
     if (!this.userId) {
-      notif.alert('Un pseudo est obligatoire.')
+      notif.error('Un pseudo est obligatoire.')
       return false
     }
     if (this.password !== this.confirmPassword) {
-      notif.alert('Les mots de passe doivent être identique.')
+      notif.error('Les mots de passe doivent être identique.')
       return false
     }
     return true
@@ -343,7 +343,7 @@ export default class User extends Vue {
 
   public async purge(): Promise<void> {
     await userService.purge()
-    notif.confirm(this.$t('user.purgeDone').toString())
+    notif.success(this.$t('user.purgeDone').toString())
   }
 
   public get slugEmail(): string {

src/views/accounts/AccountItem.vue

@@ -168,7 +168,7 @@ export default class AccountItem extends BaseAccount {
       if (this.id) {
         this.account = await accountService.get(this.id)
         if (!this.account) {
-          notif.alert(`le compte ${this.id} n'existe pas`)
+          notif.error(`le compte ${this.id} n'existe pas`)
           this.$router.push({ name: 'home' })
           return
         }
@@ -223,7 +223,7 @@ export default class AccountItem extends BaseAccount {
         )
       }
       await transactionService.multipleSave(transactions)
-      notif.confirm('Dépenses mises à jour.')
+      notif.success('Dépenses mises à jour.')
     } catch (error) {
       // tslint:disable-next-line
       console.warn({ error })

src/views/accounts/AccountNew.vue

@@ -132,25 +132,25 @@ export default class AccountNew extends Vue {
 
   public validate(): boolean {
     if (!this.name) {
-      notif.alert('Le nom doit être rempli.')
+      notif.error('Le nom doit être rempli.')
       return false
     }
     const aliases: string[] = this.users.map((user: IUser) =>
       user.alias ? user.alias.toLowerCase() : ''
     )
     if (aliases.length === 0) {
-      notif.alert('Au moins une personne doit être ajoutée au compte.')
+      notif.error('Au moins une personne doit être ajoutée au compte.')
       return false
     }
     if (aliases.length !== new Set(aliases).size) {
-      notif.alert('Les alias doivent être uniques.')
+      notif.error('Les alias doivent être uniques.')
       return false
     }
 
     if (this.user) {
       const userIds: string[] = this.users.map((user: IUser) => user.userId)
       if (userIds.length !== new Set(userIds).size) {
-        notif.alert('Les identifiants doivent être uniques.')
+        notif.error('Les identifiants doivent être uniques.')
         return false
       }
     }
@@ -199,7 +199,7 @@ export default class AccountNew extends Vue {
     } else {
       // tslint:disable-next-line:no-console
       console.warn(response)
-      notif.alert(`Une erreur s'est produite à la création d'un compte.`)
+      notif.error(`Une erreur s'est produite à la création d'un compte.`)
     }
   }
 

src/views/accounts/AccountPublic.vue

@@ -34,7 +34,7 @@ export default class AccountPublic extends Vue {
       this.account = await accountService.getRemote(this.id)
       if (this.account && this.account.isPublic) {
         this.addAccountId({ accountId: this.id })
-        notif.confirm(
+        notif.success(
           `Récupération du compte public ${this.account.name} en cours...`
         )
 

src/views/accounts/AccountSetting.vue

@@ -93,13 +93,13 @@ export default class AccountSetting extends BaseAccount {
     if (this.id) {
       this.account = await accountService.get(this.id)
       if (!this.account) {
-        notif.alert(`le compte ${this.id} n'existe pas`)
+        notif.error(`le compte ${this.id} n'existe pas`)
         this.$router.push({ name: 'home' })
         return
       }
       if (!this.isAdmin) {
         this.$router.push({ name: 'home' })
-        notif.confirm('Vous ne pouvez pas paramétrer ce compte')
+        notif.success('Vous ne pouvez pas paramétrer ce compte')
       }
     }
   }
@@ -137,7 +137,7 @@ export default class AccountSetting extends BaseAccount {
       this.account
     )
     if (!ok) {
-      notif.alert(`Une erreur s'est produite.`)
+      notif.error(`Une erreur s'est produite.`)
     }
   }
 

src/views/transactions/TransactionItem.vue

@@ -147,10 +147,10 @@ export default class TransactionItem extends Vue {
       } else {
         if (this.accountId) {
           this.$router.push({ name: 'account', params: { id: this.accountId } })
-          notif.alert('Transaction supprimée.')
+          notif.error('Transaction supprimée.')
         } else {
           this.$router.push({ name: 'home' })
-          notif.alert('Compte inexistant.')
+          notif.error('Compte inexistant.')
         }
       }
     } catch (error) {

src/views/transactions/TransactionUpdate.vue

@@ -37,7 +37,7 @@ export default class TransactionUpdate extends Vue {
     this.transaction = await transactionService.get(this.id)
     if (!this.transaction) {
       this.$router.push({ name: 'home' })
-      notif.alert('Compte inexistant.')
+      notif.error('Compte inexistant.')
       return
     }
     this.account = await accountService.get(this.transaction.accountId)