frontend: use vite's mechanism for env variables to fill window.envir…

…onment

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

@@ -8,7 +8,6 @@ selenium-debug.log
 # local env files
 .env.local
 .env.*.local
-public/environment.js
 
 # Auto-generated files
 public/twemoji/

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
-
 if [ "$CI" = 'true' ] ; then
   npm ci --verbose
   npm run build

frontend/index.html

@@ -55,47 +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',
-          '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>

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
+ */

frontend/src/App.vue

@@ -28,28 +28,29 @@
 import LanguageSwitcher from '@/components/layout/LanguageSwitcher.vue'
 import VueI18n from '@/plugins/i18n'
 import { parseTemplate } from 'url-template'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'App',
   components: { LanguageSwitcher },
   computed: {
     deploymentTime() {
-      const timestamp = window.environment.DEPLOYMENT_TIME
+      const timestamp = getEnv().DEPLOYMENT_TIME
       const dateTime = timestamp ? this.$date.unix(timestamp) : this.$date()
       return dateTime.format(this.$tc('global.datetime.dateTimeLong'))
     },
     version() {
-      return window.environment.VERSION || ''
+      return getEnv().VERSION || ''
     },
     versionLink() {
       return (
-        parseTemplate(window.environment.VERSION_LINK_TEMPLATE).expand({
+        parseTemplate(getEnv().VERSION_LINK_TEMPLATE).expand({
           version: this.version,
         }) || '#'
       )
     },
     isDev() {
-      return window.environment.FEATURE_DEVELOPER ?? false
+      return getEnv().FEATURE_DEVELOPER ?? false
     },
   },
   created() {

frontend/src/components/print/PrintConfigurator.vue

@@ -107,6 +107,7 @@ import PagesOverview from './configurator/PagesOverview.vue'
 import PagesConfig from './configurator/PagesConfig.vue'
 import DownloadNuxtPdfButton from '@/components/print/print-nuxt/DownloadNuxtPdfButton.vue'
 import DownloadClientPdfButton from '@/components/print/print-client/DownloadClientPdfButton.vue'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'PrintConfigurator',
@@ -155,7 +156,7 @@ export default {
       return this.$store.state.lang.language
     },
     isDev() {
-      return window.environment.FEATURE_DEVELOPER ?? false
+      return getEnv().FEATURE_DEVELOPER ?? false
     },
   },
   watch: {

frontend/src/components/print/print-nuxt/PrintPreviewNuxt.vue

@@ -28,7 +28,9 @@
 </template>
 
 <script>
-const PRINT_URL = window.environment.PRINT_URL
+import { getEnv } from '@/environment.js'
+
+const PRINT_URL = getEnv().PRINT_URL
 
 export default {
   name: 'PrintPreviewNuxt',

frontend/src/components/print/print-nuxt/generatePdfMixin.js

@@ -2,8 +2,9 @@ import { saveAs } from 'file-saver'
 import slugify from 'slugify'
 import { cloneDeep } from 'lodash'
 import axios from 'axios'
+import { getEnv } from '@/environment.js'
 
-const PRINT_URL = window.environment.PRINT_URL
+const PRINT_URL = getEnv().PRINT_URL
 
 export const generatePdfMixin = {
   props: {

frontend/src/environment.js

@@ -0,0 +1,24 @@
+export function getEnv() {
+  if (window.environment) {
+    return window.environment
+  }
+  // you can overwrite the env variables locally in frontend/env.local
+  // @see https://vitejs.dev/guide/env-and-mode.html
+  const env = import.meta.env
+  return {
+    API_ROOT_URL: env.VITE_API_ROOT_URL ?? '/api',
+    COOKIE_PREFIX: env.VITE_COOKIE_PREFIX ?? 'localhost_',
+    PRINT_URL: env.VITE_PRINT_URL ?? '/print',
+    SENTRY_FRONTEND_DSN: env.VITE_SENTRY_FRONTEND_DSN,
+    SENTRY_ENVIRONMENT: env.VITE_SENTRY_ENVIRONMENT ?? 'local',
+    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}',
+    TERMS_OF_SERVICE_LINK_TEMPLATE:
+      env.TERMS_OF_SERVICE_LINK_TEMPLATE ?? 'https://ecamp3.ch/{lang}/tos',
+    FEATURE_DEVELOPER: (env.VITE_FEATURE_DEVELOPER ?? 'true') === 'true',
+    LOGIN_INFO_TEXT_KEY: env.VITE_LOGIN_INFO_TEXT_KEY ?? 'dev',
+  }
+}

frontend/src/main.js

@@ -14,19 +14,21 @@ import {
 } from './plugins'
 import { store } from './plugins/store'
 import { vuetify } from './plugins/vuetify'
+import { getEnv } from '@/environment.js'
 import * as Sentry from '@sentry/vue'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 
 import { Resize } from 'vuetify/lib/directives'
 import ResizeObserver from 'v-resize-observer'
 
-if (window.environment && window.environment.SENTRY_FRONTEND_DSN) {
-  const environment = window.environment.SENTRY_ENVIRONMENT ?? 'local'
+const env = getEnv()
+if (env && env.SENTRY_FRONTEND_DSN) {
+  const sentryEnvironment = env.SENTRY_ENVIRONMENT ?? 'local'
   Sentry.init({
     Vue,
-    dsn: window.environment.SENTRY_FRONTEND_DSN,
-    environment,
+    dsn: env.SENTRY_FRONTEND_DSN,
+    environment: sentryEnvironment,
     tracing: false,
     logErrors: process.env.NODE_ENV !== 'production',
   })

frontend/src/plugins/__tests__/auth.spec.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import { auth } from '@/plugins/auth'
 import Cookies from 'js-cookie'
 import cloneDeep from 'lodash/cloneDeep'
+import { getEnv } from '@/environment'
 
 const storePlugin = await vi.importActual('@/plugins/store')
 const storeLoader = storePlugin.default
@@ -38,7 +39,7 @@ const validJWTPayload =
 //   "user": "/users/1a2b3c4d"
 // }
 
-const envBackup = cloneDeep(window.environment)
+const envBackup = cloneDeep(getEnv())
 
 expect.extend({
   haveUri(actual, expectedUri) {

frontend/src/plugins/auth.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { apiStore, store } from '@/plugins/store'
 import router from '@/router'
 import Cookies from 'js-cookie'
+import { getEnv } from '@/environment.js'
 
 axios.interceptors.response.use(null, (error) => {
   if (error.status === 401) {
@@ -148,7 +149,7 @@ function headerAndPayloadCookieName() {
 }
 
 function cookiePrefix() {
-  return window.environment.COOKIE_PREFIX || ''
+  return getEnv().COOKIE_PREFIX || ''
 }
 
 export const auth = {

frontend/src/plugins/store/index.js

@@ -4,6 +4,7 @@ import VueAxios from 'vue-axios/dist/vue-axios.common.min'
 import HalJsonVuex from 'hal-json-vuex'
 import lang from './lang'
 import auth from './auth'
+import { getEnv } from '@/environment.js'
 
 class StorePlugin {
   install(Vue) {
@@ -18,7 +19,7 @@ class StorePlugin {
     })
 
     axios.defaults.withCredentials = true
-    axios.defaults.baseURL = window.environment.API_ROOT_URL
+    axios.defaults.baseURL = getEnv().API_ROOT_URL
     axios.defaults.headers.common.Accept = 'application/hal+json'
     axios.interceptors.request.use(function (config) {
       if (config.method === 'patch') {

frontend/src/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import slugify from 'slugify'
 import { isLoggedIn } from '@/plugins/auth'
 import { apiStore } from '@/plugins/store'
+import { getEnv } from '@/environment.js'
 
 Vue.use(Router)
 
@@ -12,9 +13,9 @@ const NavigationCamp = () => import('./views/camp/navigation/NavigationCamp.vue'
 /* istanbul ignore next */
 export default new Router({
   mode: 'history',
-  base: window.environment.BASE_URL || '/',
+  base: '/',
   routes: [
-    ...(window.environment.FEATURE_DEVELOPER
+    ...(getEnv().FEATURE_DEVELOPER
       ? [
           // Dev-Pages:
           {

frontend/src/views/auth/Login.vue

@@ -153,8 +153,9 @@ import HorizontalRule from '@/components/layout/HorizontalRule.vue'
 import IconSpacer from '@/components/layout/IconSpacer.vue'
 import { serverErrorToString } from '@/helpers/serverError'
 import { parseTemplate } from 'url-template'
+import { getEnv } from '@/environment.js'
 
-const LOGIN_INFO_TEXT_KEY = window.environment.LOGIN_INFO_TEXT_KEY
+const LOGIN_INFO_TEXT_KEY = getEnv().LOGIN_INFO_TEXT_KEY
 
 export default {
   name: 'Login',
@@ -185,7 +186,7 @@ export default {
     },
     termsOfServiceLink() {
       return (
-        parseTemplate(window.environment.TERMS_OF_SERVICE_LINK_TEMPLATE || '').expand({
+        parseTemplate(getEnv().TERMS_OF_SERVICE_LINK_TEMPLATE || '').expand({
           lang: this.$store.state.lang.language.substring(0, 2),
         }) || false
       )

frontend/src/views/auth/Register.vue

@@ -142,6 +142,7 @@ import VueI18n from '@/plugins/i18n'
 import { ValidationObserver } from 'vee-validate'
 import { passwordStrengthMixin } from '../../mixins/passwordStrengthMixin.js'
 import { parseTemplate } from 'url-template'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'Register',
@@ -181,7 +182,7 @@ export default {
     },
     termsOfServiceLink() {
       return (
-        parseTemplate(window.environment.TERMS_OF_SERVICE_LINK_TEMPLATE || '').expand({
+        parseTemplate(getEnv().TERMS_OF_SERVICE_LINK_TEMPLATE || '').expand({
           lang: this.language.substring(0, 2),
         }) || false
       )
@@ -197,8 +198,8 @@ export default {
   mounted() {
     this.language = this.$i18n.browserPreferredLocale
 
-    if (window.environment.RECAPTCHA_SITE_KEY) {
-      this.recaptcha = load(window.environment.RECAPTCHA_SITE_KEY, {
+    if (getEnv().RECAPTCHA_SITE_KEY) {
+      this.recaptcha = load(getEnv().RECAPTCHA_SITE_KEY, {
         explicitRenderParameters: {
           badge: 'bottomleft',
         },

frontend/src/views/auth/ResetPassword.vue

@@ -107,6 +107,7 @@
 import { load } from 'recaptcha-v3'
 import { ValidationObserver } from 'vee-validate'
 import { passwordStrengthMixin } from '../../mixins/passwordStrengthMixin.js'
+import { getEnv } from '@/environment'
 
 export default {
   name: 'ResetPassword',
@@ -127,8 +128,8 @@ export default {
   },
 
   async mounted() {
-    if (window.environment.RECAPTCHA_SITE_KEY) {
-      this.recaptcha = load(window.environment.RECAPTCHA_SITE_KEY, {
+    if (getEnv().RECAPTCHA_SITE_KEY) {
+      this.recaptcha = load(getEnv().RECAPTCHA_SITE_KEY, {
         explicitRenderParameters: {
           badge: 'bottomleft',
         },

frontend/src/views/auth/ResetPasswordRequest.vue

@@ -54,6 +54,7 @@
 
 <script>
 import { load } from 'recaptcha-v3'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'ResetPasswordRequest',
@@ -67,8 +68,8 @@ export default {
   },
 
   mounted() {
-    if (window.environment.RECAPTCHA_SITE_KEY) {
-      this.recaptcha = load(window.environment.RECAPTCHA_SITE_KEY, {
+    if (getEnv().RECAPTCHA_SITE_KEY) {
+      this.recaptcha = load(getEnv().RECAPTCHA_SITE_KEY, {
         explicitRenderParameters: {
           badge: 'bottomleft',
         },