From 2134714a5778d7c825ba2f22967d02bee9e41d12 Mon Sep 17 00:00:00 2001
From: tholulomo <fatexjames@yahoo.com>
Date: Sat, 18 Feb 2023 20:04:41 -0500
Subject: [PATCH] #300: Refactor FE with auth flow implementation

---
 app/package-lock.json                         | 678 ++++++++++++++----
 app/src/assets/css/modules/_button.scss       |  15 +
 app/src/auth/auth.vue                         |   9 +
 app/src/components/Drawer.vue                 |  17 +-
 app/src/components/Snackbar.vue               |  12 +-
 app/src/components/explorer/Header.vue        |  38 +-
 app/src/components/nanomine/PageHeader.vue    |  16 +-
 app/src/pages/NotFound.vue                    |   5 +-
 .../parameterized-query-page.vue              |   2 +-
 app/src/pages/metamine/Base.vue               |  12 +-
 app/src/router/index.js                       |  27 +-
 app/src/router/module/explorer.js             |   2 +-
 app/src/store/modules/auth/actions.js         | 104 ++-
 app/src/store/modules/auth/getters.js         |   3 +
 app/src/store/modules/auth/index.js           |   2 +
 app/src/store/modules/auth/mutations.js       |   1 +
 app/src/store/modules/misc/index.js           |   3 +-
 app/src/store/modules/misc/mutations.js       |   5 +-
 18 files changed, 716 insertions(+), 235 deletions(-)
 create mode 100644 app/src/auth/auth.vue

diff --git a/app/package-lock.json b/app/package-lock.json
index 57488c8d..487aa2af 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -3539,25 +3539,76 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
     "node_modules/@vue/compiler-sfc": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/@vue/compiler-sfc/node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
       "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3568,6 +3619,8 @@
           "url": "https://tidelift.com/funding/github/npm/postcss"
         }
       ],
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -3577,6 +3630,18 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
     "node_modules/@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -3656,6 +3721,40 @@
         "webpack": ">=4.0.0"
       }
     },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/@vue/reactivity-transform/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@vue/test-utils": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.3.4.tgz",
@@ -8497,6 +8596,103 @@
       "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-4.6.3.tgz",
       "integrity": "sha512-LRq7BrHC2kHPBYSD50aKuw/B/dGcg29omyJbKWY3KsYUZU69RKwaBHu13jGmCYBtOc4odsLCrFyk6imfyNubJQ=="
     },
+    "node_modules/datavoyager/node_modules/react": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
+      "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+      "dependencies": {
+        "create-react-class": "^15.6.0",
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.0",
+        "prop-types": "^15.5.10"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/datavoyager/node_modules/react-dom": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz",
+      "integrity": "sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg==",
+      "dependencies": {
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.0",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^15.7.0"
+      }
+    },
+    "node_modules/datavoyager/node_modules/react-jsonschema-form": {
+      "version": "0.49.0",
+      "resolved": "https://registry.npmjs.org/react-jsonschema-form/-/react-jsonschema-form-0.49.0.tgz",
+      "integrity": "sha512-MTbsAY5s7hNhneVFpSfQjflLal2kuK9YYpdWdr8l54K0B6O4EDIIwpp5visc+1QCs04w2FUo8HqvItaFsQYqig==",
+      "dependencies": {
+        "jsonschema": "^1.0.2",
+        "lodash.topath": "^4.5.2",
+        "prop-types": "^15.5.8",
+        "setimmediate": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=6",
+        "npm": "^2.14.7"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0"
+      }
+    },
+    "node_modules/datavoyager/node_modules/react-modal": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz",
+      "integrity": "sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0"
+      }
+    },
+    "node_modules/datavoyager/node_modules/react-spinners": {
+      "version": "0.0.30",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.0.30.tgz",
+      "integrity": "sha512-5RTEuPNaLoyRBRzDeki6uUDzXckzGM7v4zpcYY6m04KV+ya9JhUXIR0Nw5VS4b5KpbF09rnyhxVlrPcMrzjS+A==",
+      "dependencies": {
+        "domkit": "^0.0.1"
+      },
+      "peerDependencies": {
+        "react": "~0.14.8 || ^15.0.0",
+        "react-dom": "~0.14.8 || ^15.0.0"
+      }
+    },
+    "node_modules/datavoyager/node_modules/react-tabs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-1.1.0.tgz",
+      "integrity": "sha512-czGyPAxhnl0GTxmoeYXcwWH2BVg9ik7BnInaaAGRURGw3pz0oKMekffa5z2fYjLQyaO2Z8m1udLOoDTZ9rRAHw==",
+      "dependencies": {
+        "classnames": "^2.2.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.9 || ^15.3.0"
+      }
+    },
+    "node_modules/datavoyager/node_modules/react-tether": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-0.5.7.tgz",
+      "integrity": "sha512-oAZQLcABWpFXSV2El6WqFMoUuYdG8iKnE+CJcBI+WMPkvMGnguMC0lHx/cmyIcOxm/6JetTEmq2Q7T2bpoe69w==",
+      "dependencies": {
+        "prop-types": "^15.5.8",
+        "tether": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0"
+      }
+    },
     "node_modules/datavoyager/node_modules/redux": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
