feat(webapp): use built-in env support; remove bloat

docker-compose.dev.yml

@@ -65,11 +65,8 @@ services:
     volumes:
     - ./webapp/:/usr/src/app/
     working_dir: /usr/src/app/
-    command: bash -c "cat src/env.js.template | envsubst > src/env.js && npm run serve --fix"
+    command: "npm run serve --fix"
     environment:
-    - DESECSTACK_DOMAIN
-    - DESECSTACK_API_SEPA_CREDITOR_ID
-    - DESECSTACK_API_SEPA_CREDITOR_NAME
     - HOST=0.0.0.0
     - PORT=443
     networks:

docker-compose.yml

@@ -205,15 +205,17 @@ services:
   webapp:
     build: webapp
     environment:
-    - DESECSTACK_API_SEPA_CREDITOR_ID
-    - DESECSTACK_API_SEPA_CREDITOR_NAME
-    - DESECSTACK_DOMAIN
-    - DESECSTACK_NS
+    - VUE_APP_DESECSTACK_DOMAIN=${DESECSTACK_DOMAIN}
+    - VUE_APP_DESECSTACK_NS=${DESECSTACK_NS}
+    - VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID}
+    - VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME}
+    - VUE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN}
+    - VUE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
     volumes:
     - ./webapp/:/usr/src/app/
     - webapp_dist:/usr/src/app/dist
     working_dir: /usr/src/app/
-    command: bash -c "cat src/env.js.template | envsubst > src/env.js && npm install && npm run build -- --no-clean"
+    command: bash -c "npm install && npm run build -- --no-clean"
     logging:
       driver: "syslog"
       options:

webapp/.gitignore

@@ -8,7 +8,6 @@ node_modules
 # local env files
 .env.local
 .env.*.local
-src/env.js
 
 # Log files
 npm-debug.log*

webapp/src/App.vue

@@ -151,7 +151,6 @@
 </template>
 
 <script>
-import {EMAIL} from './env';
 import router from './router';
 import {logout} from './utils';
 
