web/multinode: Show appropriate error while adding new node

while adding new nodes, if the nodeID, Public IP Address or
the API Key are incorrect no error was being shown on the webpage.
This commit resolves this issue by showing a error notification on
the top right corner of the screen with appropriate error text.

web/multinode/.eslintrc.js

@@ -43,7 +43,7 @@ module.exports = {
         "vue/no-unused-refs": ["warn"],
         "vue/no-useless-v-bind": ["warn"],
 
-        'vue/no-unregistered-components': ['warn', { ignorePatterns: ['router-link', 'router-view'] }],
+        'vue/no-unregistered-components': ['warn', { ignorePatterns: ['router-link', 'router-view', 'notifications'] }],
 
         'storj/vue/require-annotation': 'warn',
     },

web/multinode/package.json

@@ -16,6 +16,7 @@
     "vue-chartjs": "3.5.1",
     "vue-class-component": "7.2.6",
     "vue-clipboard2": "0.3.1",
+    "vue-notification": "^1.3.20",
     "vue-property-decorator": "9.1.2",
     "vue-router": "3.4.9",
     "vuex": "3.6.0"

web/multinode/src/api/index.ts

@@ -12,6 +12,15 @@ export class UnauthorizedError extends Error {
     }
 }
 
+/**
+ * NotFound is a custom error type for page not found
+ */
+export class NotFoundError extends Error {
+    public constructor(message = 'not found') {
+        super(message);
+    }
+}
+
 /**
  * BadRequestError is a custom error type for performing bad request.
  */
@@ -56,6 +65,7 @@ export class APIClient {
 
         switch (response.status) {
         case 401: throw new UnauthorizedError(body.error);
+        case 404: throw new NotFoundError(body.error);
         case 400: throw new BadRequestError(body.error);
         case 500:
         default:

web/multinode/src/app/App.vue

@@ -4,12 +4,15 @@
 <template>
     <div id="app">
         <router-view />
+        <notifications group="alerts" />
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import Notifications from 'vue-notification'
 
+Vue.use(Notifications);
 // @vue/component
 @Component
 export default class App extends Vue {

web/multinode/src/app/views/AddFirstNode.vue

@@ -48,6 +48,7 @@ import VButton from '@/app/components/common/VButton.vue';
 
 import { Config as RouterConfig } from '@/app/router';
 import { CreateNodeFields } from '@/nodes';
+import { NotFoundError,BadRequestError } from '@/api';
 
 // @vue/component
 @Component({
@@ -99,12 +100,28 @@ export default class AddFirstNode extends Vue {
 
             return;
         }
-
         try {
             await this.$store.dispatch('nodes/add', this.nodeToAdd);
         } catch (error) {
             console.error(error.message);
             this.isLoading = false;
+
+            if(error instanceof NotFoundError) {
+                this.$notify({
+                    group: 'alerts',
+                    type: 'error',
+                    title: 'Error',
+                    text: '404. Please check your Public IP Address'
+                });
+            } else if(error instanceof BadRequestError) {
+                this.$notify({
+                    group: 'alerts',
+                    type: 'error',
+                    title: 'Error',
+                    text: '400. Please check your NodeID and API Key'
+                });
+            }
+
         }
 
         await this.$router.push(RouterConfig.MyNodes.path);