@@ -10666,6 +10862,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -19675,15 +19879,14 @@
       }
     },
     "node_modules/react": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
-      "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "peer": true,
       "dependencies": {
-        "create-react-class": "^15.6.0",
-        "fbjs": "^0.8.9",
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -19760,17 +19963,18 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz",
-      "integrity": "sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "peer": true,
       "dependencies": {
-        "fbjs": "^0.8.9",
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
       },
       "peerDependencies": {
-        "react": "^15.7.0"
+        "react": "^16.14.0"
       }
     },
     "node_modules/react-file-download": {
@@ -19784,42 +19988,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-jsonschema-form": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/react-jsonschema-form/-/react-jsonschema-form-0.49.0.tgz",
-      "integrity": "sha512-MTbsAY5s7hNhneVFpSfQjflLal2kuK9YYpdWdr8l54K0B6O4EDIIwpp5visc+1QCs04w2FUo8HqvItaFsQYqig==",
-      "dependencies": {
-        "jsonschema": "^1.0.2",
-        "lodash.topath": "^4.5.2",
-        "prop-types": "^15.5.8",
-        "setimmediate": "^1.0.5"
-      },
-      "engines": {
-        "node": ">=6",
-        "npm": "^2.14.7"
-      },
-      "peerDependencies": {
-        "react": "^15.0.0"
-      }
-    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "node_modules/react-modal": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz",
-      "integrity": "sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==",
-      "dependencies": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.5.10"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0"
-      }
-    },
     "node_modules/react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@@ -19859,18 +20032,6 @@
         "react-is": "^16.7.0"
       }
     },
-    "node_modules/react-spinners": {
-      "version": "0.0.30",
-      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.0.30.tgz",
-      "integrity": "sha512-5RTEuPNaLoyRBRzDeki6uUDzXckzGM7v4zpcYY6m04KV+ya9JhUXIR0Nw5VS4b5KpbF09rnyhxVlrPcMrzjS+A==",
-      "dependencies": {
-        "domkit": "^0.0.1"
-      },
-      "peerDependencies": {
-        "react": "~0.14.8 || ^15.0.0",
-        "react-dom": "~0.14.8 || ^15.0.0"
-      }
-    },
     "node_modules/react-split-pane": {
       "version": "0.1.92",
       "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.92.tgz",
@@ -19893,18 +20054,6 @@
         "prop-types": "^15.5.4"
       }
     },
-    "node_modules/react-tabs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-1.1.0.tgz",
-      "integrity": "sha512-czGyPAxhnl0GTxmoeYXcwWH2BVg9ik7BnInaaAGRURGw3pz0oKMekffa5z2fYjLQyaO2Z8m1udLOoDTZ9rRAHw==",
-      "dependencies": {
-        "classnames": "^2.2.0",
-        "prop-types": "^15.5.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.9 || ^15.3.0"
-      }
-    },
     "node_modules/react-tabs-redux": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/react-tabs-redux/-/react-tabs-redux-2.0.1.tgz",
@@ -19917,19 +20066,6 @@
         "react": "^0.14.5 || >=15"
       }
     },
-    "node_modules/react-tether": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-0.5.7.tgz",
-      "integrity": "sha512-oAZQLcABWpFXSV2El6WqFMoUuYdG8iKnE+CJcBI+WMPkvMGnguMC0lHx/cmyIcOxm/6JetTEmq2Q7T2bpoe69w==",
-      "dependencies": {
-        "prop-types": "^15.5.8",
-        "tether": "^1.3.7"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0"
-      }
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -20733,6 +20869,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -21598,6 +21744,15 @@
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
       "deprecated": "See https://github.com/lydell/source-map-url#deprecated"
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/spawn-sync": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
@@ -27222,6 +27377,44 @@
         "vue": "^2.6.10"
       }
     },
+    "node_modules/vue/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/vue/node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/vue/node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -31243,6 +31436,7 @@
       "integrity": "sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==",
       "dev": true,
       "requires": {
+        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -31255,6 +31449,7 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }
@@ -31527,25 +31722,78 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
     "@vue/compiler-sfc": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
         "source-map": "^0.6.1"
       },
       "dependencies": {
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        },
         "picocolors": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true
         },
         "postcss": {
           "version": "8.4.21",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
           "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "nanoid": "^3.3.4",
             "picocolors": "^1.0.0",
@@ -31554,6 +31802,18 @@
         }
       }
     },
