diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
index 5d18afef1..b86a876ce 100644
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -18,13 +18,34 @@ export default function Steps({
);
}
+// Steps without a status keep the neutral look of the instruction-list
+// steppers, where no step is ever "reached".
+type StepStatus = "complete" | "current" | "upcoming";
+
+// The rail has to meet the middle of the circle, so its offset is half the
+// circle and moves with the size.
+const stepSizes = {
+ default: {
+ circle: "h-[34px] w-[34px]",
+ railHorizontal: "mt-[16px]",
+ railVertical: "ml-[18px]",
+ },
+ large: {
+ circle: "h-[44px] w-[44px]",
+ railHorizontal: "mt-[21px]",
+ railVertical: "ml-[23px]",
+ },
+};
+
type StepProps = {
children: React.ReactNode;
- step: number;
+ step: React.ReactNode;
line?: boolean;
center?: boolean;
horizontal?: boolean;
disabled?: boolean;
+ status?: StepStatus;
+ size?: keyof typeof stepSizes;
className?: string;
};
@@ -35,8 +56,12 @@ const Step = ({
center = false,
horizontal,
disabled = false,
+ status,
+ size = "default",
className,
}: StepProps) => {
+ const sizing = stepSizes[size];
+
return (
)}
{step}
diff --git a/src/modules/users/PendingApproval.test.tsx b/src/modules/users/PendingApproval.test.tsx
new file mode 100644
index 000000000..6c10581ae
--- /dev/null
+++ b/src/modules/users/PendingApproval.test.tsx
@@ -0,0 +1,72 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PendingApproval } from "@/modules/users/PendingApproval";
+
+// The logo is an SVG import vitest does not transform, and it carries no copy
+// these tests care about.
+vi.mock("@components/NetBirdLogo", () => ({
+ NetBirdLogo: () => ,
+}));
+
+// Management names the owner inside the refusal itself. By the time it reaches
+// the dashboard it has been lowercased and wrapped by
+// NewPermissionValidationError, so both are pinned here.
+const withOwner = {
+ code: 403,
+ message:
+ "failed to validate user permissions: user is pending approval by owner ad****n@example.com",
+};
+const withoutOwner = {
+ code: 403,
+ message: "failed to validate user permissions: user is pending approval",
+};
+
+// The copy is split across elements for styling, so it is read back as one
+// whitespace-normalised string.
+const copyFor = (error: { code: number; message: string } | null) => {
+ const { container } = render(
+ ,
+ );
+ return container.textContent?.replace(/\s+/g, " ").trim() ?? "";
+};
+
+afterEach(cleanup);
+
+describe("PendingApproval", () => {
+ it("names the owner carried in the refusal message", () => {
+ expect(copyFor(withOwner)).toContain(
+ "Ask the owner of the account at ad****n@example.com to approve your access.",
+ );
+ });
+
+ it("asks for the owner without an address when management named none", () => {
+ const copy = copyFor(withoutOwner);
+ expect(copy).toContain(
+ "Ask the owner of the account to approve your access.",
+ );
+ expect(copy).not.toContain("@example.com");
+ });
+
+ it("falls back to the addressless copy when there is no error at all", () => {
+ expect(copyFor(null)).toContain(
+ "Ask the owner of the account to approve your access.",
+ );
+ });
+
+ it("states the approval requirement either way", () => {
+ expect(copyFor(withOwner)).toContain(
+ "Your organization requires new users to be manually approved before joining.",
+ );
+ cleanup();
+ expect(copyFor(withoutOwner)).toContain(
+ "Your organization requires new users to be manually approved before joining.",
+ );
+ });
+
+ it("walks the stepper to the approval step", () => {
+ const copy = copyFor(null);
+ expect(copy).toContain("Account Created");
+ expect(copy).toContain("Waiting for Approval");
+ expect(copy).toContain("Join Account");
+ });
+});
diff --git a/src/modules/users/PendingApproval.tsx b/src/modules/users/PendingApproval.tsx
new file mode 100644
index 000000000..0428c3f7d
--- /dev/null
+++ b/src/modules/users/PendingApproval.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import Button from "@components/Button";
+import InlineLink from "@components/InlineLink";
+import { NetBirdLogo } from "@components/NetBirdLogo";
+import Paragraph from "@components/Paragraph";
+import Steps from "@components/Steps";
+import { cn } from "@utils/helpers";
+import {
+ CheckIcon,
+ Loader2Icon,
+ LogOut,
+ RefreshCwIcon,
+ UserCircleIcon,
+} from "lucide-react";
+import * as React from "react";
+
+const SUPPORT_EMAIL = "support@netbird.io";
+
+const parseApproverEmail = (message?: string): string =>
+ message?.match(/[^\s@]+@[a-z0-9.-]+\.[a-z]{2,}/i)?.[0] ?? "";
+
+const steps = [
+ {
+ label: "Account Created",
+ status: "complete",
+ icon: ,
+ },
+ {
+ label: "Waiting for Approval",
+ status: "current",
+ icon: ,
+ },
+ {
+ label: "Join Account",
+ status: "upcoming",
+ icon: ,
+ },
+] as const;
+
+type Props = {
+ // The refusal from management, which names the owner who can approve.
+ error?: { message?: string } | null;
+ onRefresh: () => void;
+ onLogout: () => void;
+};
+
+export const PendingApproval = ({ error, onRefresh, onLogout }: Props) => {
+ const owner = parseApproverEmail(error?.message);
+
+ return (
+
+
+
+
+
+ {steps.map(({ label, status, icon }, index) => (
+
+
+ {label}
+
+
+ ))}
+
+
+
+ Your organization requires new users to be manually approved before
+ joining.{" "}
+ {owner ? (
+ <>
+ Ask the owner of the account at{" "}
+ {owner} to approve
+ your access.
+
+ ) : (
+ "Ask the owner of the account to approve your access."
+ )}
+
+
+