feat(ui): enhance DHCP lease management with renewal confirmation and improved dialog

This commit is contained in:
Adam Shiervani 2025-08-11 17:10:53 +02:00
parent 47c47b0501
commit 750d21ad81
3 changed files with 41 additions and 18 deletions

View File

@ -97,6 +97,7 @@ export function ConfirmDialog({
)}
<Button
size="SM"
type="button"
theme={buttonTheme}
text={isConfirming ? `${confirmText}...` : confirmText}
onClick={onConfirm}

View File

@ -29,10 +29,24 @@ 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">
<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">
{networkState?.dhcp_lease?.ip && (
@ -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>

View File

@ -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)}
/>