+    "@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
     "@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -31613,6 +31873,42 @@
       "dev": true,
       "requires": {}
     },
+    "@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "@vue/test-utils": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.3.4.tgz",
@@ -35544,6 +35840,75 @@
           "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-4.6.3.tgz",
           "integrity": "sha512-LRq7BrHC2kHPBYSD50aKuw/B/dGcg29omyJbKWY3KsYUZU69RKwaBHu13jGmCYBtOc4odsLCrFyk6imfyNubJQ=="
         },
+        "react": {
+          "version": "15.7.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
+          "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+          "requires": {
+            "create-react-class": "^15.6.0",
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-dom": {
+          "version": "15.7.0",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz",
+          "integrity": "sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg==",
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-jsonschema-form": {
+          "version": "0.49.0",
+          "resolved": "https://registry.npmjs.org/react-jsonschema-form/-/react-jsonschema-form-0.49.0.tgz",
+          "integrity": "sha512-MTbsAY5s7hNhneVFpSfQjflLal2kuK9YYpdWdr8l54K0B6O4EDIIwpp5visc+1QCs04w2FUo8HqvItaFsQYqig==",
+          "requires": {
+            "jsonschema": "^1.0.2",
+            "lodash.topath": "^4.5.2",
+            "prop-types": "^15.5.8",
+            "setimmediate": "^1.0.5"
+          }
+        },
+        "react-modal": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz",
+          "integrity": "sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==",
+          "requires": {
+            "exenv": "^1.2.0",
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-spinners": {
+          "version": "0.0.30",
+          "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.0.30.tgz",
+          "integrity": "sha512-5RTEuPNaLoyRBRzDeki6uUDzXckzGM7v4zpcYY6m04KV+ya9JhUXIR0Nw5VS4b5KpbF09rnyhxVlrPcMrzjS+A==",
+          "requires": {
+            "domkit": "^0.0.1"
+          }
+        },
+        "react-tabs": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-1.1.0.tgz",
+          "integrity": "sha512-czGyPAxhnl0GTxmoeYXcwWH2BVg9ik7BnInaaAGRURGw3pz0oKMekffa5z2fYjLQyaO2Z8m1udLOoDTZ9rRAHw==",
+          "requires": {
+            "classnames": "^2.2.0",
+            "prop-types": "^15.5.0"
+          }
+        },
+        "react-tether": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-0.5.7.tgz",
+          "integrity": "sha512-oAZQLcABWpFXSV2El6WqFMoUuYdG8iKnE+CJcBI+WMPkvMGnguMC0lHx/cmyIcOxm/6JetTEmq2Q7T2bpoe69w==",
+          "requires": {
+            "prop-types": "^15.5.8",
+            "tether": "^1.3.7"
+          }
+        },
         "redux": {
           "version": "3.7.2",
           "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
@@ -37269,6 +37634,14 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -44529,15 +44902,14 @@
       "requires": {}
     },
     "react": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
-      "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "peer": true,
       "requires": {
-        "create-react-class": "^15.6.0",
-        "fbjs": "^0.8.9",
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
       }
     },
     "react-copy-to-clipboard": {
@@ -44599,14 +44971,15 @@
       }
     },
     "react-dom": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz",
-      "integrity": "sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "peer": true,
       "requires": {
-        "fbjs": "^0.8.9",
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
       }
     },
     "react-file-download": {
@@ -44619,31 +44992,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-jsonschema-form": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/react-jsonschema-form/-/react-jsonschema-form-0.49.0.tgz",
-      "integrity": "sha512-MTbsAY5s7hNhneVFpSfQjflLal2kuK9YYpdWdr8l54K0B6O4EDIIwpp5visc+1QCs04w2FUo8HqvItaFsQYqig==",
-      "requires": {
-        "jsonschema": "^1.0.2",
-        "lodash.topath": "^4.5.2",
-        "prop-types": "^15.5.8",
-        "setimmediate": "^1.0.5"
-      }
-    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-modal": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz",
-      "integrity": "sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==",
-      "requires": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.5.10"
-      }
-    },
     "react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@@ -44674,14 +45027,6 @@
         }
       }
     },
