Merge branch 'dev' into feat/login-page-customization

2026-02-21 12:26:40 +00:00 · 2025-11-15 06:32:03 +01:00
parent 2ada05b286 4f026acad8
commit 5bb5aeff36
64 changed files with 2824 additions and 406 deletions
--- a/src/app/[orgId]/settings/(private)/remote-exit-nodes/ExitNodesTable.tsx
+++ b/src/app/[orgId]/settings/(private)/remote-exit-nodes/ExitNodesTable.tsx
@@ -232,6 +232,7 @@ export default function ExitNodesTable({
            id: "actions",
            cell: ({ row }) => {
                const nodeRow = row.original;
+                const remoteExitNodeId = nodeRow.id;
                return (
                    <div className="flex items-center justify-end gap-2">
                        <DropdownMenu>
@@ -242,6 +243,14 @@ export default function ExitNodesTable({
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
+                                <Link
+                                    className="block w-full"
+                                    href={`/${nodeRow.orgId}/settings/remote-exit-nodes/${remoteExitNodeId}`}
+                                >
+                                    <DropdownMenuItem>
+                                        {t("viewSettings")}
+                                    </DropdownMenuItem>
+                                </Link>
                                <DropdownMenuItem
                                    onClick={() => {
                                        setSelectedNode(nodeRow);
@@ -254,6 +263,14 @@ export default function ExitNodesTable({
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
+                        <Link
+                            href={`/${nodeRow.orgId}/settings/remote-exit-nodes/${remoteExitNodeId}`}
+                        >
+                            <Button variant={"secondary"} size="sm">
+                                {t("edit")}
+                                <ArrowRight className="ml-2 w-4 h-4" />
+                            </Button>
+                        </Link>
                    </div>
                );
            }
--- a/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+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 { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import {
+    PickRemoteExitNodeDefaultsResponse,
+    QuickStartRemoteExitNodeResponse
+} from "@server/routers/remoteExitNode/types";
+import { useRemoteExitNodeContext } from "@app/hooks/useRemoteExitNodeContext";
+import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { build } from "@server/build";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@app/components/ui/tooltip";
+
+export default function CredentialsPage() {
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { orgId } = useParams();
+    const router = useRouter();
+    const t = useTranslations();
+    const { remoteExitNode } = useRemoteExitNodeContext();
+
+    const [modalOpen, setModalOpen] = useState(false);
+    const [credentials, setCredentials] = useState<PickRemoteExitNodeDefaultsResponse | null>(null);
+
+    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
+
+    const isSecurityFeatureDisabled = () => {
+        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
+        const isSaasNotSubscribed =
+            build === "saas" && !subscription?.isSubscribed();
+        return isEnterpriseNotLicensed || isSaasNotSubscribed;
+    };
+
+
+    const handleConfirmRegenerate = async () => {
+
+        const response = await api.get<AxiosResponse<PickRemoteExitNodeDefaultsResponse>>(
+            `/org/${orgId}/pick-remote-exit-node-defaults`
+        );
+
+        const data = response.data.data;
+        setCredentials(data);
+
+        await api.put<AxiosResponse<QuickStartRemoteExitNodeResponse>>(
+            `/re-key/${orgId}/reGenerate-remote-exit-node-secret`,
+            {
+                remoteExitNodeId: remoteExitNode.remoteExitNodeId,
+                secret: data.secret,
+            }
+        );
+
+        toast({
+            title: t("credentialsSaved"),
+            description: t("credentialsSavedDescription")
+        });
+
+        router.refresh();
+    };
+
+    const getCredentials = () => {
+        if (credentials) {
+            return {
+                Id: remoteExitNode.remoteExitNodeId,
+                Secret: credentials.secret
+            };
+        }
+        return undefined;
+    };
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("generatedcredentials")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("regenerateCredentials")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <div className="inline-block">
+                                    <Button
+                                        onClick={() => setModalOpen(true)}
+                                        disabled={isSecurityFeatureDisabled()}
+                                    >
+                                        {t("regeneratecredentials")}
+                                    </Button>
+                                </div>
+                            </TooltipTrigger>
+
+                            {isSecurityFeatureDisabled() && (
+                                <TooltipContent side="top">
+                                    {t("featureDisabledTooltip")}
+                                </TooltipContent>
+                            )}
+                        </Tooltip>
+                    </TooltipProvider>
+                </SettingsSectionBody>
+            </SettingsSection>
+
+            <RegenerateCredentialsModal
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                type="remote-exit-node"
+                onConfirmRegenerate={handleConfirmRegenerate}
+                dashboardUrl={env.app.dashboardUrl}
+                credentials={getCredentials()}
+            />
+        </SettingsContainer>
+    );
+}
--- a/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/general/page.tsx
+++ b/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/general/page.tsx
@@ -1,3 +0,0 @@
-export default function GeneralPage() {
-    return <></>;
-}
--- a/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/layout.tsx
+++ b/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/layout.tsx
@@ -6,6 +6,8 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
 import RemoteExitNodeProvider from "@app/providers/RemoteExitNodeProvider";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import ExitNodeInfoCard from "@app/components/ExitNodeInfoCard";

 interface SettingsLayoutProps {
    children: React.ReactNode;
@@ -31,6 +33,13 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {

    const t = await getTranslations();

+    const navItems = [
+        {
+            title: t('credentials'),
+            href: "/{orgId}/settings/remote-exit-nodes/{remoteExitNodeId}/credentials"
+        }
+    ];
+
    return (
        <>
            <SettingsSectionTitle
@@ -39,7 +48,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
            />

            <RemoteExitNodeProvider remoteExitNode={remoteExitNode}>
-                <div className="space-y-6">{children}</div>
+                <div className="space-y-6">
+                    <ExitNodeInfoCard />
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
+                </div>
            </RemoteExitNodeProvider>
        </>
    );
--- a/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/page.tsx
+++ b/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/page.tsx
@@ -5,6 +5,6 @@ export default async function RemoteExitNodePage(props: {
 }) {
    const params = await props.params;
    redirect(
-        `/${params.orgId}/settings/remote-exit-nodes/${params.remoteExitNodeId}/general`
+        `/${params.orgId}/settings/remote-exit-nodes/${params.remoteExitNodeId}/credentials`
    );
 }
--- a/src/app/[orgId]/settings/clients/[clientId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/clients/[clientId]/credentials/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+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 { PickClientDefaultsResponse } from "@server/routers/client";
+import { useClientContext } from "@app/hooks/useClientContext";
+import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
+import { build } from "@server/build";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@app/components/ui/tooltip";
+
+export default function CredentialsPage() {
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { orgId } = useParams();
+    const router = useRouter();
+    const t = useTranslations();
+    const { client } = useClientContext();
+
+    const [modalOpen, setModalOpen] = useState(false);
+    const [clientDefaults, setClientDefaults] = useState<PickClientDefaultsResponse | null>(null);
+
+    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
+
+    const isSecurityFeatureDisabled = () => {
+        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
+        const isSaasNotSubscribed =
+            build === "saas" && !subscription?.isSubscribed();
+        return isEnterpriseNotLicensed || isSaasNotSubscribed;
+    };
+
+
+    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);
+
+            await api.post(`/re-key/${client?.clientId}/regenerate-client-secret`, {
+                olmId: data.olmId,
+                secret: data.olmSecret,
+            });
+
+            toast({
+                title: t("credentialsSaved"),
+                description: t("credentialsSavedDescription")
+            });
+
+            router.refresh();
+        }
+    };
+
+    const getCredentials = () => {
+        if (clientDefaults) {
+            return {
+                Id: clientDefaults.olmId,
+                Secret: clientDefaults.olmSecret
+            };
+        }
+        return undefined;
+    };
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("generatedcredentials")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("regenerateCredentials")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <div className="inline-block">
+                                    <Button
+                                        onClick={() => setModalOpen(true)}
+                                        disabled={isSecurityFeatureDisabled()}>
+                                        {t("regeneratecredentials")}
+                                    </Button>
+                                </div>
+                            </TooltipTrigger>
+
+                            {isSecurityFeatureDisabled() && (
+                                <TooltipContent side="top">
+                                    {t("featureDisabledTooltip")}
+                                </TooltipContent>
+                            )}
+                        </Tooltip>
+                    </TooltipProvider>
+                </SettingsSectionBody>
+            </SettingsSection>
+
+            <RegenerateCredentialsModal
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                type="client-olm"
+                onConfirmRegenerate={handleConfirmRegenerate}
+                dashboardUrl={env.app.dashboardUrl}
+                credentials={getCredentials()}
+            />
+        </SettingsContainer>
+    );
+}
--- a/src/app/[orgId]/settings/clients/[clientId]/layout.tsx
+++ b/src/app/[orgId]/settings/clients/[clientId]/layout.tsx
@@ -7,6 +7,8 @@ import ClientInfoCard from "../../../../../components/ClientInfoCard";
 import ClientProvider from "@app/providers/ClientProvider";
 import { redirect } from "next/navigation";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { getTranslations } from "next-intl/server";
+import { build } from "@server/build";

 type SettingsLayoutProps = {
    children: React.ReactNode;
@@ -30,11 +32,20 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
        redirect(`/${params.orgId}/settings/clients`);
    }

+    const t = await getTranslations();
+
    const navItems = [
        {
-            title: "General",
+            title: t('general'),
            href: `/{orgId}/settings/clients/{clientId}/general`
-        }
+        },
+        ...(build === 'enterprise'
+            ? [{
+                title: t('credentials'),
+                href: `/{orgId}/settings/clients/{clientId}/credentials`
+            },
+            ]
+            : []),
    ];

    return (
--- a/src/app/[orgId]/settings/resources/[niceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/resources/[niceId]/general/page.tsx
@@ -68,9 +68,9 @@ export default function GeneralForm() {
    const router = useRouter();
    const t = useTranslations();
    const [editDomainOpen, setEditDomainOpen] = useState(false);
-    const {licenseStatus } = useLicenseStatusContext();
+    const { licenseStatus } = useLicenseStatusContext();
    const subscriptionStatus = useSubscriptionStatusContext();
-    const {user} = useUserContext();
+    const { user } = useUserContext();

    const { env } = useEnvContext();

@@ -102,6 +102,7 @@ export default function GeneralForm() {
            enabled: z.boolean(),
            subdomain: z.string().optional(),
            name: z.string().min(1).max(255),
+            niceId: z.string().min(1).max(255).optional(),
            domainId: z.string().optional(),
            proxyPort: z.number().int().min(1).max(65535).optional(),
            // enableProxy: z.boolean().optional()
@@ -130,6 +131,7 @@ export default function GeneralForm() {
        defaultValues: {
            enabled: resource.enabled,
            name: resource.name,
+            niceId: resource.niceId,
            subdomain: resource.subdomain ? resource.subdomain : undefined,
            domainId: resource.domainId || undefined,
            proxyPort: resource.proxyPort || undefined,
@@ -192,6 +194,7 @@ export default function GeneralForm() {
                {
                    enabled: data.enabled,
                    name: data.name,
+                    niceId: data.niceId,
                    subdomain: data.subdomain ? toASCII(data.subdomain) : undefined,
                    domainId: data.domainId,
                    proxyPort: data.proxyPort,
@@ -212,16 +215,12 @@ export default function GeneralForm() {
            });

        if (res && res.status === 200) {
-            toast({
-                title: t("resourceUpdated"),
-                description: t("resourceUpdatedDescription")
-            });
-
-            const resource = res.data.data;
+            const updated = res.data.data;

            updateResource({
                enabled: data.enabled,
                name: data.name,
+                niceId: data.niceId,
                subdomain: data.subdomain,
                fullDomain: resource.fullDomain,
                proxyPort: data.proxyPort,
@@ -230,8 +229,20 @@ export default function GeneralForm() {
                // })
            });

-            router.refresh();
+            toast({
+                title: t("resourceUpdated"),
+                description: t("resourceUpdatedDescription")
+            });
+
+            if (data.niceId && data.niceId !== resource?.niceId) {
+                router.replace(`/${updated.orgId}/settings/resources/${data.niceId}/general`);
+            } else {
+                router.refresh();
+            }
+
+            setSaveLoading(false);
        }
+
        setSaveLoading(false);
    }

@@ -304,6 +315,24 @@ export default function GeneralForm() {
                                            )}
                                        />

+                                        <FormField
+                                            control={form.control}
+                                            name="niceId"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>{t("identifier")}</FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            placeholder={t("enterIdentifier")}
+                                                            className="flex-1"
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
                                        {!resource.http && (
                                            <>
                                                <FormField
--- a/src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx
+++ b/src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx
@@ -512,9 +512,18 @@ export default function ReverseProxyTargets(props: {
                port: target.port,
                enabled: target.enabled,
                hcEnabled: target.hcEnabled,
-                hcPath: target.hcPath,
-                hcInterval: target.hcInterval,
-                hcTimeout: target.hcTimeout
+                hcPath: target.hcPath || null,
+                hcScheme: target.hcScheme || null,
+                hcHostname: target.hcHostname || null,
+                hcPort: target.hcPort || null,
+                hcInterval: target.hcInterval || null,
+                hcTimeout: target.hcTimeout || null,
+                hcHeaders: target.hcHeaders || null,
+                hcFollowRedirects: target.hcFollowRedirects || null,
+                hcMethod: target.hcMethod || null,
+                hcStatus: target.hcStatus || null,
+                hcUnhealthyInterval: target.hcUnhealthyInterval || null,
+                hcMode: target.hcMode || null
            };

            // Only include path-related fields for HTTP resources
@@ -718,7 +727,9 @@ export default function ReverseProxyTargets(props: {
                    hcHeaders: target.hcHeaders || null,
                    hcFollowRedirects: target.hcFollowRedirects || null,
                    hcMethod: target.hcMethod || null,
-                    hcStatus: target.hcStatus || null
+                    hcStatus: target.hcStatus || null,
+                    hcUnhealthyInterval: target.hcUnhealthyInterval || null,
+                    hcMode: target.hcMode || null
                };

                // Only include path-related fields for HTTP resources
@@ -1814,6 +1825,7 @@ export default function ReverseProxyTargets(props: {
                            30
                    }}
                    onChanges={async (config) => {
+                        console.log("here");
                        if (selectedTargetForHealthCheck) {
                            console.log(config);
                            updateTargetHealthCheck(
--- a/src/app/[orgId]/settings/resources/create/page.tsx
+++ b/src/app/[orgId]/settings/resources/create/page.tsx
@@ -574,7 +574,9 @@ export default function Page() {
                                hcPort: target.hcPort || null,
                                hcFollowRedirects:
                                    target.hcFollowRedirects || null,
-                                hcStatus: target.hcStatus || null
+                                hcStatus: target.hcStatus || null,
+                                hcUnhealthyInterval: target.hcUnhealthyInterval || null,
+                                hcMode: target.hcMode || null
                            };

                            // Only include path-related fields for HTTP resources
--- a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { useState } from "react";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+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 { PickSiteDefaultsResponse } from "@server/routers/site";
+import { useSiteContext } from "@app/hooks/useSiteContext";
+import { generateKeypair } from "../wireguardConfig";
+import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { build } from "@server/build";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@app/components/ui/tooltip";
+
+export default function CredentialsPage() {
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { orgId } = useParams();
+    const router = useRouter();
+    const t = useTranslations();
+    const { site } = useSiteContext();
+
+    const [modalOpen, setModalOpen] = useState(false);
+    const [siteDefaults, setSiteDefaults] = useState<PickSiteDefaultsResponse | null>(null);
+    const [wgConfig, setWgConfig] = useState("");
+    const [publicKey, setPublicKey] = useState("");
+
+    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
+
+    const isSecurityFeatureDisabled = () => {
+        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
+        const isSaasNotSubscribed =
+            build === "saas" && !subscription?.isSubscribed();
+        return isEnterpriseNotLicensed || isSaasNotSubscribed;
+    };
+
+
+    const hydrateWireGuardConfig = (
+        privateKey: string,
+        publicKey: string,
+        subnet: string,
+        address: string,
+        endpoint: string,
+        listenPort: string
+    ) => {
+        const config = `[Interface]
+Address = ${subnet}
+ListenPort = 51820
+PrivateKey = ${privateKey}
+
+[Peer]
+PublicKey = ${publicKey}
+AllowedIPs = ${address.split("/")[0]}/32
+Endpoint = ${endpoint}:${listenPort}
+PersistentKeepalive = 5`;
+        setWgConfig(config);
+        return config;
+    };
+
+    const handleConfirmRegenerate = async () => {
+        let generatedPublicKey = "";
+        let generatedWgConfig = "";
+
+        if (site?.type === "wireguard") {
+            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
+                );
+            }
+
+            await api.post(`/re-key/${site?.siteId}/regenerate-site-secret`, {
+                type: "wireguard",
+                subnet: res.data.data.subnet,
+                exitNodeId: res.data.data.exitNodeId,
+                pubKey: generatedPublicKey
+            });
+        }
+
+        if (site?.type === "newt") {
+            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(`/re-key/${site?.siteId}/regenerate-site-secret`, {
+                    type: "newt",
+                    newtId: data.newtId,
+                    newtSecret: data.newtSecret
+                });
+            }
+        }
+
+        toast({
+            title: t("credentialsSaved"),
+            description: t("credentialsSavedDescription")
+        });
+
+        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>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("generatedcredentials")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("regenerateCredentials")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <div className="inline-block">
+                                    <Button
+                                        onClick={() => setModalOpen(true)}
+                                        disabled={isSecurityFeatureDisabled()}
+                                    >
+                                        {t("regeneratecredentials")}
+                                    </Button>
+                                </div>
+                            </TooltipTrigger>
+
+                            {isSecurityFeatureDisabled() && (
+                                <TooltipContent side="top">
+                                    {t("featureDisabledTooltip")}
+                                </TooltipContent>
+                            )}
+                        </Tooltip>
+                    </TooltipProvider>
+                </SettingsSectionBody>
+            </SettingsSection>
+
+            <RegenerateCredentialsModal
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                type={getCredentialType()}
+                onConfirmRegenerate={handleConfirmRegenerate}
+                dashboardUrl={env.app.dashboardUrl}
+                credentials={getCredentials()}
+            />
+        </SettingsContainer>
+    );
+}
--- a/src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
@@ -15,7 +15,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { useSiteContext } from "@app/hooks/useSiteContext";
 import { useForm } from "react-hook-form";
-import { toast } from "@app/hooks/useToast";
+import { toast, useToast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import {
    SettingsContainer,
@@ -37,6 +37,7 @@ import { Tag, TagInput } from "@app/components/tags/tag-input";

 const GeneralFormSchema = z.object({
    name: z.string().nonempty("Name is required"),
+    niceId: z.string().min(1).max(255).optional(),
    dockerSocketEnabled: z.boolean().optional(),
    remoteSubnets: z
        .array(
@@ -55,19 +56,18 @@ export default function GeneralPage() {

    const { env } = useEnvContext();
    const api = createApiClient(useEnvContext());
-
-    const [loading, setLoading] = useState(false);
-    const [activeCidrTagIndex, setActiveCidrTagIndex] = useState<number | null>(
-        null
-    );
-
    const router = useRouter();
    const t = useTranslations();
+    const { toast } = useToast();
+
+    const [loading, setLoading] = useState(false);
+    const [activeCidrTagIndex, setActiveCidrTagIndex] = useState<number | null>(null);

    const form = useForm({
        resolver: zodResolver(GeneralFormSchema),
        defaultValues: {
            name: site?.name,
+            niceId: site?.niceId || "",
            dockerSocketEnabled: site?.dockerSocketEnabled ?? false,
            remoteSubnets: site?.remoteSubnets
                ? site.remoteSubnets.split(",").map((subnet, index) => ({
@@ -82,37 +82,40 @@ export default function GeneralPage() {
    async function onSubmit(data: GeneralFormValues) {
        setLoading(true);

-        await api
-            .post(`/site/${site?.siteId}`, {
+        try {
+            await api.post(`/site/${site?.siteId}`, {
                name: data.name,
+                niceId: data.niceId,
                dockerSocketEnabled: data.dockerSocketEnabled,
                remoteSubnets:
                    data.remoteSubnets
-                        ?.map((subnet) => subnet.text)
-                        .join(",") || ""
-            })
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: t("siteErrorUpdate"),
-                    description: formatAxiosError(
-                        e,
-                        t("siteErrorUpdateDescription")
-                    )
-                });
+                    ?.map((subnet) => subnet.text)
+                    .join(",") || ""
            });

-        updateSite({
-            name: data.name,
-            dockerSocketEnabled: data.dockerSocketEnabled,
-            remoteSubnets:
-                data.remoteSubnets?.map((subnet) => subnet.text).join(",") || ""
-        });
+            updateSite({
+                name: data.name,
+                niceId: data.niceId,
+                dockerSocketEnabled: data.dockerSocketEnabled,
+                remoteSubnets:
+                    data.remoteSubnets?.map((subnet) => subnet.text).join(",") || ""
+            });

-        toast({
-            title: t("siteUpdated"),
-            description: t("siteUpdatedDescription")
-        });
+            if (data.niceId && data.niceId !== site?.niceId) {
+                router.replace(`/${site?.orgId}/settings/sites/${data.niceId}/general`);
+            }
+
+            toast({
+                title: t("siteUpdated"),
+                description: t("siteUpdatedDescription")
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("siteErrorUpdate"),
+                description: formatAxiosError(e, t("siteErrorUpdateDescription"))
+            });
+        }

        setLoading(false);

@@ -153,8 +156,25 @@ export default function GeneralPage() {
                                    )}
                                />

-                                {env.flags.enableClients &&
-                                site.type === "newt" ? (
+                                <FormField
+                                    control={form.control}
+                                    name="niceId"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t("identifier")}</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    {...field}
+                                                    placeholder={t("enterIdentifier")}
+                                                    className="flex-1"
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                {env.flags.enableClients && site.type === "newt" ? (
                                    <FormField
                                        control={form.control}
                                        name="remoteSubnets"
--- a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
@@ -8,6 +8,7 @@ import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import SiteInfoCard from "../../../../../components/SiteInfoCard";
 import { getTranslations } from "next-intl/server";
+import { build } from "@server/build";

 interface SettingsLayoutProps {
    children: React.ReactNode;
@@ -35,14 +36,23 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
    const navItems = [
        {
            title: t('general'),
-            href: "/{orgId}/settings/sites/{niceId}/general"
-        }
+            href: `/${params.orgId}/settings/sites/${params.niceId}/general`,
+        },
+        ...(site.type !== 'local' && build === 'enterprise'
+            ? [
+                {
+                    title: t('credentials'),
+                    href: `/${params.orgId}/settings/sites/${params.niceId}/credentials`,
+                },
+            ]
+            : []),
    ];

+
    return (
        <>
            <SettingsSectionTitle
-                title={t('siteSetting', {siteName: site?.name})}
+                title={t('siteSetting', { siteName: site?.name })}
                description={t('siteSettingDescription')}
            />

--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,6 +20,7 @@ import { Toaster } from "@app/components/ui/toaster";
 import { build } from "@server/build";
 import { TopLoader } from "@app/components/Toploader";
 import Script from "next/script";
+import { ReactQueryProvider } from "@app/components/react-query-provider";

 export const metadata: Metadata = {
    title: `Dashboard - ${process.env.BRANDING_APP_NAME || "Pangolin"}`,
@@ -94,38 +95,40 @@ export default async function RootLayout({
                        strategy="afterInteractive"
                    />
                )}
-                <NextIntlClientProvider>
-                    <ThemeProvider
-                        attribute="class"
-                        defaultTheme="system"
-                        enableSystem
-                        disableTransitionOnChange
-                    >
-                        <ThemeDataProvider colors={loadBrandingColors()}>
-                            <EnvProvider env={pullEnv()}>
-                                <LicenseStatusProvider
-                                    licenseStatus={licenseStatus}
-                                >
-                                    <SupportStatusProvider
-                                        supporterStatus={supporterData}
+                <ReactQueryProvider>
+                    <NextIntlClientProvider>
+                        <ThemeProvider
+                            attribute="class"
+                            defaultTheme="system"
+                            enableSystem
+                            disableTransitionOnChange
+                        >
+                            <ThemeDataProvider colors={loadBrandingColors()}>
+                                <EnvProvider env={pullEnv()}>
+                                    <LicenseStatusProvider
+                                        licenseStatus={licenseStatus}
                                    >
-                                        {/* Main content */}
-                                        <div className="h-full flex flex-col">
-                                            <div className="flex-1 overflow-auto">
-                                                <SplashImage>
+                                        <SupportStatusProvider
+                                            supporterStatus={supporterData}
+                                        >
+                                            {/* Main content */}
+                                            <div className="h-full flex flex-col">
+                                                <div className="flex-1 overflow-auto">
+                                                    <SplashImage>
+                                                        <LicenseViolation />
+                                                        {children}
+                                                    </SplashImage>
                                                    <LicenseViolation />
-                                                    {children}
-                                                </SplashImage>
-                                                <LicenseViolation />
+                                                </div>
                                            </div>
-                                        </div>
-                                    </SupportStatusProvider>
-                                </LicenseStatusProvider>
-                                <Toaster />
-                            </EnvProvider>
-                        </ThemeDataProvider>
-                    </ThemeProvider>
-                </NextIntlClientProvider>
+                                        </SupportStatusProvider>
+                                    </LicenseStatusProvider>
+                                    <Toaster />
+                                </EnvProvider>
+                            </ThemeDataProvider>
+                        </ThemeProvider>
+                    </NextIntlClientProvider>
+                </ReactQueryProvider>
            </body>
        </html>
    );