Merge pull request #954 from mairas/fix/clear-token-button

Fix Clear Token button not clearing the auth token

Author: mairas

frontend/src/pages/SignalK/SignalKSettingsPanel.tsx

@@ -12,11 +12,16 @@ export function SignalKSettingsPanel(): JSX.Element {
   const [config, setConfig] = useState({});
   const [errorText, setErrorText] = useState("");
 
-  async function handleSave(): Promise<void> {
+  async function handleSave(configOverride?: JsonObject): Promise<void> {
     try {
-      await saveConfigData(CONFIG_PATH, JSON.stringify(config), (e: Error) => {
-        setErrorText(e.message);
-      });
+      const configToSave = configOverride ?? config;
+      await saveConfigData(
+        CONFIG_PATH,
+        JSON.stringify(configToSave),
+        (e: Error) => {
+          setErrorText(e.message);
+        },
+      );
     } catch (e) {
       setErrorText(e.message);
     }
@@ -51,18 +56,18 @@ export function SignalKSettingsPanel(): JSX.Element {
         <SKConnectionSettings
           config={config}
           setConfig={setConfig}
-          setRequestSave={handleSave}
+          onSave={handleSave}
         />
         <SKSSLSettings
           config={config}
           setConfig={setConfig}
-          setRequestSave={handleSave}
+          onSave={handleSave}
           onConfigUpdate={updateConfig}
         />
         <SKAuthToken
           config={config}
           setConfig={setConfig}
-          setRequestSave={handleSave}
+          onSave={handleSave}
         />
       </div>
     </>
@@ -72,14 +77,15 @@ export function SignalKSettingsPanel(): JSX.Element {
 interface SKConnectionSettingsProps {
   config: JsonObject;
   setConfig: (cfg: JsonObject) => void;
-  setRequestSave: (b: boolean) => void;
+  onSave: (configOverride?: JsonObject) => Promise<void>;
 }
 
 function SKConnectionSettings({
   config,
   setConfig,
-  setRequestSave,
+  onSave,
 }: SKConnectionSettingsProps): JSX.Element {
+  const [saving, setSaving] = useState(false);
   const id = useId();
 
   const mdns = config.use_mdns === true;
@@ -151,12 +157,15 @@ function SKConnectionSettings({
             <button
               type="submit"
               className="btn btn-primary"
-              onClick={(e) => {
+              disabled={saving}
+              onClick={async (e) => {
                 e.preventDefault();
-                setRequestSave(true);
+                setSaving(true);
+                await onSave();
+                setSaving(false);
               }}
             >
-              Save
+              {saving ? "Saving..." : "Save"}
             </button>
           </form>
         </div>
@@ -168,17 +177,22 @@ function SKConnectionSettings({
 interface SKAuthTokenProps {
   config: JsonObject;
   setConfig: (cfg: JsonObject) => void;
-  setRequestSave: (b: boolean) => void;
+  onSave: (configOverride?: JsonObject) => Promise<void>;
 }
 
 function SKAuthToken({
   config,
   setConfig,
-  setRequestSave,
+  onSave,
 }: SKAuthTokenProps): JSX.Element {
-  function handleClearToken(): void {
-    setConfig({ ...config, token: "" });
-    setRequestSave(true);
+  const [clearing, setClearing] = useState(false);
+
+  async function handleClearToken(): Promise<void> {
+    const newConfig = { ...config, token: "" };
+    setConfig(newConfig);
+    setClearing(true);
+    await onSave(newConfig);
+    setClearing(false);
   }
 
   return (
@@ -187,8 +201,12 @@ function SKAuthToken({
         Click the button to clear the Signal K authentication token. This causes
         the device to request re-authorization from the Signal K server.
       </p>
-      <button className="btn btn-primary" onClick={handleClearToken}>
-        Clear Token
+      <button
+        className="btn btn-primary"
+        disabled={clearing}
+        onClick={handleClearToken}
+      >
+        {clearing ? "Clearing..." : "Clear Token"}
       </button>
     </Card>
   );
@@ -197,16 +215,17 @@ function SKAuthToken({
 interface SKSSLSettingsProps {
   config: JsonObject;
   setConfig: (cfg: JsonObject) => void;
-  setRequestSave: (b: boolean) => void;
+  onSave: (configOverride?: JsonObject) => Promise<void>;
   onConfigUpdate: () => Promise<void>;
 }
 
 function SKSSLSettings({
   config,
   setConfig,
-  setRequestSave,
+  onSave,
   onConfigUpdate,
 }: SKSSLSettingsProps): JSX.Element {
+  const [saving, setSaving] = useState(false);
   const [resetting, setResetting] = useState(false);
   const id = useId();
 
@@ -313,12 +332,15 @@ function SKSSLSettings({
           <button
             type="submit"
             className="btn btn-primary"
-            onClick={(e) => {
+            disabled={saving}
+            onClick={async (e) => {
               e.preventDefault();
-              setRequestSave(true);
+              setSaving(true);
+              await onSave();
+              setSaving(false);
             }}
           >
-            Save
+            {saving ? "Saving..." : "Save"}
           </button>
         </form>
       </div>