make webui work with non-root context path

Signed-off-by: Hubert Nusser <[email protected]>

bundles/org.openhab.ui.basic/gulpfile.js

@@ -33,6 +33,11 @@
 			.pipe(gulp.dest("./src/main/resources/web"));
 	});
 
+	gulp.task("tile", function() {
+		return gulp.src("web-src/tile.png")
+			.pipe(gulp.dest("./src/main/resources/web"));
+	});
+
 	gulp.task("eslint", function() {
 		return gulp.src(sources.js)
 			.pipe(eslint({
@@ -48,5 +53,5 @@
 			.pipe(gulp.dest("./src/main/resources/web"));
 	});
 
-	gulp.task("default", gulp.parallel("css", "copyFontLibs", gulp.series("eslint", "js")));
+	gulp.task("default", gulp.parallel("css", "tile", "copyFontLibs", gulp.series("eslint", "js")));
 })();

bundles/org.openhab.ui/web/.eslintrc.js

@@ -31,7 +31,8 @@ module.exports = {
     'ga': true, // Google Analytics
     'cordova': true,
     '__statics': true,
-    'process': true
+    'process': true,
+    'baseUrl': true
   },
 
   // add your custom rules here

bundles/org.openhab.ui/web/build/webpack.config.js

@@ -20,7 +20,7 @@ const target = process.env.TARGET || 'web'
 const buildSourceMaps = process.env.SOURCE_MAPS || false
 const isCordova = target === 'cordova'
 
-const apiBaseUrl = process.env.OH_APIBASE || 'http://localhost:8080'
+const apiBaseUrl = process.env.OH_APIBASE || 'http://hubsibase:8080'
 
 module.exports = {
   mode: env,
@@ -48,12 +48,15 @@ module.exports = {
     // compress: true,
     contentBase: '/www/',
     disableHostCheck: true,
-    historyApiFallback: true,
+    historyApiFallback: { index: '/proxypath/' },
+    publicPath: '/proxypath/',
+    headers: { "Set-Cookie": "X-OPENHAB-BASEURL=/proxypath;" },
     // watchOptions: {
     //   poll: 1000,
     // },
     proxy: [{
-      context: ['/auth', '/rest', '/chart', '/proxy', '/icon', '/static', '/changePassword', '/createApiToken'],
+      context: ['/proxypath/auth', '/proxypath/rest', '/proxypath/chart', '/proxypath/proxy', '/proxypath/icon', '/proxypath/static', '/proxypath/changePassword', '/proxypath/createApiToken', '/proxypath/habpanel', '/proxypath/basicui'],
+      pathRewrite: { '^/proxypath' : '' },
       target: apiBaseUrl
     }]
   },
@@ -204,7 +207,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       filename: './index.html',
       template: './src/index.html',
-      inject: true,
+      inject: false,
       minify: env === 'production' ? {
         collapseWhitespace: true,
         removeComments: true,
@@ -219,8 +222,8 @@ module.exports = {
     }),
     new CopyWebpackPlugin([
       {
-        from: resolvePath('src/res'),
-        to: resolvePath(isCordova ? 'cordova/www/res' : 'www/res')
+        from: resolvePath('src/images'),
+        to: resolvePath(isCordova ? 'cordova/www/images' : 'www/images')
       },
       {
         from: resolvePath('src/manifest.json'),

bundles/org.openhab.ui/web/src/components/app.vue

@@ -307,6 +307,7 @@ export default {
           iosSwipeBack: !this.$device.ios || this.$device.cordova,
           auroraSwipeBack: !this.$device.ios || this.$device.cordova,
           pushState: true, // !this.$device.cordova
+          pushStateRoot: baseUrl,
           pushStateSeparator: ''
         },
         // Enable panel left visibility breakpoint
@@ -510,7 +511,7 @@ export default {
       this.cleanSession().then(() => {
         this.loggedIn = false
         this.$f7.views.main.router.navigate('/', { animate: false, clearPreviousHistory: true })
-        window.location = window.location.origin
+        window.location = window.location.origin + baseUrl + '/'
         if (this.$device.cordova) {
           this.loginScreenOpened = true
         }

bundles/org.openhab.ui/web/src/components/auth-mixin.js

@@ -31,8 +31,8 @@ export default {
 
           const payload = Utils.serializeObject({
             'grant_type': 'authorization_code',
-            'client_id': window.location.origin,
-            'redirect_uri': window.location.origin,
+            'client_id': window.location.origin + baseUrl,
+            'redirect_uri': window.location.origin + baseUrl + '/',
             'code': queryParams.code,
             'code_verifier': codeVerifier
           })
@@ -65,8 +65,8 @@ export default {
         const refreshToken = this.getRefreshToken()
         const payload = Utils.serializeObject({
           'grant_type': 'refresh_token',
-          'client_id': window.location.origin,
-          'redirect_uri': window.location.origin,
+          'client_id': window.location.origin + baseUrl,
+          'redirect_uri': window.location.origin + baseUrl + '/',
           'refresh_token': refreshToken
         })
 

bundles/org.openhab.ui/web/src/components/widgets/system/oh-icon.vue

@@ -89,8 +89,8 @@ export default {
     updateIcon () {
       if (!this.currentIcon) return
       this.$oh.media.getIcon(this.currentIcon, this.iconFormat, this.currentState).then((url) => {
-        if (url !== this.iconUrl) {
-          this.iconUrl = url
+        if (baseUrl + url !== this.iconUrl) {
+          this.iconUrl = baseUrl + url
         }
       })
     }

bundles/org.openhab.ui/web/src/css/icons.css

@@ -5,9 +5,9 @@
   font-weight: 400;
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
-       url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
-       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
-       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+       url("../fonts/MaterialIcons-Regular.woff2") format('woff2'),
+       url("../fonts/MaterialIcons-Regular.woff") format('woff'),
+       url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
 }
 .material-icons {
   font-family: 'Material Icons';

bundles/org.openhab.ui/web/src/index.html

@@ -21,18 +21,29 @@
   <% if (process.env.TARGET === 'web') { %>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" type="image/png" sizes="180x180" crossorigin="use-credentials">
-  <link rel="icon" href="/res/icons/favicon.svg" type="image/svg+xml" sizes="any" crossorigin="use-credentials">
-  <link rel="icon" href="/res/icons/128x128.png" type="image/png" sizes="128x128" crossorigin="use-credentials">
-  <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
+  <link rel="apple-touch-icon" href="images/icons/apple-touch-icon.png" type="image/png" sizes="180x180" crossorigin="use-credentials">
+  <link rel="icon" href="images/icons/favicon.svg" type="image/svg+xml" sizes="any" crossorigin="use-credentials">
+  <link rel="icon" href="images/icons/128x128.png" type="image/png" sizes="128x128" crossorigin="use-credentials">
+  <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
   <% } %>
   <!-- built styles file will be auto injected -->
+  <script>
+    const baseUrl = document.cookie.match('(^|;)\\s*X-OPENHAB-BASEURL\\s*=\\s*([^;]+)')?.pop().replace(/\/$/, '') || '';
+
+    var base = document.createElement('base');
+    base.href = baseUrl + '/';
+    document.head.appendChild(base);
+  </script>
 </head>
 <body>
   <div id="app"></div>
   <% if (process.env.TARGET === 'cordova') { %>
   <script src="cordova.js"></script>
   <% } %>
-  <!-- built script files will be auto injected -->
+  <script>
+    let app = document.createElement('script');
+    app.setAttribute('src', baseUrl + "/js/app.js");
+    document.body.appendChild(app);
+  </script>
 </body>
 </html>

bundles/org.openhab.ui/web/src/js/app.js

@@ -1,3 +1,4 @@
+import './public-path.js'
 import './compatibility'
 
 // Import Vue

bundles/org.openhab.ui/web/src/js/openhab/api.js

@@ -28,24 +28,24 @@ Framework7.request.setup({
 
 export default {
   get (uri, data) {
-    return wrapPromise(Framework7.request.promise.json(uri, data))
+    return wrapPromise(Framework7.request.promise.json(baseUrl + uri, data))
   },
   getPlain (uri, data, contentType) {
     return wrapPromise(Framework7.request.promise({
       method: 'GET',
-      url: uri,
+      url: baseUrl + uri,
       data,
       processData: false,
       contentType: contentType || 'text/plain'
     }))
   },
   post (uri, data, dataType) {
-    return wrapPromise(Framework7.request.promise.postJSON(uri, data, dataType))
+    return wrapPromise(Framework7.request.promise.postJSON(baseUrl + uri, data, dataType))
   },
   postPlain (uri, data, dataType, contentType) {
     return wrapPromise(Framework7.request.promise({
       method: 'POST',
-      url: uri,
+      url: baseUrl + uri,
       data,
       processData: false,
       contentType: contentType || 'text/plain',
@@ -55,7 +55,7 @@ export default {
   put (uri, data) {
     return wrapPromise(Framework7.request.promise({
       method: 'PUT',
-      url: uri,
+      url: baseUrl + uri,
       data: JSON.stringify(data),
       processData: false,
       // dataType: 'json',
@@ -65,7 +65,7 @@ export default {
   putPlain (uri, data, dataType, contentType) {
     return wrapPromise(Framework7.request.promise({
       method: 'PUT',
-      url: uri,
+      url: baseUrl + uri,
       data,
       processData: false,
       // dataType: 'json',
@@ -76,13 +76,13 @@ export default {
   head (uri) {
     return wrapPromise(Framework7.request.promise({
       method: 'HEAD',
-      url: uri
+      url: baseUrl + uri
     }))
   },
   delete (uri, data) {
     return wrapPromise(Framework7.request.promise({
       method: 'DELETE',
-      url: uri,
+      url: baseUrl + uri,
       processData: false,
       // dataType: 'json',
       contentType: 'application/json'

bundles/org.openhab.ui/web/src/js/openhab/auth.js

@@ -35,10 +35,10 @@ export function authorize (setup) {
     sessionStorage.setItem('openhab.ui:codeVerifier', pkceChallenge.code_verifier)
     sessionStorage.setItem('openhab.ui:authState', authState)
 
-    window.location = '/auth' +
+    window.location = baseUrl + '/auth' +
       '?response_type=code' +
-      '&client_id=' + encodeURIComponent(window.location.origin) +
-      '&redirect_uri=' + encodeURIComponent(window.location.origin) +
+      '&client_id=' + encodeURIComponent(window.location.origin + baseUrl) +
+      '&redirect_uri=' + encodeURIComponent(window.location.origin + baseUrl + '/') +
       '&scope=admin' +
       '&code_challenge_method=S256' +
       '&code_challenge=' + encodeURIComponent(pkceChallenge.code_challenge) +

bundles/org.openhab.ui/web/src/js/openhab/sse.js

@@ -53,10 +53,10 @@ function newSSEConnection (path, readyCallback, messageCallback, errorCallback)
 
 export default {
   connect (path, topics, messageCallback, errorCallback) {
-    return newSSEConnection(path, null, messageCallback, errorCallback)
+    return newSSEConnection(baseUrl + path, null, messageCallback, errorCallback)
   },
   connectStateTracker (path, readyCallback, updateCallback, errorCallback) {
-    return newSSEConnection(path, readyCallback, updateCallback, errorCallback)
+    return newSSEConnection(baseUrl + path, readyCallback, updateCallback, errorCallback)
   },
   close (client, callback) {
     if (!client) return

bundles/org.openhab.ui/web/src/js/public-path.js

@@ -0,0 +1,2 @@
+/* global __webpack_public_path__:writable */
+__webpack_public_path__ = baseUrl + '/'

bundles/org.openhab.ui/web/src/js/routes.js

@@ -299,7 +299,7 @@ export default [
   },
   /* For Cordova */
   {
-    path: '/res/(.*)',
+    path: '/images/(.*)',
     redirect: '/'
   },
   {

bundles/org.openhab.ui/web/src/manifest.json

@@ -9,32 +9,32 @@
   "theme_color": "#e64a19",
   "icons": [
     {
-      "src": "/res/icons/128x128.png",
+      "src": "images/icons/128x128.png",
       "sizes": "128x128",
       "type": "image/png"
     },
     {
-      "src": "/res/icons/144x144.png",
+      "src": "images/icons/144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "/res/icons/152x152.png",
+      "src": "images/icons/152x152.png",
       "sizes": "152x152",
       "type": "image/png"
     },
     {
-      "src": "/res/icons/192x192.png",
+      "src": "images/icons/192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/res/icons/256x256.png",
+      "src": "images/icons/256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "/res/icons/512x512.png",
+      "src": "images/icons/512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

bundles/org.openhab.ui/web/src/pages/about.vue

@@ -6,7 +6,7 @@
         <f7-col>
           <!-- <f7-block-title>About openHAB</f7-block-title> -->
           <f7-block>
-            <img src="../res/icons/favicon.svg" type="image/svg+xml" width="96" class="padding float-right">
+            <img src="@/images/icons/favicon.svg" type="image/svg+xml" width="96" class="padding float-right">
             <h2 v-if="$store.state.runtimeInfo" class="block-title-medium">
               openHAB {{ $store.state.runtimeInfo.version }}<br><small>{{ $store.state.runtimeInfo.buildString }}</small>
             </h2>

bundles/org.openhab.ui/web/src/pages/panel-right.vue

@@ -24,7 +24,11 @@ export default {
   },
   created () {
     this.$oh.api.get('/rest/ui/tiles').then((data) => {
-      this.apps = data
+      this.apps = data.map((tile) => {
+        tile.url = baseUrl + tile.url
+        tile.imageUrl = baseUrl + tile.imageUrl
+        return tile
+      })
     })
   }
 }

bundles/org.openhab.ui/web/src/pages/profile.vue

@@ -20,7 +20,7 @@
       <f7-row>
         <f7-col>
           <f7-list>
-            <f7-list-button color="blue" :external="true" href="/changePassword">
+            <f7-list-button color="blue" :external="true" :href="changePasswordUrl()">
               {{ $t('profile.changePassword') }}
             </f7-list-button>
           </f7-list>
@@ -77,7 +77,7 @@
                   </f7-swipeout-button>
                 </f7-swipeout-actions>
               </f7-list-item>
-              <f7-list-button color="blue" :external="true" href="/createApiToken">
+              <f7-list-button color="blue" :external="true" :href="createApiTokenUrl()">
                 {{ $t('profile.apiTokens.create') }}
               </f7-list-button>
             </f7-list>
@@ -216,14 +216,20 @@ export default {
       this.cleanSession().then(() => {
         this.loggedIn = false
         this.$f7.views.main.router.navigate('/', { animate: false, clearPreviousHistory: true })
-        window.location = window.location.origin
+        window.location = window.location.origin + baseUrl
         if (this.$device.cordova) {
           this.loginScreenOpened = true
         }
       }).catch((err) => {
         this.$f7.preloader.hide()
         this.$f7.dialog.alert(this.$t('profile.sessions.signOut.error') + err)
       })
+    },
+    changePasswordUrl () {
+      return baseUrl + '/changePassword'
+    },
+    createApiTokenUrl () {
+      return baseUrl + '/createApiToken'
     }
   }
 }