@@ -159,7 +158,7 @@ export default {
   name: 'App',
   data: () => ({
     drawer: false,
-    email: EMAIL,
+    email: process.env.VUE_APP_EMAIL,
     menu: {
       'home': {
         'name': 'home',

webapp/src/components/ActivateAccountActionHandler.vue

@@ -1,13 +1,12 @@
 <script>
   import GenericActionHandler from "./GenericActionHandler"
-  import {LOCAL_PUBLIC_SUFFIXES} from '../env';
 
   export default {
     name: 'ActivateAccountActionHandler',
     extends: GenericActionHandler,
     data: () => ({
       auto_submit: true,
-      LOCAL_PUBLIC_SUFFIXES: LOCAL_PUBLIC_SUFFIXES,
+      LOCAL_PUBLIC_SUFFIXES: process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
     }),
     watch: {
       success(value) {

webapp/src/components/DonateDirectDebitForm.vue

@@ -101,7 +101,6 @@
 <script>
   import axios from 'axios';
   import {email_pattern} from '../validation';
-  import {DESECSTACK_API_SEPA_CREDITOR_ID, DESECSTACK_API_SEPA_CREDITOR_NAME} from "../env";
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -118,8 +117,8 @@
       errors: [],
 
       /* from env */
-      creditorid: DESECSTACK_API_SEPA_CREDITOR_ID,
-      creditorname: DESECSTACK_API_SEPA_CREDITOR_NAME,
+      creditorid: process.env.VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID,
+      creditorname: process.env.VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME,
 
       /* account holder name field */
       name: '',

webapp/src/env.js.template

@@ -1,6 +0,0 @@
-export const DESECSTACK_DOMAIN = '${DESECSTACK_DOMAIN}';
-export const DESECSTACK_NS = '${DESECSTACK_NS}';
-export const LOCAL_PUBLIC_SUFFIXES = ['dedyn.${DESECSTACK_DOMAIN}'];
-export const EMAIL = atob(atob('YzNWd2NHOXlkRUJrWlhObFl5NXBidz09'));
-export const DESECSTACK_API_SEPA_CREDITOR_ID = '${DESECSTACK_API_SEPA_CREDITOR_ID}';
-export const DESECSTACK_API_SEPA_CREDITOR_NAME = '${DESECSTACK_API_SEPA_CREDITOR_NAME}';

webapp/src/views/Console/DomainDetailsDialog.vue

@@ -107,7 +107,6 @@
 </template>
 
 <script>
-import { DESECSTACK_NS, LOCAL_PUBLIC_SUFFIXES } from '@/env';
 import { timeAgo } from '@/utils';
 
 export default {
@@ -127,7 +126,7 @@ export default {
     },
     ns: {
       type: Array,
-      default: () => DESECSTACK_NS.split(' '),
+      default: () => process.env.VUE_APP_DESECSTACK_NS.split(' '),
     },
     ips: {
       type: Array,
@@ -144,7 +143,7 @@ export default {
   },
   data: () => ({
     copied: '',
-    LOCAL_PUBLIC_SUFFIXES: LOCAL_PUBLIC_SUFFIXES,
+    LOCAL_PUBLIC_SUFFIXES: process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
     timeAgo: timeAgo,
   }),
   methods: {

webapp/src/views/CustomSetup.vue

@@ -98,14 +98,12 @@
 </template>
 
 <script>
-  import { DESECSTACK_NS } from '@/env';
-
   export default {
     name: 'CustomSetup',
     data: () => ({
       copied: '',
       dsList: [],
-      nsList: DESECSTACK_NS.split(' '),
+      nsList: process.env.VUE_APP_DESECSTACK_NS.split(' '),
     }),
     async mounted() {
       let keys = this.$route.params.keys;

webapp/src/views/DomainList.vue

@@ -1,5 +1,4 @@
 <script>
-import {LOCAL_PUBLIC_SUFFIXES} from '@/env';
 import { HTTP, withWorking } from '@/utils';
 import CrudList from './CrudList';
 import DomainDetailsDialog from '@/views/Console/DomainDetailsDialog';
@@ -82,7 +81,7 @@ export default {
           let ds = d.keys.map(key => key.ds);
           ds = ds.concat.apply([], ds)
           this.extraComponentBind = {'name': d.name, 'ds': ds, 'published': d.published, 'is-new': isNew};
-          if (LOCAL_PUBLIC_SUFFIXES.some((suffix) => d.name.endsWith(`.${suffix}`))) {
+          if (process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ').some((suffix) => d.name.endsWith(`.${suffix}`))) {
             this.extraComponentBind['ips'] = [];
             await withWorking(this.error, async (o) => {
               let urlRRset = `${url}/rrsets/?subname=&type=`;

webapp/src/views/DynSetup.vue

@@ -167,7 +167,6 @@
 
 <script>
   import axios from 'axios';
-  import {LOCAL_PUBLIC_SUFFIXES} from '../env';
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -183,7 +182,7 @@
       errors: [],
       ips: undefined,
       token: undefined,
-      LOCAL_PUBLIC_SUFFIXES: LOCAL_PUBLIC_SUFFIXES,
+      LOCAL_PUBLIC_SUFFIXES: process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
       lastChanged: undefined,
     }),
     async mounted() {

webapp/src/views/Home.vue

@@ -160,7 +160,6 @@
 
 <script>
 import {email_pattern} from "../validation";
-import {EMAIL} from '../env';
 
 export default {
   name: 'home',
@@ -177,7 +176,7 @@ export default {
     this.domainType = this.$route.query.domainType || 'none';
   },
     data: () => ({
-    contact_email: EMAIL,
+    contact_email: process.env.VUE_APP_EMAIL,
     contact_subject: 'Adopting of a Frontend Server',
     contact_body: 'Dear deSEC,\n\nI would like to adopt a frontend server in your networks!',
     domainType: null,

webapp/src/views/Impressum.vue

@@ -18,11 +18,10 @@
 </template>
 
 <script>
-  import {EMAIL} from '../env';
   export default {
     name: 'Impressum',
     data: () => ({
-      email: EMAIL,
+      email: process.env.VUE_APP_EMAIL,
     }),
   }
 </script>

webapp/src/views/PrivacyPolicy.vue

@@ -93,11 +93,10 @@
 </template>
 
 <script>
-  import {EMAIL} from '../env';
   export default {
     name: 'Impressum',
     data: () => ({
-      email: EMAIL,
+      email: process.env.VUE_APP_EMAIL,
       privacy_policy: [
         {
           title: 'Visiting this Website',

webapp/src/views/SignUp.vue

@@ -157,9 +157,10 @@
 
 <script>
   import axios from 'axios';
-  import {LOCAL_PUBLIC_SUFFIXES} from '../env';
   import {domain_pattern, email_pattern} from '../validation';
 
+  const LOCAL_PUBLIC_SUFFIXES = process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');
+
   const HTTP = axios.create({
     baseURL: '/api/v1/',
     headers: {

webapp/vue.config.js

@@ -2,8 +2,8 @@ module.exports = {
   configureWebpack: {
     devServer: {
       disableHostCheck: true,
-      sockHost: 'desec.' + process.env.DESECSTACK_DOMAIN,
-      public: 'https://desec.' + process.env.DESECSTACK_DOMAIN + '/',
+      sockHost: 'desec.' + process.env.VUE_APP_DESECSTACK_DOMAIN,
+      public: 'https://desec.' + process.env.VUE_APP_DESECSTACK_DOMAIN + '/',
     },
   },
   publicPath: '/',