adding authentication and state management

.env

@@ -1,4 +1,7 @@
-# VITE_API_BASE=http://192.168.1.112:3101/api/v1
+# VITE_API_BASE=https://test.gairacalabs.site/api/v1
 VITE_API_BASE=http://localhost:3000/api/v1
-VITE_API_PATH_LIST=/ivao/list/today
-VITE_API_PATH_WHITELIST=/ivao/whitelist
+VITE_API_PATH_LIST=/list/today
+VITE_API_PATH_WHITELIST=/whitelist
+VITE_API_PATH_NOW_SESSIONS=/ivao/sessions/now
+VITE_API_PATH_NOW_FLIGHTPLANS=/ivao/flightplans/latest
+VITE_API_PATH_AUTHENTICATION=/admin/user/authenticate

.gitignore

@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 .history
+.env

package-lock.json

@@ -13,9 +13,13 @@
         "@popperjs/core": "^2.11.6",
         "axios": "^1.2.2",
         "bootstrap": "^5.2.3",
+        "lodash": "^4.17.21",
         "moment": "^2.29.4",
+        "pinia": "^2.0.29",
         "redis": "^4.5.1",
         "vue": "^3.2.45",
+        "vue-loading-overlay": "^6.0.2",
+        "vue-mobile-detection": "^2.0.1",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -469,6 +473,76 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -572,6 +646,14 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -883,6 +965,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/bulma": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
@@ -1003,6 +1093,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1892,8 +1990,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -2173,6 +2270,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.29.tgz",
+      "integrity": "sha512-5z/KpFecq/cIgfeTnulJXldiLcTITRkTe3N58RKYSj0Pc1EdR6oyCdnf5A9jLoVwBqX5LtHhd0kGlpzWvk9oiQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -2551,6 +2698,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -2605,6 +2764,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/terser": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -2765,6 +2944,25 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-loading-overlay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.2.tgz",
+      "integrity": "sha512-5GCvv6hPjNfHg+tKnLkk6yO/b/AdCCkdZb2dfrVFOuDyJz38dbm34k6oohVy/xIoFzPGsEEVtwCxq5G3RIYZ1Q==",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-mobile-detection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-mobile-detection/-/vue-mobile-detection-2.0.1.tgz",
+      "integrity": "sha512-ziB0Rp8Snp08+p7E+WCRzeYYYp0ddPaqHlFxWN0kpLAddB5D/PRwgIv18P08hkhwNFRgBQ71T19jNIbttR7P0g==",
+      "dependencies": {
+        "vue": "^3.2.20"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
@@ -3060,6 +3258,67 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3137,6 +3396,14 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -3390,6 +3657,14 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "bulma": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
@@ -3477,6 +3752,14 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4125,8 +4408,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -4328,6 +4610,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.29.tgz",
+      "integrity": "sha512-5z/KpFecq/cIgfeTnulJXldiLcTITRkTe3N58RKYSj0Pc1EdR6oyCdnf5A9jLoVwBqX5LtHhd0kGlpzWvk9oiQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -4575,6 +4874,18 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -4610,6 +4921,20 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "terser": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4710,6 +5035,20 @@
         "semver": "^7.3.6"
       }
     },
+    "vue-loading-overlay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.2.tgz",
+      "integrity": "sha512-5GCvv6hPjNfHg+tKnLkk6yO/b/AdCCkdZb2dfrVFOuDyJz38dbm34k6oohVy/xIoFzPGsEEVtwCxq5G3RIYZ1Q==",
+      "requires": {}
+    },
+    "vue-mobile-detection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-mobile-detection/-/vue-mobile-detection-2.0.1.tgz",
+      "integrity": "sha512-ziB0Rp8Snp08+p7E+WCRzeYYYp0ddPaqHlFxWN0kpLAddB5D/PRwgIv18P08hkhwNFRgBQ71T19jNIbttR7P0g==",
+      "requires": {
+        "vue": "^3.2.20"
+      }
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",

