adding authentication and state management

.env

@@ -4,3 +4,4 @@ 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

package-lock.json

@@ -15,6 +15,7 @@
         "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",
@@ -2269,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",
@@ -4559,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",

package.json

@@ -18,6 +18,7 @@
     "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",

src/App.vue

@@ -1,18 +1,62 @@
 <script>
 // import { RouterLink, RouterView } from "vue-router";
+// import { useAuth0 } from '@auth0/auth0-vue';
 
+import { useSessionStore } from './stores/session-store';
+import { authenticate, isAlive, logout } from './data/http/auth';
+import { mapState } from 'pinia';
 export default {
+  setup() {
+    const store = useSessionStore();
+
+    const { setUser, logoutUser, hasRoles } = store;
+
+    return {
+      logoutUser,
+      setUser,
+      hasRoles
+    }
+  },
+  async mounted() {
+    const user = await isAlive();
+    if (user) {
+      this.setUser(user);
+    }
+  },  
   data() {
     return {
+      username: '',
+      password: '',
       loading: true,
       list: [],
       whitelist: [],
       isNavMobileOpen: false,
     }
   },
+  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();
     }
   }
 }
@@ -37,40 +81,45 @@ export default {
       <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">
     <div> <RouterView /> </div>
-    <!-- <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> -->
   </div>
    
 </template>
@@ -83,60 +132,7 @@ export default {
 .tag {
   font-size: 60% !important;
 }
-/* header {
+.input-login {
-  line-height: 1.5;
+  width: 100px;
-  max-height: 100vh;
 }
-
-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>

src/components/InSessionNow.vue

@@ -22,6 +22,7 @@
   export default {
     data() { 
       return {
+        interval: undefined,
         isLoading: true,
         list: [],
         board: undefined,
@@ -45,8 +46,15 @@
     },
     async mounted() {
       await this.loadData();
+      this.startLoop();
+    },
+    unmounted() {
+      clearInterval(this.interval);
     },
     methods: {
+      startLoop() {
+        this.interval = setInterval(this.loadData, 1000 * 30)
+      },  
       async loadData() {
         this.isLoading = true;
         let data = await getFlightplansNow();
@@ -58,8 +66,7 @@
           return acc;
         }, []);
         
-        // this.list = rows;
+        this.list = rows;
-        this.list = this.test;
       }
     },
     components: {

src/components/SolariBoard.vue

@@ -22,7 +22,8 @@
 <script>
 import SolariBoardRow from './SolariBoardRow.vue';
 import _isNil from 'lodash/isNil';
-import _fill from 'lodash/fill';
+import _times from 'lodash/times';
+import _constant from 'lodash/constant';
 
 export default {
   props: {
@@ -62,9 +63,9 @@ export default {
   },
   mounted() {
    
-    if (Array.isArray(this.data)) {
+    // if (Array.isArray(this.data)) {
-      this.setData(this.data);
+    //   this.setData(this.data);
-    }
+    // }
     
   },
   computed: {
@@ -87,18 +88,21 @@ export default {
       return this.cols * this.rows;
     }
   },
+  watch: {
+    data: {
+      handler(newData) {
+        this.setData(newData);
+      },
+      immediate: true,
+    }
+  },
   methods: {
     setData(data) {
       const plainData = (data || []).reduce((acc, row) => {
-        console.log('row :>> ', row);
         acc = acc.concat(row);
         return acc;
       }, []);
-      console.log('plainData :>> ', plainData);
+      this.values = _times(this.total, _constant(' ')).map((d, i) => plainData[i] || d);
-      console.log('this.total :>> ', this.total);
-      this.values =  _fill(Array(this.total), ' ').map((d, i) => plainData[i] || d);
-      console.log('this.values :>> ', this.values);
-
     },
     mapRow(r, i) {
       r.loops = (_isNil(r.loops)) ? this.loops : r.loops;

src/components/SolariBoardRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="board-line">
-    <div class="board-letter" :ref="'letter' + $index" :class="{'animating': isAnimating[$index]}" v-for="(char, $index) in charsBack" :key="$index">{{ char }}</div>
+    <div class="board-letter" :ref="'letter' + $index" :class="{'animating': isAnimating[$index]}" v-for="(char, $index) in charsToShow" :key="$index">{{ char }}</div>
   </div>  
 </template>
 
@@ -56,6 +56,7 @@
 <script>
   import _isInteger from 'lodash/isInteger';
   import _delay from 'lodash/delay';
+  import _clone from 'lodash/clone';
 
   export default {
     props: {
@@ -80,17 +81,19 @@
       }
     },
     data() {
+      const newArray = Array.apply(null, Array(this.size)).map(() => ' ');
+      const newArrayAnimating = Array.apply(null, Array(this.size)).map(() => false);
       return {
         charsAll: ' ABCDEFGHIJKLMNÑOPQRSTUVWXYZ0123456789-:.>*',
-        charsBack: [],
+        charsReference: _clone(newArray),
-        isAnimating: [],
+        charsToShow: _clone(newArray),
+        isAnimating: newArrayAnimating,
       }
     },
     computed: {
       chars() {
         const text =  this.getText(this.textToShow);
-        const size = _isInteger(this.size) ? this.size : text.length;
+        const chars = Array.apply(null, Array(this.size)).map(() => ' ');
-        const chars = Array.apply(null, Array(size)).map(() => ' ');
         const offset = (this.align === 'left') ? 0 : chars.length - text.length;
         
         for (let index = 0; index < text.length; index++) {
@@ -101,8 +104,7 @@
     },
     watch: {
       chars: {
-        handler(newValue) {
+        handler() {
-          this.charsBack = Array.apply(null, Array(newValue.length)).map(() => ' ');
           if (_isInteger(this.delay) && this.delay > 0) {
             _delay(this.startAnimation, this.delay);
           } else {
@@ -123,24 +125,26 @@
         return (text.length > this.size) ? text.substring(0, this.size) : text;
       },
       async startAnimation() {
-        this.charsBack = this.charsBack.map(() => ' ');
+        const cts = _clone(this.charsReference);
-        this.isAnimating = [];
         for (let index = 0; index < this.chars.length; index++) {
           const char = this.chars[index];
+          if (char !== cts[index]) {
             this.animateLetter(index, char);
             await new Promise((resolve) => setTimeout(resolve, 100))
           }
+        }
+        this.charsReference = this.chars;
       },
       animateLetter(index, letter) {
         let showIndex = 0;
-        this.charsBack[index] = this.charsAll[showIndex];
+        this.charsToShow[index] = this.charsAll[showIndex];
         this.isAnimating[index] = true;
         let loop = 0;
         const letterIndex = this.getLetterIndex(letter);
 
         const interval = setInterval(() => {
           showIndex = this.getNextIndex(showIndex);
-          this.charsBack[index] = this.charsAll.charAt(showIndex);
+          this.charsToShow[index] = this.charsAll.charAt(showIndex);
           if (showIndex === 0) {
             loop++;
           }

src/data/http/auth.js

@@ -0,0 +1,22 @@
+import {get, post } from './requests.js';
+
+export async function isAlive() {
+  const { VITE_API_BASE } =
+  import.meta.env;
+  const response = await get(`${VITE_API_BASE}/admin/user/alive`);
+  return response;
+}
+
+export async function authenticate(username, password) {
+  const { VITE_API_BASE, VITE_API_PATH_AUTHENTICATION } =
+  import.meta.env;
+  const response = await post(`${VITE_API_BASE}${VITE_API_PATH_AUTHENTICATION}`, { username, password });
+  return response;
+}
+
+export async function logout() {
+  const { VITE_API_BASE } =
+  import.meta.env;
+  const response = await get(`${VITE_API_BASE}/admin/user/logout`);
+  return response;
+}

src/data/http/listRequest.js

@@ -1,26 +1,26 @@
-import { request } from './requests.js';
+import {get } from './requests.js';
 
 export async function getMonthlyList() {
   const { VITE_API_BASE, VITE_API_PATH_LIST } =
   import.meta.env;
-  const response = await request(`${VITE_API_BASE}${VITE_API_PATH_LIST}`);
+  const response = await get(`${VITE_API_BASE}${VITE_API_PATH_LIST}`);
   return response;
 }
 export async function getWhitelist() {
   const { VITE_API_BASE, VITE_API_PATH_WHITELIST } =
   import.meta.env;
-  const response = await request(`${VITE_API_BASE}${VITE_API_PATH_WHITELIST}`);
+  const response = await get(`${VITE_API_BASE}${VITE_API_PATH_WHITELIST}`);
   return response;
 }
 export async function getInSessionNow() {
   const { VITE_API_BASE, VITE_API_PATH_NOW_SESSIONS } =
   import.meta.env;
-  const response = await request(`${VITE_API_BASE}${VITE_API_PATH_NOW_SESSIONS}`);
+  const response = await get(`${VITE_API_BASE}${VITE_API_PATH_NOW_SESSIONS}`);
   return response;
 }
 export async function getFlightplansNow() {
   const { VITE_API_BASE, VITE_API_PATH_NOW_FLIGHTPLANS } =
   import.meta.env;
-  const response = await request(`${VITE_API_BASE}${VITE_API_PATH_NOW_FLIGHTPLANS}`);
+  const response = await get(`${VITE_API_BASE}${VITE_API_PATH_NOW_FLIGHTPLANS}`);
   return response;
 }

src/data/http/requests.js

@@ -1,6 +1,15 @@
 import axios from 'axios';
 
-export const request = async(url, options) => {
+export const get = async(url) => {
-  const response = await axios.get(url, options);
+  const response = await axios.get(url, { withCredentials: true });
   return response.data;
 };
+
+export const post = async(url, data) => {
+  try {
+    const response = await axios.post(url, data, { withCredentials: true });
+    return response.data;
+  } catch (err) {
+    console.log('err :>> ', err.response);
+  }
+}

src/helpers/time-helpers.js

@@ -4,7 +4,7 @@ function format(num) {
 
 export function hoursFromSeconds(seconds) {
   const h = format(Math.floor(seconds / 3600));
-  const m = format(Math.round(seconds % 3600 * 60));
+  const m = format(Math.round(seconds % 3600 / 60));
   return {
     h,
     m

src/main.js

@@ -1,13 +1,17 @@
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 import VueMobileDetection from 'vue-mobile-detection';
 
 import './assets/css/main.css';
 
+const pinia = createPinia();
 const app = createApp(App);
 
+app.use(pinia);
 app.use(router);
 app.use(VueMobileDetection);
 
+
 app.mount('#app');

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import TableAcars from '../components/TableAcars.vue';
 import IvaoView from '../views/IvaoView.vue';
+import CabalView from '../views/CabalView.vue';
 
 const router = createRouter({
   history: createWebHistory(
@@ -15,6 +16,11 @@ const router = createRouter({
       name: 'acars',
       component: TableAcars,
     },
+    {
+      path: '/cabal',
+      name: 'cabal',
+      component: CabalView,
+    },
     // {
     //   path: '/about',
     //   name: 'about',

src/stores/session-store.js

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+
+export const useSessionStore = defineStore('user', {
+  state: () => ({ _user: {}, _isAuthenticated: false }),
+  getters: {
+    user: (state) => state._user,
+    isAuthenticated: (state) => state._isAuthenticated,
+  },
+  actions: {
+    setUser(user) {
+      this._isAuthenticated = !!user;
+      this._user = user;
+    },
+    logoutUser() {
+      this._isAuthenticated = false;
+      this._user = '';
+    },
+    hasRoles(roles = []) {
+      let hasRole = false;
+      roles.forEach(role => {
+        hasRole = hasRole || (this._user.roles || []).indexOf(role) !== -1;
+      })
+      return hasRole;
+    }
+  }
+});

src/views/CabalView.vue

@@ -0,0 +1,8 @@
+<script setup>
+</script>
+
+<template>
+  <main class="section">
+    <h1 class="title is-2"> Capitán Cabal Hub</h1>
+  </main>
+</template>

src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup>
-import TheWelcome from "../components/TheWelcome.vue";
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>

src/views/IvaoView.vue

@@ -4,7 +4,7 @@
 </script>
 
 <template>
-  <main>
+  <main class="section">
     <InSessionNow v-if="!$isMobile()" />
     <TableIvao />
   </main>