Cleaned code

Author: Theosakamg

Diff for: .env

@@ -1 +1,7 @@
-VITE_PROXY_USE=true
+# Set at build time...
+VITE_PROXY_USE=true
+VITE_ADMIN_MODE=false       # Can be override on localstorage.
+VITE_RTAPI_DISABLE=false    # Can be override on localstorage.
+VITE_CRYPTO_SECRET_KEY="secret_key_here"
+VITE_CRYPTO_IV_KEY="iv_key_here"
+VITE_CRYPTO_SALT_KEY="salt_key_here"

Diff for: .github/workflows/main.yaml

@@ -18,5 +18,15 @@ jobs:
       - name: 📥 Install dependencies
         run: npm install
 
+      - name: 🏗️ Lint
+        run: |
+          npm run lint
+          npm run type-check
+
+      - name: 🏗️ Test
+        if: ${{ false }}
+        run: |
+          npm run test:unit
+
       - name: 🏗️ Build
         run: npm run build

Diff for: package-lock.json

@@ -18,10 +18,12 @@
   "dependencies": {
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
+    "@types/crypto-js": "^4.2.2",
     "@types/http-proxy": "^1.17.15",
     "axios-vue": "^0.1.3",
     "chart.js": "^4.4.7",
     "chartjs-adapter-date-fns": "^3.0.0",
+    "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "http-proxy": "^1.18.1",
     "mitt-vue": "^2.0.3",

Diff for: package.json

@@ -1,4 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// Init Application.
+import LocalStorage from '@/stores/localStorage';
+new LocalStorage().checkSchemaVersion();
+
+</script>
 
 <template>
   <router-view />

Diff for: src/App.vue

@@ -27,6 +27,10 @@ main {
   flex-wrap: wrap;
 }
 
+.p-card {
+  margin-bottom: 1.5em;
+}
+
 /* a,
 .green {
   text-decoration: none;

Diff for: src/assets/main.css

@@ -1,5 +1,8 @@
 import axios, { type AxiosInstance } from 'axios';
 
+/**
+ * API wrapper to call CDN (Fastly).
+ */
 export default abstract class APIService {
   protected wsClient: AxiosInstance;
   protected service_id: string;
@@ -9,11 +12,10 @@ export default abstract class APIService {
   constructor(service_id: string, token: string) {
     this.service_id = service_id;
 
-    // Common (fetch)
-    if (import.meta.env.DEV) {
-      this.baseUrl = 'https://api.fastly.com/';  // Direct Access
+    if (import.meta.env.VITE_PROXY_USE == 'true') {
+      this.baseUrl = 'api/';                    // Proxy Access
     } else {
-      this.baseUrl = 'api/';  // Proxy Access
+      this.baseUrl = 'https://api.fastly.com/'; // Direct Access
     }
 
     this.headers = {

Diff for: src/components/base/api.ts

@@ -1,3 +1,6 @@
+/**
+ * Entity base on ID.
+ */
 export default interface Identifiable {
   id: string;
 }

Diff for: src/components/base/type.ts

@@ -4,10 +4,11 @@ import { useToast } from 'primevue/usetoast';
 import Chart from 'primevue/chart';
 import ProjectAPIService from './project.service';
 import 'chartjs-adapter-date-fns';
-import ApiCache from '@/stores/localStorage';
+import LocalStore from '@/stores/localStorage';
 
 // Init
-const service_token = (new ApiCache()).getFastlyToken() || '';
+const localStore = new LocalStore()
+const service_token = localStore.getFastlyToken() || '';
 const sampleCount = 20;
 const toast = useToast();
 const props = defineProps({
@@ -61,13 +62,13 @@ const chartOptions = ref({
 });
 
 onMounted(() => {
-  // if (import.meta.env.DEV) {
+  if (localStore.isRtApiEnable()) {
     timer.value = setInterval(() => {
       if (!lock.value) {
         getNextStat();
       }
     }, 1000);
-  // }
+  }
 });
 
 // Clean up

Diff for: src/components/project/StatCard.vue

@@ -12,10 +12,10 @@ export default class ProjectAPIService extends APIService {
   constructor(service_id: string, token: string) {
     super(service_id, token);
 
-    if (import.meta.env.DEV) {
-      this.baseUrlRt = 'https://rt.fastly.com/';  // Direct Access
+    if (import.meta.env.VITE_PROXY_USE == 'true') {
+      this.baseUrlRt = 'rt/';                     // Proxy Access
     } else {
-      this.baseUrlRt = 'rt/';  // Proxy Access
+      this.baseUrlRt = 'https://rt.fastly.com/';  // Direct Access
     }
 
     this.wsClientRt = axios.create({

Diff for: src/components/project/project.service.ts

@@ -5,7 +5,7 @@ const PORT = process.env.PORT || 8888;
 const proxy = httpproxy.createProxyServer({});
 
 const server = http.createServer(function (req, res) {
-  if (req.url.startsWith("\/api")) {
+  if (req.url.startsWith("/api")) {
     req.url = req.url.replace(/^\/api/, '');
     proxy.web(req, res, {
       target: 'https://api.fastly.com/',
@@ -14,7 +14,7 @@ const server = http.createServer(function (req, res) {
     });
   } else
 
-  if (req.url.startsWith("\/rt")) {
+  if (req.url.startsWith("/rt")) {
     req.url = req.url.replace(/^\/rt/, "");
     proxy.web(req, res, {
       target: 'https://rt.fastly.com/',

Diff for: src/proxy.js

@@ -1,6 +1,9 @@
 import AppLayout from '@/layout/AppLayout.vue';
 import { createRouter, createWebHistory } from 'vue-router';
 
+/**
+ * Global router of App.
+ */
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [

Diff for: src/router/index.ts

@@ -1,11 +1,42 @@
 import type UserEntity from '@/components/project/project.interface';
+import CryptoJS from "crypto-js";
 
+// Clean schema of local storage. (change this value if you updated the schema)
+const SCHEMA_VERSION = 1;
 
-const KEY_USERS = "fastlycdn-cache-users";
-const KEY_FASTLY_ID = "fastlycdn-api-id";
-const KEY_FASTLY_TK = "fastlycdn-api-tk";
-export default class UserCache {
+// Keys of local storage.
+const KEY_USERS           = "fastcdn-fastly-cache-users";
+const KEY_FASTLY_ID       = "fastcdn-fastly-api-id";
+const KEY_FASTLY_TK       = "fastcdn-fastly-api-tk";
+const KEY_ADMIN_MODE      = "fastcdn-admin-mode";
+const KEY_RTAPI_ENABLE    = "fastcdn-rtapi-enable";
+const KEY_SCHEMA_VERSION  = "fastcdn-schema-version";
 
+// Value of encrypt/Decrypt engine.
+const SECRET  = import.meta.env.VITE_CRYPTO_SECRET_KEY;
+const IV      = import.meta.env.VITE_CRYPTO_IV_KEY;
+const SALT    = import.meta.env.VITE_CRYPTO_SALT_KEY;
+
+/**
+ * Wrapper of localstorage for FastSun.
+ */
+export default class LocalStore {
+
+  /**
+   * Check version of schema of local storage.
+   * If not the same, clean all data !
+   */
+  checkSchemaVersion() {
+    const version = Number(localStorage.getItem(KEY_SCHEMA_VERSION)) || 0;
+    if (SCHEMA_VERSION !== version) {
+      localStorage.clear();
+      localStorage.setItem(KEY_SCHEMA_VERSION, String(SCHEMA_VERSION));
+    }
+  }
+
+  /**
+   * Set Cache user from Fastly.
+   */
   setUser(value: UserEntity): void {
     const users = JSON.parse(localStorage.getItem(KEY_USERS) || '[]') as Array<UserEntity>;
 
@@ -16,31 +47,74 @@ export default class UserCache {
     }
   }
 
+  /**
+   * Get Cache user from Fastly.
+   * @returns User.
+   */
   getUser(id: string):  UserEntity | undefined {
     const users = JSON.parse(localStorage.getItem(KEY_USERS) || '[]') as Array<UserEntity>;
     const user = users.find((item) => { return item.id == id});
+
     return user;
   }
 
+  /**
+   * Set Fastly service ID.
+   */
   setFastlyId(fastly_id: string) {
     if (fastly_id) {
       localStorage.setItem(KEY_FASTLY_ID, fastly_id);
     }
   }
 
+  /**
+   * Set Fastly service Token (and encrypt them).
+   */
   setFastlyToken(fastly_token: string) {
     if (fastly_token) {
-      //TODO Encrypt value !!
-      localStorage.setItem(KEY_FASTLY_TK, fastly_token);
+      const key = CryptoJS.PBKDF2(SECRET, SALT, { keySize: 256/32, iterations: 100 });
+      const iv = CryptoJS.enc.Utf8.parse(IV);
+      const encrypted = CryptoJS.AES.encrypt(fastly_token, key, { iv: iv, mode: CryptoJS.mode.CBC });
+      const result =  encrypted.ciphertext.toString(CryptoJS.enc.Hex);
+      localStorage.setItem(KEY_FASTLY_TK, result);
     }
   }
 
+  /**
+   * Get Fastly service ID.
+   * @returns Fastly service ID.
+   */
   getFastlyId(): string {
     return localStorage.getItem(KEY_FASTLY_ID) || '';
   }
 
+  /**
+   * Get Fastly service Token (and decrypt them).
+   * @returns Fastly service Token.
+   */
   getFastlyToken(): string {
-    //TODO Decrypt value !!
-    return localStorage.getItem(KEY_FASTLY_TK) || '';
+    const encryptValue = localStorage.getItem(KEY_FASTLY_TK) || '';
+    const key = CryptoJS.PBKDF2(SECRET, SALT, { keySize: 256/32, iterations: 100 });
+    const iv = CryptoJS.enc.Utf8.parse(IV);
+    const cipher = CryptoJS.enc.Hex.parse(encryptValue);
+    const decrypted = CryptoJS.AES.decrypt({ ciphertext: cipher } as CryptoJS.lib.CipherParams, key, { iv: iv, mode: CryptoJS.mode.CBC });
+    const result = decrypted.toString(CryptoJS.enc.Utf8);
+    return result;
+  }
+
+  /**
+   * Check override of Admin mode.
+   * @returns True if enabled.
+   */
+  isAdminMode(): boolean {
+    return localStorage.getItem(KEY_ADMIN_MODE) == 'true' || import.meta.env.VITE_ADMIN_MODE == 'true';
+  }
+
+  /**
+   * Check override of RT-API is enabled.
+   * @returns True if enabled.
+   */
+  isRtApiEnable(): boolean {
+    return localStorage.getItem(KEY_RTAPI_ENABLE) == 'true' || import.meta.env.VITE_RTAPI_DISABLE == 'false';
   }
 }

Diff for: src/stores/localStorage.ts

@@ -1,7 +1,13 @@
 import mitt from 'mitt';
 
+/**
+ * List of global event type.
+ */
 export const enum EventType {
   LOG_REFRESH = 'log.refresh',
 }
 
+/**
+ * Global event engine.
+ */
 export const eventBus = mitt();