From 7397544630877b0b28c59b0925a8b9f2bce42907 Mon Sep 17 00:00:00 2001
From: BacLuc <lucius.bachmann@gmx.ch>
Date: Sat, 18 Feb 2023 16:03:59 +0100
Subject: [PATCH] frontend: use vite's mechanism for env variables to fill
 window.environment

That we don't have locally cached environment.js files breaking the development setup.
Sadly we still use vue-cli to run our tests, so there the vite mechanism does
not work and we have to maintain one additional environment.js.

In production, we compose the environment.js anyway in the configmap, thus we don't
have to consider the production case in dev-environment.js.

Now we can also remove the check in index.html.
In a production environment, you have to check yourself that you have all the needed configurations
set.

closes #3267
---
 frontend/.gitignore                     |  1 -
 frontend/docker-setup.sh                |  7 -----
 frontend/index.html                     | 42 -------------------------
 frontend/public/environment.dist        | 14 ---------
 frontend/public/environment.docker.dist | 14 ---------
 frontend/public/environment.js          |  5 +++
 frontend/src/dev-environment.js         | 21 +++++++++++++
 frontend/src/main.js                    |  4 +++
 8 files changed, 30 insertions(+), 78 deletions(-)
 delete mode 100644 frontend/public/environment.dist
 delete mode 100644 frontend/public/environment.docker.dist
 create mode 100644 frontend/public/environment.js
 create mode 100644 frontend/src/dev-environment.js

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 8a9a56a5008..720cc704bcc 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -9,7 +9,6 @@ selenium-debug.log
 # local env files
 .env.local
 .env.*.local
-public/environment.js
 
 # Log files
 npm-debug.log*
diff --git a/frontend/docker-setup.sh b/frontend/docker-setup.sh
index 1b09235199d..e753108fb27 100755
--- a/frontend/docker-setup.sh
+++ b/frontend/docker-setup.sh
@@ -1,13 +1,6 @@
 #!/bin/bash
 set -euo pipefail
 
-BASEDIR=$(dirname "$0")
-ENV_FILE=$BASEDIR"/public/environment.js"
-
-if [ ! -f "$ENV_FILE" ]; then
-    cp $BASEDIR/public/environment.docker.dist "$ENV_FILE"
-fi
-
 npm ci --verbose
 
 if [ "$CI" = 'true' ] ; then
diff --git a/frontend/index.html b/frontend/index.html
index f40e497c225..23f9cadfe8e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -55,48 +55,6 @@
 
     <div id="app"></div>
     <script src="/environment.js" lang="application/javascript"></script>
-    <script>
-      if ('environment' in window) {
-        const requiredKeys = [
-          'API_ROOT_URL',
-          'COOKIE_PREFIX',
-          'PRINT_URL',
-          'SENTRY_FRONTEND_DSN',
-          'SHARED_COOKIE_DOMAIN',
-          'DEPLOYMENT_TIME',
-          'VERSION',
-          'VERSION_LINK_TEMPLATE',
-          'TERMS_OF_SERVICE_LINK_TEMPLATE',
-          'LOGIN_INFO_TEXT_KEY',
-        ]
-
-        const optionalKeys = [
-          'SENTRY_ENVIRONMENT',
-          'FEATURE_DEVELOPER',
-          'RECAPTCHA_SITE_KEY',
-        ]
-
-        const missingKeys = requiredKeys.filter(
-          (key) => !Object.keys(window.environment).includes(key)
-        )
-        if (missingKeys.length > 0) {
-          console.error(`Missing key(s): "${missingKeys.join(
-            ','
-          )}" in frontend/public/environment.js
-  You can look up example values in frontend/public/environment.dist`)
-        }
-
-        const additionalKeys = Object.keys(window.environment).filter(
-          (key) => !requiredKeys.includes(key) && !optionalKeys.includes(key)
-        )
-        if (additionalKeys.length > 0) {
-          console.error(`Additional defined key(s): "${additionalKeys.join(
-            ','
-          )}" in frontend/public/environment.js
-  Maybe you forgot to add them here to the requiredKeys`)
-        }
-      }
-    </script>
     <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
