Resolves some issues:

* REDMINE_ISSUE-11914 | Improves notification
* REDMINE_ISSUE-11939 | Fix error caught at signup

Co-authored-by: Florent <florent@Air-de-neogeo.neogeo.local>

package.json

@@ -17,6 +17,7 @@
     "corejs-typeahead": "^1.3.1",
     "lodash": "^4.17.21",
     "sweetalert2": "^11.0.18",
+    "toastr": "^2.1.4",
     "vee-validate": "^3.4.9",
     "vue": "~2.6.11",
     "vue-multiselect": "~2.1.6",

src/app.less

@@ -123,3 +123,33 @@ label.required:after {
     z-index: 2;
   }
 }
+
+// Toasts
+#toast-container {
+  top: 5px;
+  div {
+    opacity: 1;
+    width: 100% !important;
+  }
+}
+.toast {
+  max-width: 600px;
+  font-size: 1rem;
+}
+.toast:hover {
+  box-shadow: 0 0 12px #000000b3;
+}
+.toast-success {
+  background-color: #198754;
+  .toast-progress {
+    background-color: rgb(224, 224, 224);
+    height: 2px;
+  }
+}
+.toast-error {
+  .toast-title {
+    font-size: 1.2em;
+    margin-left: 1.2em;
+  }
+  background-color: #dc3545;
+}

src/components/OrganisationCreation.vue

@@ -259,11 +259,13 @@ export default {
     error(newValue) {
       if (newValue) {
         for (const [key, value] of Object.entries(newValue)) {
-          this.$refs[key].applyResult({
-            errors: value,
-            valid: false,
-            failedRules: {},
-          });
+          if (this.$refs[key]) {
+            this.$refs[key].applyResult({
+              errors: value,
+              valid: false,
+              failedRules: {},
+            });
+          }
         }
       }
     }

src/components/OrganisationSelector.vue

@@ -89,7 +89,7 @@ export default {
         postal_address: null,
       },
       organisationThumbnail: null,
-      organisationSpheres: null,
+      organisationSpheres: [],
       selectedOrganisation: null,
     };
   },
@@ -151,14 +151,17 @@ export default {
         });
       }
     },
-    organisationSpheres(newValue) {
-      if (newValue) {
-        this.$emit('select', {
-          selected: true,
-          orga: this.selectedOrganisation,
-          thumbnail: this.organisationThumbnail,
-          spheres: newValue
-        });
+    organisationSpheres: {
+      deep: true,
+      handler(newValue) {
+        if (newValue) {
+          this.$emit('select', {
+            selected: true,
+            orga: this.selectedOrganisation,
+            thumbnail: this.organisationThumbnail,
+            spheres: newValue
+          });
+        }
       }
     },
     selectedOrganisation(newValue) {

src/services/error-service.js

-import Swal from "sweetalert2";
-import "sweetalert2/dist/sweetalert2.min.css";
+import toastr from 'toastr';
+import 'toastr/build/toastr.min.css';
 
 import router from '@/router';
 
@@ -16,10 +16,8 @@ export class ErrorService {
       const messages = [];
       function recurse(obj) {
         for (const [key, value] of Object.entries(obj)) {
-          if (typeof key === 'string' && typeof value === 'string') {
-            messages.push(`<b>${key}:</b> ${value}`);
-          } else if (typeof value === 'string') {
-            messages.push(`${value}`);
+          if (typeof value === 'string') {
+            messages.push(`<li>${value}</li>`);
           } else {
             recurse(value);
           }
@@ -27,28 +25,53 @@ export class ErrorService {
       }
       recurse(errorObj);
 
-      Swal.fire({
-        position: 'top-end',
-        icon: 'error',
-        title: `Erreur ${response.status}`,
-        html: messages.join('\n'),
-        showConfirmButton: false,
-        timer: 3000
-      });
+      // Toastr option for error messages
+      toastr.options = {
+        closeButton: true,
+        debug: false,
+        newestOnTop: true,
+        progressBar: false,
+        positionClass: 'toast-top-right',
+        preventDuplicates: false,
+        onclick: null,
+        showDuration: '300',
+        hideDuration: '1000',
+        timeOut: '0',
+        extendedTimeOut: '0',
+        showEasing: 'swing',
+        hideEasing: 'linear',
+        showMethod: 'fadeIn',
+        hideMethod: 'fadeOut',
+      }
+
+      toastr.error(`<ul>${messages.join('\n')}</ul>`, `Oups!`);
     }
     return false;
   }
 
   static onSuccess(response, message) {
+
+    // Toastr option for success messages
+    toastr.options = {
+      closeButton: false,
+      debug: false,
+      newestOnTop: true,
+      progressBar: true,
+      positionClass: 'toast-top-right',
+      preventDuplicates: false,
+      onclick: null,
+      showDuration: '300',
+      hideDuration: '1000',
+      timeOut: '5000',
+      extendedTimeOut: '5000',
+      showEasing: 'swing',
+      hideEasing: 'linear',
+      showMethod: 'fadeIn',
+      hideMethod: 'fadeOut'
+    }
+
     if (response) {
-      Swal.fire({
-        position: 'top-end',
-        heightAuto: false,
-        icon: 'success',
-        title: `${message}`,
-        showConfirmButton: false,
-        timer: 3000
-      });
+      toastr.error(message);
     }
     return false;
   }

src/store/modules/sign-up.store.js

@@ -48,7 +48,7 @@ const actions = {
               commit('SET_SIGNED', false);
             });
           }
-          if (state.organisationSpheres.length > 0) {
+          if (state.organisationSpheres && state.organisationSpheres.length > 0) {
             const data = {
               ...resp.usergroup_roles[0].organisation,
               parents: state.organisationSpheres.map((el) => { return el.id; })