-    "react-spinners": {
-      "version": "0.0.30",
-      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.0.30.tgz",
-      "integrity": "sha512-5RTEuPNaLoyRBRzDeki6uUDzXckzGM7v4zpcYY6m04KV+ya9JhUXIR0Nw5VS4b5KpbF09rnyhxVlrPcMrzjS+A==",
-      "requires": {
-        "domkit": "^0.0.1"
-      }
-    },
     "react-split-pane": {
       "version": "0.1.92",
       "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.92.tgz",
@@ -44700,15 +45045,6 @@
         "prop-types": "^15.5.4"
       }
     },
-    "react-tabs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-1.1.0.tgz",
-      "integrity": "sha512-czGyPAxhnl0GTxmoeYXcwWH2BVg9ik7BnInaaAGRURGw3pz0oKMekffa5z2fYjLQyaO2Z8m1udLOoDTZ9rRAHw==",
-      "requires": {
-        "classnames": "^2.2.0",
-        "prop-types": "^15.5.0"
-      }
-    },
     "react-tabs-redux": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/react-tabs-redux/-/react-tabs-redux-2.0.1.tgz",
@@ -44718,15 +45054,6 @@
         "prop-types": "^15.5.7"
       }
     },
-    "react-tether": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-0.5.7.tgz",
-      "integrity": "sha512-oAZQLcABWpFXSV2El6WqFMoUuYdG8iKnE+CJcBI+WMPkvMGnguMC0lHx/cmyIcOxm/6JetTEmq2Q7T2bpoe69w==",
-      "requires": {
-        "prop-types": "^15.5.8",
-        "tether": "^1.3.7"
-      }
-    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -45341,6 +45668,16 @@
         "xmlchars": "^2.1.1"
       }
     },
+    "scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -46055,6 +46392,14 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "spawn-sync": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
@@ -50418,6 +50763,33 @@
       "requires": {
         "@vue/compiler-sfc": "2.7.14",
         "csstype": "^3.1.0"
+      },
+      "dependencies": {
+        "@vue/compiler-sfc": {
+          "version": "2.7.14",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+          "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+          "requires": {
+            "@babel/parser": "^7.18.4",
+            "postcss": "^8.4.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "picocolors": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+        },
+        "postcss": {
+          "version": "8.4.21",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+          "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+          "requires": {
+            "nanoid": "^3.3.4",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
       }
     },
     "vue-advanced-cropper": {
diff --git a/app/src/assets/css/modules/_button.scss b/app/src/assets/css/modules/_button.scss
index 50463e90..2c18d50c 100644
--- a/app/src/assets/css/modules/_button.scss
+++ b/app/src/assets/css/modules/_button.scss
@@ -132,3 +132,18 @@ a.btn-text,
         transform: translateY(0);
     }
 }
+
+.md-icon-button.large {
+    width: 140px;
+    min-width: 120px;
+    text-align: right;
+    @include respond(tab-land){
+        width: 120px;
+        min-width: 100px;
+    }
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
diff --git a/app/src/auth/auth.vue b/app/src/auth/auth.vue
new file mode 100644
index 00000000..dc5334bb
--- /dev/null
+++ b/app/src/auth/auth.vue
@@ -0,0 +1,9 @@
+<template></template>
+<script>
+export default {
+  name: 'Auth',
+  created() {
+	return this.$store.dispatch('auth/authProcessor', this.$route.params.auth)
+  }
+}
+</script>
diff --git a/app/src/components/Drawer.vue b/app/src/components/Drawer.vue
index 2a8c571e..14c5cb1e 100644
--- a/app/src/components/Drawer.vue
+++ b/app/src/components/Drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <md-toolbar class="md-transparent" md-elevation="0">Welcome Stewart</md-toolbar>
+    <md-toolbar class="md-transparent" md-elevation="0">Welcome {{ name }}</md-toolbar>
     <md-list md-expand-single=true class="utility-transparentbg">
       <md-list-item md-expand>
         <md-icon class="utility-navfonticon">home</md-icon>
@@ -83,19 +83,26 @@
           </router-link>
         </md-list>
       </md-list-item>
-      <md-list-item>
+      <md-list-item v-if="isAuth">
         <md-icon class="utility-navfonticon">logout</md-icon>
         <span class="md-list-item-text utility-navfont">Log out</span>
       </md-list-item>
-      <md-list-item>
+      <md-list-item v-if="!isAuth">
         <md-icon class="utility-navfonticon">login</md-icon>
-        <span class="md-list-item-text utility-navfont">Login</span>
+        <span class="md-list-item-text utility-navfont"><a href="/secure">Login</a></span>
       </md-list-item>
     </md-list>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
-  name: 'Drawers'
+  name: 'Drawers',
+  computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      name: 'auth/displayName',
+    })
+  },
 }
 </script>
