Merge branch 'development' into fix/ip-address-port-validation

package.json

@@ -2,7 +2,7 @@
   "name": "pi-hole_web",
   "version": "1.0.0",
   "private": true,
-  "homepage": "/admin",
+  "homepage": ".",
   "devDependencies": {
     "@types/chart.js": "^2.7.42",
     "@types/enzyme": "^3.1.15",

src/components/settings/__tests__/DHCPInfo.test.tsx

@@ -16,7 +16,7 @@ import { WithNamespaces } from "react-i18next";
 
 const tick = global.tick;
 
-const endpoint = "/admin/api/settings/dhcp";
+const endpoint = "/api/settings/dhcp";
 const fakeData = {
   active: true,
   ip_start: "192.168.1.50",

src/index.tsx

@@ -19,6 +19,7 @@ import "./scss/style.css";
 import Full from "./containers/Full";
 import api from "./util/api";
 import { setupI18n } from "./util/i18n";
+import { getBasePath } from "./util";
 
 // Before rendering anything, check if there is a session cookie.
 // Note: the user could have an old session, so the first API call
@@ -28,7 +29,7 @@ api.loggedIn = document.cookie.includes("user_id=");
 setupI18n();
 
 ReactDOM.render(
-  <BrowserRouter basename={process.env.PUBLIC_URL}>
+  <BrowserRouter basename={getBasePath()}>
     <Switch>
       <Route path="/" name="Home" component={Full} />
     </Switch>

src/util/http.tsx

@@ -155,7 +155,7 @@ const urlFor = (endpoint: string): string => {
   if (config.fakeAPI) {
     apiLocation = process.env.PUBLIC_URL + "/fakeAPI";
   } else {
-    apiLocation = "/admin/api";
+    apiLocation = process.env.PUBLIC_URL + "/api";
   }
 
   return apiLocation + "/" + endpoint;

src/util/index.tsx

@@ -14,12 +14,29 @@ import { TimeRange } from "../components/common/context/TimeRangeContext";
  * Pad a two digit number
  *
  * @param num the number
- * @returns {string} a padding number string
+ * @returns A padding number string
  */
-export const padNumber = (num: number) => {
+export const padNumber = (num: number): string => {
   return ("00" + num).substr(-2, 2);
 };
 
+/**
+ * Get the base path of the web interface. The API will inject a base element
+ * for this purpose, but if the web interface is not hosted by the API, it will
+ * fall back to the public URL set by Create React App.
+ *
+ * @returns The base path to use
+ */
+export const getBasePath = (): string => {
+  const baseElement = document.getElementsByTagName("base")[0];
+
+  if (baseElement) {
+    return new URL(baseElement.href).pathname;
+  } else {
+    return process.env.PUBLIC_URL;
+  }
+};
+
 /**
  * Dynamically calculate a time interval so there are always 144 data points
  * (144 so that every point represents 10 minutes when the range is 24 hours)