+ {t.rich("loginLegalDisclaimer", {
+ termsOfService: (chunks) => (
+
+ {chunks}
+
+ ),
+ privacyPolicy: (chunks) => (
+
+ {chunks}
+
+ )
+ })}
+
+ )}
+
{isInvite && (
@@ -99,15 +137,36 @@ export default async function Page(props: {
)}
-
+ {useSmartLogin ? (
+ <>
+
+
+
+
+
+
+
+ ) : (
+
+ )}
{(!signUpDisabled || isInvite) && (
@@ -124,6 +183,31 @@ export default async function Page(props: {
)}
+
+ {!isInvite && (build === "saas" || env.flags.useOrgOnlyIdp) ? (
+
+ ) : null}
);
}
+
+function buildQueryString(searchParams: {
+ [key: string]: string | string[] | undefined;
+}): string {
+ const params = new URLSearchParams();
+ const redirect = searchParams.redirect;
+ const forceLogin = searchParams.forceLogin;
+
+ if (redirect && typeof redirect === "string") {
+ params.set("redirect", redirect);
+ }
+ if (forceLogin && typeof forceLogin === "string") {
+ params.set("forceLogin", forceLogin);
+ }
+ const queryString = params.toString();
+ return queryString ? `?${queryString}` : "";
+}
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
index b4f4fddd..9ab7b7e6 100644
--- a/src/app/auth/signup/page.tsx
+++ b/src/app/auth/signup/page.tsx
@@ -14,6 +14,7 @@ export default async function Page(props: {
searchParams: Promise<{
redirect: string | undefined;
email: string | undefined;
+ fromSmartLogin: string | undefined;
}>;
}) {
const searchParams = await props.searchParams;
@@ -73,6 +74,7 @@ export default async function Page(props: {
inviteToken={inviteToken}
inviteId={inviteId}
emailParam={searchParams.email}
+ fromSmartLogin={searchParams.fromSmartLogin === "true"}
/>
diff --git a/src/app/globals.css b/src/app/globals.css
index 731e1bff..bbb165c2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -21,6 +21,7 @@
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
+ --destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.91 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.213 47.604);
@@ -55,6 +56,7 @@
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.5382 0.1949 22.216);
+ --destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 13%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.646 0.222 41.116);
diff --git a/src/app/navigation.tsx b/src/app/navigation.tsx
index 345b5a4c..4fb5430c 100644
--- a/src/app/navigation.tsx
+++ b/src/app/navigation.tsx
@@ -2,27 +2,27 @@ import { SidebarNavItem } from "@app/components/SidebarNav";
import { Env } from "@app/lib/types/env";
import { build } from "@server/build";
import {
- Settings,
- Users,
- Link as LinkIcon,
- Waypoints,
+ ChartLine,
Combine,
+ CreditCard,
Fingerprint,
+ Globe,
+ GlobeLock,
KeyRound,
+ Laptop,
+ Link as LinkIcon,
+ Logs, // Added from 'dev' branch
+ MonitorUp,
+ ReceiptText,
+ ScanEye, // Added from 'dev' branch
+ Server,
+ Settings,
+ SquareMousePointer,
TicketCheck,
User,
- Globe, // Added from 'dev' branch
- MonitorUp, // Added from 'dev' branch
- Server,
- ReceiptText,
- CreditCard,
- Logs,
- SquareMousePointer,
- ScanEye,
- GlobeLock,
- Smartphone,
- Laptop,
- ChartLine
+ UserCog,
+ Users,
+ Waypoints
} from "lucide-react";
export type SidebarNavSection = {
@@ -123,7 +123,7 @@ export const orgNavSections = (env?: Env): SidebarNavSection[] => [
href: "/{orgId}/settings/access/roles",
icon:
},
- ...(build == "saas" || env?.flags.useOrgOnlyIdp
+ ...(build === "saas" || env?.flags.useOrgOnlyIdp
? [
{
title: "sidebarIdentityProviders",
@@ -132,6 +132,15 @@ export const orgNavSections = (env?: Env): SidebarNavSection[] => [
}
]
: []),
+ ...(build !== "oss"
+ ? [
+ {
+ title: "sidebarApprovals",
+ href: "/{orgId}/settings/access/approvals",
+ icon:
+ }
+ ]
+ : []),
{
title: "sidebarShareableLinks",
href: "/{orgId}/settings/share-links",
diff --git a/src/components/ApprovalFeed.tsx b/src/components/ApprovalFeed.tsx
new file mode 100644
index 00000000..b3d446b1
--- /dev/null
+++ b/src/components/ApprovalFeed.tsx
@@ -0,0 +1,243 @@
+"use client";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
+import {
+ approvalFiltersSchema,
+ approvalQueries,
+ type ApprovalItem
+} from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Ban, Check, LaptopMinimal, RefreshCw } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Fragment, useActionState } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Card, CardHeader } from "./ui/card";
+import { Label } from "./ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from "./ui/select";
+import { Separator } from "./ui/separator";
+
+export type ApprovalFeedProps = {
+ orgId: string;
+};
+
+export function ApprovalFeed({ orgId }: ApprovalFeedProps) {
+ const searchParams = useSearchParams();
+ const path = usePathname();
+ const t = useTranslations();
+
+ const router = useRouter();
+
+ const filters = approvalFiltersSchema.parse(
+ Object.fromEntries(searchParams.entries())
+ );
+
+ const { data, isFetching, refetch } = useQuery(
+ approvalQueries.listApprovals(orgId, filters)
+ );
+
+ const approvals = data?.approvals ?? [];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {approvals.map((approval, index) => (
+
+ -
+ refetch()}
+ />
+
+ {index < approvals.length - 1 && }
+
+ ))}
+
+ {approvals.length === 0 && (
+ -
+ {t("approvalListEmpty")}
+
+ )}
+
+
+
+
+ );
+}
+
+type ApprovalRequestProps = {
+ approval: ApprovalItem;
+ orgId: string;
+ onSuccess?: () => void;
+};
+
+function ApprovalRequest({ approval, orgId, onSuccess }: ApprovalRequestProps) {
+ const t = useTranslations();
+
+ const [_, formAction, isSubmitting] = useActionState(onSubmit, null);
+ const api = createApiClient(useEnvContext());
+
+ async function onSubmit(_previousState: any, formData: FormData) {
+ const decision = formData.get("decision");
+ const res = await api
+ .put(`/org/${orgId}/approvals/${approval.approvalId}`, { decision })
+ .catch((e) => {
+ toast({
+ variant: "destructive",
+ title: t("accessApprovalErrorUpdate"),
+ description: formatAxiosError(
+ e,
+ t("accessApprovalErrorUpdateDescription")
+ )
+ });
+ });
+ if (res && res.status === 200) {
+ const result = res.data.data;
+ toast({
+ variant: "default",
+ title: t("accessApprovalUpdated"),
+ description:
+ result.decision === "approved"
+ ? t("accessApprovalApprovedDescription")
+ : t("accessApprovalDeniedDescription")
+ });
+
+ onSuccess?.();
+ }
+ }
+
+ return (
+
+
+
+
+
+ {approval.user.username}
+
+
+ {approval.type === "user_device" && (
+ {t("requestingNewDeviceApproval")}
+ )}
+
+
+
+ {approval.decision === "pending" && (
+
+ )}
+ {approval.decision === "approved" && (
+
{t("approved")}
+ )}
+ {approval.decision === "denied" && (
+
{t("denied")}
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/CreateRoleForm.tsx b/src/components/CreateRoleForm.tsx
index b8df1f78..8108461d 100644
--- a/src/components/CreateRoleForm.tsx
+++ b/src/components/CreateRoleForm.tsx
@@ -1,21 +1,5 @@
"use client";
-import { Button } from "@app/components/ui/button";
-import {
- Form,
- FormControl,
- FormField,
- FormItem,
- FormLabel,
- FormMessage
-} from "@app/components/ui/form";
-import { Input } from "@app/components/ui/input";
-import { toast } from "@app/hooks/useToast";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AxiosResponse } from "axios";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
import {
Credenza,
CredenzaBody,
@@ -26,17 +10,37 @@ import {
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
-import { useOrgContext } from "@app/hooks/useOrgContext";
-import { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
+import { Button } from "@app/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { build } from "@server/build";
+import type { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
+import { AxiosResponse } from "axios";
import { useTranslations } from "next-intl";
+import { useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
+import { CheckboxWithLabel } from "./ui/checkbox";
type CreateRoleFormProps = {
open: boolean;
setOpen: (open: boolean) => void;
- afterCreate?: (res: CreateRoleResponse) => Promise
;
+ afterCreate?: (res: CreateRoleResponse) => void;
};
export default function CreateRoleForm({
@@ -46,35 +50,35 @@ export default function CreateRoleForm({
}: CreateRoleFormProps) {
const { org } = useOrgContext();
const t = useTranslations();
+ const { isPaidUser } = usePaidStatus();
const formSchema = z.object({
- name: z.string({ message: t("nameRequired") }).max(32),
- description: z.string().max(255).optional()
+ name: z
+ .string({ message: t("nameRequired") })
+ .min(1)
+ .max(32),
+ description: z.string().max(255).optional(),
+ requireDeviceApproval: z.boolean().optional()
});
- const [loading, setLoading] = useState(false);
-
const api = createApiClient(useEnvContext());
const form = useForm>({
resolver: zodResolver(formSchema),
defaultValues: {
name: "",
- description: ""
+ description: "",
+ requireDeviceApproval: false
}
});
- async function onSubmit(values: z.infer) {
- setLoading(true);
+ const [loading, startTransition] = useTransition();
+ async function onSubmit(values: z.infer) {
const res = await api
- .put>(
- `/org/${org?.org.orgId}/role`,
- {
- name: values.name,
- description: values.description
- } as CreateRoleBody
- )
+ .put<
+ AxiosResponse
+ >(`/org/${org?.org.orgId}/role`, values satisfies CreateRoleBody)
.catch((e) => {
toast({
variant: "destructive",
@@ -97,12 +101,8 @@ export default function CreateRoleForm({
setOpen(false);
}
- if (afterCreate) {
- afterCreate(res.data.data);
- }
+ afterCreate?.(res.data.data);
}
-
- setLoading(false);
}
return (
@@ -111,7 +111,6 @@ export default function CreateRoleForm({
open={open}
onOpenChange={(val) => {
setOpen(val);
- setLoading(false);
form.reset();
}}
>
@@ -125,7 +124,9 @@ export default function CreateRoleForm({
diff --git a/src/components/Credenza.tsx b/src/components/Credenza.tsx
index 0446500c..26e84e5d 100644
--- a/src/components/Credenza.tsx
+++ b/src/components/Credenza.tsx
@@ -2,8 +2,6 @@
import * as React from "react";
-import { cn } from "@app/lib/cn";
-import { useMediaQuery } from "@app/hooks/useMediaQuery";
import {
Dialog,
DialogClose,
@@ -14,16 +12,9 @@ import {
DialogTitle,
DialogTrigger
} from "@/components/ui/dialog";
-import {
- Drawer,
- DrawerClose,
- DrawerContent,
- DrawerDescription,
- DrawerFooter,
- DrawerHeader,
- DrawerTitle,
- DrawerTrigger
-} from "@/components/ui/drawer";
+import { DrawerClose } from "@/components/ui/drawer";
+import { useMediaQuery } from "@app/hooks/useMediaQuery";
+import { cn } from "@app/lib/cn";
import {
Sheet,
SheetContent,
@@ -78,10 +69,7 @@ const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
return (
-
+
{children}
);
@@ -172,14 +160,13 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
const isDesktop = useMediaQuery(desktop);
- // const isDesktop = true;
const CredenzaFooter = isDesktop ? DialogFooter : SheetFooter;
return (
{
export {
Credenza,
- CredenzaTrigger,
+ CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
+ CredenzaFooter,
CredenzaHeader,
CredenzaTitle,
- CredenzaBody,
- CredenzaFooter
+ CredenzaTrigger
};
diff --git a/src/components/DashboardLoginForm.tsx b/src/components/DashboardLoginForm.tsx
index 5082f00d..f57eb8b1 100644
--- a/src/components/DashboardLoginForm.tsx
+++ b/src/components/DashboardLoginForm.tsx
@@ -69,22 +69,6 @@ export default function DashboardLoginForm({
- {showOrgLogin && (
-
-
-
-
-
+
+
+ {t("deviceActivation")}
+
+ {validatingInitialCode
+ ? t("deviceCodeValidating")
+ : t("deviceCodeVerifying")}
+
+
+
+
+
+
+ {validatingInitialCode
+ ? t("deviceCodeValidating")
+ : t("deviceCodeVerifying")}
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
-