feat(ui): add a mock to mock authentication ...

... also updates UI/JS dependencies

ui/mock-server.js

@@ -13,14 +13,14 @@ let darkMode = false
 
 function progressSimulation (res) {
   if (showError) {
-    var resp = JSON.stringify({ Error: 'Simulated error.' }) + '\n'
+    const resp = JSON.stringify({ Error: 'Simulated error.' }) + '\n'
     res.write(resp)
     res.status(200).end()
     return
   }
-  var progress = 0.0
-  var timer = setInterval(() => {
-    var resp = JSON.stringify({ Status: ['Processing...', progress] }) + '\n'
+  let progress = 0.0
+  const timer = setInterval(() => {
+    const resp = JSON.stringify({ Status: ['Processing...', progress] }) + '\n'
     progress += 0.1
     res.write(resp)
     if (progress >= 1) {
@@ -121,6 +121,19 @@ app.post('/api/verify-path', (req, res) => {
   })
 })
 
+app.post('/api/check-auth', (req, res) => {
+  console.log('-- Check Authorization')
+  res.send({
+    username: 'test1',
+    token: 'token',
+    jwt_token: {
+      isPatreonAccountLinked: true,
+      isPatreonSubscriptionActive: true,
+      releaseChannels: ['early-access']
+    }
+  })
+})
+
 process.argv.forEach((val, index) => {
   switch (val) {
     case 'maintenance':

ui/package.json

@@ -9,28 +9,29 @@
     "postinstall": "node merge-strings.js"
   },
   "dependencies": {
-    "@mdi/font": "^5.9.55",
-    "axios": "^0.21.1",
-    "buefy": "^0.9.7",
+    "@mdi/font": "^6.2.95",
+    "axios": "^0.23.0",
+    "buefy": "^0.9.10",
+    "canvas-confetti": "^1.4.0",
     "vue": "^2.6.14",
-    "vue-axios": "^3.2.4",
-    "vue-i18n": "^8.24.4",
-    "vue-router": "^3.5.1"
+    "vue-axios": "^3.3.7",
+    "vue-i18n": "^8.26.5",
+    "vue-router": "^3.5.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/eslint-config-standard": "^6.0.0",
+    "@vue/cli-plugin-babel": "^4.5.14",
+    "@vue/cli-plugin-eslint": "^4.5.14",
+    "@vue/cli-service": "^4.5.14",
+    "@vue/eslint-config-standard": "^6.1.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.28.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^7.10.0",
+    "eslint-plugin-vue": "^7.19.1",
     "express": "^4.17.1",
-    "http-proxy-middleware": "^2.0.0",
+    "http-proxy-middleware": "^2.0.1",
     "vue-template-compiler": "^2.6.14"
   }
 }

ui/src/views/AuthenticationView.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-
+const confetti = require('canvas-confetti')
 export default {
   name: 'AuthenticationView',
   created: function () {
@@ -149,8 +149,14 @@ export default {
       this.$root.check_authentication(this.success, this.error)
     },
     success: function () {
-      // if they are eligible, go back to the select package page
       if (this.$root.has_reward_tier) {
+        // show a success animation
+        confetti.default({
+          particleCount: 200,
+          spread: 90,
+          origin: { x: 0.6 }
+        })
+        // if they are eligible, go back to the select package page
         this.$router.go(-1)
         return
       }