All set! You can now create another key or explore the docs to learn more
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
new file mode 100644
index 0000000000..f24fa9d1a4
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { SecretKey } from "@/app/(app)/apis/[apiId]/_components/create-key/components/secret-key";
+import { CircleInfo } from "@unkey/icons";
+import { Code, CopyButton, VisibleButton } from "@unkey/ui";
+import { useState } from "react";
+
+type KeySecretSectionProps = {
+ keyValue: string;
+ apiId: string;
+ className?: string;
+ secretKeyClassName?: string;
+ codeClassName?: string;
+};
+
+export const KeySecretSection = ({
+ keyValue,
+ apiId,
+ className,
+ secretKeyClassName = "bg-white dark:bg-black",
+ codeClassName,
+}: KeySecretSectionProps) => {
+ const [showKeyInSnippet, setShowKeyInSnippet] = useState(false);
+
+ const split = keyValue.split("_") ?? [];
+ const maskedKey =
+ split.length >= 2
+ ? `${split.at(0)}_${"*".repeat(split.at(1)?.length ?? 0)}`
+ : "*".repeat(split.at(0)?.length ?? 0);
+
+ const snippet = `curl -XPOST '${
+ process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.dev"
+ }/v1/keys.verifyKey' \\
+ -H 'Content-Type: application/json' \\
+ -d '{
+ "key": "${keyValue}",
+ "apiId": "${apiId}"
+ }'`;
+
+ return (
+
+
+
Key Secret
+
+
+
+
+ Copy and save this key secret as it won't be shown again.{" "}
+
+ Learn more
+
+
+
+
+
+
Try It Out
+
+ }
+ copyButton={
}
+ >
+ {showKeyInSnippet ? snippet : snippet.replace(keyValue, maskedKey)}
+
+
+
+ );
+};
diff --git a/apps/dashboard/app/new-2/constants.ts b/apps/dashboard/app/new-2/constants.ts
deleted file mode 100644
index cac7355520..0000000000
--- a/apps/dashboard/app/new-2/constants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export type StepInfo = {
- title: string;
- description: string;
-};
-
-export const stepInfos: StepInfo[] = [
- {
- title: "Create company workspace",
- description:
- "Customize your workspace name, logo, and handle. This is how it’ll appear in your dashboard and URLs.",
- },
- {
- title: "Create your first API key",
- description:
- "Generate a key for your public API. You’ll be able to verify, revoke, and track usage — all globally distributed with built-in analytics.",
- },
- {
- title: "Configure your dashboard",
- description: "Customize your dashboard settings and invite team members to collaborate.",
- },
-];
diff --git a/apps/dashboard/app/new-2/page.tsx b/apps/dashboard/app/new-2/page.tsx
deleted file mode 100644
index 7e85b42b1e..0000000000
--- a/apps/dashboard/app/new-2/page.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-"use client";
-import { StackPerspective2 } from "@unkey/icons";
-import { FormInput } from "@unkey/ui";
-import { Suspense, useState } from "react";
-import { type OnboardingStep, OnboardingWizard } from "./components/onboarding-wizard";
-import { stepInfos } from "./constants";
-import { useKeyCreationStep } from "./hooks/use-key-creation-step";
-import { useWorkspaceStep } from "./hooks/use-workspace-step";
-
-export default function OnboardingPage() {
- return (
-
}>
-
-
- );
-}
-
-function OnboardingFallback() {
- return (
-
- {/* Unkey Logo */}
-
Unkey
- {/* Spacer */}
-
- {/* Static content while loading */}
-
-
-
-
- Step 1 of 3
-
-
-
-
- Create workspace
-
-
-
- Set up your workspace to get started with Unkey
-
-
-
-
-
,
- body: (
-
- ),
- kind: "required" as const,
- validFieldCount: 0,
- requiredFieldCount: 1,
- buttonText: "Continue",
- description: "Set up your workspace to get started",
- onStepNext: () => {},
- onStepBack: () => {},
- },
- ]}
- onComplete={() => {}}
- onStepChange={() => {}}
- />
-
-
-
- );
-}
-
-function OnboardingContent() {
- const [currentStepIndex, setCurrentStepIndex] = useState(0);
- const workspaceStep = useWorkspaceStep();
- const keyCreationStep = useKeyCreationStep();
-
- const steps: OnboardingStep[] = [
- workspaceStep,
- keyCreationStep,
- {
- name: "Dashboard",
- icon:
,
- body:
Dashboard setup content
,
- kind: "non-required" as const,
- description: "Next: you'll create your first API key",
- buttonText: "Continue",
- },
- ];
-
- const handleComplete = () => {
- console.info("Onboarding completed!");
- };
-
- const handleStepChange = (newStepIndex: number) => {
- setCurrentStepIndex(newStepIndex);
- };
-
- const currentStepInfo = stepInfos[currentStepIndex];
-
- return (
-
- {/* Unkey Logo */}
-
Unkey
- {/* Spacer */}
-
- {/* Onboarding part. This will be a step wizard*/}
-
- {/* Explanation part - Fixed height to prevent layout shifts */}
-
-
-
- Step {currentStepIndex + 1} of {steps.length}
-
-
-
-
- {currentStepInfo.title}
-
-
-
- {currentStepInfo.description}
-
-
-
- {/* Form part */}
-
-
-
-
-
- );
-}
diff --git a/apps/dashboard/app/new-2/components/circle-progress.tsx b/apps/dashboard/app/new/components/circle-progress.tsx
similarity index 100%
rename from apps/dashboard/app/new-2/components/circle-progress.tsx
rename to apps/dashboard/app/new/components/circle-progress.tsx
diff --git a/apps/dashboard/app/new-2/components/expandable-settings.tsx b/apps/dashboard/app/new/components/expandable-settings.tsx
similarity index 86%
rename from apps/dashboard/app/new-2/components/expandable-settings.tsx
rename to apps/dashboard/app/new/components/expandable-settings.tsx
index 8f98330114..25cb28563d 100644
--- a/apps/dashboard/app/new-2/components/expandable-settings.tsx
+++ b/apps/dashboard/app/new/components/expandable-settings.tsx
@@ -1,4 +1,6 @@
+"use client";
import { Switch } from "@/components/ui/switch";
+
import { CircleInfo } from "@unkey/icons";
import { InfoTooltip } from "@unkey/ui";
import { useState } from "react";
@@ -12,6 +14,7 @@ type ExpandableSettingsProps = {
defaultChecked?: boolean;
onCheckedChange?: (checked: boolean) => void;
disabled?: boolean;
+ disabledTooltip?: string;
};
export const ExpandableSettings = ({
@@ -22,6 +25,7 @@ export const ExpandableSettings = ({
defaultChecked = false,
onCheckedChange,
disabled = false,
+ disabledTooltip = "You need to have a valid API name",
}: ExpandableSettingsProps) => {
const [isEnabled, setIsEnabled] = useState(defaultChecked);
@@ -32,13 +36,19 @@ export const ExpandableSettings = ({
setIsEnabled(checked);
onCheckedChange?.(checked);
};
+ const handleSwitchClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ };
- const handleHeaderClick = () => {
+ const handleHeaderClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
handleCheckedChange(!isEnabled);
};
return (
-
+
{/* Header */}