Add backend integration

VATUSA · May 27, 2024 · eb2a4fa · eb2a4fa
1 parent cb8c417
commit eb2a4fa
Show file tree

Hide file tree

Showing 14 changed files with 1,063 additions and 848 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 .env
+/certs/*
diff --git a/package.json b/package.json
@@ -12,31 +12,33 @@
     "lint:fix": "eslint src --ext .ts,.js,.vue --fix"
   },
   "dependencies": {
-    "axios": "^1.6.7",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "axios": "^1.7.2",
     "pinia": "^2.1.6",
-    "vue": "^3.3.4",
-    "vue-router": "4"
+    "vue": "^3.4.27",
+    "vue-router": "4.3.2"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "latest",
     "eslint-import-resolver-typescript": "latest",
     "eslint-plugin-import": "latest",
     "eslint-plugin-prettier": "latest",
-    "eslint-plugin-vue": "latest",
-    "postcss": "^8.4.30",
+    "eslint-plugin-vue": "9.26.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-mkcert": "^1.17.5",
     "vite-plugin-vue-type-imports": "^0.2.5",
-    "vue-tsc": "latest"
+    "vue-tsc": "2.0.19"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -9,8 +9,20 @@
 </template>
 
 <script setup lang="ts">
+import apiUrl from "@/utils/api";
 import Header from "@/views/partials/Header.vue";
 import Sidebar from "@/views/partials/Sidebar.vue";
+import useUserStore from "@/stores/user";
+import { onMounted } from "vue";
+
+const userStore = useUserStore();
+
+onMounted(async () => {
+  await userStore.fetchUser();
+  if (!userStore.isLoggedIn) {
+    window.location.href = `${apiUrl}/v3/user/login?redirect=${window.location.href}`;
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/src/components/profile/Profile.vue b/src/components/profile/Profile.vue
@@ -3,11 +3,11 @@
     <h3 class="font-bold">Personal Details</h3>
   </div>
   <div class="m-5">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-5 gap-y-10">
+    <div v-if="!!editableUser" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-5 gap-y-10">
       <div class="col-span-1 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">First name</p>
         <input
-          v-model="user.first_name"
+          v-model="editableUser.first_name"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="John"
           disabled
@@ -16,7 +16,7 @@
       <div class="col-span-1 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">Last name</p>
         <input
-          v-model="user.last_name"
+          v-model="editableUser.last_name"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="Doe"
           disabled
@@ -25,7 +25,7 @@
       <div class="col-span-1 md:col-span-2 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">Email</p>
         <input
-          v-model="user.email"
+          v-model="editableUser.email"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="[email protected]"
           disabled
@@ -34,23 +34,23 @@
       <div class="col-span-1 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">Preferred Name</p>
         <input
-          v-model="user.preferred_name"
+          v-model="editableUser.preferred_name"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="Johnny"
         />
       </div>
       <div class="col-span-1 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">Preferred OIs</p>
         <input
-          v-model="user.preferred_ois"
+          v-model="editableUser.preferred_ois"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="JD"
         />
       </div>
       <div class="col-span-1 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">Pilot Rating</p>
         <input
-          v-model="user.pilot_rating"
+          v-model="editableUser.pilot_rating_string"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="1"
           disabled
@@ -59,7 +59,7 @@
       <div class="col-span-1 flex flex-col">
         <p class="font-bold text-gray-600 text-sm">Controller Rating</p>
         <input
-          v-model="user.controller_rating"
+          v-model="editableUser.controller_rating_string"
           class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
           placeholder="S1"
           disabled
@@ -70,15 +70,15 @@
   <div class="mt-20 border-b">
     <h3 class="font-bold">Facility Details</h3>
   </div>
-  <div class="m-5">
+  <div v-if="!!rosters" class="m-5">
     <div class="grid grid-cols-4 gap-x-5 border-b font-semibold">
       <div class="col-span-1 flex">Facility</div>
       <div class="col-span-1 flex">Type</div>
       <div class="col-span-1 flex">Join Date</div>
       <div class="col-span-1 flex">Exit Date</div>
     </div>
     <div
-      v-for="(roster, idx) in user.rosters"
+      v-for="(roster, idx) in rosters"
       :key="idx"
       class="grid grid-cols-4 gap-x-5 gap-y-10"
       :class="idx % 2 == 0 ? 'bg-usa-white' : 'bg-white'"
@@ -102,53 +102,14 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { User } from "@/types";
+import { User, Roster } from "@/types";
+
+const props = defineProps<{
+  user: User | null;
+  rosters: Roster[] | null;
+}>();
 
-const user = ref<User>({
-  cid: 1,
-  first_name: "John",
-  last_name: "Doe",
-  preferred_name: "Johnny",
-  email: "[email protected]",
-  preferred_ois: "JD",
-  pilot_rating: 1,
-  controller_rating: 1,
-  discord_id: "1234567890",
-  rosters: [
-    {
-      id: 1,
-      cid: 1,
-      facility: "ZAB",
-      operating_initials: "ZZ",
-      home: true,
-      visiting: false,
-      status: "active",
-      created_at: "2021-08-01T00:00:00.000Z",
-      deleted_at: "2021-08-01T00:00:00.000Z",
-    },
-    {
-      id: 2,
-      cid: 1,
-      facility: "ZDV",
-      operating_initials: "ZZ",
-      home: false,
-      visiting: true,
-      status: "active",
-      created_at: "2021-08-01T00:00:00.000Z",
-      deleted_at: "2021-08-01T00:00:00.000Z",
-    },
-    {
-      id: 3,
-      cid: 1,
-      facility: "ZLC",
-      operating_initials: "ZZ",
-      home: true,
-      visiting: false,
-      status: "active",
-      created_at: "2021-08-01T00:00:00.000Z",
-    },
-  ],
-} as User);
+const editableUser = ref<User | null>(props.user);
 </script>
 
 <style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,6 +1,5 @@
-import { createRouter, createWebHistory, Router } from "vue-router";
-//
-// import useUserStore from "@/stores/user";
+import { createRouter, createWebHistory, NavigationGuard, Router } from "vue-router";
+import useUserStore from "@/stores/user";
 
 declare module "vue-router" {
   interface RouteMeta {
@@ -60,40 +59,30 @@ const buildRouter = (): Router => {
 
 const router = buildRouter();
 
-// const check: NavigationGuard = (to, from, next): void => {
-//   const userStore = useUserStore();
-//   const { requiresAuth } = to.meta;
-//
-//   if (requiresAuth && !userStore.user) {
-//     next({ name: "Login" });
-//     return;
-//   }
-//
-//   if (requiresAuth && userStore.user) {
-//     const { requiresRole } = to.meta;
-//     if (requiresRole) {
-//       if (!requiresRole.includes(userStore.user.role)) {
-//         next({ name: "Forbidden" });
-//         return;
-//       }
-//     }
-//   }
-//
-//   next();
-// };
+const check: NavigationGuard = (to, from, next): void => {
+  const userStore = useUserStore();
 
-// router.beforeEach((to, from, next) => {
-//   const userStore = useUserStore();
-//   if (!userStore.hasFetched) {
-//     if (userStore.loading === null || userStore.loading === undefined) {
-//       userStore.loading = userStore.fetchUser();
-//     }
-//     userStore.loading.then(() => {
-//       check(to, from, next);
-//     });
-//   } else {
-//     check(to, from, next);
-//   }
-// });
+  if (!userStore.user) {
+    // TODO - Redirect to SSO with a return URL
+    next({ name: "Login" });
+    return;
+  }
+
+  next();
+};
+
+router.beforeEach((to, from, next) => {
+  const userStore = useUserStore();
+  if (!userStore.hasFetched) {
+    if (userStore.loading === null || userStore.loading === undefined) {
+      userStore.loading = userStore.fetchUser();
+    }
+    userStore.loading.then(() => {
+      check(to, from, next);
+    });
+  } else {
+    check(to, from, next);
+  }
+});
 
 export default router;
diff --git a/src/stores/user.ts b/src/stores/user.ts
@@ -1,4 +1,7 @@
 import { defineStore } from "pinia";
+import { API } from "@/utils/api";
+import { User } from "@/types";
+import { getControllerRating, getPilotRating } from "@/utils/rating";
 
 interface UserState {
   user: User | null;
@@ -8,14 +11,6 @@ interface UserState {
   loading: Promise<void> | null;
 }
 
-interface User {
-  id: number;
-  firstName: string;
-  lastName: string;
-  email: string;
-  role: string;
-}
-
 const useUserStore = defineStore("user", {
   state: () =>
     ({
@@ -26,6 +21,30 @@ const useUserStore = defineStore("user", {
     }) as UserState,
   getters: {
     isLoggedIn: (state) => !!state.user,
+    fullName: (state) => {
+      if (!state.user) return "";
+      return `${state.user.first_name} ${state.user.last_name}`;
+    },
+  },
+  actions: {
+    async fetchUser() {
+      this.fetching = true;
+      try {
+        const { data } = await API.get("/v3/user");
+        this.user = data;
+        if (this.user?.controller_rating) {
+          this.user.controller_rating_string = getControllerRating(this.user?.controller_rating);
+        }
+        if (this.user?.pilot_rating) {
+          this.user.pilot_rating_string = getPilotRating(this.user?.pilot_rating);
+        }
+      } catch (e) {
+        this.user = null;
+      } finally {
+        this.fetching = false;
+        this.hasFetched = true;
+      }
+    },
   },
 });
 

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -30,10 +30,13 @@ export interface User {
   first_name: string;
   last_name: string;
   preferred_name: string;
+  pref_name_enabled: boolean;
   email: string;
   preferred_ois: string;
   pilot_rating: number;
+  pilot_rating_string: string;
   controller_rating: number;
+  controller_rating_string: string;
   discord_id: string;
   rosters?: Roster[];
 }