mirror of
https://github.com/fosrl/pangolin.git
synced 2026-01-28 22:00:51 +00:00
seperate credentials rekeying in modal for reuse
This commit is contained in:
Pallavi Kumari
@@ -2106,5 +2106,11 @@
|
||||
"credentialsSaved" : "Credentials Saved",
|
||||
"credentialsSavedDescription": "Credentials have been regenerated and saved successfully.",
|
||||
"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"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
@@ -10,9 +10,6 @@ import {
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
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 { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
@@ -24,6 +21,7 @@ import {
|
||||
QuickStartRemoteExitNodeResponse
|
||||
} from "@server/routers/remoteExitNode/types";
|
||||
import { useRemoteExitNodeContext } from "@app/hooks/useRemoteExitNodeContext";
|
||||
import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
|
||||
|
||||
export default function CredentialsPage() {
|
||||
const { env } = useEnvContext();
|
||||
@@ -31,79 +29,44 @@ export default function CredentialsPage() {
|
||||
const { orgId } = useParams();
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const { remoteExitNode, updateRemoteExitNode } = useRemoteExitNodeContext();
|
||||
const { remoteExitNode } = useRemoteExitNodeContext();
|
||||
|
||||
const [credentials, setCredentials] =
|
||||
useState<PickRemoteExitNodeDefaultsResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [credentials, setCredentials] = useState<PickRemoteExitNodeDefaultsResponse | null>(null);
|
||||
|
||||
// Clear credentials when user leaves/reloads
|
||||
useEffect(() => {
|
||||
const clearCreds = () => setCredentials(null);
|
||||
window.addEventListener("beforeunload", clearCreds);
|
||||
return () => window.removeEventListener("beforeunload", clearCreds);
|
||||
}, []);
|
||||
const handleConfirmRegenerate = async () => {
|
||||
|
||||
const response = await api.get<AxiosResponse<PickRemoteExitNodeDefaultsResponse>>(
|
||||
`/org/${orgId}/pick-remote-exit-node-defaults`
|
||||
);
|
||||
|
||||
const handleRegenerate = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await api.get<
|
||||
AxiosResponse<PickRemoteExitNodeDefaultsResponse>
|
||||
>(`/org/${orgId}/pick-remote-exit-node-defaults`);
|
||||
const data = response.data.data;
|
||||
setCredentials(data);
|
||||
|
||||
setCredentials(response.data.data);
|
||||
toast({
|
||||
title: t("success"),
|
||||
description: t("Credentials generated successfully."),
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: t("error"),
|
||||
description: formatAxiosError(
|
||||
error,
|
||||
t("Failed to generate credentials")
|
||||
),
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
await api.put<AxiosResponse<QuickStartRemoteExitNodeResponse>>(
|
||||
`/org/${orgId}/reGenerate-remote-exit-node-secret`,
|
||||
{
|
||||
remoteExitNodeId: remoteExitNode.remoteExitNodeId,
|
||||
secret: data.secret,
|
||||
}
|
||||
);
|
||||
|
||||
toast({
|
||||
title: t("credentialsSaved"),
|
||||
description: t("credentialsSavedDescription")
|
||||
});
|
||||
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!credentials) return;
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
|
||||
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);
|
||||
const getCredentials = () => {
|
||||
if (credentials) {
|
||||
return {
|
||||
Id: remoteExitNode.remoteExitNodeId,
|
||||
Secret: credentials.secret
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -114,58 +77,25 @@ export default function CredentialsPage() {
|
||||
{t("generatedcredentials")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("regenerateClientCredentials")}
|
||||
{t("regenerateCredentials")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
|
||||
<SettingsSectionBody>
|
||||
{!credentials ? (
|
||||
<Button
|
||||
onClick={handleRegenerate}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
<Button onClick={() => setModalOpen(true)}>
|
||||
{t("regeneratecredentials")}
|
||||
</Button>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<RegenerateCredentialsModal
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
type="remote-exit-node"
|
||||
onConfirmRegenerate={handleConfirmRegenerate}
|
||||
dashboardUrl={env.app.dashboardUrl}
|
||||
credentials={getCredentials()}
|
||||
/>
|
||||
</SettingsContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
@@ -10,17 +10,14 @@ import {
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
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 { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
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 { useClientContext } from "@app/hooks/useClientContext";
|
||||
import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
|
||||
|
||||
export default function CredentialsPage() {
|
||||
const { env } = useEnvContext();
|
||||
@@ -28,55 +25,21 @@ export default function CredentialsPage() {
|
||||
const { orgId } = useParams();
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const [olmId, setOlmId] = useState("");
|
||||
const [olmSecret, setOlmSecret] = useState("");
|
||||
const { client, updateClient } = useClientContext();
|
||||
const { client } = useClientContext();
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [clientDefaults, setClientDefaults] = useState<PickClientDefaultsResponse | null>(null);
|
||||
|
||||
const [clientDefaults, setClientDefaults] =
|
||||
useState<PickClientDefaultsResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const handleConfirmRegenerate = async () => {
|
||||
|
||||
const res = await api.get(`/org/${orgId}/pick-client-defaults`);
|
||||
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`, {
|
||||
olmId: clientDefaults?.olmId,
|
||||
secret: clientDefaults?.olmSecret,
|
||||
olmId: data.olmId,
|
||||
secret: data.olmSecret,
|
||||
});
|
||||
|
||||
toast({
|
||||
@@ -85,20 +48,19 @@ export default function CredentialsPage() {
|
||||
});
|
||||
|
||||
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 (
|
||||
<SettingsContainer>
|
||||
<SettingsSection>
|
||||
@@ -112,97 +74,20 @@ export default function CredentialsPage() {
|
||||
</SettingsSectionHeader>
|
||||
|
||||
<SettingsSectionBody>
|
||||
{!clientDefaults ? (
|
||||
<Button
|
||||
onClick={handleRegenerate}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
<Button onClick={() => setModalOpen(true)}>
|
||||
{t("regeneratecredentials")}
|
||||
</Button>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<RegenerateCredentialsModal
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
type="client-olm"
|
||||
onConfirmRegenerate={handleConfirmRegenerate}
|
||||
dashboardUrl={env.app.dashboardUrl}
|
||||
credentials={getCredentials()}
|
||||
/>
|
||||
</SettingsContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
@@ -10,20 +10,15 @@ import {
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
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 { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
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 { useSiteContext } from "@app/hooks/useSiteContext";
|
||||
import CopyTextBox from "@app/components/CopyTextBox";
|
||||
import { QRCodeCanvas } from "qrcode.react";
|
||||
import { generateKeypair } from "../wireguardConfig";
|
||||
import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
|
||||
|
||||
export default function CredentialsPage() {
|
||||
const { env } = useEnvContext();
|
||||
@@ -31,17 +26,12 @@ export default function CredentialsPage() {
|
||||
const { orgId } = useParams();
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const [newtId, setNewtId] = useState("");
|
||||
const [newtSecret, setNewtSecret] = useState("");
|
||||
const { site, updateSite } = useSiteContext();
|
||||
const { site } = useSiteContext();
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [siteDefaults, setSiteDefaults] = useState<PickSiteDefaultsResponse | null>(null);
|
||||
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,
|
||||
@@ -51,7 +41,7 @@ export default function CredentialsPage() {
|
||||
endpoint: string,
|
||||
listenPort: string
|
||||
) => {
|
||||
const wgConfig = `[Interface]
|
||||
const config = `[Interface]
|
||||
Address = ${subnet}
|
||||
ListenPort = 51820
|
||||
PrivateKey = ${privateKey}
|
||||
@@ -61,124 +51,83 @@ PublicKey = ${publicKey}
|
||||
AllowedIPs = ${address.split("/")[0]}/32
|
||||
Endpoint = ${endpoint}:${listenPort}
|
||||
PersistentKeepalive = 5`;
|
||||
setWgConfig(wgConfig);
|
||||
setWgConfig(config);
|
||||
return config;
|
||||
};
|
||||
|
||||
|
||||
// Clear credentials when user leaves/reloads
|
||||
useEffect(() => {
|
||||
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 = {};
|
||||
const handleConfirmRegenerate = async () => {
|
||||
let generatedPublicKey = "";
|
||||
let generatedWgConfig = "";
|
||||
|
||||
if (site?.type === "wireguard") {
|
||||
if (!siteDefaults || !wgConfig) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("siteErrorCreate"),
|
||||
description: t("siteErrorCreateKeyPair")
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
const generatedKeypair = generateKeypair();
|
||||
generatedPublicKey = generatedKeypair.publicKey;
|
||||
setPublicKey(generatedPublicKey);
|
||||
|
||||
const res = await api.get(`/org/${orgId}/pick-site-defaults`);
|
||||
if (res && res.status === 200) {
|
||||
const data = res.data.data;
|
||||
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",
|
||||
subnet: siteDefaults.subnet,
|
||||
exitNodeId: siteDefaults.exitNodeId,
|
||||
pubKey: publicKey
|
||||
};
|
||||
subnet: res.data.data.subnet,
|
||||
exitNodeId: res.data.data.exitNodeId,
|
||||
pubKey: generatedPublicKey
|
||||
});
|
||||
}
|
||||
|
||||
if (site?.type === "newt") {
|
||||
if (!siteDefaults) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("siteErrorCreate"),
|
||||
description: t("siteErrorCreateDefaults")
|
||||
const res = await api.get(`/org/${orgId}/pick-site-defaults`);
|
||||
if (res && res.status === 200) {
|
||||
const data = res.data.data;
|
||||
setSiteDefaults(data);
|
||||
|
||||
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 {
|
||||
await api.post(`/site/${site?.siteId}/regenerate-secret`, payload);
|
||||
toast({
|
||||
title: t("credentialsSaved"),
|
||||
description: t("credentialsSavedDescription")
|
||||
});
|
||||
|
||||
toast({
|
||||
title: t("credentialsSaved"),
|
||||
description: t("credentialsSavedDescription")
|
||||
});
|
||||
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("credentialsSaveError"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("credentialsSaveErrorDescription")
|
||||
)
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
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 (
|
||||
<SettingsContainer>
|
||||
@@ -193,141 +142,23 @@ PersistentKeepalive = 5`;
|
||||
</SettingsSectionHeader>
|
||||
|
||||
<SettingsSectionBody>
|
||||
{!siteDefaults ? (
|
||||
<Button
|
||||
onClick={handleRegenerate}
|
||||
loading={loading}
|
||||
disabled={site.type === "local"}
|
||||
>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => setModalOpen(true)}
|
||||
disabled={site?.type === "local"}
|
||||
>
|
||||
{t("regeneratecredentials")}
|
||||
</Button>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<RegenerateCredentialsModal
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
type={getCredentialType()}
|
||||
onConfirmRegenerate={handleConfirmRegenerate}
|
||||
dashboardUrl={env.app.dashboardUrl}
|
||||
credentials={getCredentials()}
|
||||
/>
|
||||
</SettingsContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
216
src/components/RegenerateCredentialsModal.tsx
Normal file
216
src/components/RegenerateCredentialsModal.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user