From 750d21ad8139e6a4a909e125b0145fa59457b739 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Mon, 11 Aug 2025 17:10:53 +0200
Subject: [PATCH] feat(ui): enhance DHCP lease management with renewal
 confirmation and improved dialog

---
 ui/src/components/ConfirmDialog.tsx           |  1 +
 ui/src/components/DhcpLeaseCard.tsx           | 31 ++++++++++---------
 .../routes/devices.$id.settings.network.tsx   | 27 +++++++++++++---
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/ConfirmDialog.tsx b/ui/src/components/ConfirmDialog.tsx
index 04dbd76..d302ead 100644
--- a/ui/src/components/ConfirmDialog.tsx
+++ b/ui/src/components/ConfirmDialog.tsx
@@ -97,6 +97,7 @@ export function ConfirmDialog({
               )}
               <Button
                 size="SM"
+                type="button"
                 theme={buttonTheme}
                 text={isConfirming ? `${confirmText}...` : confirmText}
                 onClick={onConfirm}
diff --git a/ui/src/components/DhcpLeaseCard.tsx b/ui/src/components/DhcpLeaseCard.tsx
index 8c2a861..bf20f64 100644
--- a/ui/src/components/DhcpLeaseCard.tsx
+++ b/ui/src/components/DhcpLeaseCard.tsx
@@ -29,9 +29,23 @@ export default function DhcpLeaseCard({
     <GridCard>
       <div className="animate-fadeIn p-4 text-black opacity-0 animation-duration-500 dark:text-white">
         <div className="space-y-3">
-          <h3 className="text-base font-bold text-slate-900 dark:text-white">
-            DHCP Lease Information
-          </h3>
+          <div className="flex items-center justify-between">
+            <h3 className="text-base font-bold text-slate-900 dark:text-white">
+              DHCP Lease Information
+            </h3>
+
+            <div>
+              <Button
+                size="XS"
+                theme="light"
+                type="button"
+                className="text-red-500"
+                text="Renew DHCP Lease"
+                LeadingIcon={LuRefreshCcw}
+                onClick={() => setShowRenewLeaseConfirm(true)}
+              />
+            </div>
+          </div>
 
           <div className="flex gap-x-6 gap-y-2">
             <div className="flex-1 space-y-2">
@@ -209,17 +223,6 @@ export default function DhcpLeaseCard({
               )}
             </div>
           </div>
-
-          <div>
-            <Button
-              size="SM"
-              theme="light"
-              className="text-red-500"
-              text="Renew DHCP Lease"
-              LeadingIcon={LuRefreshCcw}
-              onClick={() => setShowRenewLeaseConfirm(true)}
-            />
-          </div>
         </div>
       </div>
     </GridCard>
diff --git a/ui/src/routes/devices.$id.settings.network.tsx b/ui/src/routes/devices.$id.settings.network.tsx
index c0986ae..ca5159c 100644
--- a/ui/src/routes/devices.$id.settings.network.tsx
+++ b/ui/src/routes/devices.$id.settings.network.tsx
@@ -206,6 +206,16 @@ export default function SettingsNetworkRoute() {
   const ipv4mode = watch("ipv4_mode");
   const ipv6mode = watch("ipv6_mode");
 
+  const onDhcpLeaseRenew = () => {
+    send("renewDHCPLease", {}, resp => {
+      if ("error" in resp) {
+        notifications.error("Failed to renew lease: " + resp.error.message);
+      } else {
+        notifications.success("DHCP lease renewed");
+      }
+    });
+  };
+
   return (
     <>
       <FormProvider {...formMethods}>
@@ -496,15 +506,24 @@ export default function SettingsNetworkRoute() {
           </div>
         }
       />
-
       <ConfirmDialog
         open={showRenewLeaseConfirm}
-        title="Renew DHCP lease"
+        title="Renew DHCP Lease"
         variant="warning"
-        confirmText="Renew lease"
-        description="The device may briefly disconnect while requesting a new lease."
+        confirmText="Renew Lease"
+        description={
+          <p>
+            This will request a new IP address from your router. The device may briefly
+            disconnect during the renewal process.
+            <br />
+            <br />
+            If you receive a new IP address,{" "}
+            <strong>you may need to reconnect using the new address</strong>.
+          </p>
+        }
         onConfirm={() => {
           setShowRenewLeaseConfirm(false);
+          onDhcpLeaseRenew();
         }}
         onClose={() => setShowRenewLeaseConfirm(false)}
       />