From e4bcfc9ab60a9bf4401351b749f29b0c44e57dd8 Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Fri, 29 Jul 2022 20:03:44 +0200
Subject: [PATCH] Make webpage usable via reverse proxy location.base needs to
 be set to the proxied path

---
 public/{index.html => index.ejs} | 2 +-
 src/app.js                       | 4 +++-
 src/components/TheSidebar.vue    | 4 +++-
 src/router.js                    | 3 ++-
 src/utils/api.js                 | 6 +++---
 src/utils/socket.js              | 2 +-
 6 files changed, 13 insertions(+), 8 deletions(-)
 rename public/{index.html => index.ejs} (96%)

diff --git a/public/index.html b/public/index.ejs
similarity index 96%
rename from public/index.html
rename to public/index.ejs
index e924aba..58f19e5 100644
--- a/public/index.html
+++ b/public/index.ejs
@@ -29,7 +29,7 @@
 				display: none;
 			}
 		</style>
-
+		<script>location.base = "<%= locationBase %>"</script>
 		<script>
 			if (localStorage.getItem('selectedTheme')) {
 				document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))
diff --git a/src/app.js b/src/app.js
index 3e921ce..5f016dc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -33,6 +33,8 @@ import { SPOTIFY_STATUS } from '@/constants'
 String.prototype.capitalize = function () {
 	return this.charAt(0).toUpperCase() + this.slice(1)
 }
+// Reset if ejs fails
+if (location.base == "<%= locationBase %>") location.base = "/"
 
 /* ===== App initialization ===== */
 async function startApp() {
@@ -44,7 +46,7 @@ async function startApp() {
 		render: h => h(App)
 	}).$mount('#app')
 
-	const connectResponse = await (await fetch('connect')).json()
+	const connectResponse = await fetchData('connect')
 	const spotifyStatus = connectResponse.spotifyEnabled ? SPOTIFY_STATUS.ENABLED : SPOTIFY_STATUS.DISABLED
 
 	if (connectResponse.deezerAvailable === 'no-network') {
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index e3bba0f..4bd7534 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -73,8 +73,10 @@ import deemixIcon from '@/assets/deemix-icon.svg'
 
 export default defineComponent({
 	setup(_, ctx) {
+		const activeTab = links.find(link => link.routerName === ctx.root.$route.name)
+
 		const state = reactive({
-			activeTablink: 'home',
+			activeTablink: activeTab ? activeTab.name : 'home',
 			links
 		})
 		const { THEMES, currentTheme } = useTheme()
diff --git a/src/router.js b/src/router.js
index 8418efb..8e9ec5a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -22,7 +22,7 @@ Vue.use(VueRouter)
 
 const routes = [
 	{
-		path: window.location.pathname,
+		path: '/',
 		name: 'Home',
 		component: Home,
 		meta: {
@@ -120,6 +120,7 @@ const routes = [
 
 const router = new VueRouter({
 	mode: 'history',
+	base: location.base,
 	routes,
 	scrollBehavior() {
 		return { x: 0, y: 0 }
diff --git a/src/utils/api.js b/src/utils/api.js
index 66bc08e..0efcec4 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,5 +1,5 @@
 export function fetchData(key, data = {}, method = 'GET') {
-	const url = new URL(`${window.location.origin}/api/${key}`)
+	const url = new URL(`${window.location.origin}${location.base}api/${key}`)
 
 	Object.keys(data).forEach(key => {
 		url.searchParams.append(key, data[key])
@@ -14,7 +14,7 @@ export function fetchData(key, data = {}, method = 'GET') {
 }
 
 export function sendToServer(key, data) {
-	const url = new URL(`${window.location.origin}/api/${key}`)
+	const url = new URL(`${window.location.origin}${location.base}api/${key}`)
 
 	Object.keys(data).forEach(key => {
 		url.searchParams.append(key, data[key])
@@ -26,7 +26,7 @@ export function sendToServer(key, data) {
 }
 
 export function postToServer(endpoint, data) {
-	const url = new URL(`${window.location.origin}/api/${endpoint}`)
+	const url = new URL(`${window.location.origin}${location.base}api/${endpoint}`)
 
 	return fetch(url, {
 		body: JSON.stringify(data),
diff --git a/src/utils/socket.js b/src/utils/socket.js
index 7f56ce6..4e245c4 100644
--- a/src/utils/socket.js
+++ b/src/utils/socket.js
@@ -34,4 +34,4 @@ class CustomSocket extends WebSocket {
 	}
 }
 
-export const socket = new CustomSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/')
+export const socket = new CustomSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + location.base)