footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
-connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
+connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example).
+ # You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity.
# Optional: Proxy / hosting option
proxy:
* Host all your target service under the same domain & port.
* Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
* Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
+
+## I am using an authentication proxy and homer says I am offline
+
+This should be a configuration issue.
+* Make sure the option `connectivityCheck` is set to `true` in configuration.
+* Check your proxy configuration, the expected behavior is to redirect user using a 302 to the login page when user is not authenticated.
},
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.status == 404) {
+ if (response.status == 404 || response.redirected) {
this.configNotFound = true;
return {};
}
};
},
created: function () {
+ if (/t=\d+/.test(window.location.href)) {
+ window.history.replaceState({}, document.title, window.location.pathname);
+ }
let that = this;
this.checkOffline();
},
false
);
+ window.addEventListener(
+ "online",
+ function () {
+ that.checkOffline();
+ },
+ false
+ );
+ window.addEventListener(
+ "offline",
+ function () {
+ this.offline = true;
+ },
+ false
+ );
},
methods: {
checkOffline: function () {
+ if (!navigator.onLine) {
+ this.offline = true;
+ return;
+ }
+
+ // extra check to make sure we're not offline
let that = this;
- return fetch(window.location.href + "?alive", {
+ const aliveCheckUrl = window.location.href + "?t="+(new Date().valueOf());
+ return fetch(aliveCheckUrl, {
method: "HEAD",
cache: "no-store",
+ redirect: "manual"
})
.then(function (response) {
+ // opaqueredirect means request has been redirected, to auth provider probably
+ if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) {
+ window.location.href = aliveCheckUrl;
+ }
that.offline = !response.ok;
})
.catch(function () {
msTileImage: "assets/icons/icon-any.png",
},
},
+ devServer: {
+ disableHostCheck: true
+ },
};