diff --git a/frontend/public/environment.dist b/frontend/public/environment.dist
deleted file mode 100644
index d22c43902b8..00000000000
--- a/frontend/public/environment.dist
+++ /dev/null
@@ -1,14 +0,0 @@
-window.environment = {
-  API_ROOT_URL: 'http://localhost:3001',
-  COOKIE_PREFIX: 'localhost_',
-  PRINT_URL: 'http://localhost:3003',
-  SENTRY_FRONTEND_DSN: null,
-  SENTRY_ENVIRONMENT: "http://localhost:3000",
-  SHARED_COOKIE_DOMAIN: 'localhost',
-  DEPLOYMENT_TIME: '',
-  VERSION: '',
-  VERSION_LINK_TEMPLATE: 'https://github.com/ecamp/ecamp3/commit/{version}',
-  TERMS_OF_SERVICE_LINK_TEMPLATE: 'https://ecamp3.ch/{lang}/tos',
-  FEATURE_DEVELOPER: true,
-  LOGIN_INFO_TEXT_KEY: 'dev'
-}
diff --git a/frontend/public/environment.docker.dist b/frontend/public/environment.docker.dist
deleted file mode 100644
index d22c43902b8..00000000000
--- a/frontend/public/environment.docker.dist
+++ /dev/null
@@ -1,14 +0,0 @@
-window.environment = {
-  API_ROOT_URL: 'http://localhost:3001',
-  COOKIE_PREFIX: 'localhost_',
-  PRINT_URL: 'http://localhost:3003',
-  SENTRY_FRONTEND_DSN: null,
-  SENTRY_ENVIRONMENT: "http://localhost:3000",
-  SHARED_COOKIE_DOMAIN: 'localhost',
-  DEPLOYMENT_TIME: '',
-  VERSION: '',
-  VERSION_LINK_TEMPLATE: 'https://github.com/ecamp/ecamp3/commit/{version}',
-  TERMS_OF_SERVICE_LINK_TEMPLATE: 'https://ecamp3.ch/{lang}/tos',
-  FEATURE_DEVELOPER: true,
-  LOGIN_INFO_TEXT_KEY: 'dev'
-}
diff --git a/frontend/public/environment.js b/frontend/public/environment.js
new file mode 100644
index 00000000000..47b91ee3e64
--- /dev/null
+++ b/frontend/public/environment.js
@@ -0,0 +1,5 @@
+/**
+ * This is a placeholder.
+ * In production, this file is filled with the values for window.environment.
+ * In development, window.environment is filled in src/dev-environment.js
+ */
diff --git a/frontend/src/dev-environment.js b/frontend/src/dev-environment.js
new file mode 100644
index 00000000000..752a2f891e2
--- /dev/null
+++ b/frontend/src/dev-environment.js
@@ -0,0 +1,21 @@
+// you can overwrite the env variables locally in frontend/env.local
+// @see https://vitejs.dev/guide/env-and-mode.html
+if (!window.environment) {
+  const env = import.meta.env
+  window.environment = {
+    API_ROOT_URL: env.VITE_API_ROOT_URL ?? 'http://localhost:3001',
+    COOKIE_PREFIX: env.VITE_COOKIE_PREFIX ?? 'localhost_',
+    PRINT_URL: env.VITE_PRINT_URL ?? 'http://localhost:3003',
+    SENTRY_FRONTEND_DSN: env.VITE_SENTRY_FRONTEND_DSN,
+    SENTRY_ENVIRONMENT: env.VITE_SENTRY_ENVIRONMENT ?? 'http://localhost:3000',
+    SHARED_COOKIE_DOMAIN: env.VITE_SHARED_COOKIE_DOMAIN ?? 'localhost',
+    DEPLOYMENT_TIME: env.VITE_DEPLOYMENT_TIME ?? '',
+    VERSION: env.VITE_VERSION ?? '',
+    VERSION_LINK_TEMPLATE:
+      env.VITE_VERSION_LINK_TEMPLATE ??
+      'https://github.com/ecamp/ecamp3/commit/{version}',
+    FEATURE_DEVELOPER: (env.VITE_FEATURE_DEVELOPER ?? 'true') === 'true',
+    LOGIN_INFO_TEXT_KEY: env.VITE_LOGIN_INFO_TEXT_KEY ?? 'dev',
+  }
+}
+export const getEnv = () => window.environment
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f3be61c1888..b8e07d701af 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,3 +1,5 @@
+//getEnv needs to be imported first
+import { getEnv } from '@/dev-environment.js'
 import Vue from 'vue'
 import App from './App.vue'
 import router from '@/router.js'
@@ -20,6 +22,8 @@ import 'vue-toastification/dist/index.css'
 
 import { Resize } from 'vuetify/lib/directives'
 
+getEnv()
+
 if (window.environment && window.environment.SENTRY_FRONTEND_DSN) {
   const environment = window.environment.SENTRY_ENVIRONMENT ?? 'http://localhost:3000'
   Sentry.init({