calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-10 20:02:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feat/device-approvals

Browse Source
This commit is contained in:
Fred KISSIE
2026-01-05 16:54:18 +01:00
parent e983e1166a f7fcde8312
commit 0f2b94307f
165 changed files with 8514 additions and 2346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ClientDownloadBanner.tsx
View File

@@ -66,4 +66,3 @@ export const ClientDownloadBanner = () => {
};
export default ClientDownloadBanner;

12
src/components/ClientResourcesTable.tsx
View File

@@ -99,14 +99,12 @@ export default function ClientResourcesTable({
siteId: number
) => {
try {
await api
.delete(`/site-resource/${resourceId}`)
.then(() => {
startTransition(() => {
router.refresh();
setIsDeleteModalOpen(false);
});
await api.delete(`/site-resource/${resourceId}`).then(() => {
startTransition(() => {
router.refresh();
setIsDeleteModalOpen(false);
});
});
} catch (e) {
console.error(t("resourceErrorDelete"), e);
toast({

59
src/components/CreateInternalResourceDialog.tsx
View File

@@ -87,7 +87,12 @@ const isValidPortRangeString = (val: string | undefined | null): boolean => {
return false;
}
if (startPort < 1 || startPort > 65535 || endPort < 1 || endPort > 65535) {
if (
startPort < 1 ||
startPort > 65535 ||
endPort < 1 ||
endPort > 65535
) {
return false;
}
@@ -131,7 +136,10 @@ const getPortModeFromString = (val: string | undefined | null): PortMode => {
};
// Helper to get the port string for API from mode and custom value
const getPortStringFromMode = (mode: PortMode, customValue: string): string | undefined => {
const getPortStringFromMode = (
mode: PortMode,
customValue: string
): string | undefined => {
if (mode === "all") return "*";
if (mode === "blocked") return "";
return customValue;
@@ -170,7 +178,9 @@ export default function CreateInternalResourceDialog({
mode: z.enum(["host", "cidr"]),
// protocol: z.enum(["tcp", "udp"]).nullish(),
// proxyPort: z.int().positive().min(1, t("createInternalResourceDialogProxyPortMin")).max(65535, t("createInternalResourceDialogProxyPortMax")).nullish(),
destination: z.string().min(1),
destination: z.string().min(1, {
message: t("createInternalResourceDialogDestinationRequired")
}),
// destinationPort: z.int().positive().min(1, t("createInternalResourceDialogDestinationPortMin")).max(65535, t("createInternalResourceDialogDestinationPortMax")).nullish(),
alias: z.string().nullish(),
tcpPortRangeString: createPortRangeStringSchema(t),
@@ -341,10 +351,10 @@ export default function CreateInternalResourceDialog({
};
useEffect(() => {
if (open && availableSites.length > 0) {
if (open) {
form.reset({
name: "",
siteId: availableSites[0].siteId,
siteId: availableSites[0]?.siteId || 0,
mode: "host",
// protocol: "tcp",
// proxyPort: undefined,
@@ -467,30 +477,6 @@ export default function CreateInternalResourceDialog({
}
};
if (availableSites.length === 0) {
return (
<Credenza open={open} onOpenChange={setOpen}>
<CredenzaContent className="max-w-md">
<CredenzaHeader>
<CredenzaTitle>
{t("createInternalResourceDialogNoSitesAvailable")}
</CredenzaTitle>
<CredenzaDescription>
{t(
"createInternalResourceDialogNoSitesAvailableDescription"
)}
</CredenzaDescription>
</CredenzaHeader>
<CredenzaFooter>
<Button onClick={() => setOpen(false)}>
{t("createInternalResourceDialogClose")}
</Button>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}
return (
<Credenza open={open} onOpenChange={setOpen}>
<CredenzaContent className="max-w-3xl">
@@ -1119,8 +1105,7 @@ export default function CreateInternalResourceDialog({
size="sm"
tags={
form.getValues()
.roles ||
[]
.roles || []
}
setTags={(
newRoles
@@ -1149,11 +1134,6 @@ export default function CreateInternalResourceDialog({
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"resourceRoleDescription"
)}
</FormDescription>
</FormItem>
)}
/>
@@ -1181,8 +1161,7 @@ export default function CreateInternalResourceDialog({
)}
tags={
form.getValues()
.users ||
[]
.users || []
}
size="sm"
setTags={(
@@ -1272,9 +1251,7 @@ export default function CreateInternalResourceDialog({
restrictTagsToAutocompleteOptions={
true
}
sortTags={
true
}
sortTags={true}
/>
</FormControl>
<FormMessage />

8
src/components/DashboardLoginForm.tsx
View File

@@ -17,7 +17,6 @@ import { cleanRedirect } from "@app/lib/cleanRedirect";
import BrandingLogo from "@app/components/BrandingLogo";
import { useTranslations } from "next-intl";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { build } from "@server/build";
type DashboardLoginFormProps = {
redirect?: string;
@@ -49,14 +48,9 @@ export default function DashboardLoginForm({
? env.branding.logo?.authPage?.height || 58
: 58;
const gradientClasses =
build === "saas"
? "border-b border-primary/30 bg-gradient-to-br dark:from-primary/20 from-primary/20 via-background to-background overflow-hidden rounded-t-lg"
: "border-b";
return (
<Card className="w-full max-w-md">
<CardHeader className={gradientClasses}>
<CardHeader className="border-b">
<div className="flex flex-row items-center justify-center">
<BrandingLogo height={logoHeight} width={logoWidth} />
</div>

9
src/components/DismissableBanner.tsx
View File

@@ -1,9 +1,10 @@
"use client";
import React, { useState, useEffect, type ReactNode } from "react";
import React, { useState, useEffect, type ReactNode, useEffectEvent } from "react";
import { Card, CardContent } from "@app/components/ui/card";
import { X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useEnvContext } from "@app/hooks/useEnvContext";
type DismissableBannerProps = {
storageKey: string;
@@ -25,6 +26,12 @@ export const DismissableBanner = ({
const [isDismissed, setIsDismissed] = useState(true);
const t = useTranslations();
const { env } = useEnvContext();
if (env.flags.disableProductHelpBanners) {
return null;
}
useEffect(() => {
const dismissedData = localStorage.getItem(storageKey);
if (dismissedData) {

18
src/components/EditInternalResourceDialog.tsx
View File

@@ -281,9 +281,9 @@ export default function EditInternalResourceDialog({
filter: "machine"
}
}),
resourceQueries.resourceUsers({ resourceId: resource.id }),
resourceQueries.resourceRoles({ resourceId: resource.id }),
resourceQueries.resourceClients({ resourceId: resource.id })
resourceQueries.siteResourceUsers({ siteResourceId: resource.id }),
resourceQueries.siteResourceRoles({ siteResourceId: resource.id }),
resourceQueries.siteResourceClients({ siteResourceId: resource.id })
],
combine: (results) => {
const [
@@ -501,13 +501,19 @@ export default function EditInternalResourceDialog({
// ]);
await queryClient.invalidateQueries(
resourceQueries.resourceRoles({ resourceId: resource.id })
resourceQueries.siteResourceRoles({
siteResourceId: resource.id
})
);
await queryClient.invalidateQueries(
resourceQueries.resourceUsers({ resourceId: resource.id })
resourceQueries.siteResourceUsers({
siteResourceId: resource.id
})
);
await queryClient.invalidateQueries(
resourceQueries.resourceClients({ resourceId: resource.id })
resourceQueries.siteResourceClients({
siteResourceId: resource.id
})
);
toast({

2
src/components/ExitNodesTable.tsx
View File

@@ -330,7 +330,7 @@ export default function ExitNodesTable({
isRefreshing={isRefreshing}
columnVisibility={{
type: false,
address: false,
address: false
}}
enableColumnVisibility={true}
/>

2
src/components/Layout.tsx
View File

@@ -37,7 +37,7 @@ export async function Layout({
(sidebarStateCookie !== "expanded" && defaultSidebarCollapsed);
return (
<div className="flex h-screen overflow-hidden">
<div className="flex h-screen-safe overflow-hidden">
{/* Desktop Sidebar */}
{showSidebar && (
<LayoutSidebar

14
src/components/LayoutMobileMenu.tsx
View File

@@ -48,7 +48,7 @@ export function LayoutMobileMenu({
const t = useTranslations();
return (
<div className="shrink-0 md:hidden">
<div className="shrink-0 md:hidden sticky top-0 z-50">
<div className="h-16 flex items-center px-2">
<div className="flex items-center gap-4">
{showSidebar && (
@@ -72,17 +72,18 @@ export function LayoutMobileMenu({
<SheetDescription className="sr-only">
{t("navbarDescription")}
</SheetDescription>
<div className="flex-1 overflow-y-auto">
<div className="p-4">
<div className="flex-1 overflow-y-auto relative">
<div className="px-3">
<OrgSelector
orgId={orgId}
orgs={orgs}
/>
</div>
<div className="px-4">
<div className="w-full border-b border-border" />
<div className="px-3">
{!isAdminPage &&
user.serverAdmin && (
<div className="pb-3">
<div className="py-2">
<Link
href="/admin"
className={cn(
@@ -112,8 +113,9 @@ export function LayoutMobileMenu({
}
/>
</div>
<div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-card to-transparent" />
</div>
<div className="p-4 space-y-4 border-t shrink-0">
<div className="px-3 pt-3 pb-3 space-y-4 border-t shrink-0">
<SupporterStatus />
{env?.app?.version && (
<div className="text-xs text-muted-foreground text-center">

16
src/components/LayoutSidebar.tsx
View File

@@ -109,17 +109,23 @@ export function LayoutSidebar({
isSidebarCollapsed ? "w-16" : "w-64"
)}
>
<div className="p-4 shrink-0">
<div className="shrink-0">
<OrgSelector
orgId={orgId}
orgs={orgs}
isCollapsed={isSidebarCollapsed}
/>
</div>
<div className="flex-1 overflow-y-auto">
<div
className={cn(
"w-full border-b border-border",
isSidebarCollapsed && "mb-2"
)}
/>
<div className="flex-1 overflow-y-auto relative">
<div className="px-2 pt-1">
{!isAdminPage && user.serverAdmin && (
<div className="pb-4">
<div className="py-2">
<Link
href="/admin"
className={cn(
@@ -153,8 +159,12 @@ export function LayoutSidebar({
isCollapsed={isSidebarCollapsed}
/>
</div>
{/* Fade gradient at bottom to indicate scrollable content */}
<div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-card to-transparent" />
</div>
<div className="w-full border-t border-border" />
<div className="p-4 pt-1 flex flex-col shrink-0">
{canShowProductUpdates && (
<div className="mb-3">

56
src/components/LoginForm.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useState, useRef } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
@@ -84,6 +84,7 @@ export default function LoginForm({
const [mfaRequested, setMfaRequested] = useState(false);
const [showSecurityKeyPrompt, setShowSecurityKeyPrompt] = useState(false);
const otpContainerRef = useRef<HTMLDivElement>(null);
const t = useTranslations();
const currentHost =
@@ -112,6 +113,53 @@ export default function LoginForm({
}
}, []);
// Auto-focus MFA input when MFA is requested
useEffect(() => {
if (!mfaRequested) return;
const focusInput = () => {
// Try using the ref first
if (otpContainerRef.current) {
const hiddenInput = otpContainerRef.current.querySelector(
"input"
) as HTMLInputElement;
if (hiddenInput) {
hiddenInput.focus();
return;
}
}
// Fallback: query the DOM
const otpContainer = document.querySelector(
'[data-slot="input-otp"]'
);
if (!otpContainer) return;
const hiddenInput = otpContainer.querySelector(
"input"
) as HTMLInputElement;
if (hiddenInput) {
hiddenInput.focus();
return;
}
// Last resort: click the first slot
const firstSlot = otpContainer.querySelector(
'[data-slot="input-otp-slot"]'
) as HTMLElement;
if (firstSlot) {
firstSlot.click();
}
};
// Use requestAnimationFrame to wait for the next paint
requestAnimationFrame(() => {
requestAnimationFrame(() => {
focusInput();
});
});
}, [mfaRequested]);
const formSchema = z.object({
email: z.string().email({ message: t("emailInvalid") }),
password: z.string().min(8, { message: t("passwordRequirementsChars") })
@@ -468,10 +516,14 @@ export default function LoginForm({
render={({ field }) => (
<FormItem>
<FormControl>
<div className="flex justify-center">
<div
ref={otpContainerRef}
className="flex justify-center"
>
<InputOTP
maxLength={6}
{...field}
autoFocus
pattern={
REGEXP_ONLY_DIGITS_AND_CHARS
}

5
src/components/MachineClientsBanner.tsx
View File

@@ -11,9 +11,7 @@ type MachineClientsBannerProps = {
orgId: string;
};
export const MachineClientsBanner = ({
orgId
}: MachineClientsBannerProps) => {
export const MachineClientsBanner = ({ orgId }: MachineClientsBannerProps) => {
const t = useTranslations();
return (
@@ -57,4 +55,3 @@ export const MachineClientsBanner = ({
};
export default MachineClientsBanner;

41
src/components/OrgInfoCard.tsx Normal file
View File

@@ -0,0 +1,41 @@
"use client";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { useOrgContext } from "@app/hooks/useOrgContext";
import {
InfoSection,
InfoSectionContent,
InfoSections,
InfoSectionTitle
} from "@app/components/InfoSection";
import { useTranslations } from "next-intl";
type OrgInfoCardProps = {};
export default function OrgInfoCard({}: OrgInfoCardProps) {
const { org } = useOrgContext();
const t = useTranslations();
return (
<Alert>
<AlertDescription>
<InfoSections cols={3}>
<InfoSection>
<InfoSectionTitle>{t("name")}</InfoSectionTitle>
<InfoSectionContent>{org.org.name}</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>{t("orgId")}</InfoSectionTitle>
<InfoSectionContent>{org.org.orgId}</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>{t("subnet")}</InfoSectionTitle>
<InfoSectionContent>
{org.org.subnet || t("none")}
</InfoSectionContent>
</InfoSection>
</InfoSections>
</AlertDescription>
</Alert>
);
}

121
src/components/OrgLoginPage.tsx Normal file
View File

@@ -0,0 +1,121 @@
import { LoginFormIDP } from "@app/components/LoginForm";
import {
LoadLoginPageBrandingResponse,
LoadLoginPageResponse
} from "@server/routers/loginPage/types";
import IdpLoginButtons from "@app/components/private/IdpLoginButtons";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from "@app/components/ui/card";
import { Button } from "@app/components/ui/button";
import Link from "next/link";
import { replacePlaceholder } from "@app/lib/replacePlaceholder";
import { getTranslations } from "next-intl/server";
import { pullEnv } from "@app/lib/pullEnv";
type OrgLoginPageProps = {
loginPage: LoadLoginPageResponse | undefined;
loginIdps: LoginFormIDP[];
branding: LoadLoginPageBrandingResponse | null;
searchParams: {
redirect?: string;
forceLogin?: string;
};
};
function buildQueryString(searchParams: {
redirect?: string;
forceLogin?: string;
}): string {
const params = new URLSearchParams();
if (searchParams.redirect) {
params.set("redirect", searchParams.redirect);
}
if (searchParams.forceLogin) {
params.set("forceLogin", searchParams.forceLogin);
}
const queryString = params.toString();
return queryString ? `?${queryString}` : "";
}
export default async function OrgLoginPage({
loginPage,
loginIdps,
branding,
searchParams
}: OrgLoginPageProps) {
const env = pullEnv();
const t = await getTranslations();
return (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
{t("poweredBy")}{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
{env.branding.appName || "Pangolin"}
</Link>
</span>
</div>
<Card className="w-full max-w-md">
<CardHeader>
{branding?.logoUrl && (
<div className="flex flex-row items-center justify-center mb-8">
<img
src={branding.logoUrl}
height={branding.logoHeight}
width={branding.logoWidth}
/>
</div>
)}
<CardTitle>
{branding?.orgTitle
? replacePlaceholder(branding.orgTitle, {
orgName: branding.orgName
})
: t("orgAuthSignInTitle")}
</CardTitle>
<CardDescription>
{branding?.orgSubtitle
? replacePlaceholder(branding.orgSubtitle, {
orgName: branding.orgName
})
: loginIdps.length > 0
? t("orgAuthChooseIdpDescription")
: ""}
</CardDescription>
</CardHeader>
<CardContent>
{loginIdps.length > 0 ? (
<IdpLoginButtons
idps={loginIdps}
orgId={loginPage?.orgId}
redirect={searchParams.redirect}
/>
) : (
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
{t("orgAuthNoIdpConfigured")}
</p>
<Link
href={`${env.app.dashboardUrl}/auth/login${buildQueryString(searchParams)}`}
>
<Button className="w-full">
{t("orgAuthSignInWithPangolin")}
</Button>
</Link>
</div>
)}
</CardContent>
</Card>
</div>
);
}

155
src/components/OrgSelectionForm.tsx Normal file
View File

@@ -0,0 +1,155 @@
"use client";
import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input";
import { Label } from "@app/components/ui/label";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useState, FormEvent, useEffect } from "react";
import BrandingLogo from "@app/components/BrandingLogo";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { useLocalStorage } from "@app/hooks/useLocalStorage";
import { CheckboxWithLabel } from "@app/components/ui/checkbox";
export function OrgSelectionForm() {
const router = useRouter();
const searchParams = useSearchParams();
const t = useTranslations();
const { env } = useEnvContext();
const { isUnlocked } = useLicenseStatusContext();
const [storedOrgId, setStoredOrgId] = useLocalStorage<string | null>(
"org-selection:org-id",
null
);
const [rememberOrgId, setRememberOrgId] = useLocalStorage<boolean>(
"org-selection:remember",
false
);
const [orgId, setOrgId] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
// Prefill org ID from storage if remember is enabled
useEffect(() => {
if (rememberOrgId && storedOrgId) {
setOrgId(storedOrgId);
}
}, []);
const logoWidth = isUnlocked()
? env.branding.logo?.authPage?.width || 175
: 175;
const logoHeight = isUnlocked()
? env.branding.logo?.authPage?.height || 58
: 58;
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!orgId.trim()) return;
setIsSubmitting(true);
const trimmedOrgId = orgId.trim();
// Save org ID to storage if remember is checked
if (rememberOrgId) {
setStoredOrgId(trimmedOrgId);
} else {
setStoredOrgId(null);
}
const queryString = buildQueryString(searchParams);
const url = `/auth/org/${trimmedOrgId}${queryString}`;
console.log(url);
router.push(url);
};
return (
<>
<Card className="w-full max-w-md">
<CardHeader className="border-b">
<div className="flex flex-row items-center justify-center">
<BrandingLogo height={logoHeight} width={logoWidth} />
</div>
<div className="text-center space-y-1 pt-3">
<p className="text-muted-foreground">
{t("orgAuthSelectOrgDescription")}
</p>
</div>
</CardHeader>
<CardContent className="pt-6">
<form onSubmit={handleSubmit} className="space-y-4">
<div className="flex flex-col gap-2">
<Label htmlFor="org-id">{t("orgId")}</Label>
<Input
id="org-id"
type="text"
placeholder={t("orgAuthOrgIdPlaceholder")}
autoComplete="off"
value={orgId}
onChange={(e) => setOrgId(e.target.value)}
required
disabled={isSubmitting}
/>
<p className="text-sm text-muted-foreground">
{t("orgAuthWhatsThis")}{" "}
<Link
href="https://docs.pangolin.net/manage/organizations/org-id"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
{t("learnMore")}
</Link>
</p>
</div>
<div className="pt-3">
<CheckboxWithLabel
id="remember-org-id"
label={t("orgAuthRememberOrgId")}
checked={rememberOrgId}
onCheckedChange={(checked) => {
setRememberOrgId(checked === true);
if (!checked) {
setStoredOrgId(null);
}
}}
/>
</div>
<Button
type="submit"
className="w-full"
disabled={isSubmitting || !orgId.trim()}
>
{t("continue")}
</Button>
</form>
</CardContent>
</Card>
<p className="text-center text-muted-foreground mt-4">
<Link
href={`/auth/login${buildQueryString(searchParams)}`}
className="underline"
>
{t("loginBack")}
</Link>
</p>
</>
);
}
function buildQueryString(searchParams: URLSearchParams): string {
const params = new URLSearchParams();
if (searchParams.get("redirect")) {
params.set("redirect", searchParams.get("redirect")!);
}
if (searchParams.get("forceLogin")) {
params.set("forceLogin", searchParams.get("forceLogin")!);
}
const queryString = params.toString();
return queryString ? `?${queryString}` : "";
}

17
src/components/OrgSelector.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import { Button } from "@app/components/ui/button";
import {
Command,
CommandEmpty,
@@ -52,13 +51,14 @@ export function OrgSelector({
const orgSelectorContent = (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="secondary"
size={isCollapsed ? "icon" : "lg"}
<div
role="combobox"
aria-expanded={open}
className={cn(
isCollapsed ? "w-8 h-8" : "w-full h-12 px-3 py-4"
"cursor-pointer transition-colors",
isCollapsed
? "w-full h-16 flex items-center justify-center hover:bg-muted"
: "w-full px-4 py-4 hover:bg-muted"
)}
>
{isCollapsed ? (
@@ -66,9 +66,8 @@ export function OrgSelector({
) : (
<div className="flex items-center justify-between w-full min-w-0">
<div className="flex items-center min-w-0 flex-1">
<Building2 className="h-4 w-4 mr-3 shrink-0" />
<div className="flex flex-col items-start min-w-0 flex-1">
<span className="font-bold text-sm">
<div className="flex flex-col items-start min-w-0 flex-1 gap-1">
<span className="font-bold">
{t("org")}
</span>
<span className="text-sm text-muted-foreground truncate w-full text-left">
@@ -79,7 +78,7 @@ export function OrgSelector({
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
</div>
)}
</Button>
</div>
</PopoverTrigger>
<PopoverContent className="w-[320px] p-0" align="start">
<Command className="rounded-lg">

4
src/components/PermissionsSelectBox.tsx
View File

@@ -34,7 +34,9 @@ function getActionsCategories(root: boolean) {
[t("actionListOrgDomains")]: "listOrgDomains",
[t("updateOrgUser")]: "updateOrgUser",
[t("createOrgUser")]: "createOrgUser",
[t("actionApplyBlueprint")]: "applyBlueprint"
[t("actionApplyBlueprint")]: "applyBlueprint",
[t("actionListBlueprints")]: "listBlueprints",
[t("actionGetBlueprint")]: "getBlueprint"
},
Site: {

1
src/components/PrivateResourcesBanner.tsx
View File

@@ -51,4 +51,3 @@ export const PrivateResourcesBanner = ({
};
export default PrivateResourcesBanner;

13
src/components/ProductUpdates.tsx
View File

@@ -41,7 +41,10 @@ export default function ProductUpdates({
const data = useQueries({
queries: [
productUpdatesQueries.list(env.app.notifications.product_updates),
productUpdatesQueries.list(
env.app.notifications.product_updates,
env.app.version
),
productUpdatesQueries.latestVersion(
env.app.notifications.new_releases
)
@@ -88,6 +91,10 @@ export default function ProductUpdates({
(update) => !productUpdatesRead.includes(update.id)
);
if (filteredUpdates.length === 0 && !showNewVersionPopup) {
return null;
}
return (
<div
className={cn(
@@ -185,7 +192,7 @@ function ProductUpdatesListPopup({
<div
className={cn(
"relative z-1 cursor-pointer block group",
"rounded-md border border-primary/30 bg-gradient-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
"rounded-md border border-primary/30 bg-linear-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full"
)}
@@ -339,7 +346,7 @@ function NewVersionAvailable({
rel="noopener noreferrer"
className={cn(
"relative z-2 group cursor-pointer block",
"rounded-md border border-primary/30 bg-gradient-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
"rounded-md border border-primary/30 bg-linear-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full"
)}

1
src/components/ProxyResourcesBanner.tsx
View File

@@ -20,4 +20,3 @@ export const ProxyResourcesBanner = () => {
};
export default ProxyResourcesBanner;

2
src/components/ProxyResourcesTable.tsx
View File

@@ -198,7 +198,7 @@ export default function ProxyResourcesTable({
if (!targets || targets.length === 0) {
return (
<div className="flex items-center gap-2">
<div id="LOOK_FOR_ME" className="flex items-center gap-2">
<StatusIcon status="unknown" />
<span className="text-sm">
{t("resourcesTableNoTargets")}

12
src/components/ResourceInfoBox.tsx
View File

@@ -32,12 +32,6 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
<InfoSections
cols={resource.http && env.flags.usePangolinDns ? 5 : 4}
>
<InfoSection>
<InfoSectionTitle>URL</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard text={fullUrl} isLink={true} />
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
<InfoSectionContent>
@@ -46,6 +40,12 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
</InfoSection>
{resource.http ? (
<>
<InfoSection>
<InfoSectionTitle>URL</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard text={fullUrl} isLink={true} />
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>
{t("authentication")}

55
src/components/SetResourceHeaderAuthForm.tsx
View File

@@ -31,17 +31,21 @@ import { Resource } from "@server/db";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import { SwitchInput } from "@/components/SwitchInput";
import { InfoPopup } from "@/components/ui/info-popup";
const setHeaderAuthFormSchema = z.object({
user: z.string().min(4).max(100),
password: z.string().min(4).max(100)
password: z.string().min(4).max(100),
extendedCompatibility: z.boolean()
});
type SetHeaderAuthFormValues = z.infer<typeof setHeaderAuthFormSchema>;
const defaultValues: Partial<SetHeaderAuthFormValues> = {
user: "",
password: ""
password: "",
extendedCompatibility: true
};
type SetHeaderAuthFormProps = {
@@ -82,19 +86,10 @@ export default function SetResourceHeaderAuthForm({
`/resource/${resourceId}/header-auth`,
{
user: data.user,
password: data.password
password: data.password,
extendedCompatibility: data.extendedCompatibility
}
)
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorHeaderAuthSetup"),
description: formatAxiosError(
e,
t("resourceErrorHeaderAuthSetupDescription")
)
});
})
.then(() => {
toast({
title: t("resourceHeaderAuthSetup"),
@@ -105,6 +100,16 @@ export default function SetResourceHeaderAuthForm({
onSetHeaderAuth();
}
})
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorHeaderAuthSetup"),
description: formatAxiosError(
e,
t("resourceErrorHeaderAuthSetupDescription")
)
});
})
.finally(() => setLoading(false));
}
@@ -170,6 +175,30 @@ export default function SetResourceHeaderAuthForm({
</FormItem>
)}
/>
<FormField
control={form.control}
name="extendedCompatibility"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="header-auth-compatibility-toggle"
label={t(
"headerAuthCompatibility"
)}
info={t(
"headerAuthCompatibilityInfo"
)}
checked={field.value}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</CredenzaBody>

20
src/components/SetResourcePasswordForm.tsx
View File

@@ -78,16 +78,6 @@ export default function SetResourcePasswordForm({
api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/password`, {
password: data.password
})
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorPasswordSetup"),
description: formatAxiosError(
e,
t("resourceErrorPasswordSetupDescription")
)
});
})
.then(() => {
toast({
title: t("resourcePasswordSetup"),
@@ -98,6 +88,16 @@ export default function SetResourcePasswordForm({
onSetPassword();
}
})
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorPasswordSetup"),
description: formatAxiosError(
e,
t("resourceErrorPasswordSetupDescription")
)
});
})
.finally(() => setLoading(false));
}

20
src/components/SetResourcePincodeForm.tsx
View File

@@ -84,16 +84,6 @@ export default function SetResourcePincodeForm({
api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/pincode`, {
pincode: data.pincode
})
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorPincodeSetup"),
description: formatAxiosError(
e,
t("resourceErrorPincodeSetupDescription")
)
});
})
.then(() => {
toast({
title: t("resourcePincodeSetup"),
@@ -104,6 +94,16 @@ export default function SetResourcePincodeForm({
onSetPincode();
}
})
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorPincodeSetup"),
description: formatAxiosError(
e,
t("resourceErrorPincodeSetupDescription")
)
});
})
.finally(() => setLoading(false));
}

2
src/components/Settings.tsx
View File

@@ -28,7 +28,7 @@ export function SettingsSectionForm({
className?: string;
}) {
return (
<div className={cn("md:max-w-1/2 space-y-4", className)}>{children}</div>
<div className={cn("max-w-xl space-y-4", className)}>{children}</div>
);
}

88
src/components/SidebarNav.tsx
View File

@@ -115,26 +115,27 @@ function CollapsibleNavItem({
<button
className={cn(
"flex items-center w-full rounded-md transition-colors",
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
level === 0 ? "px-3 py-1.5" : "px-3 py-1",
isActive
? "bg-secondary text-primary font-medium"
? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled && "cursor-not-allowed opacity-60"
)}
disabled={isDisabled}
>
{item.icon && (
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">{item.icon}</span>
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">
{item.icon}
</span>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<span className="text-left truncate">{t(item.title)}</span>
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="text-left truncate">
{t(item.title)}
</span>
{item.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
<div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
@@ -256,9 +257,13 @@ export function SidebarNav({
href={isDisabled ? "#" : hydratedHref}
className={cn(
"flex items-center rounded-md transition-colors",
isCollapsed ? "px-2 py-2 justify-center" : level === 0 ? "px-3 py-2" : "px-3 py-1.5",
isCollapsed
? "px-2 py-2 justify-center"
: level === 0
? "px-3 py-1.5"
: "px-3 py-1",
isActive
? "bg-secondary text-primary font-medium"
? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled && "cursor-not-allowed opacity-60"
)}
@@ -284,21 +289,21 @@ export function SidebarNav({
)}
{!isCollapsed && (
<>
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">{t(item.title)}</span>
{item.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
{build === "enterprise" &&
item.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary" className="flex-shrink-0">
<Badge
variant="outlinePrimary"
className="flex-shrink-0"
>
{t("licenseBadge")}
</Badge>
)}
@@ -309,27 +314,31 @@ export function SidebarNav({
<div
className={cn(
"flex items-center rounded-md transition-colors",
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
level === 0 ? "px-3 py-1.5" : "px-3 py-1",
"text-muted-foreground",
isDisabled && "cursor-not-allowed opacity-60"
)}
>
{item.icon && (
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">{item.icon}</span>
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">
{item.icon}
</span>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">{t(item.title)}</span>
{item.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
{build === "enterprise" && item.showEE && !isUnlocked() && (
<Badge variant="outlinePrimary" className="flex-shrink-0 ml-2">{t("licenseBadge")}</Badge>
<Badge
variant="outlinePrimary"
className="flex-shrink-0 ml-2"
>
{t("licenseBadge")}
</Badge>
)}
</div>
);
@@ -347,7 +356,7 @@ export function SidebarNav({
className={cn(
"flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full",
isActive || isChildActive
? "bg-secondary text-primary font-medium"
? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
isDisabled &&
"cursor-not-allowed opacity-60"
@@ -402,7 +411,7 @@ export function SidebarNav({
className={cn(
"flex items-center rounded-md transition-colors px-3 py-1.5 text-sm",
childIsActive
? "bg-secondary text-primary font-medium"
? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
childIsDisabled &&
"cursor-not-allowed opacity-60"
@@ -422,23 +431,23 @@ export function SidebarNav({
{childItem.icon}
</span>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">
{t(childItem.title)}
</span>
{childItem.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
{build === "enterprise" &&
childItem.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary" className="flex-shrink-0 ml-2">
<Badge
variant="outlinePrimary"
className="flex-shrink-0 ml-2"
>
{t(
"licenseBadge"
)}
@@ -481,7 +490,10 @@ export function SidebarNav({
{...props}
>
{sections.map((section, sectionIndex) => (
<div key={section.heading} className={cn(sectionIndex > 0 && "mt-4")}>
<div
key={section.heading}
className={cn(sectionIndex > 0 && "mt-4")}
>
{!isCollapsed && (
<div className="px-3 py-2 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider">
{t(`${section.heading}`)}

1
src/components/SitesBanner.tsx
View File

@@ -37,4 +37,3 @@ export const SitesBanner = () => {
};
export default SitesBanner;

35
src/components/SwitchInput.tsx
View File

@@ -1,11 +1,20 @@
import React from "react";
import { Switch } from "./ui/switch";
import { Label } from "./ui/label";
import { Button } from "@/components/ui/button";
import { Info } from "lucide-react";
import { info } from "winston";
import {
Popover,
PopoverContent,
PopoverTrigger
} from "@/components/ui/popover";
interface SwitchComponentProps {
id: string;
label?: string;
description?: string;
info?: string;
checked?: boolean;
defaultChecked?: boolean;
disabled?: boolean;
@@ -16,11 +25,23 @@ export function SwitchInput({
id,
label,
description,
info,
disabled,
checked,
defaultChecked = false,
onCheckedChange
}: SwitchComponentProps) {
const defaultTrigger = (
<Button
variant="ghost"
size="icon"
className="h-6 w-6 rounded-full p-0"
>
<Info className="h-4 w-4" />
<span className="sr-only">Show info</span>
</Button>
);
return (
<div>
<div className="flex items-center space-x-2 mb-2">
@@ -32,6 +53,20 @@ export function SwitchInput({
disabled={disabled}
/>
{label && <Label htmlFor={id}>{label}</Label>}
{info && (
<Popover>
<PopoverTrigger asChild>
{defaultTrigger}
</PopoverTrigger>
<PopoverContent className="w-80">
{info && (
<p className="text-sm text-muted-foreground">
{info}
</p>
)}
</PopoverContent>
</Popover>
)}
</div>
{description && (
<span className="text-muted-foreground text-sm">

25
src/components/ValidateOidcToken.tsx
View File

@@ -56,11 +56,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
if (props.providerError?.error) {
const providerMessage =
props.providerError.description ||
t("idpErrorOidcProviderRejected", {
error: props.providerError.error,
defaultValue:
"The identity provider returned an error: {error}."
});
"The identity provider returned an error: {error}.";
const suffix = props.providerError.uri
? ` (${props.providerError.uri})`
: "";
@@ -76,10 +72,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
if (!isCancelled) {
setIsProviderError(false);
setError(
t("idpErrorOidcMissingCode", {
defaultValue:
"The identity provider did not return an authorization code."
})
"The identity provider did not return an authorization code."
);
setLoading(false);
}
@@ -90,10 +83,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
if (!isCancelled) {
setIsProviderError(false);
setError(
t("idpErrorOidcMissingState", {
defaultValue:
"The login request is missing state information. Please restart the login process."
})
"The login request is missing state information. Please restart the login process."
);
setLoading(false);
}
@@ -159,12 +149,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
console.error(e);
if (!isCancelled) {
setIsProviderError(false);
setError(
t("idpErrorOidcTokenValidating", {
defaultValue:
"An unexpected error occurred. Please try again."
})
);
setError("An unexpected error occurred. Please try again.");
}
} finally {
if (!isCancelled) {
@@ -181,7 +166,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
}, []);
return (
<div className="flex items-center justify-center min-h-screen">
<div className="flex items-center justify-center">
<Card className="w-full max-w-md">
<CardHeader>
<CardTitle>

79
src/components/ViewportHeightFix.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import { useEffect } from "react";
/**
* Fixes mobile viewport height issues when keyboard opens/closes
* by setting a CSS variable with a stable viewport height
* Only applies on mobile devices (< 768px, matching Tailwind's md breakpoint)
*/
export function ViewportHeightFix() {
useEffect(() => {
// Check if we're on mobile (md breakpoint is typically 768px)
const isMobile = () => window.innerWidth < 768;
// On desktop, don't set --vh at all, let CSS use 100vh directly
if (!isMobile()) {
// Remove --vh if it was set, so CSS falls back to 100vh
document.documentElement.style.removeProperty("--vh");
return;
}
// Mobile-specific logic
let maxHeight = window.innerHeight;
let resizeTimer: NodeJS.Timeout;
// Set the viewport height as a CSS variable
const setViewportHeight = (height: number) => {
document.documentElement.style.setProperty("--vh", `${height}px`);
};
// Set initial value
setViewportHeight(maxHeight);
const handleResize = () => {
// If we switched to desktop, remove --vh and stop
if (!isMobile()) {
document.documentElement.style.removeProperty("--vh");
return;
}
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const currentHeight = window.innerHeight;
// Track the maximum height we've seen (when keyboard is closed)
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
setViewportHeight(maxHeight);
}
// If current height is close to max, update max (keyboard closed)
else if (currentHeight >= maxHeight * 0.9) {
maxHeight = currentHeight;
setViewportHeight(maxHeight);
}
// Otherwise, keep using the max height (keyboard is open)
}, 100);
};
const handleOrientationChange = () => {
// Reset on orientation change
setTimeout(() => {
maxHeight = window.innerHeight;
setViewportHeight(maxHeight);
}, 150);
};
window.addEventListener("resize", handleResize);
window.addEventListener("orientationchange", handleOrientationChange);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("orientationchange", handleOrientationChange);
clearTimeout(resizeTimer);
};
}, []);
return null;
}

5
src/components/private/AuthPageSettings.tsx
View File

@@ -276,14 +276,15 @@ function AuthPageSettings({
<>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>{t("customDomain")}</SettingsSectionTitle>
<SettingsSectionTitle>
{t("customDomain")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("authPageDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<PaidFeaturesAlert />
<Form {...form}>

6
src/components/private/IdpLoginButtons.tsx
View File

@@ -15,6 +15,7 @@ import {
useSearchParams
} from "next/navigation";
import { useRouter } from "next/navigation";
import { cleanRedirect } from "@app/lib/cleanRedirect";
export type LoginFormIDP = {
idpId: number;
@@ -57,9 +58,11 @@ export default function IdpLoginButtons({
let redirectToUrl: string | undefined;
try {
console.log("generating", idpId, redirect || "/", orgId);
const safeRedirect = cleanRedirect(redirect || "/");
const response = await generateOidcUrlProxy(
idpId,
redirect || "/auth/org?gotoapp=app",
safeRedirect,
orgId
);
@@ -70,7 +73,6 @@ export default function IdpLoginButtons({
}
const data = response.data;
console.log("Redirecting to:", data?.redirectUrl);
if (data?.redirectUrl) {
redirectToUrl = data.redirectUrl;
}

2
src/components/private/OrgIdpDataTable.tsx
View File

@@ -27,6 +27,8 @@ export function IdpDataTable<TData, TValue>({
searchColumn="name"
addButtonText={t("idpAdd")}
onAdd={onAdd}
enableColumnVisibility={true}
stickyRightColumn="actions"
/>
);
}

1
src/components/private/OrgIdpTable.tsx
View File

@@ -118,6 +118,7 @@ export default function IdpTable({ idps, orgId }: Props) {
},
{
id: "actions",
enableHiding: false,
header: () => <span className="p-3">{t("actions")}</span>,
cell: ({ row }) => {
const siteRow = row.original;

5
src/components/private/ValidateSessionTransferToken.tsx
View File

@@ -12,6 +12,7 @@ import { TransferSessionResponse } from "@server/routers/auth/types";
type ValidateSessionTransferTokenParams = {
token: string;
redirect?: string;
};
export default function ValidateSessionTransferToken(
@@ -49,7 +50,9 @@ export default function ValidateSessionTransferToken(
}
if (doRedirect) {
redirect(env.app.dashboardUrl);
// add redirect param to dashboardUrl if provided
const fullUrl = `${env.app.dashboardUrl}${props.redirect || ""}`;
router.push(fullUrl);
}
}

2
src/components/ui/alert.tsx
View File

@@ -11,7 +11,7 @@ const alertVariants = cva(
default: "bg-card border text-foreground",
neutral: "bg-card bg-muted border text-foreground",
destructive:
"border-destructive/50 border bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
"border-destructive/50 border bg-destructive/8 text-destructive dark:border-destructive/50 [&>svg]:text-destructive",
success:
"border-green-500/50 border bg-green-500/10 text-green-500 dark:border-success [&>svg]:text-green-500",
info: "border-blue-500/50 border bg-blue-500/10 text-blue-800 dark:text-blue-400 dark:border-blue-400 [&>svg]:text-blue-500",

30
src/components/ui/button.tsx
View File

@@ -3,7 +3,6 @@ import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@app/lib/cn";
import { Loader2 } from "lucide-react";
const buttonVariants = cva(
"cursor-pointer inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50",
@@ -74,13 +73,30 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
>
{asChild ? (
props.children
) : loading ? (
<span className="relative inline-flex items-center justify-center">
<span className="inline-flex items-center justify-center opacity-0">
{props.children}
</span>
<span className="absolute inset-0 flex items-center justify-center">
<span className="flex items-center gap-1.5">
<span
className="h-1 w-1 bg-current animate-dot-pulse"
style={{ animationDelay: "0ms" }}
/>
<span
className="h-1 w-1 bg-current animate-dot-pulse"
style={{ animationDelay: "200ms" }}
/>
<span
className="h-1 w-1 bg-current animate-dot-pulse"
style={{ animationDelay: "400ms" }}
/>
</span>
</span>
</span>
) : (
<>
{loading && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
{props.children}
</>
props.children
)}
</Comp>
);

16
src/components/ui/checkbox.tsx
View File

@@ -14,13 +14,13 @@ const checkboxVariants = cva(
variants: {
variant: {
outlinePrimary:
"border rounded-[5px] border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
"border rounded-[5px] border-input data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
outline:
"border rounded-[5px] border-input data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground",
"border rounded-[5px] border-input data-[state=checked]:border-primary data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground",
outlinePrimarySquare:
"border rounded-[5px] border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
"border rounded-[5px] border-input data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
outlineSquare:
"border rounded-[5px] border-input data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground"
"border rounded-[5px] border-input data-[state=checked]:border-primary data-[state=checked]:bg-muted data-[state=checked]:text-accent-foreground"
}
},
defaultVariants: {
@@ -30,8 +30,7 @@ const checkboxVariants = cva(
);
interface CheckboxProps
extends
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
VariantProps<typeof checkboxVariants> {}
const Checkbox = React.forwardRef<
@@ -50,9 +49,8 @@ const Checkbox = React.forwardRef<
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
interface CheckboxWithLabelProps extends React.ComponentPropsWithoutRef<
typeof Checkbox
> {
interface CheckboxWithLabelProps
extends React.ComponentPropsWithoutRef<typeof Checkbox> {
label: string;
}

9
src/components/ui/data-table.tsx
View File

@@ -288,7 +288,10 @@ export function DataTable<TData, TValue>({
useEffect(() => {
if (persistPageSize && pagination.pageSize !== pageSize) {
// Only store if user has actually changed it from initial value
if (hasUserChangedPageSize.current && pagination.pageSize !== initialPageSize.current) {
if (
hasUserChangedPageSize.current &&
pagination.pageSize !== initialPageSize.current
) {
setStoredPageSize(pagination.pageSize, tableId);
}
setPageSize(pagination.pageSize);
@@ -298,7 +301,9 @@ export function DataTable<TData, TValue>({
useEffect(() => {
// Persist column visibility to localStorage when it changes (but not on initial mount)
if (shouldPersistColumnVisibility) {
const hasChanged = JSON.stringify(columnVisibility) !== JSON.stringify(initialColumnVisibilityState.current);
const hasChanged =
JSON.stringify(columnVisibility) !==
JSON.stringify(initialColumnVisibilityState.current);
if (hasChanged) {
// Mark as user-initiated change and persist
hasUserChangedColumnVisibility.current = true;