From 63d791e3feee3d5a391dcc135453ed99c47f5347 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Fri, 19 Nov 2021 19:52:01 +0100
Subject: [PATCH] Auto-redirect frontend after port change

---
 frontend/src/locale/en/translation.json | 3 +--
 frontend/src/ui/pages/HTTP.tsx          | 9 ++++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index 0914209..b642a8a 100644
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@@ -51,8 +51,7 @@
   },
   "http": {
     "header": "Web server configuration",
-    "server-port": "HTTP server port",
-    "server-port-note": "Note: You must restart strimertul after changing this!",
+    "server-bind": "HTTP server bind",
     "static-content": "Static content",
     "enable-static": "Enable static server",
     "static-root-path": "Static content root path"
diff --git a/frontend/src/ui/pages/HTTP.tsx b/frontend/src/ui/pages/HTTP.tsx
index 675202a..89bbd44 100644
--- a/frontend/src/ui/pages/HTTP.tsx
+++ b/frontend/src/ui/pages/HTTP.tsx
@@ -1,5 +1,5 @@
 import { RouteComponentProps } from '@reach/router';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../lib/react-utils';
@@ -20,7 +20,7 @@ export default function HTTPPage(
     <>
       <h1 className="title is-4">{t('http.header')}</h1>
       <div className="field">
-        <label className="label">{t('http.server-port')}</label>
+        <label className="label">{t('http.server-bind')}</label>
         <p className="control">
           <input
             disabled={busy}
@@ -38,7 +38,6 @@ export default function HTTPPage(
             }
           />
         </p>
-        <p className="help">{t('http.server-port-note')}</p>
       </div>
       <label className="label">{t('http.static-content')}</label>
       <div className="field">
@@ -82,6 +81,10 @@ export default function HTTPPage(
         className="button"
         onClick={() => {
           dispatch(setHTTPConfig(httpConfig));
+          const port = httpConfig.bind.split(':', 2)[1] ?? '4337';
+          if (port !== window.location.port) {
+            window.location.port = port;
+          }
         }}
       >
         {t('actions.save')}