read frontend env vars from dictionary instead

chart/templates/secret-hangar-frontend.yaml

@@ -9,7 +9,5 @@ stringData:
   BACKEND_HOST: "http://hangar-backend:8080"
   AUTH_HOST: "https://auth.hangar.test"
   PUBLIC_HOST: "https://hangar.test"
-  # todo replace those two?
-  HANGAR_PROXY_HOST: "http://hangar-backend:8080"
-  HANGAR_PUBLIC_HOST: "https://hangar.test"
+  HANGAR_CONFIG_ENV: "hangar.test"
   DEBUG: "hangar:*"

frontend/.env/.env

@@ -1,5 +0,0 @@
-HANGAR_PUBLIC_HOST=http://localhost:3333
-HANGAR_PROXY_HOST=http://localhost:8080
-HANGAR_AUTH_HOST=http://localhost:3001
-HANGAR_PAYPAL_ENV="sandbox"
-HANGAR_PAYPAL_IPN="https://hangar.benndorf.dev/api/internal/paypal/ipn"

frontend/.env/.env.production

@@ -1,5 +0,0 @@
-HANGAR_PUBLIC_HOST=https://hangar.benndorf.dev
-HANGAR_PROXY_HOST=http://hangar_backend:8080
-HANGAR_AUTH_HOST=Https://hangar-auth.benndorf.dev
-HANGAR_PAYPAL_ENV="production"
-HANGAR_PAYPAL_IPN="https://hangar.benndorf.dev/api/internal/paypal/ipn"

frontend/src/components/donation/DonationModal.vue

@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
 import { useNotificationStore } from "~/store/notification";
 import { useAuthStore } from "~/store/auth";
 import Button from "~/lib/components/design/Button.vue";
+import { useConfig } from "~/lib/composables/useConfig";
 
 const i18n = useI18n();
 const notifications = useNotificationStore();
