replaces all hostname:port usages with authority variable

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { Navbar, Form, Offcanvas, Container } from "react-bootstrap";
-import { hostname, port, socket } from "./socket";
+import { authority, socket } from "./socket";
 import "./App.css";
 import {
   Notifications,
@@ -68,12 +68,12 @@ const App = () => {
 
   useEffect(() => {
     // Allow the user to add a custom css file
-    fetch(`http://${hostname}:${port}/custom.css`)
+    fetch(`http://${authority}/custom.css`)
       .then((response) => {
         if (response.ok) {
           // If the file exists, create a link element for the custom CSS
           const link = document.createElement("link");
-          link.href = `http://${hostname}:${port}/custom.css`;
+          link.href = `http://${authority}/custom.css`;
           link.type = "text/css";
           link.rel = "stylesheet";
           document.head.appendChild(link);
@@ -83,7 +83,7 @@ const App = () => {
 
     socket.on("connect", () => {
       // Fetch data from the API when the client connects
-      fetch(`http://${hostname}:${port}/service-properties`)
+      fetch(`http://${authority}/service-properties`)
         .then((response) => response.json())
         .then((data: State) => {
           dispatch({ type: "SET_DATA", data });
@@ -91,7 +91,7 @@ const App = () => {
 
           document.title = data.name; // Setting browser tab title
         });
-      fetch(`http://${hostname}:${port}/web-settings`)
+      fetch(`http://${authority}/web-settings`)
         .then((response) => response.json())
         .then((data: Record<string, WebSetting>) => setWebSettings(data));
       setConnectionStatus("connected");