pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-14 00:46:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

move site niceId details to general setting page

Browse Source
This commit is contained in:
Pallavi Kumari
2025-10-30 19:16:20 +05:30
parent ac5fe1486a
commit 66124f09c4
2 changed files with 55 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/SiteInfoCard.tsx
View File

@@ -1,7 +1,6 @@
"use client";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Check, InfoIcon, Pencil, X } from "lucide-react";
import { useSiteContext } from "@app/hooks/useSiteContext";
import {
InfoSection,
@@ -11,12 +10,7 @@ import {
} from "@app/components/InfoSection";
import { useTranslations } from "next-intl";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import { useState } from "react";
import { useToast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useRouter, usePathname } from "next/navigation";
type SiteInfoCardProps = {};
@@ -24,15 +18,6 @@ export default function SiteInfoCard({ }: SiteInfoCardProps) {
const { site, updateSite } = useSiteContext();
const t = useTranslations();
const { env } = useEnvContext();
const api = createApiClient(useEnvContext());
const router = useRouter();
const pathname = usePathname();
const [isEditing, setIsEditing] = useState(false);
const [niceId, setNiceId] = useState(site.niceId);
const [tempNiceId, setTempNiceId] = useState(site.niceId);
const [isLoading, setIsLoading] = useState(false);
const { toast } = useToast();
const getConnectionTypeString = (type: string) => {
if (type === "newt") {
@@ -46,130 +31,11 @@ export default function SiteInfoCard({ }: SiteInfoCardProps) {
}
};
const handleEdit = () => {
setTempNiceId(niceId);
setIsEditing(true);
};
const handleCancel = () => {
setTempNiceId(niceId);
setIsEditing(false);
};
const handleSave = async () => {
if (tempNiceId.trim() === "") {
toast({
variant: "destructive",
title: t("error"),
description: t("niceIdCannotBeEmpty")
});
return;
}
if (tempNiceId === niceId) {
setIsEditing(false);
return;
}
setIsLoading(true);
try {
const response = await api.post(`/site/${site.siteId}`, {
niceId: tempNiceId.trim()
});
setNiceId(tempNiceId.trim());
setIsEditing(false);
updateSite({
niceId: tempNiceId.trim()
});
// update the URL to reflect the new niceId
const newPath = pathname.replace(`/sites/${niceId}`, `/sites/${tempNiceId.trim()}`);
router.replace(newPath);
toast({
title: t("niceIdUpdated"),
description: t("niceIdUpdatedSuccessfully")
});
} catch (e: any) {
toast({
variant: "destructive",
title: t("niceIdUpdateError"),
description: formatAxiosError(
e,
t("niceIdUpdateErrorDescription")
)
});
} finally {
setIsLoading(false);
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter") {
handleSave();
} else if (e.key === "Escape") {
handleCancel();
}
};
return (
<Alert>
<AlertDescription>
<InfoSections cols={env.flags.enableClients ? 4 : 3}>
<InfoSection>
<InfoSectionTitle>
{t("niceId")}
</InfoSectionTitle>
<InfoSectionContent>
<div className="flex items-center gap-2">
{isEditing ? (
<>
<Input
value={tempNiceId}
onChange={(e) => setTempNiceId(e.target.value)}
onKeyDown={handleKeyDown}
disabled={isLoading}
className="flex-1"
autoFocus
/>
<Button
size="icon"
variant="ghost"
onClick={handleSave}
disabled={isLoading}
className="h-8 w-8"
>
<Check className="h-4 w-4" />
</Button>
<Button
size="icon"
variant="ghost"
onClick={handleCancel}
disabled={isLoading}
className="h-8 w-8"
>
<X className="h-4 w-4" />
</Button>
</>
) : (
<>
<span>{niceId}</span>
<Button
size="icon"
variant="ghost"
onClick={handleEdit}
className="h-8 w-8"
>
<Pencil className="h-4 w-4" />
</Button>
</>
)}
</div>
</InfoSectionContent>
</InfoSection>
<InfoSections cols={env.flags.enableClients ? 3 : 2}>
{(site.type == "newt" || site.type == "wireguard") && (
<>
<InfoSection>