mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-12 16:06:38 +00:00
regenerate secret for wireguard
This commit is contained in:
Pallavi Kumari
@@ -21,6 +21,9 @@ import { InfoSection, InfoSectionContent, InfoSections, InfoSectionTitle } from
|
||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||
import { PickSiteDefaultsResponse } from "@server/routers/site";
|
||||
import { useSiteContext } from "@app/hooks/useSiteContext";
|
||||
import CopyTextBox from "@app/components/CopyTextBox";
|
||||
import { QRCodeCanvas } from "qrcode.react";
|
||||
import { generateKeypair } from "../wireguardConfig";
|
||||
|
||||
export default function CredentialsPage() {
|
||||
const { env } = useEnvContext();
|
||||
@@ -31,12 +34,36 @@ export default function CredentialsPage() {
|
||||
const [newtId, setNewtId] = useState("");
|
||||
const [newtSecret, setNewtSecret] = useState("");
|
||||
const { site, updateSite } = useSiteContext();
|
||||
|
||||
const [wgConfig, setWgConfig] = useState("");
|
||||
const [siteDefaults, setSiteDefaults] =
|
||||
useState<PickSiteDefaultsResponse | null>(null);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [publicKey, setPublicKey] = useState("");
|
||||
const [privateKey, setPrivateKey] = useState("");
|
||||
|
||||
const hydrateWireGuardConfig = (
|
||||
privateKey: string,
|
||||
publicKey: string,
|
||||
subnet: string,
|
||||
address: string,
|
||||
endpoint: string,
|
||||
listenPort: string
|
||||
) => {
|
||||
const wgConfig = `[Interface]
|
||||
Address = ${subnet}
|
||||
ListenPort = 51820
|
||||
PrivateKey = ${privateKey}
|
||||
|
||||
[Peer]
|
||||
PublicKey = ${publicKey}
|
||||
AllowedIPs = ${address.split("/")[0]}/32
|
||||
Endpoint = ${endpoint}:${listenPort}
|
||||
PersistentKeepalive = 5`;
|
||||
setWgConfig(wgConfig);
|
||||
};
|
||||
|
||||
|
||||
// Clear credentials when user leaves/reloads
|
||||
useEffect(() => {
|
||||
@@ -49,6 +76,14 @@ export default function CredentialsPage() {
|
||||
}, []);
|
||||
|
||||
const handleRegenerate = async () => {
|
||||
|
||||
const generatedKeypair = generateKeypair();
|
||||
|
||||
const privateKey = generatedKeypair.privateKey;
|
||||
const publicKey = generatedKeypair.publicKey;
|
||||
|
||||
setPrivateKey(privateKey);
|
||||
setPublicKey(publicKey);
|
||||
try {
|
||||
setLoading(true);
|
||||
await api
|
||||
@@ -64,6 +99,15 @@ export default function CredentialsPage() {
|
||||
setNewtId(newtId);
|
||||
setNewtSecret(newtSecret);
|
||||
|
||||
hydrateWireGuardConfig(
|
||||
privateKey,
|
||||
data.publicKey,
|
||||
data.subnet,
|
||||
data.address,
|
||||
data.endpoint,
|
||||
data.listenPort
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
} finally {
|
||||
@@ -74,11 +118,46 @@ export default function CredentialsPage() {
|
||||
const handleSave = async () => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await api.post(`/site/${site?.siteId}/regenerate-secret`, {
|
||||
let payload: any = {};
|
||||
|
||||
if (site?.type === "wireguard") {
|
||||
if (!siteDefaults || !wgConfig) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("siteErrorCreate"),
|
||||
description: t("siteErrorCreateKeyPair")
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
payload = {
|
||||
type: "wireguard",
|
||||
subnet: siteDefaults.subnet,
|
||||
exitNodeId: siteDefaults.exitNodeId,
|
||||
pubKey: publicKey
|
||||
};
|
||||
}
|
||||
if (site?.type === "newt") {
|
||||
if (!siteDefaults) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("siteErrorCreate"),
|
||||
description: t("siteErrorCreateDefaults")
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
payload = {
|
||||
type: "newt",
|
||||
newtId: siteDefaults?.newtId,
|
||||
newtSecret: siteDefaults?.newtSecret,
|
||||
});
|
||||
newtSecret: siteDefaults?.newtSecret
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
await api.post(`/site/${site?.siteId}/regenerate-secret`, payload);
|
||||
|
||||
toast({
|
||||
title: t("credentialsSaved"),
|
||||
@@ -100,6 +179,7 @@ export default function CredentialsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<SettingsSection>
|
||||
@@ -117,73 +197,114 @@ export default function CredentialsPage() {
|
||||
<Button
|
||||
onClick={handleRegenerate}
|
||||
loading={loading}
|
||||
disabled={site.type != "newt"}
|
||||
disabled={site.type === "local"}
|
||||
>
|
||||
{t("regeneratecredentials")}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("siteNewtCredentials")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t(
|
||||
"siteNewtCredentialsDescription"
|
||||
)}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<InfoSections cols={3}>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("newtEndpoint")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<CopyToClipboard
|
||||
text={
|
||||
env.app.dashboardUrl
|
||||
}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("newtId")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<CopyToClipboard
|
||||
text={newtId}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("newtSecretKey")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<CopyToClipboard
|
||||
text={newtSecret}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
</InfoSections>
|
||||
|
||||
|
||||
<Alert variant="neutral" className="mt-4">
|
||||
<InfoIcon className="h-4 w-4" />
|
||||
<AlertTitle className="font-semibold">
|
||||
{t("copyandsavethesecredentials")}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{site.type === "wireguard" && (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("WgConfiguration")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("WgConfigurationDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<div className="flex items-center gap-4">
|
||||
<CopyTextBox text={wgConfig} />
|
||||
<div
|
||||
className={`relative w-fit border rounded-md`}
|
||||
>
|
||||
<div className="bg-white p-6 rounded-md">
|
||||
<QRCodeCanvas
|
||||
value={wgConfig}
|
||||
size={168}
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Alert variant="neutral">
|
||||
<InfoIcon className="h-4 w-4" />
|
||||
<AlertTitle className="font-semibold">
|
||||
{t("siteCredentialsSave")}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
"siteCredentialsSaveDescription"
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
)}
|
||||
{site.type === "newt" && (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("siteNewtCredentials")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t(
|
||||
"copyandsavethesecredentialsdescription"
|
||||
"siteNewtCredentialsDescription"
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<InfoSections cols={3}>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("newtEndpoint")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<CopyToClipboard
|
||||
text={
|
||||
env.app.dashboardUrl
|
||||
}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("newtId")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<CopyToClipboard
|
||||
text={newtId}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("newtSecretKey")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<CopyToClipboard
|
||||
text={newtSecret}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
</InfoSections>
|
||||
|
||||
|
||||
<Alert variant="neutral" className="mt-4">
|
||||
<InfoIcon className="h-4 w-4" />
|
||||
<AlertTitle className="font-semibold">
|
||||
{t("copyandsavethesecredentials")}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
"copyandsavethesecredentialsdescription"
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end mt-6 space-x-2">
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user