From ffae92d233caea465fb924de37e462b445bd7497 Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Sun, 30 Mar 2025 20:52:04 -0400
Subject: [PATCH 1/3] Adding connection failure warning

---
 .../PageComponents/Connect/HTTP.tsx           | 57 +++++++++++++++----
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx
index 092b79bfc..b50dbcf56 100644
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@@ -11,6 +11,7 @@ import { MeshDevice } from "@meshtastic/core";
 import { TransportHTTP } from "@meshtastic/transport-http";
 import { useState } from "react";
 import { useForm, useController } from "react-hook-form";
+import { AlertTriangle } from "lucide-react";
 
 interface FormData {
   ip: string;
@@ -39,23 +40,33 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
   } = useController({ name: "tls", control });
 
   const [connectionInProgress, setConnectionInProgress] = useState(false);
+  const [connectionError, setConnectionError] = useState<{ host: string; secure: boolean } | null>(null);
 
   const onSubmit = handleSubmit(async (data) => {
     setConnectionInProgress(true);
-    const id = randId();
-    const device = addDevice(id);
-    const transport = await TransportHTTP.create(data.ip, data.tls);
-    const connection = new MeshDevice(transport, id);
-    connection.configure();
-    setSelectedDevice(id);
-    device.addConnection(connection);
-    subscribeAll(device, connection);
-    closeDialog();
+    setConnectionError(null);
+    
+    try {
+      const id = randId();      
+      const transport = await TransportHTTP.create(data.ip, data.tls);
+      const device = addDevice(id);
+      const connection = new MeshDevice(transport, id);
+      connection.configure();
+      setSelectedDevice(id);
+      device.addConnection(connection);
+      subscribeAll(device, connection);
+      closeDialog();
+    } catch (error) {
+      console.error("Connection error:", error);
+      // Capture all connection errors regardless of type
+      setConnectionError({ host: data.ip, secure: data.tls });
+      setConnectionInProgress(false);
+    }
   });
 
   return (
     <form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
-      <div className="flex h-48 flex-col gap-2">
+      <div className="flex flex-col gap-2" style={{ minHeight: "12rem" }}>
         <div>
           <Label>IP Address/Hostname</Label>
           <Input
@@ -74,8 +85,32 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
             {...register("tls")}
           />
           <Label>Use HTTPS</Label>
-
         </div>
+
+        {connectionError && (
+          <div className="mt-4 p-3 bg-amber-100 dark:bg-amber-900 rounded-md border border-amber-300 dark:border-amber-700">
+            <div className="flex gap-2 items-start">
+              <AlertTriangle className="text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" size={20} />
+              <div>
+                <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
+                  Connection Failed
+                </p>
+                <p className="text-xs text-amber-700 dark:text-amber-400 mt-1">
+                  Could not connect to the device. If using HTTPS, you may need to accept a self-signed certificate first. Please open{" "}
+                  <a
+                    href={`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline font-medium"
+                  >
+                    {`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
+                  </a>
+                  {" "}in a new tab, accept any certificate warnings if prompted, then return here to try connecting again.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
       <Button
         type="submit"

From 9948701127eb0ef49685c591af4792eb6c836903 Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Sun, 30 Mar 2025 21:01:25 -0400
Subject: [PATCH 2/3] Cleanup and add link to official docs

---
 .../PageComponents/Connect/HTTP.tsx           | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx
index b50dbcf56..8d8e3e2de 100644
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@@ -88,15 +88,16 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
         </div>
 
         {connectionError && (
-          <div className="mt-4 p-3 bg-amber-100 dark:bg-amber-900 rounded-md border border-amber-300 dark:border-amber-700">
+          <div className="mt-2 mb-2 p-3 rounded-md bg-amber-100 border border-amber-300 dark:bg-amber-900 dark:border-amber-700">
             <div className="flex gap-2 items-start">
-              <AlertTriangle className="text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" size={20} />
+              <AlertTriangle className="shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" size={20} />
               <div>
                 <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
                   Connection Failed
                 </p>
-                <p className="text-xs text-amber-700 dark:text-amber-400 mt-1">
-                  Could not connect to the device. If using HTTPS, you may need to accept a self-signed certificate first. Please open{" "}
+                <p className="text-xs mt-1 text-amber-700 dark:text-amber-400">
+                  Could not connect to the device. {connectionError.secure && "If using HTTPS, you may need to accept a self-signed certificate first. "}
+                  Please open{" "}
                   <a
                     href={`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
                     target="_blank"
@@ -104,8 +105,16 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
                     className="underline font-medium"
                   >
                     {`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
+                  </a>{" "}
+                  in a new tab{connectionError.secure ? ", accept any TLS warnings if prompted, then try again" : ""}.{" "}
+                  <a
+                    href="https://meshtastic.org/docs/software/web-client/#http"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline font-medium"
+                  >
+                    Learn more
                   </a>
-                  {" "}in a new tab, accept any certificate warnings if prompted, then return here to try connecting again.
                 </p>
               </div>
             </div>

From 0faafe8bc4e7b0c02b63108d78da1b1cb93157fb Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Sun, 30 Mar 2025 21:43:25 -0400
Subject: [PATCH 3/3] Using existing Link component and standardizing colors

---
 .../PageComponents/Connect/HTTP.tsx           | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx
index 8d8e3e2de..19ca08979 100644
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@@ -1,6 +1,7 @@
 import type { TabElementProps } from "@components/Dialog/NewDeviceDialog.tsx";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
+import { Link } from "@components/UI/Typography/Link.tsx";
 import { Label } from "@components/UI/Label.tsx";
 import { Switch } from "@components/UI/Switch.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
@@ -88,33 +89,29 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
         </div>
 
         {connectionError && (
-          <div className="mt-2 mb-2 p-3 rounded-md bg-amber-100 border border-amber-300 dark:bg-amber-900 dark:border-amber-700">
+          <div className="mt-2 mb-2 p-3 rounded-md bg-amber-100 border border-amber-300 dark:bg-amber-100 dark:border-amber-300">
             <div className="flex gap-2 items-start">
-              <AlertTriangle className="shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" size={20} />
+              <AlertTriangle className="shrink-0 mt-0.5 text-amber-600 dark:text-amber-600" size={20} />
               <div>
-                <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
+                <p className="text-sm font-medium text-amber-800 dark:text-amber-800">
                   Connection Failed
                 </p>
-                <p className="text-xs mt-1 text-amber-700 dark:text-amber-400">
+                <p className="text-xs mt-1 text-amber-700 dark:text-amber-700">
                   Could not connect to the device. {connectionError.secure && "If using HTTPS, you may need to accept a self-signed certificate first. "}
                   Please open{" "}
-                  <a
+                  <Link
                     href={`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline font-medium"
+                    className="underline font-medium text-amber-800 dark:text-amber-800"
                   >
                     {`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
-                  </a>{" "}
+                  </Link>{" "}
                   in a new tab{connectionError.secure ? ", accept any TLS warnings if prompted, then try again" : ""}.{" "}
-                  <a
+                  <Link
                     href="https://meshtastic.org/docs/software/web-client/#http"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline font-medium"
+                    className="underline font-medium text-amber-800 dark:text-amber-800"
                   >
                     Learn more
-                  </a>
+                  </Link>
                 </p>
               </div>
             </div>