@@ -21,12 +22,13 @@ onMounted(() => {
     // load script
     const script = document.createElement("script");
     script.setAttribute("src", "https://www.paypalobjects.com/donate/sdk/donate-sdk.js");
+    const config = useConfig();
     script.onload = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       // eslint-disable-next-line no-undef
       PayPal.Donation.Button({
-        env: import.meta.env.HANGAR_PAYPAL_ENV,
+        env: config.paypalEnv,
         business: props.donationSubject,
         image: {
           src: "https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif",
@@ -39,7 +41,7 @@ onMounted(() => {
         },
         item_name: "Hangar: Donation to " + props.donationTarget,
         bn: "Hangar_Donate_" + props.donationTarget + "US",
-        notify_url: import.meta.env.HANGAR_PAYPAL_IPN,
+        notify_url: config.paypalIpn,
         custom: authStore.user?.id || "anonymous",
       }).render("#paypal-donate-button-container");
 

frontend/src/components/layout/Header.vue

@@ -42,6 +42,7 @@ import { useContext } from "vite-ssr/vue";
 import { ref } from "vue";
 import Link from "~/lib/components/design/Link.vue";
 import { useInternalApi } from "~/composables/useApi";
+import { useConfig } from "~/lib/composables/useConfig";
 
 const settings = useSettingsStore();
 const { t } = useI18n();
@@ -126,7 +127,7 @@ if (!authStore.user) {
 }
 
 const auth = useAuth;
-const authHost = import.meta.env.HANGAR_AUTH_HOST;
+const authHost = useConfig().authHost;
 authLog("render with user " + authStore.user?.name);
 
 const navBarMenuLinksMoreFromPaper = [

frontend/src/composables/useAuth.ts

@@ -10,17 +10,18 @@ import { AxiosError, AxiosRequestHeaders } from "axios";
 import { useResponse } from "~/composables/useResReq";
 import Cookies from "universal-cookie";
 import jwtDecode, { JwtPayload } from "jwt-decode";
+import { useConfig } from "~/lib/composables/useConfig";
 
 class Auth {
   loginUrl(redirectUrl: string): string {
     if (redirectUrl.endsWith("?loggedOut")) {
       redirectUrl = redirectUrl.replace("?loggedOut", "");
     }
-    return `/login?returnUrl=${import.meta.env.HANGAR_PUBLIC_HOST}${redirectUrl}`;
+    return `/login?returnUrl=${useConfig().publicHost}${redirectUrl}`;
   }
 
   async logout() {
-    location.replace(`/logout?returnUrl=${import.meta.env.HANGAR_PUBLIC_HOST}?loggedOut`);
+    location.replace(`/logout?returnUrl=${useConfig().publicHost}?loggedOut`);
   }
 
   validateToken(token: string) {

frontend/src/composables/useAxios.ts

@@ -1,9 +1,11 @@
 import type { AxiosInstance } from "axios";
 import axios from "axios";
 import { axiosLog } from "~/lib/composables/useLog";
+import { useConfig } from "~/lib/composables/useConfig";
 
+const config = useConfig();
 const options = {
-  baseURL: import.meta.env.SSR ? import.meta.env.HANGAR_PROXY_HOST : import.meta.env.HANGAR_PUBLIC_HOST,
+  baseURL: import.meta.env.SSR ? config.proxyHost : config.publicHost,
 };
 axiosLog("axios options", options);
 export const useAxios: AxiosInstance = axios.create(options);

frontend/src/composables/useSeo.ts

@@ -1,6 +1,7 @@
 import type { HeadObject } from "@vueuse/head";
 import type { TranslateResult } from "vue-i18n";
 import type { RouteLocationNormalizedLoaded } from "vue-router";
+import { useConfig } from "~/lib/composables/useConfig";
 
 export function useSeo(
   title: string | TranslateResult | null | undefined,
@@ -9,9 +10,10 @@ export function useSeo(
   image: string | null
 ): HeadObject {
   description = description || "Plugin repository for Paper plugins and more!";
-  const canonical = baseUrl() + (route.fullPath.endsWith("/") ? route.fullPath.substring(0, route.fullPath.length - 1) : route.fullPath);
+  const config = useConfig();
+  const canonical = config.publicHost + (route.fullPath.endsWith("/") ? route.fullPath.substring(0, route.fullPath.length - 1) : route.fullPath);
   image = image || "https://docs.papermc.io/img/paper.png";
-  image = image.startsWith("http") ? image : baseUrl() + image;
+  image = image.startsWith("http") ? image : config.publicHost + image;
   title = title ? title + " | Hangar" : "Hangar";
   const seo = {
     title,
@@ -89,6 +91,7 @@ function generateBreadcrumbs(route: RouteLocationNormalizedLoaded) {
   const arr = [];
   const split = route.fullPath.split("/");
   let curr = "";
+  const config = useConfig();
   for (let i = 0; i < split.length; i++) {
     // skip trailing slash
     if ((split[i] === "" || split[i] === "/") && curr !== "") continue;
@@ -97,7 +100,7 @@ function generateBreadcrumbs(route: RouteLocationNormalizedLoaded) {
       "@type": "ListItem",
       position: i,
       name: guessTitle(split[i]),
-      item: baseUrl() + curr,
+      item: config.publicHost + curr,
     });
   }
 
@@ -107,7 +110,3 @@ function generateBreadcrumbs(route: RouteLocationNormalizedLoaded) {
 function guessTitle(segment: string): string {
   return segment === "/" || segment === "" ? "Hangar" : segment;
 }
-
-function baseUrl(): string {
-  return import.meta.env.HANGAR_PUBLIC_HOST;
-}

frontend/src/composables/useUrlHelper.ts

@@ -1,14 +1,17 @@
+import { useConfig } from "~/lib/composables/useConfig";
+
 export function projectIconUrl(owner: string, projectName: string, proxy = true) {
   const url = `/api/internal/projects/project/${owner}/${projectName}/icon`;
-  return proxy ? import.meta.env.HANGAR_AUTH_HOST + "/image/" + import.meta.env.HANGAR_PUBLIC_HOST + url : url;
+  const config = useConfig();
+  return proxy ? config.authHost + "/image/" + config.publicHost + url : url;
 }
 
 export function avatarUrl(name: string) {
-  return `${import.meta.env.HANGAR_AUTH_HOST}/avatar/user/${name}`;
+  return `${useConfig().authHost}/avatar/user/${name}`;
 }
 
 export function authUrl(user: string) {
-  return import.meta.env.HANGAR_AUTH_HOST + "/" + user;
+  return useConfig().authHost + "/" + user;
 }
 
 export function forumUrl(topicId: number) {

frontend/src/env.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly HANGAR_PUBLIC_HOST: string;
-  readonly HANGAR_PROXY_HOST: string;
-  readonly HANGAR_AUTH_HOST: string;
-  readonly HANGAR_PAYPAL_ENV: string;
-  readonly HANGAR_PAYPAL_IPN: string;
+  readonly HANGAR_CONFIG_ENV: string;
 }
 
 interface ImportMeta {

frontend/src/lib

@@ -1 +1 @@
-Subproject commit 4693fd28ce3fdb63e100ea03d91dc1fde3185ef2
+Subproject commit 20c72c530a57fbeaf35b63d491f045ccd0f34023

frontend/src/pages/index.vue

@@ -21,6 +21,7 @@ import InputRadio from "~/lib/components/ui/InputRadio.vue";
 import PlatformLogo from "~/components/logos/platforms/PlatformLogo.vue";
 import CategoryLogo from "~/components/logos/categories/CategoryLogo.vue";
 import LicenseLogo from "~/components/logos/licenses/LicenseLogo.vue";
+import { useConfig } from "~/lib/composables/useConfig";
 
 const i18n = useI18n();
 const route = useRoute();
@@ -99,15 +100,16 @@ function updatePlatform(platform: any) {
 }
 
 const meta = useSeo("Home", null, route, null);
+const config = useConfig();
 const script = {
   type: "application/ld+json",
   children: JSON.stringify({
     "@context": "https://schema.org",
     "@type": "WebSite",
-    url: import.meta.env.HANGAR_PUBLIC_HOST,
+    url: config.publicHost,
     potentialAction: {
       "@type": "SearchAction",
-      target: import.meta.env.HANGAR_PUBLIC_HOST + "/?q={search_term_string}",
+      target: config.publicHost + "/?q={search_term_string}",
       "query-input": "required name=search_term_string",
     },
   }),