From b21af27813c8e0466ed49f469943a2f630450f55 Mon Sep 17 00:00:00 2001
From: Anton <antonymousfeedback@gmail.com>
Date: Wed, 16 Oct 2019 11:28:15 +0200
Subject: [PATCH] Add default env file to configure app externally at runtime

---
 CHANGELOG.md                                     |  2 ++
 .../main-process/auth-service-electron.js        | 16 ++++++++--------
 src/App.vue                                      |  5 ++++-
 src/index.template.html                          |  1 +
 src/plugins/auth.js                              |  8 ++++----
 src/statics/env.js                               | 16 ++++++++++++++++
 6 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 src/statics/env.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38180955..d39408ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,8 @@ under `media/create` (playback possible using forked
 [vue-video-player](https://github.com/dasantonym/vue-video-player))
 - Export timelines as CSV
 - Mobile compatiblity for MoSys Editor
+- The file `statics/env.js` can be overwritten to configure
+the frontend at runtime
 
 ### Changed
 
diff --git a/src-electron/main-process/auth-service-electron.js b/src-electron/main-process/auth-service-electron.js
index 0b9b655f..48e84bc8 100644
--- a/src-electron/main-process/auth-service-electron.js
+++ b/src-electron/main-process/auth-service-electron.js
@@ -13,11 +13,11 @@ const
   keytarAccount = os.userInfo().username
 
 function getAuthenticationURL () {
-  return 'https://' + process.env.AUTH0_DOMAIN + '/authorize?' +
-    'audience=' + process.env.AUTH0_AUDIENCE + '&' +
+  return 'https://' + (window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN) + '/authorize?' +
+    'audience=' + (window.AUTH0_AUDIENCE || process.env.AUTH0_AUDIENCE) + '&' +
     'scope=openid profile offline_access&' +
     'response_type=code&' +
-    'client_id=' + process.env.AUTH0_CLIENT_ID + '&' +
+    'client_id=' + (window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID) + '&' +
     'redirect_uri=' + redirectUri
 }
 
@@ -25,9 +25,9 @@ async function refreshTokens () {
   const refreshToken = await keytar.getPassword(keytarService, keytarAccount)
   if (!refreshToken) return throw new Error('No refresh token found')
 
-  const result = await axios.post(`https://${process.env.AUTH0_DOMAIN}/oauth/token`, {
+  const result = await axios.post(`https://${window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN}/oauth/token`, {
     grant_type: 'refresh_token',
-    client_id: process.env.AUTH0_CLIENT_ID,
+    client_id: window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID,
     refresh_token: refreshToken
   }, {
     headers: {'Content-Type': 'application/json'}
@@ -43,12 +43,12 @@ async function loadTokens (callbackURL) {
 
   const exchangeOptions = {
     'grant_type': 'authorization_code',
-    'client_id': process.env.AUTH0_CLIENT_ID,
+    'client_id': window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID,
     'code': query.code,
     'redirect_uri': redirectUri
   }
 
-  const result = await axios.post(`https://${process.env.AUTH0_DOMAIN}/oauth/token`, exchangeOptions, {
+  const result = await axios.post(`https://${window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN}/oauth/token`, exchangeOptions, {
     headers: {
       'Content-Type': 'application/json'
     }
@@ -66,7 +66,7 @@ async function logout () {
 }
 
 function getLogOutUrl () {
-  return `https://${process.env.AUTH0_DOMAIN}/v2/logout`
+  return `https://${window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN}/v2/logout`
 }
 
 export {
diff --git a/src/App.vue b/src/App.vue
index 06ea26fc..a1f9fad9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,10 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  mounted () {
+    console.log(window.TRANSCODER_HOST)
+  }
 }
 </script>
 
diff --git a/src/index.template.html b/src/index.template.html
index c8c13020..95e14449 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -21,5 +21,6 @@
 <div id="q-app"></div>
 
 <!-- built files will be auto injected here -->
+<script src="statics/env.js" language="JavaScript"></script>
 </body>
 </html>
diff --git a/src/plugins/auth.js b/src/plugins/auth.js
index 40ed32e9..ddeb04fd 100644
--- a/src/plugins/auth.js
+++ b/src/plugins/auth.js
@@ -8,10 +8,10 @@ export default ({ Vue }) => {
   }
   else {
     authService = new AuthService({
-      domain: process.env.AUTH0_DOMAIN,
-      clientID: process.env.AUTH0_CLIENT_ID,
-      redirectUri: process.env.AUTH0_REDIRECT_URL || `${document.location.origin}/users/callback`,
-      audience: process.env.AUTH0_AUDIENCE,
+      domain: window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN,
+      clientID: window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID,
+      redirectUri: `${document.location.origin}/users/callback`,
+      audience: window.AUTH0_AUDIENCE || process.env.AUTH0_AUDIENCE,
       scope: 'openid profile read write',
       responseType: 'token id_token'
     })
diff --git a/src/statics/env.js b/src/statics/env.js
new file mode 100644
index 00000000..cba5e97f
--- /dev/null
+++ b/src/statics/env.js
@@ -0,0 +1,16 @@
+Object.assign(window, {
+  //
+  // HOST CONFIG
+  //
+  API_HOST: 'https://api.motionbank.org',
+  TRANSCODER_HOST: 'https://transcoder.motionbank.org',
+  SOCKETS_HOST: 'https://sockets.motionbank.org',
+  STORAGE_HOST: 'https://storage.motionbank.org',
+  PACKAGER_HOST: 'https://packager.motionbank.org',
+  //
+  // AUTH
+  //
+  AUTH0_CLIENT_ID: '80t5TRU9MVhGDVnZ522CvX4hutBxDB6U',
+  AUTH0_DOMAIN: 'auth.motionbank.org',
+  AUTH0_AUDIENCE: 'https://api.motionbank.org'
+})
-- 
GitLab