5 files changed, 30 insertions, 7 deletions

diff --git a/src/App.vue b/src/App.vue
index b13b98f..d7054a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -150,7 +150,13 @@ export default {
   },
   created: async function () {
     const defaults = jsyaml.load(defaultConfig);
-    let config = await this.getConfig();
+    let config;
+    try {
+      config = await this.getConfig();
+    } catch (error) {
+      console.log(error);
+      config = this.handleErrors("⚠️ Error loading configuration", error);
+    }
     this.config = merge(defaults, config);
     this.services = this.config.services;
     document.title = `${this.config.title} | ${this.config.subtitle}`;
@@ -158,8 +164,13 @@ export default {
   methods: {
     getConfig: function (path = "assets/config.yml") {
       return fetch(path).then((response) => {
+        if (response.redirected) {
+          // This allows to work with authentication proxies.
+          window.location.href = response.url;
+          return;
+        }
         if (!response.ok) {
-          throw Error(response.statusText);
+          throw Error(`${response.statusText}: ${response.body}`);
         }
 
         const that = this;
@@ -173,9 +184,6 @@ export default {
               return that.getConfig(config.externalConfig);
             }
             return config;
-          })
-          .catch((error) => {
-            return this.handleErrors("⚠️ Error loading configuration", error);
           });
       });
     },
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ab067e6..4585874 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -24,6 +24,9 @@ body {
   #app {
     min-height: 100%;
     background-color: var(--background);
+    background-image: var(--background-image);
+    background-size: cover;
+    background-position: center;
     color: var(--text);
     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index 99f5ed5..f011346 100644
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -24,6 +24,7 @@ colors:
     text-subtitle: "#424242"
     card-shadow: rgba(0, 0, 0, 0.1)
     link-hover: "#363636"
+    background-image: ""
   dark:
     highlight-primary: "#3367d6"
     highlight-secondary: "#4285f4"
@@ -36,6 +37,7 @@ colors:
     text-subtitle: "#f5f5f5"
     card-shadow: rgba(0, 0, 0, 0.4)
     link-hover: "#ffdd57"
+    background-image: ""
 
 message: ~
 links: []
diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index cf9963b..2ccb47b 100644
--- a/src/components/DynamicTheme.vue
+++ b/src/components/DynamicTheme.vue
@@ -25,7 +25,13 @@ export default {
     getVars: function (theme) {
       let vars = [];
       for (const themeVars in theme) {
-        vars.push(`--${themeVars}: ${theme[themeVars]}`);
+        let value = `${theme[themeVars]}`;
+        if (!value) {
+          value = "inital";
+        } else if (themeVars == "background-image") {
+          value = `url(${theme[themeVars]})`;
+        }
+        vars.push(`--${themeVars}: ${value}`);
       }
       return vars.join(";");
     },
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 2c3df40..d007d3e 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -3,7 +3,11 @@
     <div v-if="message.title" class="message-header">
       <p>{{ message.title }}</p>
     </div>
-    <div v-if="message.content" class="message-body" v-html="message.content"></div>
+    <div
+      v-if="message.content"
+      class="message-body"
+      v-html="message.content"
+    ></div>
   </article>
 </template>