diff --git a/app/src/components/Snackbar.vue b/app/src/components/Snackbar.vue
index 1b85c16a..7ea7e3fe 100644
--- a/app/src/components/Snackbar.vue
+++ b/app/src/components/Snackbar.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <md-snackbar :md-position="position" :md-active.sync="show">
+    <md-snackbar :md-position="position" :md-active.sync="show" :md-duration="!duration ? Infinity : duration">
       {{message}}
       <span>
-        <md-button v-if="action" id="snackbarAction" class="md-primary" @click.native="callAction">Retry</md-button>
-        <md-button v-else id="snackbarRefresh" class="md-primary" @click.native="refresh">Refresh</md-button>
-        <md-button id="snackbarClose" class="md-primary" @click.native="show = false">Close</md-button>
+        <md-button v-if="action && !duration" id="snackbarAction" class="md-primary" @click.native="callAction">Retry</md-button>
+        <!-- <md-button v-else id="snackbarRefresh" class="md-primary" @click.native="refresh">Refresh</md-button>
+        <md-button id="snackbarClose" class="md-primary" @click.native="show = false">Close</md-button> -->
       </span>
     </md-snackbar>
   </div>
@@ -26,7 +26,8 @@ export default {
     return {
       show: false,
       message: '',
-      action: null
+      action: null,
+      duration: false
     }
   },
   computed: {
@@ -51,6 +52,7 @@ export default {
         this.show = true
         this.message = this.snackbar.message
         this.action = this.snackbar.action || null
+        this.duration = val.duration ? val.duration : false
         // Reset
         this.$store.commit('setSnackbar', '')
       }
diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue
index 16be64d8..b703aa51 100644
--- a/app/src/components/explorer/Header.vue
+++ b/app/src/components/explorer/Header.vue
@@ -11,38 +11,46 @@
         </div>
 
         <div class="md-toolbar-section-end">
-          <md-badge id="header-badge" class="md-primary" md-content="12">
+          <md-badge v-if="isAuth && showBadge" id="header-badge" class="md-primary" md-content="12">
             <md-button class="md-icon-button">
-              <md-icon>person</md-icon>
+              Hi {{ displayName }}
             </md-button>
           </md-badge>
+          <md-button v-if="isAuth" class="md-icon-button">
+            Hi {{ displayName }}
+          </md-button>
+          <a v-if="!isAuth" class="md-icon-button large" href="/secure">
+            Login
+          </a>
         </div>
       </div>
       <!-- Toolbar -->
       <div class="md-toolbar-row u_margin-top-med">
-        <md-tabs class="md-primary" id="reset_tab_bg">
-          <router-link  class="tabs" to="/explorer" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="href === '/explorer' ? setSearching : navigate" id="tab-home" md-label="Search"> </md-tab>
-          </router-link>
-          <router-link class="tabs" to="/explorer/visualization" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="navigate" id="tab-visualization" md-label="Visualization"> </md-tab>
-          </router-link>
-          <router-link class="tabs" to="/explorer/curate" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="navigate" id="tab-curate" md-label="Curate"> </md-tab>
-          </router-link>
-          <router-link class="tabs" to="/explorer/parameterized_query" v-slot="{navigate, href}" custom>
-            <md-tab :href="href" @click="navigate" id="tab-query" md-label="Parameterized Query"> </md-tab>
-          </router-link>
+        <md-tabs class="md-primary" id="reset_tab_bg" md-sync-route>
+          <md-tab to="/explorer" id="tab-home" md-label="Search" exact> </md-tab>
+          <md-tab to="/explorer/visualization" id="tab-visualization" md-label="Visualization" exact> </md-tab>
+          <md-tab to="/explorer/curate" id="tab-curate" md-label="Curate" exact> </md-tab>
+          <md-tab to="/explorer/parameterized_query" id="tab-query" md-label="Parameterized Query" exact> </md-tab>
+          <md-tab to="/explorer/sparql" id="tab-sparql" md-label="Sparql Query" exact> </md-tab>
         </md-tabs>
       </div>
     </md-app-toolbar>
   </div>
 </template>
+
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'ExpHeader',
   props: ['toggler'],
+  data() {
+    return { showBadge: false }
+  },
   computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      displayName: 'auth/displayName',
+    }),
     searchTerm: {
       get () {
         return this.$store.getters['explorer/getSearchKeyword']
diff --git a/app/src/components/nanomine/PageHeader.vue b/app/src/components/nanomine/PageHeader.vue
index e745110b..dda4d0b5 100644
--- a/app/src/components/nanomine/PageHeader.vue
+++ b/app/src/components/nanomine/PageHeader.vue
@@ -14,21 +14,21 @@
                 <div class="md-toolbar-section-end header_nav">
                     <div class="nav nav_menu u--inline">
                         <ul>
-                            <li><a href="/nm">NanoMine</a></li>
-                            <li><a href="/mm">MetaMine</a></li>
+                            <li><router-link to="/nm" v-slot="{navigate, href}" custom><a :href="href" @click="navigate">NanoMine</a></router-link></li>
+                            <li><router-link to="/mm" v-slot="{navigate, href}" custom><a :href="href" @click="navigate">Metamine</a></router-link></li>
                         </ul>
                     </div>
                     <div class="u--inline">
-                        <div v-if="$store.getters.isAuthenticated" class="nav_menu--container">
+                        <div v-if="isAuth" class="nav_menu--container">
                             <a class="u--default-size nav_menu--handler" style="color:#fff; font-size:1.2rem !important;">
-                                <i class="material-icons" style="vertical-align: middle;">perm_identity</i>
+                                Hi {{ displayName }}
                             </a>
                             <div class="nav_menu--siblings nav_menu--sibheader">
                                 <span class="nav_menu--siblings-lists" @click="$store.dispatch('logout')"><a>Logout</a></span>
                             </div>
                         </div>
                         <div v-else>
-                            <a class="btn btn--tertiary btn--noradius">Login/Register</a>
+                            <a class="btn btn--tertiary btn--noradius" href="/secure">Login/Register</a>
                         </div>
                     </div>
                 </div>
@@ -97,7 +97,7 @@
                                 </div>
                             </div>
                         </li>
-                        <li class="u_margin-right-small" v-if="$store.getters.isAuthenticated">
+                        <li class="u_margin-right-small" v-if="isAuth">
                             <div class="nav_menu--container">
                                 <a class="u--default-size" href="/mypage">My Portal</a>
                             </div>
@@ -115,7 +115,9 @@ export default {
   props: ['toggler'],
   computed: {
     ...mapGetters({
-      info: 'appHeaderInfo'
+      info: 'appHeaderInfo',
+      isAuth: 'auth/isAuthenticated',
+      displayName: 'auth/displayName',
     })
   }
 }
diff --git a/app/src/pages/NotFound.vue b/app/src/pages/NotFound.vue
index 0ad63784..5ef24b87 100644
--- a/app/src/pages/NotFound.vue
+++ b/app/src/pages/NotFound.vue
@@ -18,16 +18,17 @@
                         </ul>
                     </div>
                     <div class="u--inline">
-                        <div v-if="$store.getters.isAuthenticated" class="nav_menu--container">
+                        <div v-if="$store.getters['auth/isAuthenticated']" class="nav_menu--container">
                             <a class="u--default-size nav_menu--handler" style="color:#fff; font-size:1.2rem !important;">
                                 <i class="material-icons" style="vertical-align: middle;">perm_identity</i>
+                                {{ $store.getters['auth/displayName'] }}
                             </a>
                             <div class="nav_menu--siblings nav_menu--sibheader">
                                 <span class="nav_menu--siblings-lists" @click="$store.dispatch('logout')"><a>Logout</a></span>
                             </div>
                         </div>
                         <div v-else>
-                            <a class="btn btn--tertiary btn--noradius">Login/Register</a>
+                            <a class="btn btn--tertiary btn--noradius" href="/secure">Login/Register</a>
                         </div>
                     </div>
                 </div>
diff --git a/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue b/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue
index 435d27ae..8a746c7e 100644
--- a/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue
+++ b/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue
@@ -70,7 +70,7 @@
       </div>
       <div class="results">
         <accordion
-          :startOpen="true"
+          :startOpen="false"
           title="SPARQL Results"
         >
           <div class="results-controls">
diff --git a/app/src/pages/metamine/Base.vue b/app/src/pages/metamine/Base.vue
index 22cdd85a..6100198e 100644
--- a/app/src/pages/metamine/Base.vue
+++ b/app/src/pages/metamine/Base.vue
@@ -47,9 +47,12 @@
                         </li>
                         <li>
                           <div class="nav_menu--container">
-                            <a class="u--default-size nav_menu--handler" href="#">
+                            <a v-if="!isAuth" class="u--default-size nav_menu--handler" href="/secure">
                               <md-icon class="metamine_menu-icon">person</md-icon> LOGIN/REGISTER
                             </a>
+                            <a v-else class="u--default-size nav_menu--handler" @click="$store.dispatch('logout')">
+                              Hi {{ displayName }}
+                            </a>
                           </div>
                         </li>
                       </ul>
@@ -68,12 +71,19 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import Drawers from '@/components/Drawer.vue'
 export default {
   name: 'MetamineBase',
   components: {
     Drawers
   },
+  computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      displayName: 'auth/displayName',
+    })
+  },
   data () {
     return {
       toggleMenuVisibility: false
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 8ed88aa3..968135dc 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -37,6 +37,10 @@ const routes = [
       ...explorerRoutes
     ]
   },
+  {
+    path: '/auth/:auth',
+    component: () => import('@/auth/auth.vue'),
+  },
   { path: '/explorer:notFound(.*)', component: NotFound },
   { path: '/mm:notFound(.*)', component: NotFound },
   { path: '/nm:notFound(.*)', component: NotFound },
@@ -46,7 +50,7 @@ const routes = [
 const router = new VueRouter({
   mode: 'history',
   routes,
-  scrollBehavior (to, from, prevPosition) {
+  scrollBehavior (to, _, prevPosition) {
     if (prevPosition) {
       return prevPosition
     }
@@ -60,11 +64,22 @@ const router = new VueRouter({
   }
 })
 
-router.beforeEach(function (to, _, next) {
-  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
-    next('/') // TODO: Develop auth component
-  } else if (to.meta.requiresUnauth && store.getters.isAuthenticated) {
-    next('/')
+router.beforeEach(async function (to, _, next) {
+  if (to.meta.requiresAuth && !store.getters['auth/isAuthenticated']) {
+    if (!store.getters['auth/isAuthenticated']) {
+      store.commit('setSnackbar', {
+        message: 'Re-authenticating...',
+        duration: 1500
+      }, { root: true })
+
+      await store.dispatch('auth/tryLogin')
+      if(store.getters['auth/isAuthenticated']) {
+        next()
+      }
+    }
+    next(false)
+  } else if (to.meta.requiresUnauth && store.getters.auth.isAuthenticated) {
+    next()
   } else {
     next()
   }
diff --git a/app/src/router/module/explorer.js b/app/src/router/module/explorer.js
index b06984ae..eb5a4a78 100644
--- a/app/src/router/module/explorer.js
+++ b/app/src/router/module/explorer.js
@@ -170,7 +170,7 @@ const explorerRoutes = [
       import(
         '@/pages/explorer/parameterized-query/parameterized-query-page.vue'
       ),
-    meta: { requiresAuth: false }
+    meta: { requiresAuth: true }
   }
 ]
 
diff --git a/app/src/store/modules/auth/actions.js b/app/src/store/modules/auth/actions.js
index 744c88d6..f53765bd 100644
--- a/app/src/store/modules/auth/actions.js
+++ b/app/src/store/modules/auth/actions.js
@@ -1,6 +1,6 @@
-let timer
+import router from '@/router'
 
-// TODO: A sample auth implementation
+let timer
 export default {
   async login (context, payload) {
     return context.dispatch('auth', {
@@ -8,12 +8,14 @@ export default {
       mode: 'login'
     })
   },
+
   async signup (context, payload) {
     return context.dispatch('auth', {
       ...payload,
       mode: 'signup'
     })
   },
+
   async auth (context, payload) {
     const mode = payload.mode
     let url = 'https://server.test'
@@ -21,77 +23,107 @@ export default {
     if (mode === 'signup') {
       url = 'https://server.test'
     }
-    const response = await fetch(url, {
-      method: 'POST',
-      body: JSON.stringify({
-        email: payload.email,
-        password: payload.password,
-        returnSecureToken: true
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        body: JSON.stringify({
+          email: payload.email,
+          password: payload.password,
+          returnSecureToken: true
+        })
       })
-    })
-
-    const responseData = await response.json()
+  
+      const responseData = await response.json()
+  
+      if (!response.ok) {
+        const error = new Error(
+          responseData.message || 'Failed to authenticate. Check your login data.'
+        )
+        throw error
+      }
 
-    if (!response.ok) {
-      const error = new Error(
-        responseData.message || 'Failed to authenticate. Check your login data.'
-      )
-      throw error
+      return context.dispatch('authProcessor', responseData);
+    } catch (err) {
+      throw err
     }
+  },
 
-    const expiresIn = +responseData.expiresIn * 1000
-    // const expiresIn = 5000;
-    const expirationDate = new Date().getTime() + expiresIn
+  async authProcessor (context, payload) {
+    const res = payload ? JSON.parse(payload) : {}
 
-    localStorage.setItem('token', responseData.idToken)
-    localStorage.setItem('userId', responseData.localId)
-    localStorage.setItem('tokenExpiration', expirationDate)
+    // Reroute to home page
+    // TODO (xxx): We should re-route to the page where user left off
+    router.push('/nm')
+    context.commit('setSnackbar', {
+      message: 'Authenticating...',
+      duration: 1000
+    }, { root: true })
 
-    timer = setTimeout(function () {
-      context.dispatch('autoLogout')
-    }, expiresIn)
+    const token = res.token ?? null
+    const userId = res.userId ?? null
+    const displayName = res.displayName ?? null
+    const expiresIn = 450 * 1000
+    const expirationDate = new Date().getTime() + expiresIn
 
-    context.commit('setUser', {
-      token: responseData.idToken,
-      userId: responseData.localId
-    })
+    if (token && userId && displayName) {
+      localStorage.setItem('token', token)
+      localStorage.setItem('userId', userId)
+      localStorage.setItem('displayName', displayName)
+      localStorage.setItem('tokenExpiration', expirationDate)
+  
+      timer = setTimeout(function () {
+        context.dispatch('autoLogout')
+      }, expiresIn)
+    }
+
+    context.commit('setUser', { token, userId, displayName })
   },
+
   tryLogin (context) {
     const token = localStorage.getItem('token')
     const userId = localStorage.getItem('userId')
+    const displayName = localStorage.getItem('displayName')
     const tokenExpiration = localStorage.getItem('tokenExpiration')
 
     const expiresIn = +tokenExpiration - new Date().getTime()
 
     if (expiresIn < 0) {
-      return
+      return context.dispatch('notifyUser')
     }
 
     timer = setTimeout(function () {
       context.dispatch('autoLogout')
     }, expiresIn)
 
-    if (token && userId) {
-      context.commit('setUser', {
-        token: token,
-        userId: userId
-      })
+    if (token && userId && displayName) {
+      context.commit('setUser', { token, userId, displayName })
     }
   },
+
   logout (context) {
     localStorage.removeItem('token')
     localStorage.removeItem('userId')
+    localStorage.removeItem('displayName')
     localStorage.removeItem('tokenExpiration')
 
     clearTimeout(timer)
 
     context.commit('setUser', {
       token: null,
-      userId: null
+      userId: null,
+      displayName: null
     })
   },
+
   autoLogout (context) {
     context.dispatch('logout')
     context.commit('setAutoLogout')
+  },
+
+  notifyUser (context) {
+    context.commit('setSnackbar', {
+      message: 'This page requires login to access',
+      duration: 5000
+    }, { root: true })
   }
 }
diff --git a/app/src/store/modules/auth/getters.js b/app/src/store/modules/auth/getters.js
index 4ac7902a..ad7808a2 100644
--- a/app/src/store/modules/auth/getters.js
+++ b/app/src/store/modules/auth/getters.js
@@ -5,6 +5,9 @@ export default {
   token (state) {
     return state.token
   },
+  displayName (state) {
+    return state.displayName
+  },
   isAuthenticated (state) {
     return !!state.token
   },
diff --git a/app/src/store/modules/auth/index.js b/app/src/store/modules/auth/index.js
index fb87c5b0..3ee4c2cd 100644
--- a/app/src/store/modules/auth/index.js
+++ b/app/src/store/modules/auth/index.js
@@ -3,10 +3,12 @@ import actions from './actions.js'
 import getters from './getters.js'
 
 export default {
+  namespaced: true,
   state () {
     return {
       userId: null,
       token: null,
+      displayName: null,
       didAutoLogout: false,
       user: {}
     }
diff --git a/app/src/store/modules/auth/mutations.js b/app/src/store/modules/auth/mutations.js
index bf8a3535..62128d6d 100644
--- a/app/src/store/modules/auth/mutations.js
+++ b/app/src/store/modules/auth/mutations.js
@@ -2,6 +2,7 @@ export default {
   setUser (state, payload) {
     state.token = payload.token
     state.userId = payload.userId
+    state.displayName = payload.displayName
     state.didAutoLogout = false
   },
   setAutoLogout (state) {
diff --git a/app/src/store/modules/misc/index.js b/app/src/store/modules/misc/index.js
index 94e2f2d4..02ce80c6 100644
--- a/app/src/store/modules/misc/index.js
+++ b/app/src/store/modules/misc/index.js
@@ -15,7 +15,8 @@ export default {
       dialogBox: false,
       snackbar: {
         message: '',
-        action: null
+        action: null,
+        duration: false,
       }
     }
   },
diff --git a/app/src/store/modules/misc/mutations.js b/app/src/store/modules/misc/mutations.js
index b10de594..58ec630b 100644
--- a/app/src/store/modules/misc/mutations.js
+++ b/app/src/store/modules/misc/mutations.js
@@ -5,10 +5,11 @@ export default {
   setDialogBox (state) {
     state.dialogBox = !state.dialogBox
   },
-  setSnackbar (state, { message, action = null }) {
+  setSnackbar (state, { message, action = null, duration = false }) {
     state.snackbar = {
       message,
-      action
+      action,
+      duration
     }
   }
 }