dex-ui-vue/src/main.ts

import './style.css'

import {createApp} from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import {CardPrintService, CardService, DeckService, JobService, SetService} from "./api/openapi";
import {
  Accordion,
  AccordionContent,
  AccordionHeader,
  AccordionPanel,
  DatePicker,
  Fluid,
  ToastService
} from "primevue";
import {createPinia} from "pinia";
import {createRouter, createWebHistory, type Router, type RouteRecordRaw} from "vue-router";
import HomeView from "./views/HomeView.vue";
import CardsView from "./views/card/CardsView.vue";
import CardView from "./views/card/CardView.vue";
import DecksView from "./views/deck/DecksView.vue";
import DeckView from "./views/deck/DeckView.vue";
import Callback from "./views/Callback.vue";
import {useAuthStore} from "./stores/auth.ts";
import SetsView from "./views/set/SetsView.vue";
import JobsView from "./views/JobsView.vue";
import {definePreset} from "@primeuix/themes";
import {getConfig, initConfig} from "@/util/config.ts";
import axios from "axios";

// Initialize configuration from window object
initConfig((window as any).__APP_CONFIG__ || {})

export const DeckServiceKey = Symbol("deckServiceKey")
export const CardServiceKey = Symbol("cardServiceKey")
export const SetServiceKey = Symbol("setServiceKey")
export const CardPrintServiceKey = Symbol("cardPrintServiceKey")
export const JobServiceKey = Symbol("jobServiceKey")

const pinia = createPinia();

const MyPreset = definePreset(Aura, {
  semantic: {
    colorScheme: {
      light: {
        surface: {
          0: '#ffffff',
          50: '{zinc.50}',
          100: '{zinc.100}',
          200: '{zinc.200}',
          300: '{zinc.300}',
          400: '{zinc.400}',
          500: '{zinc.500}',
          600: '{zinc.600}',
          700: '{zinc.700}',
          800: '{zinc.800}',
          900: '{zinc.900}',
          950: '{zinc.950}'
        }
      },
      dark: {
        surface: {
          0: "#ffffff",
          50: "#f3f3f3",
          100: "#e7e7e8",
          200: "#cfd0d0",
          300: "#b7b8b9",
          400: "#9fa1a1",
          500: "#87898a",
          600: "#6e7173",
          700: "#565a5b",
          800: "#3e4244",
          900: "#262b2c",
          950: "#0e1315"
        }
      }
    }
  }
});

const app = createApp(App);
app.use(PrimeVue, {
  theme: {
    preset: MyPreset,
    options: {
      cssLayer: {
        name: 'primevue',
        order: 'theme, base, primevue'
      }
    }
  }
});

app.use(pinia);

app.component('Accordion', Accordion)
app.component('AccordionPanel', AccordionPanel)
app.component('AccordionHeader', AccordionHeader)
app.component('AccordionContent', AccordionContent)
app.component('DatePicker', DatePicker)
app.component('Fluid', Fluid)

const authStore = useAuthStore();
authStore.initialize();
const userManager = authStore.userManager;

userManager.events.addAccessTokenExpired(async() => {
  await userManager.signinRedirect()
})

const routes: RouteRecordRaw[] = [
  {path: '/', component: HomeView},
  {path: '/cards', component: CardsView, meta: {requiresAuth: false}},
  {path: '/cards/:id', component: CardView, meta: {requiresAuth: true}},
  {path: '/decks', component: DecksView, meta: {requiresAuth: true}},
  {path: '/decks/:id', component: DeckView, meta: {requiresAuth: true}},
  {path: '/sets', component: SetsView},
  {path: '/sets/:id', component: DeckView, meta: {requiresAuth: true}},
  {path: '/callback', component: Callback},
  {path: '/jobs', component: JobsView}
]

const router: Router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach(async (to) => {
  if (to.meta.requiresAuth) {
    const user = authStore.user;
    if (!user) {
      await authStore.login();
      return false;
    }
  }
})

app.use(router);
app.use(ToastService)

const apiUrl = import.meta.env.PROD
    ? "/"
    : `http://${getConfig().API_HOST}:${getConfig().API_PORT}`;

const axiosInstance = axios.create({
  baseURL: apiUrl,
  headers: {
    'Content-Type': 'application/json'
  }
})

axiosInstance.interceptors.request.use(async (config) => {
  const user = await userManager.getUser()
  if (user?.access_token) {
    config.headers.Authorization = `Bearer ${user.access_token}`
  }
  return config
})

// Handle token expiration
axiosInstance.interceptors.response.use(
    response => response,
    async (error) => {
      if (error.response?.status === 401) {
        await userManager.signinRedirect()
      }
      return Promise.reject(error)
    }
)

const deckService: DeckService = new DeckService(undefined, undefined, axiosInstance)
const cardService: CardService = new CardService(undefined, undefined, axiosInstance)
const setService: SetService = new SetService(undefined, undefined, axiosInstance)
const cardPrintService: CardPrintService = new CardPrintService(undefined, undefined, axiosInstance)
const jobService: JobService = new JobService(undefined, undefined, axiosInstance)

app.provide(DeckServiceKey, deckService)
app.provide(CardServiceKey, cardService)
app.provide(SetServiceKey, setService)
app.provide(CardPrintServiceKey, cardPrintService)
app.provide(JobServiceKey, jobService)

app.mount('#app');