package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "serve": "npm run build && http-server ./dist -c-1"
+    "serve": "npm run build && http-server ./dist -c-1",
+    "docker-build": "docker build -t arhuako/ltsweb ."
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.7",
@@ -15,9 +16,13 @@
     "@popperjs/core": "^2.11.6",
     "axios": "^1.2.2",
     "bootstrap": "^5.2.3",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "pinia": "^2.0.29",
     "redis": "^4.5.1",
     "vue": "^3.2.45",
+    "vue-loading-overlay": "^6.0.2",
+    "vue-mobile-detection": "^2.0.1",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

src/App.vue

@@ -1,139 +1,127 @@
 <script>
 // import { RouterLink, RouterView } from "vue-router";
+// import { useAuth0 } from '@auth0/auth0-vue';
 
-import moment from 'moment';
-import FormatTime from './components/FormatTime.vue';
-
-import { getMonthlyList, getWhitelist } from './data/http/listRequest';
-
+import { useSessionStore } from './stores/session-store';
+import { authenticate, isAlive, logout } from './data/http/auth';
+import { mapState } from 'pinia';
 export default {
-  data() {
+  setup() {
+    const store = useSessionStore();
+
+    const { setUser, logoutUser, hasRoles } = store;
+
     return {
-      loading: true,
-      list: [],
-      whitelist: []
+      logoutUser,
+      setUser,
+      hasRoles
     }
   },
   async mounted() {
-    await this.loadData();
-  },
-  methods: {
-    async loadData() {
-      let data = await getMonthlyList();
-      this.list = data.sort((a, b) => b.time - a.time).map(d => {
-        const val = d.time / 60;
-        const hours = Number.isNaN(val) ? 0 : Math.floor(val / 60);
-        const minutes = String(Number.isNaN(val) ? 0 :Math.round((val % 60)) + 100).substring(1);
-        d._formattedTime = `${hours}:${minutes}`;
-        return d;
-      });
-      this.whitelist = await getWhitelist();
-      console.log(this.list);
-    }, 
-    dateTime(value) {
-      return moment(value).fromNow(); //.format('YYYY-MM-DD HH:mm');
-    },
-    flagIcon(code) {
-      return new URL(`/public/flags/${code}.png`, import.meta.url).href
+    const user = await isAlive();
+    if (user) {
+      this.setUser(user);
+    }
+  },  
+  data() {
+    return {
+      username: '',
+      password: '',
+      loading: true,
+      list: [],
+      whitelist: [],
+      isNavMobileOpen: false,
     }
   },
-  components: {
-    FormatTime,
+  computed:{
+    ...mapState(useSessionStore, ['user', 'isAuthenticated']),
+  },
+  methods: {
+    toggleNavMobile() {
+      this.isNavMobileOpen = !this.isNavMobileOpen;
+    },
+    async login() {
+      if (!this.username.trim() || !this.password.trim()) {
+        return;
+      }
+      const user = await authenticate(this.username, this.password);
+      this.setUser(user);
+      console.log('user :>> ', user);
+      this.username = '';
+      this.password = '';
+    },
+    async logout() {
+      await logout();
+      this.logoutUser();
+      this.$router.push('/');
+    },
+    async check() {
+      await isAlive();
+    }
   }
 }
 
-
-
 </script>
 
 <template>
-  <header class="container is-fluid level block mt-2">
-    <div class="level-left">
-      <img src="@/assets/images/logo_28.png" alt="Latin Streaming Alliance" class="logo">
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="https://bulma.io">
+        <img src="@/assets/images/logo_28.png" alt="Latin Streaming Alliance" class="logo">
+      </a>
+
+      <a role="button" class="navbar-burger" :class="{'is-active': isNavMobileOpen}" aria-label="menu" aria-expanded="false" @click="toggleNavMobile()">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
     </div>
-  </header>
+
+    <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active': isNavMobileOpen}">
+      <div class="navbar-start">
+        <router-link class="navbar-item" to="/">ICAO</router-link>
+        <router-link class="navbar-item" to="/acars">Acars</router-link>
+
+        <router-link v-if="hasRoles(['cabal'])" class="navbar-item" to="/cabal">Capt Cabal</router-link>
+        <router-link v-if="hasRoles(['admin'])" class="navbar-item" to="/admin">Admin</router-link>
+      </div>
+    </div>
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-horizontal">
+          <div v-if="!isAuthenticated" class="field-body">
+            <div class="field">
+              <p class="control is-expanded">
+                <input class="input is-small input-login" @keyup.enter="login" v-model="username" type="text" placeholder="Username">
+              </p>
+            </div>
+            <div class="field is-grouped">
+              <p class="control is-expanded">
+                <input class="input is-small input-login" @keyup.enter="login" v-model="password" type="password" placeholder="Password">
+              </p>
+              <p class="control">
+                <a class="button is-small is-light" @click="login">
+                  Login
+                </a>
+              </p>
+            </div>
+          </div>
+          <div v-if="isAuthenticated" class="field-body">
+            <div class="is-6 mr-2 mt-1">{{ user.firstname }} {{ user.lastname }}</div>
+            <p class="control">
+              <a class="button is-small is-light" @click="logout">
+                Logout
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
   <div class="container">
-    <section class="section">
-      <h1 class="title">Pilotos activos con mas de 200 horas en ACARS</h1>      
-        <table class="table is-striped is-hoverable is-fullwidth">
-          <thead>
-            <tr>
-              <th class="has-text-centered">VID</th>
-              <th class="">Nombre</th>
-              <th class="has-text-centered">Total Vuelos</th>
-              <th class="has-text-centered">Horas totales</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in whitelist" :key="item.vid">
-              <td class="has-text-centered">
-                {{ item.vid  }}
-              </td>
-              <td>
-                {{ item.name  }}
-              </td>
-              <td class="has-text-centered">
-                {{ item.flights  }}
-              </td>
-              <td class="has-text-centered">
-                <FormatTime :value="item.flightTime" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    <section class="section">
-      <h1 class="title">Status mensual IVAO</h1>      
-        <table class="table is-striped is-hoverable is-fullwidth">
-          <thead>
-            <tr>
-              <th class="has-text-centered">VID</th>
-              <th class="">Nombre</th>
-              <th class="has-text-centered">División</th>
-              <th class="has-text-centered">Horas totales</th>
-              <th class="has-text-centered">Último vuelo</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in list" :key="item.vid">
-              <td class="has-text-centered">
-                {{ item.vid  }}
-              </td>
-              <td>
-                {{ item.name  }}
-              </td>
-              <td class="has-text-centered">
-                {{ item.division  }} <img v-if="item.division" :src="flagIcon(item.division.toLowerCase())" :alt="item.division" :title="item.division">
-              </td>
-              <td class="has-text-centered">
-                <FormatTime :value="item.time / 60" />
-              </td>
-              <td class="">
-                <div class="is-size-6">
-                  {{ item.lastFlight.departureId }} - {{ item.lastFlight.arrivalId }} <span class="is-size-7 ml-1 has-text-grey-light">{{ dateTime(item.lastFlightDate) }}</span>
-                </div>
-                  <div class="field is-grouped is-grouped-multiline">
-                    <div class="control">
-                      <div class="tags has-addons">
-                        <span class="tag is-dark">Callsign</span>
-                        <span class="tag">{{ item.lastCallsign }}</span>
-                      </div>
-                    </div>
-                    <div class="control">
-                      <div class="tags has-addons">
-                        <span class="tag is-dark">Aircraft</span>
-                        <span class="tag">{{ item.lastFlight.aircraftId }}</span>
-                      </div>
-                    </div>
-                  
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-    </section>
-    </div>
-    <!-- <RouterView /> -->
+    <div> <RouterView /> </div>
+  </div>
+   
 </template>
 
 <style>
@@ -144,60 +132,7 @@ export default {
 .tag {
   font-size: 60% !important;
 }
-/* header {
-  line-height: 1.5;
-  max-height: 100vh;
+.input-login {
+  width: 100px;
 }
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-} */
 </style>