pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-05 18:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

seperate credentials rekeying in modal for reuse

Browse Source
This commit is contained in:
Pallavi Kumari
2025-11-07 23:30:24 +05:30
parent 90e72c6aca
commit 2b8204fdc8
5 changed files with 391 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
messages/en-US.json
View File

@@ -2106,5 +2106,11 @@
"credentialsSaved" : "Credentials Saved", "credentialsSaved" : "Credentials Saved",
"credentialsSavedDescription": "Credentials have been regenerated and saved successfully.", "credentialsSavedDescription": "Credentials have been regenerated and saved successfully.",
"credentialsSaveError": "Credentials Save Error", "credentialsSaveError": "Credentials Save Error",
"credentialsSaveErrorDescription": "An error occurred while regenerating and saving the credentials." "credentialsSaveErrorDescription": "An error occurred while regenerating and saving the credentials.",
"regenerateCredentialsWarning": "Regenerating credentials will invalidate the previous ones. Make sure to update any configurations that use these credentials.",
"confirm": "Confirm",
"regenerateCredentialsConfirmation": "Are you sure you want to regenerate the credentials?",
"endpoint": "Endpoint",
"id": "Id",
"SecretKey": "Secret Key"
} }

164
src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useState } from "react";
import { import {
SettingsContainer, SettingsContainer,
SettingsSection, SettingsSection,
@@ -10,9 +10,6 @@ import {
SettingsSectionTitle SettingsSectionTitle
} from "@app/components/Settings"; } from "@app/components/Settings";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { InfoIcon } from "lucide-react";
import CopyTextBox from "@app/components/CopyTextBox";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
@@ -24,6 +21,7 @@ import {
QuickStartRemoteExitNodeResponse QuickStartRemoteExitNodeResponse
} from "@server/routers/remoteExitNode/types"; } from "@server/routers/remoteExitNode/types";
import { useRemoteExitNodeContext } from "@app/hooks/useRemoteExitNodeContext"; import { useRemoteExitNodeContext } from "@app/hooks/useRemoteExitNodeContext";
import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
export default function CredentialsPage() { export default function CredentialsPage() {
const { env } = useEnvContext(); const { env } = useEnvContext();
@@ -31,79 +29,44 @@ export default function CredentialsPage() {
const { orgId } = useParams(); const { orgId } = useParams();
const router = useRouter(); const router = useRouter();
const t = useTranslations(); const t = useTranslations();
const { remoteExitNode, updateRemoteExitNode } = useRemoteExitNodeContext(); const { remoteExitNode } = useRemoteExitNodeContext();
const [credentials, setCredentials] = const [modalOpen, setModalOpen] = useState(false);
useState<PickRemoteExitNodeDefaultsResponse | null>(null); const [credentials, setCredentials] = useState<PickRemoteExitNodeDefaultsResponse | null>(null);
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
// Clear credentials when user leaves/reloads const handleConfirmRegenerate = async () => {
useEffect(() => {
const clearCreds = () => setCredentials(null); const response = await api.get<AxiosResponse<PickRemoteExitNodeDefaultsResponse>>(
window.addEventListener("beforeunload", clearCreds); `/org/${orgId}/pick-remote-exit-node-defaults`
return () => window.removeEventListener("beforeunload", clearCreds); );
}, []);
const handleRegenerate = async () => { const data = response.data.data;
try { setCredentials(data);
setLoading(true);
const response = await api.get<
AxiosResponse<PickRemoteExitNodeDefaultsResponse>
>(`/org/${orgId}/pick-remote-exit-node-defaults`);
setCredentials(response.data.data); await api.put<AxiosResponse<QuickStartRemoteExitNodeResponse>>(
toast({ `/org/${orgId}/reGenerate-remote-exit-node-secret`,
title: t("success"), {
description: t("Credentials generated successfully."), remoteExitNodeId: remoteExitNode.remoteExitNodeId,
}); secret: data.secret,
} catch (error) { }
toast({ );
title: t("error"),
description: formatAxiosError( toast({
error, title: t("credentialsSaved"),
t("Failed to generate credentials") description: t("credentialsSavedDescription")
), });
variant: "destructive",
}); router.refresh();
} finally {
setLoading(false);
}
}; };
const handleSave = async () => { const getCredentials = () => {
if (!credentials) return; if (credentials) {
return {
try { Id: remoteExitNode.remoteExitNodeId,
setSaving(true); Secret: credentials.secret
};
const response = await api.put<
AxiosResponse<QuickStartRemoteExitNodeResponse>
>(`/org/${orgId}/reGenerate-remote-exit-node-secret`, {
remoteExitNodeId: remoteExitNode.remoteExitNodeId,
secret: credentials.secret,
});
toast({
title: t("success"),
description: t("Credentials saved successfully."),
});
// For security, clear them from UI
setCredentials(null);
} catch (error) {
toast({
title: t("error"),
description: formatAxiosError(
error,
t("Failed to save credentials")
),
variant: "destructive",
});
} finally {
setSaving(false);
} }
return undefined;
}; };
return ( return (
@@ -114,58 +77,25 @@ export default function CredentialsPage() {
{t("generatedcredentials")} {t("generatedcredentials")}
</SettingsSectionTitle> </SettingsSectionTitle>
<SettingsSectionDescription> <SettingsSectionDescription>
{t("regenerateClientCredentials")} {t("regenerateCredentials")}
</SettingsSectionDescription> </SettingsSectionDescription>
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
{!credentials ? ( <Button onClick={() => setModalOpen(true)}>
<Button {t("regeneratecredentials")}
onClick={handleRegenerate} </Button>
loading={loading}
disabled={loading}
>
{t("regeneratecredentials")}
</Button>
) : (
<>
<CopyTextBox
text={`managed:
id: "${remoteExitNode.remoteExitNodeId}"
secret: "${credentials.secret}"`}
/>
<Alert variant="neutral" className="mt-4">
<InfoIcon className="h-4 w-4" />
<AlertTitle className="font-semibold">
{t("copyandsavethesecredentials")}
</AlertTitle>
<AlertDescription>
{t(
"copyandsavethesecredentialsdescription"
)}
</AlertDescription>
</Alert>
<div className="flex justify-end mt-6 space-x-2">
<Button
variant="outline"
onClick={() => setCredentials(null)}
>
{t("cancel")}
</Button>
<Button
onClick={handleSave}
loading={saving}
disabled={saving}
>
{t("savecredentials")}
</Button>
</div>
</>
)}
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
<RegenerateCredentialsModal
open={modalOpen}
onOpenChange={setModalOpen}
type="remote-exit-node"
onConfirmRegenerate={handleConfirmRegenerate}
dashboardUrl={env.app.dashboardUrl}
credentials={getCredentials()}
/>
</SettingsContainer> </SettingsContainer>
); );
} }

189
src/app/[orgId]/settings/clients/[clientId]/credentials/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useState } from "react";
import { import {
SettingsContainer, SettingsContainer,
SettingsSection, SettingsSection,
@@ -10,17 +10,14 @@ import {
SettingsSectionTitle SettingsSectionTitle
} from "@app/components/Settings"; } from "@app/components/Settings";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { InfoIcon } from "lucide-react";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { InfoSection, InfoSectionContent, InfoSections, InfoSectionTitle } from "@app/components/InfoSection";
import CopyToClipboard from "@app/components/CopyToClipboard";
import { PickClientDefaultsResponse } from "@server/routers/client"; import { PickClientDefaultsResponse } from "@server/routers/client";
import { useClientContext } from "@app/hooks/useClientContext"; import { useClientContext } from "@app/hooks/useClientContext";
import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
export default function CredentialsPage() { export default function CredentialsPage() {
const { env } = useEnvContext(); const { env } = useEnvContext();
@@ -28,55 +25,21 @@ export default function CredentialsPage() {
const { orgId } = useParams(); const { orgId } = useParams();
const router = useRouter(); const router = useRouter();
const t = useTranslations(); const t = useTranslations();
const [olmId, setOlmId] = useState(""); const { client } = useClientContext();
const [olmSecret, setOlmSecret] = useState("");
const { client, updateClient } = useClientContext(); const [modalOpen, setModalOpen] = useState(false);
const [clientDefaults, setClientDefaults] = useState<PickClientDefaultsResponse | null>(null);
const [clientDefaults, setClientDefaults] = const handleConfirmRegenerate = async () => {
useState<PickClientDefaultsResponse | null>(null);
const [loading, setLoading] = useState(false); const res = await api.get(`/org/${orgId}/pick-client-defaults`);
const [saving, setSaving] = useState(false); if (res && res.status === 200) {
const data = res.data.data;
setClientDefaults(data);
// Clear credentials when user leaves/reloads
useEffect(() => {
const clearCreds = () => {
setOlmId("");
setOlmSecret("");
};
window.addEventListener("beforeunload", clearCreds);
return () => window.removeEventListener("beforeunload", clearCreds);
}, []);
const handleRegenerate = async () => {
try {
setLoading(true);
await api
.get(`/org/${orgId}/pick-client-defaults`)
.then((res) => {
if (res && res.status === 200) {
const data = res.data.data;
setClientDefaults(data);
const olmId = data.olmId;
const olmSecret = data.olmSecret;
setOlmId(olmId);
setOlmSecret(olmSecret);
}
});
} finally {
setLoading(false);
}
};
const handleSave = async () => {
setLoading(true);
try {
await api.post(`/client/${client?.clientId}/regenerate-secret`, { await api.post(`/client/${client?.clientId}/regenerate-secret`, {
olmId: clientDefaults?.olmId, olmId: data.olmId,
secret: clientDefaults?.olmSecret, secret: data.olmSecret,
}); });
toast({ toast({
@@ -85,20 +48,19 @@ export default function CredentialsPage() {
}); });
router.refresh(); router.refresh();
} catch (e) {
toast({
variant: "destructive",
title: t("credentialsSaveError"),
description: formatAxiosError(
e,
t("credentialsSaveErrorDescription")
)
});
} finally {
setLoading(false);
} }
}; };
const getCredentials = () => {
if (clientDefaults) {
return {
Id: clientDefaults.olmId,
Secret: clientDefaults.olmSecret
};
}
return undefined;
};
return ( return (
<SettingsContainer> <SettingsContainer>
<SettingsSection> <SettingsSection>
@@ -112,97 +74,20 @@ export default function CredentialsPage() {
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
{!clientDefaults ? ( <Button onClick={() => setModalOpen(true)}>
<Button {t("regeneratecredentials")}
onClick={handleRegenerate} </Button>
loading={loading}
disabled={loading}
>
{t("regeneratecredentials")}
</Button>
) : (
<>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("clientOlmCredentials")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("clientOlmCredentialsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<InfoSections cols={3}>
<InfoSection>
<InfoSectionTitle>
{t("olmEndpoint")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard
text={
env.app.dashboardUrl
}
/>
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>
{t("olmId")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard
text={olmId}
/>
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>
{t("olmSecretKey")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard
text={olmSecret}
/>
</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
variant="outline"
onClick={() => {
setOlmId("");
setOlmSecret("");
}}
>
{t("cancel")}
</Button>
<Button
onClick={handleSave}
loading={saving}
disabled={saving}
>
{t("savecredentials")}
</Button>
</div>
</>
)}
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
<RegenerateCredentialsModal
open={modalOpen}
onOpenChange={setModalOpen}
type="client-olm"
onConfirmRegenerate={handleConfirmRegenerate}
dashboardUrl={env.app.dashboardUrl}
credentials={getCredentials()}
/>
</SettingsContainer> </SettingsContainer>
); );
} }

337
src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useState } from "react";
import { import {
SettingsContainer, SettingsContainer,
SettingsSection, SettingsSection,
@@ -10,20 +10,15 @@ import {
SettingsSectionTitle SettingsSectionTitle
} from "@app/components/Settings"; } from "@app/components/Settings";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { InfoIcon } from "lucide-react";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { InfoSection, InfoSectionContent, InfoSections, InfoSectionTitle } from "@app/components/InfoSection";
import CopyToClipboard from "@app/components/CopyToClipboard";
import { PickSiteDefaultsResponse } from "@server/routers/site"; import { PickSiteDefaultsResponse } from "@server/routers/site";
import { useSiteContext } from "@app/hooks/useSiteContext"; import { useSiteContext } from "@app/hooks/useSiteContext";
import CopyTextBox from "@app/components/CopyTextBox";
import { QRCodeCanvas } from "qrcode.react";
import { generateKeypair } from "../wireguardConfig"; import { generateKeypair } from "../wireguardConfig";
import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
export default function CredentialsPage() { export default function CredentialsPage() {
const { env } = useEnvContext(); const { env } = useEnvContext();
@@ -31,17 +26,12 @@ export default function CredentialsPage() {
const { orgId } = useParams(); const { orgId } = useParams();
const router = useRouter(); const router = useRouter();
const t = useTranslations(); const t = useTranslations();
const [newtId, setNewtId] = useState(""); const { site } = useSiteContext();
const [newtSecret, setNewtSecret] = useState("");
const { site, updateSite } = useSiteContext(); const [modalOpen, setModalOpen] = useState(false);
const [siteDefaults, setSiteDefaults] = useState<PickSiteDefaultsResponse | null>(null);
const [wgConfig, setWgConfig] = useState(""); 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 [publicKey, setPublicKey] = useState("");
const [privateKey, setPrivateKey] = useState("");
const hydrateWireGuardConfig = ( const hydrateWireGuardConfig = (
privateKey: string, privateKey: string,
@@ -51,7 +41,7 @@ export default function CredentialsPage() {
endpoint: string, endpoint: string,
listenPort: string listenPort: string
) => { ) => {
const wgConfig = `[Interface] const config = `[Interface]
Address = ${subnet} Address = ${subnet}
ListenPort = 51820 ListenPort = 51820
PrivateKey = ${privateKey} PrivateKey = ${privateKey}
@@ -61,124 +51,83 @@ PublicKey = ${publicKey}
AllowedIPs = ${address.split("/")[0]}/32 AllowedIPs = ${address.split("/")[0]}/32
Endpoint = ${endpoint}:${listenPort} Endpoint = ${endpoint}:${listenPort}
PersistentKeepalive = 5`; PersistentKeepalive = 5`;
setWgConfig(wgConfig); setWgConfig(config);
return config;
}; };
const handleConfirmRegenerate = async () => {
// Clear credentials when user leaves/reloads let generatedPublicKey = "";
useEffect(() => { let generatedWgConfig = "";
const clearCreds = () => {
setNewtId("");
setNewtSecret("");
};
window.addEventListener("beforeunload", clearCreds);
return () => window.removeEventListener("beforeunload", clearCreds);
}, []);
const handleRegenerate = async () => {
const generatedKeypair = generateKeypair();
const privateKey = generatedKeypair.privateKey;
const publicKey = generatedKeypair.publicKey;
setPrivateKey(privateKey);
setPublicKey(publicKey);
try {
setLoading(true);
await api
.get(`/org/${orgId}/pick-site-defaults`)
.then((res) => {
if (res && res.status === 200) {
const data = res.data.data;
setSiteDefaults(data);
const newtId = data.newtId;
const newtSecret = data.newtSecret;
setNewtId(newtId);
setNewtSecret(newtSecret);
hydrateWireGuardConfig(
privateKey,
data.publicKey,
data.subnet,
data.address,
data.endpoint,
data.listenPort
);
}
});
} finally {
setLoading(false);
}
};
const handleSave = async () => {
setLoading(true);
let payload: any = {};
if (site?.type === "wireguard") { if (site?.type === "wireguard") {
if (!siteDefaults || !wgConfig) { const generatedKeypair = generateKeypair();
toast({ generatedPublicKey = generatedKeypair.publicKey;
variant: "destructive", setPublicKey(generatedPublicKey);
title: t("siteErrorCreate"),
description: t("siteErrorCreateKeyPair") const res = await api.get(`/org/${orgId}/pick-site-defaults`);
}); if (res && res.status === 200) {
setLoading(false); const data = res.data.data;
return; setSiteDefaults(data);
// generate config with the fetched data
generatedWgConfig = hydrateWireGuardConfig(
generatedKeypair.privateKey,
data.publicKey,
data.subnet,
data.address,
data.endpoint,
data.listenPort
);
} }
payload = { await api.post(`/site/${site?.siteId}/regenerate-secret`, {
type: "wireguard", type: "wireguard",
subnet: siteDefaults.subnet, subnet: res.data.data.subnet,
exitNodeId: siteDefaults.exitNodeId, exitNodeId: res.data.data.exitNodeId,
pubKey: publicKey pubKey: generatedPublicKey
}; });
} }
if (site?.type === "newt") { if (site?.type === "newt") {
if (!siteDefaults) { const res = await api.get(`/org/${orgId}/pick-site-defaults`);
toast({ if (res && res.status === 200) {
variant: "destructive", const data = res.data.data;
title: t("siteErrorCreate"), setSiteDefaults(data);
description: t("siteErrorCreateDefaults")
await api.post(`/site/${site?.siteId}/regenerate-secret`, {
type: "newt",
newtId: data.newtId,
newtSecret: data.newtSecret
}); });
setLoading(false);
return;
} }
payload = {
type: "newt",
newtId: siteDefaults?.newtId,
newtSecret: siteDefaults?.newtSecret
};
} }
try { toast({
await api.post(`/site/${site?.siteId}/regenerate-secret`, payload); title: t("credentialsSaved"),
description: t("credentialsSavedDescription")
});
toast({ router.refresh();
title: t("credentialsSaved"),
description: t("credentialsSavedDescription")
});
router.refresh();
} catch (e) {
toast({
variant: "destructive",
title: t("credentialsSaveError"),
description: formatAxiosError(
e,
t("credentialsSaveErrorDescription")
)
});
} finally {
setLoading(false);
}
}; };
const getCredentialType = () => {
if (site?.type === "wireguard") return "site-wireguard";
if (site?.type === "newt") return "site-newt";
return "site-newt";
};
const getCredentials = () => {
if (site?.type === "wireguard" && wgConfig) {
return { wgConfig };
}
if (site?.type === "newt" && siteDefaults) {
return {
Id: siteDefaults.newtId,
Secret: siteDefaults.newtSecret
};
}
return undefined;
};
return ( return (
<SettingsContainer> <SettingsContainer>
@@ -193,141 +142,23 @@ PersistentKeepalive = 5`;
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
{!siteDefaults ? ( <Button
<Button onClick={() => setModalOpen(true)}
onClick={handleRegenerate} disabled={site?.type === "local"}
loading={loading} >
disabled={site.type === "local"} {t("regeneratecredentials")}
> </Button>
{t("regeneratecredentials")}
</Button>
) : (
<>
{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" className="mt-4">
<InfoIcon className="h-4 w-4" />
<AlertTitle className="font-semibold">
{t("copyandsavethesecredentials")}
</AlertTitle>
<AlertDescription>
{t(
"copyandsavethesecredentialsdescription"
)}
</AlertDescription>
</Alert>
</SettingsSectionBody>
</SettingsSection>
)}
{site.type === "newt" && (
<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>
{t(
"copyandsavethesecredentialsdescription"
)}
</AlertDescription>
</Alert>
</SettingsSectionBody>
</SettingsSection>
)}
<div className="flex justify-end mt-6 space-x-2">
<Button
variant="outline"
onClick={() => {
setNewtId("");
setNewtSecret("");
}}
>
{t("cancel")}
</Button>
<Button
onClick={handleSave}
loading={saving}
disabled={saving}
>
{t("savecredentials")}
</Button>
</div>
</>
)}
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
<RegenerateCredentialsModal
open={modalOpen}
onOpenChange={setModalOpen}
type={getCredentialType()}
onConfirmRegenerate={handleConfirmRegenerate}
dashboardUrl={env.app.dashboardUrl}
credentials={getCredentials()}
/>
</SettingsContainer> </SettingsContainer>
); );
} }

216
src/components/RegenerateCredentialsModal.tsx Normal file
View File

@@ -0,0 +1,216 @@
"use client";
import { useState } from "react";
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { Button } from "@app/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { InfoIcon, AlertTriangle } from "lucide-react";
import { useTranslations } from "next-intl";
import { InfoSection, InfoSectionContent, InfoSections, InfoSectionTitle } from "@app/components/InfoSection";
import CopyToClipboard from "@app/components/CopyToClipboard";
import CopyTextBox from "@app/components/CopyTextBox";
import { QRCodeCanvas } from "qrcode.react";
type CredentialType = "site-wireguard" | "site-newt" | "client-olm" | "remote-exit-node";
interface RegenerateCredentialsModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
type: CredentialType;
onConfirmRegenerate: () => Promise<void>;
dashboardUrl: string;
credentials?: {
// For WireGuard sites
wgConfig?: string;
Id?: string;
Secret?: string;
};
}
export default function RegenerateCredentialsModal({
open,
onOpenChange,
type,
onConfirmRegenerate,
dashboardUrl,
credentials
}: RegenerateCredentialsModalProps) {
const t = useTranslations();
const [stage, setStage] = useState<"confirm" | "show">("confirm");
const [loading, setLoading] = useState(false);
const handleConfirm = async () => {
try {
setLoading(true);
await onConfirmRegenerate();
setStage("show");
} catch (error) {
} finally {
setLoading(false);
}
};
const handleClose = () => {
setStage("confirm");
onOpenChange(false);
};
const getTitle = () => {
if (stage === "confirm") {
return t("regeneratecredentials");
}
switch (type) {
case "site-wireguard":
return t("WgConfiguration");
case "site-newt":
return t("siteNewtCredentials");
case "client-olm":
return t("clientOlmCredentials");
case "remote-exit-node":
return t("remoteExitNodeCreate.generate.title");
}
};
const getDescription = () => {
if (stage === "confirm") {
return t("regenerateCredentialsWarning");
}
switch (type) {
case "site-wireguard":
return t("WgConfigurationDescription");
case "site-newt":
return t("siteNewtCredentialsDescription");
case "client-olm":
return t("clientOlmCredentialsDescription");
case "remote-exit-node":
return t("remoteExitNodeCreate.generate.description");
}
};
return (
<Credenza open={open} onOpenChange={onOpenChange}>
<CredenzaContent className="max-h-[80vh] flex flex-col">
<CredenzaHeader>
<CredenzaTitle>{getTitle()}</CredenzaTitle>
<CredenzaDescription>{getDescription()}</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody className="overflow-y-auto px-4">
{stage === "confirm" ? (
<Alert variant="destructive">
<AlertTriangle className="h-4 w-4" />
<AlertTitle className="font-semibold">
{t("warning")}
</AlertTitle>
<AlertDescription>
{t("regenerateCredentialsConfirmation")}
</AlertDescription>
</Alert>
) : (
<>
{credentials?.wgConfig && (
<div className="space-y-4">
<div className="flex flex-col items-center gap-4">
<CopyTextBox text={credentials.wgConfig} />
<div className="relative w-fit border rounded-md">
<div className="bg-white p-6 rounded-md">
<QRCodeCanvas
value={credentials.wgConfig}
size={168}
className="mx-auto"
/>
</div>
</div>
</div>
<Alert variant="neutral">
<InfoIcon className="h-4 w-4" />
<AlertTitle className="font-semibold">
{t("copyandsavethesecredentials")}
</AlertTitle>
<AlertDescription>
{t("copyandsavethesecredentialsdescription")}
</AlertDescription>
</Alert>
</div>
)}
{credentials?.Id && credentials.Secret && (
<div className="space-y-4">
<InfoSections cols={1}>
<InfoSection>
<InfoSectionTitle>
{t("endpoint")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard text={dashboardUrl} />
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>
{t("Id")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard text={credentials?.Id} />
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>
{t("SecretKey")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard text={credentials?.Secret} />
</InfoSectionContent>
</InfoSection>
</InfoSections>
<Alert variant="neutral">
<InfoIcon className="h-4 w-4" />
<AlertTitle className="font-semibold">
{t("copyandsavethesecredentials")}
</AlertTitle>
<AlertDescription>
{t("copyandsavethesecredentialsdescription")}
</AlertDescription>
</Alert>
</div>
)}
</>
)}
</CredenzaBody>
<CredenzaFooter>
{stage === "confirm" ? (
<>
<CredenzaClose asChild>
<Button variant="outline">{t("cancel")}</Button>
</CredenzaClose>
<Button
onClick={handleConfirm}
loading={loading}
disabled={loading}
variant="destructive"
>
{t("confirm")}
</Button>
</>
) : (
<Button onClick={handleClose} className="w-full">
{t("close")}
</Button>
)}
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}