pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-12 16:06:38 +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

10
src/app/[orgId]/settings/(private)/idp/[idpId]/general/page.tsx
View File

@@ -62,6 +62,7 @@ export default function GeneralPage() {
const [variant, setVariant] = useState<"oidc" | "google" | "azure">("oidc");
const { isUnlocked } = useLicenseStatusContext();
const dashboardRedirectUrl = `${env.app.dashboardUrl}/auth/idp/${idpId}/oidc/callback`;
const [redirectUrl, setRedirectUrl] = useState(
`${env.app.dashboardUrl}/auth/idp/${idpId}/oidc/callback`
);
@@ -423,11 +424,18 @@ export default function GeneralPage() {
<InfoSections cols={3}>
<InfoSection>
<InfoSectionTitle>
{t("redirectUrl")}
{t("orgIdpRedirectUrls")}
</InfoSectionTitle>
<InfoSectionContent>
<CopyToClipboard text={redirectUrl} />
</InfoSectionContent>
{redirectUrl !== dashboardRedirectUrl && (
<InfoSectionContent>
<CopyToClipboard
text={dashboardRedirectUrl}
/>
</InfoSectionContent>
)}
</InfoSection>
</InfoSections>

2
src/app/[orgId]/settings/(private)/idp/create/page.tsx
View File

@@ -285,7 +285,7 @@ export default function Page() {
<Button
variant="outline"
onClick={() => {
router.push("/admin/idp");
router.push(`/${params.orgId}/settings/idp`);
}}
>
{t("idpSeeAll")}

34
src/app/[orgId]/settings/(private)/idp/page.tsx
View File

@@ -1,17 +1,10 @@
import { internal, priv } from "@app/lib/api";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { AxiosResponse } from "axios";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import IdpTable, { IdpRow } from "@app/components/private/OrgIdpTable";
import { getTranslations } from "next-intl/server";
import { Alert, AlertDescription } from "@app/components/ui/alert";
import { cache } from "react";
import {
GetOrgSubscriptionResponse,
GetOrgTierResponse
} from "@server/routers/billing/types";
import { TierId } from "@server/lib/billing/tiers";
import { build } from "@server/build";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
type OrgIdpPageProps = {
params: Promise<{ orgId: string }>;
@@ -35,21 +28,6 @@ export default async function OrgIdpPage(props: OrgIdpPageProps) {
const t = await getTranslations();
let subscriptionStatus: GetOrgTierResponse | null = null;
try {
const getSubscription = cache(() =>
priv.get<AxiosResponse<GetOrgTierResponse>>(
`/org/${params.orgId}/billing/tier`
)
);
const subRes = await getSubscription();
subscriptionStatus = subRes.data.data;
} catch {}
const subscribed =
build === "enterprise"
? true
: subscriptionStatus?.tier === TierId.STANDARD;
return (
<>
<SettingsSectionTitle
@@ -57,13 +35,7 @@ export default async function OrgIdpPage(props: OrgIdpPageProps) {
description={t("idpManageDescription")}
/>
{build === "saas" && !subscribed ? (
<Alert variant="info" className="mb-6">
<AlertDescription>
{t("idpDisabled")} {t("subscriptionRequiredToUse")}
</AlertDescription>
</Alert>
) : null}
<PaidFeaturesAlert />
<IdpTable idps={idps} orgId={params.orgId} />
</>

76
src/app/[orgId]/settings/clients/machine/create/page.tsx
View File

@@ -25,7 +25,7 @@ import { createElement, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "@app/components/ui/input";
import { InfoIcon, Terminal } from "lucide-react";
import { ChevronDown, ChevronUp, InfoIcon, Terminal } from "lucide-react";
import { Button } from "@app/components/ui/button";
import CopyTextBox from "@app/components/CopyTextBox";
import CopyToClipboard from "@app/components/CopyToClipboard";
@@ -121,6 +121,7 @@ export default function Page() {
const [olmCommand, setOlmCommand] = useState("");
const [createLoading, setCreateLoading] = useState(false);
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [clientDefaults, setClientDefaults] =
useState<PickClientDefaultsResponse | null>(null);
@@ -443,33 +444,54 @@ export default function Page() {
</FormItem>
)}
/>
<FormField
control={form.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("clientAddress")}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
placeholder={t(
"subnetPlaceholder"
<div className="flex items-center justify-end md:col-start-2">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() =>
setShowAdvancedSettings(
!showAdvancedSettings
)
}
className="flex items-center gap-2"
>
{showAdvancedSettings ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
{t("advancedSettings")}
</Button>
</div>
{showAdvancedSettings && (
<FormField
control={form.control}
name="subnet"
render={({ field }) => (
<FormItem className="md:col-start-1 md:col-span-2">
<FormLabel>
{t("clientAddress")}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
placeholder={t(
"subnetPlaceholder"
)}
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"addressDescription"
)}
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"addressDescription"
)}
</FormDescription>
</FormItem>
)}
/>
</FormDescription>
</FormItem>
)}
/>
)}
</form>
</Form>
</SettingsSectionBody>

8
src/app/[orgId]/settings/general/layout.tsx
View File

@@ -3,6 +3,7 @@ import { HorizontalTabs, type TabItem } from "@app/components/HorizontalTabs";
import { verifySession } from "@app/lib/auth/verifySession";
import OrgProvider from "@app/providers/OrgProvider";
import OrgUserProvider from "@app/providers/OrgUserProvider";
import OrgInfoCard from "@app/components/OrgInfoCard";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
@@ -68,7 +69,12 @@ export default async function GeneralSettingsPage({
description={t("orgSettingsDescription")}
/>
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
<div className="space-y-6">
<OrgInfoCard />
<HorizontalTabs items={navItems}>
{children}
</HorizontalTabs>
</div>
</OrgUserProvider>
</OrgProvider>
</>

22
src/app/[orgId]/settings/general/page.tsx
View File

@@ -236,6 +236,7 @@ function DeleteForm({ org }: SectionFormProps) {
}
function GeneralSectionForm({ org }: SectionFormProps) {
const { updateOrg } = useOrgContext();
const form = useForm({
resolver: zodResolver(
GeneralFormSchema.pick({
@@ -269,6 +270,11 @@ function GeneralSectionForm({ org }: SectionFormProps) {
// Update organization
await api.post(`/org/${org.orgId}`, reqData);
// Update the org context to reflect the change in the info card
updateOrg({
name: data.name
});
toast({
title: t("orgUpdated"),
description: t("orgUpdatedDescription")
@@ -315,22 +321,6 @@ function GeneralSectionForm({ org }: SectionFormProps) {
</FormItem>
)}
/>
<FormField
control={form.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>{t("subnet")}</FormLabel>
<FormControl>
<Input {...field} disabled={true} />
</FormControl>
<FormMessage />
<FormDescription>
{t("subnetDescription")}
</FormDescription>
</FormItem>
)}
/>
</form>
</Form>
</SettingsSectionForm>

2
src/app/[orgId]/settings/resources/client/page.tsx
View File

@@ -71,7 +71,7 @@ export default async function ClientResourcesPage(
niceId: siteResource.niceId,
tcpPortRangeString: siteResource.tcpPortRangeString || null,
udpPortRangeString: siteResource.udpPortRangeString || null,
disableIcmp: siteResource.disableIcmp || false,
disableIcmp: siteResource.disableIcmp || false
};
}
);

182
src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
View File

@@ -16,7 +16,6 @@ import { SwitchInput } from "@app/components/SwitchInput";
import { Tag, TagInput } from "@app/components/tags/tag-input";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Button } from "@app/components/ui/button";
import { CheckboxWithLabel } from "@app/components/ui/checkbox";
import {
Form,
FormControl,
@@ -184,9 +183,6 @@ export default function ResourceAuthenticationPage() {
const [ssoEnabled, setSsoEnabled] = useState(resource.sso);
const [autoLoginEnabled, setAutoLoginEnabled] = useState(
resource.skipToIdpId !== null && resource.skipToIdpId !== undefined
);
const [selectedIdpId, setSelectedIdpId] = useState<number | null>(
resource.skipToIdpId || null
);
@@ -243,19 +239,8 @@ export default function ResourceAuthenticationPage() {
text: w.email
}))
);
if (autoLoginEnabled && !selectedIdpId && orgIdps.length > 0) {
setSelectedIdpId(orgIdps[0].idpId);
}
hasInitializedRef.current = true;
}, [
pageLoading,
resourceRoles,
resourceUsers,
whitelist,
autoLoginEnabled,
selectedIdpId,
orgIdps
]);
}, [pageLoading, resourceRoles, resourceUsers, whitelist, orgIdps]);
const [, submitUserRolesForm, loadingSaveUsersRoles] = useActionState(
onSubmitUsersRoles,
@@ -269,16 +254,6 @@ export default function ResourceAuthenticationPage() {
const data = usersRolesForm.getValues();
try {
// Validate that an IDP is selected if auto login is enabled
if (autoLoginEnabled && !selectedIdpId) {
toast({
variant: "destructive",
title: t("error"),
description: t("selectIdpRequired")
});
return;
}
const jobs = [
api.post(`/resource/${resource.resourceId}/roles`, {
roleIds: data.roles.map((i) => parseInt(i.id))
@@ -288,7 +263,7 @@ export default function ResourceAuthenticationPage() {
}),
api.post(`/resource/${resource.resourceId}`, {
sso: ssoEnabled,
skipToIdpId: autoLoginEnabled ? selectedIdpId : null
skipToIdpId: selectedIdpId
})
];
@@ -296,7 +271,7 @@ export default function ResourceAuthenticationPage() {
updateResource({
sso: ssoEnabled,
skipToIdpId: autoLoginEnabled ? selectedIdpId : null
skipToIdpId: selectedIdpId
});
updateAuthInfo({
@@ -307,17 +282,18 @@ export default function ResourceAuthenticationPage() {
title: t("resourceAuthSettingsSave"),
description: t("resourceAuthSettingsSaveDescription")
});
await queryClient.invalidateQueries({
predicate(query) {
const resourceKey = resourceQueries.resourceClients({
resourceId: resource.resourceId
}).queryKey;
return (
query.queryKey[0] === resourceKey[0] &&
query.queryKey[1] === resourceKey[1]
);
}
});
// invalidate resource queries
await queryClient.invalidateQueries(
resourceQueries.resourceUsers({
resourceId: resource.resourceId
})
);
await queryClient.invalidateQueries(
resourceQueries.resourceRoles({
resourceId: resource.resourceId
})
);
router.refresh();
} catch (e) {
console.error(e);
@@ -397,7 +373,8 @@ export default function ResourceAuthenticationPage() {
api.post(`/resource/${resource.resourceId}/header-auth`, {
user: null,
password: null
password: null,
extendedCompatibility: null
})
.then(() => {
toast({
@@ -617,86 +594,53 @@ export default function ResourceAuthenticationPage() {
)}
{ssoEnabled && allIdps.length > 0 && (
<>
<div className="space-y-2 mb-3">
<CheckboxWithLabel
label={t(
"autoLoginExternalIdp"
)}
checked={autoLoginEnabled}
onCheckedChange={(
checked
) => {
setAutoLoginEnabled(
checked as boolean
<div className="space-y-2">
<label className="text-sm font-medium">
{t("defaultIdentityProvider")}
</label>
<Select
onValueChange={(value) => {
if (value === "none") {
setSelectedIdpId(null);
} else {
setSelectedIdpId(
parseInt(value)
);
if (
checked &&
allIdps.length > 0
) {
setSelectedIdpId(
allIdps[0].id
);
} else {
setSelectedIdpId(
null
);
}
}}
/>
<p className="text-sm text-muted-foreground">
{t(
"autoLoginExternalIdpDescription"
)}
</p>
</div>
{autoLoginEnabled && (
<div className="space-y-2">
<label className="text-sm font-medium">
{t("defaultIdentityProvider")}
</label>
<Select
onValueChange={(
value
) =>
setSelectedIdpId(
parseInt(value)
)
}
value={
selectedIdpId
? selectedIdpId.toString()
: undefined
}
>
<SelectTrigger className="w-full mt-1">
<SelectValue
placeholder={t(
"selectIdpPlaceholder"
)}
/>
</SelectTrigger>
<SelectContent>
{allIdps.map(
(idp) => (
<SelectItem
key={
idp.id
}
value={idp.id.toString()}
>
{
idp.text
}
</SelectItem>
)
)}
</SelectContent>
</Select>
</div>
)}
</>
}
}}
value={
selectedIdpId
? selectedIdpId.toString()
: "none"
}
>
<SelectTrigger className="w-full mt-1">
<SelectValue
placeholder={t(
"selectIdpPlaceholder"
)}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="none">
{t("none")}
</SelectItem>
{allIdps.map((idp) => (
<SelectItem
key={idp.id}
value={idp.id.toString()}
>
{idp.text}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-sm text-muted-foreground">
{t(
"defaultIdentityProviderDescription"
)}
</p>
</div>
)}
</form>
</Form>

410
src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx
View File

@@ -11,6 +11,7 @@ import {
FormMessage
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useResourceContext } from "@app/hooks/useResourceContext";
import {
Credenza,
@@ -41,7 +42,7 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
import { UpdateResourceResponse } from "@server/routers/resource";
import { AxiosResponse } from "axios";
import { Globe } from "lucide-react";
import { AlertCircle, Globe } from "lucide-react";
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import { toASCII, toUnicode } from "punycode";
@@ -49,6 +50,378 @@ import { useActionState, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod";
import { build } from "@server/build";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
import { Alert, AlertDescription } from "@app/components/ui/alert";
import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
import {
Tooltip,
TooltipProvider,
TooltipTrigger
} from "@app/components/ui/tooltip";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
import { GetResourceResponse } from "@server/routers/resource/getResource";
import type { ResourceContextType } from "@app/contexts/resourceContext";
type MaintenanceSectionFormProps = {
resource: GetResourceResponse;
updateResource: ResourceContextType["updateResource"];
};
function MaintenanceSectionForm({
resource,
updateResource
}: MaintenanceSectionFormProps) {
const { env } = useEnvContext();
const t = useTranslations();
const api = createApiClient({ env });
const { isUnlocked } = useLicenseStatusContext();
const subscription = useSubscriptionStatusContext();
const MaintenanceFormSchema = z.object({
maintenanceModeEnabled: z.boolean().optional(),
maintenanceModeType: z.enum(["forced", "automatic"]).optional(),
maintenanceTitle: z.string().max(255).optional(),
maintenanceMessage: z.string().max(2000).optional(),
maintenanceEstimatedTime: z.string().max(100).optional()
});
const maintenanceForm = useForm({
resolver: zodResolver(MaintenanceFormSchema),
defaultValues: {
maintenanceModeEnabled: resource.maintenanceModeEnabled || false,
maintenanceModeType: resource.maintenanceModeType || "automatic",
maintenanceTitle:
resource.maintenanceTitle || "We'll be back soon!",
maintenanceMessage:
resource.maintenanceMessage ||
"We are currently performing scheduled maintenance. Please check back soon.",
maintenanceEstimatedTime: resource.maintenanceEstimatedTime || ""
},
mode: "onChange"
});
const isMaintenanceEnabled = maintenanceForm.watch(
"maintenanceModeEnabled"
);
const maintenanceModeType = maintenanceForm.watch("maintenanceModeType");
const [, maintenanceFormAction, maintenanceSaveLoading] = useActionState(
onMaintenanceSubmit,
null
);
async function onMaintenanceSubmit() {
const isValid = await maintenanceForm.trigger();
if (!isValid) return;
const data = maintenanceForm.getValues();
const res = await api
.post<AxiosResponse<UpdateResourceResponse>>(
`resource/${resource?.resourceId}`,
{
maintenanceModeEnabled: data.maintenanceModeEnabled,
maintenanceModeType: data.maintenanceModeType,
maintenanceTitle: data.maintenanceTitle || null,
maintenanceMessage: data.maintenanceMessage || null,
maintenanceEstimatedTime:
data.maintenanceEstimatedTime || null
}
)
.catch((e) => {
toast({
variant: "destructive",
title: t("resourceErrorUpdate"),
description: formatAxiosError(
e,
t("resourceErrorUpdateDescription")
)
});
});
if (res && res.status === 200) {
updateResource({
maintenanceModeEnabled: data.maintenanceModeEnabled,
maintenanceModeType: data.maintenanceModeType,
maintenanceTitle: data.maintenanceTitle || null,
maintenanceMessage: data.maintenanceMessage || null,
maintenanceEstimatedTime: data.maintenanceEstimatedTime || null
});
toast({
title: t("resourceUpdated"),
description: t("resourceUpdatedDescription")
});
}
}
const isSecurityFeatureDisabled = () => {
const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
const isSaasNotSubscribed =
build === "saas" && !subscription?.isSubscribed();
return isEnterpriseNotLicensed || isSaasNotSubscribed;
};
if (!resource.http) {
return null;
}
return (
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("maintenanceMode")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("maintenanceModeDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<Form {...maintenanceForm}>
<form
action={maintenanceFormAction}
className="space-y-4"
id="maintenance-settings-form"
>
<PaidFeaturesAlert></PaidFeaturesAlert>
<FormField
control={maintenanceForm.control}
name="maintenanceModeEnabled"
render={({ field }) => {
const isDisabled =
isSecurityFeatureDisabled() || resource.http === false;
return (
<FormItem>
<div className="flex items-center space-x-2">
<FormControl>
<TooltipProvider>
<Tooltip>
<TooltipTrigger
asChild
>
<div className="flex items-center gap-2">
<SwitchInput
id="enable-maintenance"
checked={
field.value
}
label={t(
"enableMaintenanceMode"
)}
disabled={
isDisabled
}
onCheckedChange={(
val
) => {
if (
!isDisabled
) {
maintenanceForm.setValue(
"maintenanceModeEnabled",
val
);
}
}}
/>
</div>
</TooltipTrigger>
</Tooltip>
</TooltipProvider>
</FormControl>
</div>
<FormMessage />
</FormItem>
);
}}
/>
{isMaintenanceEnabled && (
<div className="space-y-4">
<FormField
control={maintenanceForm.control}
name="maintenanceModeType"
render={({ field }) => (
<FormItem className="space-y-3">
<FormLabel>
{t("maintenanceModeType")}
</FormLabel>
<FormControl>
<RadioGroup
onValueChange={
field.onChange
}
defaultValue={
field.value
}
disabled={isSecurityFeatureDisabled()}
className="flex flex-col space-y-1"
>
<FormItem className="flex items-start space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="automatic" />
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="font-normal">
<strong>
{t(
"automatic"
)}
</strong>{" "}
(
{t(
"recommended"
)}
)
</FormLabel>
<FormDescription>
{t(
"automaticModeDescription"
)}
</FormDescription>
</div>
</FormItem>
<FormItem className="flex items-start space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="forced" />
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="font-normal">
<strong>
{t(
"forced"
)}
</strong>
</FormLabel>
<FormDescription>
{t(
"forcedModeDescription"
)}
</FormDescription>
</div>
</FormItem>
</RadioGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{maintenanceModeType === "forced" && (
<Alert variant={"neutral"}>
<AlertCircle className="h-4 w-4" />
<AlertDescription>
{t("forcedeModeWarning")}
</AlertDescription>
</Alert>
)}
<FormField
control={maintenanceForm.control}
name="maintenanceTitle"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("pageTitle")}
</FormLabel>
<FormControl>
<Input
{...field}
disabled={isSecurityFeatureDisabled()}
placeholder="We'll be back soon!"
/>
</FormControl>
<FormDescription>
{t("pageTitleDescription")}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={maintenanceForm.control}
name="maintenanceMessage"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"maintenancePageMessage"
)}
</FormLabel>
<FormControl>
<Textarea
{...field}
rows={4}
disabled={isSecurityFeatureDisabled()}
placeholder={t(
"maintenancePageMessagePlaceholder"
)}
/>
</FormControl>
<FormDescription>
{t(
"maintenancePageMessageDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={maintenanceForm.control}
name="maintenanceEstimatedTime"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"maintenancePageTimeTitle"
)}
</FormLabel>
<FormControl>
<Input
{...field}
disabled={isSecurityFeatureDisabled()}
placeholder={t(
"maintenanceTime"
)}
/>
</FormControl>
<FormDescription>
{t(
"maintenanceEstimatedTimeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
)}
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
loading={maintenanceSaveLoading}
disabled={maintenanceSaveLoading}
form="maintenance-settings-form"
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
);
}
export default function GeneralForm() {
const params = useParams();
@@ -68,9 +441,16 @@ export default function GeneralForm() {
);
const resourceFullDomainName = useMemo(() => {
const url = new URL(resourceFullDomain);
return url.hostname;
}, [resourceFullDomain]);
if (!resource.fullDomain) {
return "";
}
try {
const url = new URL(resourceFullDomain);
return url.hostname;
} catch {
return "";
}
}, [resourceFullDomain, resource.fullDomain]);
const [selectedDomain, setSelectedDomain] = useState<{
domainId: string;
@@ -87,7 +467,7 @@ export default function GeneralForm() {
name: z.string().min(1).max(255),
niceId: z.string().min(1).max(255).optional(),
domainId: z.string().optional(),
proxyPort: z.int().min(1).max(65535).optional()
proxyPort: z.number().int().min(1).max(65535).optional()
})
.refine(
(data) => {
@@ -106,6 +486,8 @@ export default function GeneralForm() {
}
);
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
const form = useForm({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
@@ -163,9 +545,6 @@ export default function GeneralForm() {
fullDomain: updated.fullDomain,
proxyPort: data.proxyPort,
domainId: data.domainId
// ...(!resource.http && {
// enableProxy: data.enableProxy
// })
});
toast({
@@ -289,8 +668,12 @@ export default function GeneralForm() {
<Input
type="number"
value={
field.value ??
""
field.value !==
undefined
? String(
field.value
)
: ""
}
onChange={(e) =>
field.onChange(
@@ -355,6 +738,13 @@ export default function GeneralForm() {
</Button>
</SettingsSectionFooter>
</SettingsSection>
{build !== "oss" && (
<MaintenanceSectionForm
resource={resource}
updateResource={updateResource}
/>
)}
</SettingsContainer>
<Credenza

2
src/app/[orgId]/settings/resources/proxy/[niceId]/proxy/page.tsx
View File

@@ -338,7 +338,7 @@ function ProxyResourceTargetsForm({
<div
className={`flex items-center gap-2 ${status === "healthy" ? "text-green-500" : status === "unhealthy" ? "text-destructive" : ""}`}
>
<Settings className="h-3 w-3" />
<Settings className="h-4 w-4 text-foreground" />
{getStatusText(status)}
</div>
</Button>

274
src/app/[orgId]/settings/resources/proxy/[niceId]/rules/page.tsx
View File

@@ -75,6 +75,7 @@ import { Switch } from "@app/components/ui/switch";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { COUNTRIES } from "@server/db/countries";
import { MAJOR_ASNS } from "@server/db/asns";
import {
Command,
CommandEmpty,
@@ -117,11 +118,14 @@ export default function ResourceRules(props: {
const [countrySelectValue, setCountrySelectValue] = useState("");
const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
useState(false);
const [openAddRuleAsnSelect, setOpenAddRuleAsnSelect] = useState(false);
const router = useRouter();
const t = useTranslations();
const { env } = useEnvContext();
const isMaxmindAvailable =
env.server.maxmind_db_path && env.server.maxmind_db_path.length > 0;
const isMaxmindAsnAvailable =
env.server.maxmind_asn_path && env.server.maxmind_asn_path.length > 0;
const RuleAction = {
ACCEPT: t("alwaysAllow"),
@@ -133,7 +137,8 @@ export default function ResourceRules(props: {
PATH: t("path"),
IP: "IP",
CIDR: t("ipAddressRange"),
COUNTRY: t("country")
COUNTRY: t("country"),
ASN: "ASN"
} as const;
const addRuleForm = useForm({
@@ -172,6 +177,30 @@ export default function ResourceRules(props: {
}, []);
async function addRule(data: z.infer<typeof addRuleSchema>) {
// Normalize ASN value
if (data.match === "ASN") {
const originalValue = data.value.toUpperCase();
// Handle special "ALL" case
if (originalValue === "ALL" || originalValue === "AS0") {
data.value = "ALL";
} else {
// Remove AS prefix if present
const normalized = originalValue.replace(/^AS/, "");
if (!/^\d+$/.test(normalized)) {
toast({
variant: "destructive",
title: "Invalid ASN",
description:
"ASN must be a number, optionally prefixed with 'AS' (e.g., AS15169 or 15169), or 'ALL'"
});
return;
}
// Add "AS" prefix for consistent storage
data.value = "AS" + normalized;
}
}
const isDuplicate = rules.some(
(rule) =>
rule.action === data.action &&
@@ -280,6 +309,8 @@ export default function ResourceRules(props: {
return t("rulesMatchUrl");
case "COUNTRY":
return t("rulesMatchCountry");
case "ASN":
return "Enter an Autonomous System Number (e.g., AS15169 or 15169)";
}
}
@@ -505,12 +536,16 @@ export default function ResourceRules(props: {
<Select
defaultValue={row.original.match}
onValueChange={(
value: "CIDR" | "IP" | "PATH" | "COUNTRY"
value: "CIDR" | "IP" | "PATH" | "COUNTRY" | "ASN"
) =>
updateRule(row.original.ruleId, {
match: value,
value:
value === "COUNTRY" ? "US" : row.original.value
value === "COUNTRY"
? "US"
: value === "ASN"
? "AS15169"
: row.original.value
})
}
>
@@ -526,6 +561,9 @@ export default function ResourceRules(props: {
{RuleMatch.COUNTRY}
</SelectItem>
)}
{isMaxmindAsnAvailable && (
<SelectItem value="ASN">{RuleMatch.ASN}</SelectItem>
)}
</SelectContent>
</Select>
)
@@ -592,6 +630,93 @@ export default function ResourceRules(props: {
</Command>
</PopoverContent>
</Popover>
) : row.original.match === "ASN" ? (
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
className="min-w-[200px] justify-between"
>
{row.original.value
? (() => {
const found = MAJOR_ASNS.find(
(asn) =>
asn.code ===
row.original.value
);
return found
? `${found.name} (${row.original.value})`
: `Custom (${row.original.value})`;
})()
: "Select ASN"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="min-w-[200px] p-0">
<Command>
<CommandInput placeholder="Search ASNs or enter custom..." />
<CommandList>
<CommandEmpty>
No ASN found. Enter a custom ASN below.
</CommandEmpty>
<CommandGroup>
{MAJOR_ASNS.map((asn) => (
<CommandItem
key={asn.code}
value={
asn.name + " " + asn.code
}
onSelect={() => {
updateRule(
row.original.ruleId,
{ value: asn.code }
);
}}
>
<Check
className={`mr-2 h-4 w-4 ${
row.original.value ===
asn.code
? "opacity-100"
: "opacity-0"
}`}
/>
{asn.name} ({asn.code})
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
<div className="border-t p-2">
<Input
placeholder="Enter custom ASN (e.g., AS15169)"
defaultValue={
!MAJOR_ASNS.find(
(asn) =>
asn.code === row.original.value
)
? row.original.value
: ""
}
onKeyDown={(e) => {
if (e.key === "Enter") {
const value = e.currentTarget.value
.toUpperCase()
.replace(/^AS/, "");
if (/^\d+$/.test(value)) {
updateRule(
row.original.ruleId,
{ value: "AS" + value }
);
}
}
}}
className="text-sm"
/>
</div>
</PopoverContent>
</Popover>
) : (
<Input
defaultValue={row.original.value}
@@ -802,6 +927,13 @@ export default function ResourceRules(props: {
}
</SelectItem>
)}
{isMaxmindAsnAvailable && (
<SelectItem value="ASN">
{
RuleMatch.ASN
}
</SelectItem>
)}
</SelectContent>
</Select>
</FormControl>
@@ -924,6 +1056,142 @@ export default function ResourceRules(props: {
</Command>
</PopoverContent>
</Popover>
) : addRuleForm.watch(
"match"
) === "ASN" ? (
<Popover
open={
openAddRuleAsnSelect
}
onOpenChange={
setOpenAddRuleAsnSelect
}
>
<PopoverTrigger
asChild
>
<Button
variant="outline"
role="combobox"
aria-expanded={
openAddRuleAsnSelect
}
className="w-full justify-between"
>
{field.value
? MAJOR_ASNS.find(
(
asn
) =>
asn.code ===
field.value
)
?.name +
" (" +
field.value +
")" ||
field.value
: "Select ASN"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0">
<Command>
<CommandInput placeholder="Search ASNs or enter custom..." />
<CommandList>
<CommandEmpty>
No
ASN
found.
Use
the
custom
input
below.
</CommandEmpty>
<CommandGroup>
{MAJOR_ASNS.map(
(
asn
) => (
<CommandItem
key={
asn.code
}
value={
asn.name +
" " +
asn.code
}
onSelect={() => {
field.onChange(
asn.code
);
setOpenAddRuleAsnSelect(
false
);
}}
>
<Check
className={`mr-2 h-4 w-4 ${
field.value ===
asn.code
? "opacity-100"
: "opacity-0"
}`}
/>
{
asn.name
}{" "}
(
{
asn.code
}
)
</CommandItem>
)
)}
</CommandGroup>
</CommandList>
</Command>
<div className="border-t p-2">
<Input
placeholder="Enter custom ASN (e.g., AS15169)"
onKeyDown={(
e
) => {
if (
e.key ===
"Enter"
) {
const value =
e.currentTarget.value
.toUpperCase()
.replace(
/^AS/,
""
);
if (
/^\d+$/.test(
value
)
) {
field.onChange(
"AS" +
value
);
setOpenAddRuleAsnSelect(
false
);
}
}
}}
className="text-sm"
/>
</div>
</PopoverContent>
</Popover>
) : (
<Input {...field} />
)}

108
src/app/[orgId]/settings/sites/create/page.tsx
View File

@@ -25,7 +25,7 @@ import { createElement, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "@app/components/ui/input";
import { InfoIcon, Terminal } from "lucide-react";
import { ChevronDown, ChevronUp, InfoIcon, Terminal } from "lucide-react";
import { Button } from "@app/components/ui/button";
import CopyTextBox from "@app/components/CopyTextBox";
import CopyToClipboard from "@app/components/CopyToClipboard";
@@ -204,6 +204,7 @@ export default function Page() {
const [createLoading, setCreateLoading] = useState(false);
const [acceptClients, setAcceptClients] = useState(true);
const [newtVersion, setNewtVersion] = useState("latest");
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [siteDefaults, setSiteDefaults] =
useState<PickSiteDefaultsResponse | null>(null);
@@ -727,45 +728,70 @@ WantedBy=default.target`
</FormItem>
)}
/>
{form.watch("method") === "newt" && (
<FormField
control={form.control}
name="clientAddress"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("siteAddress")}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
value={
clientAddress
}
onChange={(
e
) => {
setClientAddress(
e.target
.value
);
field.onChange(
e.target
.value
);
}}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"siteAddressDescription"
)}
</FormDescription>
</FormItem>
<div className="flex items-center justify-end md:col-start-2">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() =>
setShowAdvancedSettings(
!showAdvancedSettings
)
}
className="flex items-center gap-2"
>
{showAdvancedSettings ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
/>
)}
{t("advancedSettings")}
</Button>
</div>
{form.watch("method") === "newt" &&
showAdvancedSettings && (
<FormField
control={form.control}
name="clientAddress"
render={({ field }) => (
<FormItem className="md:col-start-1 md:col-span-2">
<FormLabel>
{t(
"siteAddress"
)}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
value={
clientAddress
}
onChange={(
e
) => {
setClientAddress(
e
.target
.value
);
field.onChange(
e
.target
.value
);
}}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"siteAddressDescription"
)}
</FormDescription>
</FormItem>
)}
/>
)}
</form>
</Form>
</SettingsSectionBody>
@@ -885,7 +911,7 @@ WantedBy=default.target`
? "squareOutlinePrimary"
: "squareOutline"
}
className={`flex-1 min-w-[120px] ${platform === os ? "bg-primary/10" : ""} shadow-none`}
className={`flex-1 min-w-30 ${platform === os ? "bg-primary/10" : ""} shadow-none`}
onClick={() => {
setPlatform(os);
}}
@@ -916,7 +942,7 @@ WantedBy=default.target`
? "squareOutlinePrimary"
: "squareOutline"
}
className={`flex-1 min-w-[120px] ${architecture === arch ? "bg-primary/10" : ""} shadow-none`}
className={`flex-1 min-w-30 ${architecture === arch ? "bg-primary/10" : ""} shadow-none`}
onClick={() =>
setArchitecture(
arch

2
src/app/admin/license/page.tsx
View File

@@ -244,7 +244,7 @@ export default function LicensePage() {
{t("licenseActivateKeyDescription")}
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody>
<CredenzaBody className="overflow-y-hidden">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}

1
src/app/auth/2fa/setup/page.tsx
View File

@@ -32,7 +32,6 @@ export default function Setup2FAPage() {
console.log("2FA setup complete", redirect, email);
if (redirect) {
const cleanUrl = cleanRedirect(redirect);
console.log("Redirecting to:", cleanUrl);
router.push(cleanUrl);
} else {
router.push("/");

55
src/app/auth/login/device/success/page.tsx
View File

@@ -6,6 +6,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { CheckCircle2 } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
export default function DeviceAuthSuccessPage() {
const { env } = useEnvContext();
@@ -20,30 +21,38 @@ export default function DeviceAuthSuccessPage() {
: 58;
return (
<Card>
<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("deviceActivation")}
</p>
</div>
</CardHeader>
<CardContent className="p-6">
<div className="flex flex-col items-center space-y-4">
<CheckCircle2 className="h-12 w-12 text-green-500" />
<div className="space-y-2">
<h3 className="text-xl font-bold text-center">
{t("deviceConnected")}
</h3>
<p className="text-center text-sm text-muted-foreground">
{t("deviceAuthorizedMessage")}
<>
<Card>
<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("deviceActivation")}
</p>
</div>
</div>
</CardContent>
</Card>
</CardHeader>
<CardContent className="p-6">
<div className="flex flex-col items-center space-y-4">
<CheckCircle2 className="h-12 w-12 text-green-500" />
<div className="space-y-2">
<h3 className="text-xl font-bold text-center">
{t("deviceConnected")}
</h3>
<p className="text-center text-sm text-muted-foreground">
{t("deviceAuthorizedMessage")}
</p>
</div>
</div>
</CardContent>
</Card>
<p className="text-center text-muted-foreground mt-4">
<Link href={"/"} className="underline">
{t("backToHome")}
</Link>
</p>
</>
);
}

30
src/app/auth/login/page.tsx
View File

@@ -66,6 +66,7 @@ export default async function Page(props: {
let redirectUrl: string | undefined = undefined;
if (searchParams.redirect) {
redirectUrl = cleanRedirect(searchParams.redirect as string);
searchParams.redirect = redirectUrl;
}
let loginIdps: LoginFormIDP[] = [];
@@ -119,6 +120,35 @@ export default async function Page(props: {
</Link>
</p>
)}
{!isInvite && build === "saas" ? (
<div className="text-center text-muted-foreground mt-12 flex flex-col items-center">
<span>{t("needToSignInToOrg")}</span>
<Link
href={`/auth/org${buildQueryString(searchParams)}`}
className="underline"
>
{t("orgAuthSignInToOrg")}
</Link>
</div>
) : 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}` : "";
}

85
src/app/auth/org/[orgId]/page.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { priv } from "@app/lib/api";
import { AxiosResponse } from "axios";
import { cache } from "react";
import { verifySession } from "@app/lib/auth/verifySession";
import { LoginFormIDP } from "@app/components/LoginForm";
import { ListOrgIdpsResponse } from "@server/routers/orgIdp/types";
import { build } from "@server/build";
import {
LoadLoginPageBrandingResponse,
LoadLoginPageResponse
} from "@server/routers/loginPage/types";
import { redirect } from "next/navigation";
import OrgLoginPage from "@app/components/OrgLoginPage";
export const dynamic = "force-dynamic";
export default async function OrgAuthPage(props: {
params: Promise<{ orgId: string }>;
searchParams: Promise<{ forceLogin?: string; redirect?: string }>;
}) {
const searchParams = await props.searchParams;
const params = await props.params;
if (build !== "saas") {
const queryString = new URLSearchParams(searchParams as any).toString();
redirect(`/auth/login${queryString ? `?${queryString}` : ""}`);
}
const forceLoginParam = searchParams?.forceLogin;
const forceLogin = forceLoginParam === "true";
const orgId = params.orgId;
const getUser = cache(verifySession);
const user = await getUser({ skipCheckVerifyEmail: true });
if (user && !forceLogin) {
redirect("/");
}
let loginPage: LoadLoginPageResponse | undefined;
try {
const res = await priv.get<AxiosResponse<LoadLoginPageResponse>>(
`/login-page?orgId=${orgId}`
);
if (res && res.status === 200) {
loginPage = res.data.data;
}
} catch (e) {}
let loginIdps: LoginFormIDP[] = [];
if (build === "saas") {
const idpsRes = await priv.get<AxiosResponse<ListOrgIdpsResponse>>(
`/org/${orgId}/idp`
);
loginIdps = idpsRes.data.data.idps.map((idp) => ({
idpId: idp.idpId,
name: idp.name,
variant: idp.variant
})) as LoginFormIDP[];
}
let branding: LoadLoginPageBrandingResponse | null = null;
if (build === "saas") {
try {
const res = await priv.get<
AxiosResponse<LoadLoginPageBrandingResponse>
>(`/login-page-branding?orgId=${orgId}`);
if (res.status === 200) {
branding = res.data.data;
}
} catch (error) {}
}
return (
<OrgLoginPage
loginPage={loginPage}
loginIdps={loginIdps}
branding={branding}
searchParams={searchParams}
/>
);
}

122
src/app/auth/(private)/org/page.tsx → src/app/auth/org/page.tsx
View File

@@ -13,36 +13,41 @@ 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 { getTranslations } from "next-intl/server";
import { GetSessionTransferTokenRenponse } from "@server/routers/auth/types";
import ValidateSessionTransferToken from "@app/components/private/ValidateSessionTransferToken";
import { replacePlaceholder } from "@app/lib/replacePlaceholder";
import { isOrgSubscribed } from "@app/lib/api/isOrgSubscribed";
import { OrgSelectionForm } from "@app/components/OrgSelectionForm";
import OrgLoginPage from "@app/components/OrgLoginPage";
export const dynamic = "force-dynamic";
export default async function OrgAuthPage(props: {
params: Promise<{}>;
searchParams: Promise<{ token?: string }>;
searchParams: Promise<{
token?: string;
redirect?: string;
forceLogin?: string;
}>;
}) {
const searchParams = await props.searchParams;
const forceLoginParam = searchParams.forceLogin;
const forceLogin = forceLoginParam === "true";
if (build !== "saas") {
redirect("/");
}
const env = pullEnv();
const authHeader = await authCookieHeader();
if (searchParams.token) {
return <ValidateSessionTransferToken token={searchParams.token} />;
return (
<ValidateSessionTransferToken
token={searchParams.token}
redirect={searchParams.redirect}
/>
);
}
const getUser = cache(verifySession);
@@ -51,8 +56,6 @@ export default async function OrgAuthPage(props: {
const allHeaders = await headers();
const host = allHeaders.get("host");
const t = await getTranslations();
const expectedHost = env.app.dashboardUrl.split("//")[1];
let redirectToUrl: string | undefined;
@@ -84,7 +87,7 @@ export default async function OrgAuthPage(props: {
redirect(env.app.dashboardUrl);
}
if (user) {
if (user && !forceLogin) {
let redirectToken: string | undefined;
try {
const res = await priv.post<
@@ -102,13 +105,23 @@ export default async function OrgAuthPage(props: {
}
if (redirectToken) {
redirectToUrl = `${env.app.dashboardUrl}/auth/org?token=${redirectToken}`;
// redirectToUrl = `${env.app.dashboardUrl}/auth/org?token=${redirectToken}`;
// include redirect param if exists
redirectToUrl = `${env.app.dashboardUrl}/auth/org?token=${redirectToken}${
searchParams.redirect
? `&redirect=${encodeURIComponent(
searchParams.redirect
)}`
: ""
}`;
console.log(
`Redirecting logged in user to org auth callback: ${redirectToUrl}`
);
redirect(redirectToUrl);
}
}
} else {
console.log(`Host ${host} is the same`);
redirect(env.app.dashboardUrl);
return <OrgSelectionForm />;
}
let loginIdps: LoginFormIDP[] = [];
@@ -137,68 +150,11 @@ export default async function OrgAuthPage(props: {
}
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-3">
<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}
/>
) : (
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
{t("orgAuthNoIdpConfigured")}
</p>
<Link href={`${env.app.dashboardUrl}/auth/login`}>
<Button className="w-full">
{t("orgAuthSignInWithPangolin")}
</Button>
</Link>
</div>
)}
</CardContent>
</Card>
</div>
<OrgLoginPage
loginPage={loginPage}
loginIdps={loginIdps}
branding={branding}
searchParams={searchParams}
/>
);
}

29
src/app/globals.css
View File

@@ -162,3 +162,32 @@ p {
#nprogress .bar {
background: var(--color-primary) !important;
}
@keyframes dot-pulse {
0%, 80%, 100% {
opacity: 0.3;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
@layer utilities {
.animate-dot-pulse {
animation: dot-pulse 1.4s ease-in-out infinite;
}
/* Use JavaScript-set viewport height for mobile to handle keyboard properly */
.h-screen-safe {
height: 100vh; /* Default for desktop and fallback */
}
/* Only apply custom viewport height on mobile */
@media (max-width: 767px) {
.h-screen-safe {
height: var(--vh, 100vh); /* Use CSS variable set by ViewportHeightFix on mobile */
}
}
}

4
src/app/layout.tsx
View File

@@ -22,6 +22,7 @@ import { TopLoader } from "@app/components/Toploader";
import Script from "next/script";
import { TanstackQueryProvider } from "@app/components/TanstackQueryProvider";
import { TailwindIndicator } from "@app/components/TailwindIndicator";
import { ViewportHeightFix } from "@app/components/ViewportHeightFix";
export const metadata: Metadata = {
title: `Dashboard - ${process.env.BRANDING_APP_NAME || "Pangolin"}`,
@@ -77,7 +78,7 @@ export default async function RootLayout({
return (
<html suppressHydrationWarning lang={locale}>
<body className={`${font.className} h-screen overflow-hidden`}>
<body className={`${font.className} h-screen-safe overflow-hidden`}>
<TopLoader />
{build === "saas" && (
<Script
@@ -86,6 +87,7 @@ export default async function RootLayout({
strategy="afterInteractive"
/>
)}
<ViewportHeightFix />
<NextIntlClientProvider>
<ThemeProvider
attribute="class"

74
src/app/maintenance-screen/page.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Metadata } from "next";
import { headers } from "next/headers";
import { priv } from "@app/lib/api";
import { GetMaintenanceInfoResponse } from "@server/routers/resource/types";
import { getTranslations } from "next-intl/server";
import {
Card,
CardContent,
CardHeader,
CardTitle
} from "@app/components/ui/card";
import { Alert, AlertTitle, AlertDescription } from "@app/components/ui/alert";
import { Clock } from "lucide-react";
import { AxiosResponse } from "axios";
export const dynamic = "force-dynamic";
export const metadata: Metadata = {
title: "Maintenance"
};
export default async function MaintenanceScreen() {
const t = await getTranslations();
let title = t("maintenanceScreenTitle");
let message = t("maintenanceScreenMessage");
let estimatedTime: string | null = null;
try {
const headersList = await headers();
const host = headersList.get("host") || "";
const hostname = host.split(":")[0];
const res = await priv.get<AxiosResponse<GetMaintenanceInfoResponse>>(
`/maintenance/info?fullDomain=${encodeURIComponent(hostname)}`
);
if (res && res.status === 200) {
const maintenanceInfo = res.data.data;
title = maintenanceInfo?.maintenanceTitle || title;
message = maintenanceInfo?.maintenanceMessage || message;
estimatedTime = maintenanceInfo?.maintenanceEstimatedTime || null;
}
} catch (err) {
console.error(
"Failed to fetch maintenance info",
err instanceof Error ? err.message : String(err)
);
}
return (
<div className="min-h-screen flex items-center justify-center p-4">
<Card className="w-full max-w-md">
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p>{message}</p>
{estimatedTime && (
<Alert className="w-full" variant="neutral">
<Clock className="h-5 w-5" />
<AlertTitle>
{t("maintenanceScreenEstimatedCompletion")}
</AlertTitle>
<AlertDescription className="flex flex-col space-y-2">
{estimatedTime}
</AlertDescription>
</Alert>
)}
</CardContent>
</Card>
</div>
);
}

142
src/app/setup/page.tsx
View File

@@ -30,6 +30,13 @@ import {
} from "@app/components/ui/form";
import { Alert, AlertDescription } from "@app/components/ui/alert";
import { useTranslations } from "next-intl";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger
} from "@app/components/ui/collapsible";
import { ChevronsUpDown } from "lucide-react";
import { cn } from "@app/lib/cn";
type Step = "org" | "site" | "resources";
@@ -41,13 +48,15 @@ export default function StepperForm() {
const [loading, setLoading] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const [error, setError] = useState<string | null>(null);
// Removed error state, now using toast for API errors
const [orgCreated, setOrgCreated] = useState(false);
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
const orgSchema = z.object({
orgName: z.string().min(1, { message: t("orgNameRequired") }),
orgId: z.string().min(1, { message: t("orgIdRequired") }),
subnet: z.string().min(1, { message: t("subnetRequired") })
subnet: z.string().min(1, { message: t("subnetRequired") }),
utilitySubnet: z.string().min(1, { message: t("subnetRequired") })
});
const orgForm = useForm({
@@ -55,7 +64,8 @@ export default function StepperForm() {
defaultValues: {
orgName: "",
orgId: "",
subnet: ""
subnet: "",
utilitySubnet: ""
}
});
@@ -72,6 +82,7 @@ export default function StepperForm() {
const res = await api.get(`/pick-org-defaults`);
if (res && res.data && res.data.data) {
orgForm.setValue("subnet", res.data.data.subnet);
orgForm.setValue("utilitySubnet", res.data.data.utilitySubnet);
}
} catch (e) {
console.error("Failed to fetch default subnet:", e);
@@ -129,7 +140,8 @@ export default function StepperForm() {
const res = await api.put(`/org`, {
orgId: values.orgId,
name: values.orgName,
subnet: values.subnet
subnet: values.subnet,
utilitySubnet: values.utilitySubnet
});
if (res && res.status === 201) {
@@ -138,7 +150,11 @@ export default function StepperForm() {
}
} catch (e) {
console.error(e);
setError(formatAxiosError(e, t("orgErrorCreate")));
toast({
title: t("error"),
description: formatAxiosError(e, t("orgErrorCreate")),
variant: "destructive"
});
}
setLoading(false);
@@ -296,29 +312,85 @@ export default function StepperForm() {
)}
/>
<FormField
control={orgForm.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("setupSubnetAdvanced")}
</FormLabel>
<FormControl>
<Input
type="text"
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"setupSubnetDescription"
)}
</FormDescription>
</FormItem>
)}
/>
<Collapsible
open={isAdvancedOpen}
onOpenChange={setIsAdvancedOpen}
className="space-y-2"
>
<div className="flex items-center justify-between space-x-4">
<CollapsibleTrigger asChild>
<Button
type="button"
variant="text"
size="sm"
className="p-0 flex items-center justify-between w-full"
>
<h4 className="text-sm">
{t("advancedSettings")}
</h4>
<div>
<ChevronsUpDown className="h-4 w-4" />
<span className="sr-only">
{t("toggle")}
</span>
</div>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent className="space-y-4">
<FormField
control={orgForm.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"setupSubnetAdvanced"
)}
</FormLabel>
<FormControl>
<Input
type="text"
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"setupSubnetDescription"
)}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={orgForm.control}
name="utilitySubnet"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"setupUtilitySubnet"
)}
</FormLabel>
<FormControl>
<Input
type="text"
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"setupUtilitySubnetDescription"
)}
</FormDescription>
</FormItem>
)}
/>
</CollapsibleContent>
</Collapsible>
{orgIdTaken && !orgCreated ? (
<Alert variant="destructive">
@@ -328,23 +400,13 @@ export default function StepperForm() {
</Alert>
) : null}
{error && (
<Alert variant="destructive">
<AlertDescription>
{error}
</AlertDescription>
</Alert>
)}
{/* Error Alert removed, errors now shown as toast */}
<div className="flex justify-end">
<Button
type="submit"
loading={loading}
disabled={
error !== null ||
loading ||
orgIdTaken
}
disabled={loading || orgIdTaken}
>
{t("setupCreateOrg")}
</Button>

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;

1
src/contexts/orgContext.ts
View File

@@ -3,6 +3,7 @@ import { createContext } from "react";
export interface OrgContextType {
org: GetOrgResponse;
updateOrg: (updatedOrg: Partial<GetOrgResponse["org"]>) => void;
}
const OrgContext = createContext<OrgContextType | undefined>(undefined);

96
src/lib/cleanRedirect.ts
View File

@@ -1,22 +1,86 @@
type PatternConfig = {
name: string;
regex: RegExp;
type CleanRedirectOptions = {
fallback?: string;
maxRedirectDepth?: number;
};
const patterns: PatternConfig[] = [
{ name: "Invite Token", regex: /^\/invite\?token=[a-zA-Z0-9-]+$/ },
{ name: "Setup", regex: /^\/setup$/ },
{ name: "Resource Auth Portal", regex: /^\/auth\/resource\/\d+$/ },
{
name: "Device Login",
regex: /^\/auth\/login\/device(\?code=[a-zA-Z0-9-]+)?$/
}
];
const ALLOWED_QUERY_PARAMS = new Set([
"forceLogin",
"code",
"token",
"redirect"
]);
const DUMMY_BASE = "https://internal.local";
export function cleanRedirect(
input: string,
options: CleanRedirectOptions = {}
): string {
const { fallback = "/", maxRedirectDepth = 2 } = options;
export function cleanRedirect(input: string, fallback?: string): string {
if (!input || typeof input !== "string") {
return "/";
return fallback;
}
try {
return sanitizeUrl(input, fallback, maxRedirectDepth);
} catch {
return fallback;
}
const isAccepted = patterns.some((pattern) => pattern.regex.test(input));
return isAccepted ? input : fallback || "/";
}
function sanitizeUrl(
input: string,
fallback: string,
remainingRedirectDepth: number
): string {
if (
input.startsWith("javascript:") ||
input.startsWith("data:") ||
input.startsWith("//")
) {
return fallback;
}
const url = new URL(input, DUMMY_BASE);
// Must be a relative/internal path
if (url.origin !== DUMMY_BASE) {
return fallback;
}
if (!url.pathname.startsWith("/")) {
return fallback;
}
const cleanParams = new URLSearchParams();
for (const [key, value] of url.searchParams.entries()) {
if (!ALLOWED_QUERY_PARAMS.has(key)) {
continue;
}
if (key === "redirect") {
if (remainingRedirectDepth <= 0) {
continue;
}
const cleanedRedirect = sanitizeUrl(
value,
"",
remainingRedirectDepth - 1
);
if (cleanedRedirect) {
cleanParams.set("redirect", cleanedRedirect);
}
continue;
}
cleanParams.set(key, value);
}
const queryString = cleanParams.toString();
return queryString ? `${url.pathname}?${queryString}` : url.pathname;
}

9
src/lib/pullEnv.ts
View File

@@ -15,7 +15,8 @@ export function pullEnv(): Env {
resourceAccessTokenHeadersToken: process.env
.RESOURCE_ACCESS_TOKEN_HEADERS_TOKEN as string,
reoClientId: process.env.REO_CLIENT_ID as string,
maxmind_db_path: process.env.MAXMIND_DB_PATH as string
maxmind_db_path: process.env.MAXMIND_DB_PATH as string,
maxmind_asn_path: process.env.MAXMIND_ASN_PATH as string
},
app: {
environment: process.env.ENVIRONMENT as string,
@@ -58,7 +59,11 @@ export function pullEnv(): Env {
hideSupporterKey:
process.env.HIDE_SUPPORTER_KEY === "true" ? true : false,
usePangolinDns:
process.env.USE_PANGOLIN_DNS === "true" ? true : false
process.env.USE_PANGOLIN_DNS === "true" ? true : false,
disableProductHelpBanners:
process.env.FLAGS_DISABLE_PRODUCT_HELP_BANNERS === "true"
? true
: false
},
branding: {

36
src/lib/queries.ts
View File

@@ -41,12 +41,13 @@ export type LatestVersionResponse = {
};
export const productUpdatesQueries = {
list: (enabled: boolean) =>
list: (enabled: boolean, version?: string) =>
queryOptions({
queryKey: ["PRODUCT_UPDATES"] as const,
queryFn: async ({ signal }) => {
const sp = new URLSearchParams({
build
build,
...(version ? { version } : {})
});
const data = await remote.get<ResponseT<ProductUpdate[]>>(
`/product-updates?${sp.toString()}`,
@@ -228,7 +229,7 @@ export const resourceQueries = {
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListSiteResourceUsersResponse>
>(`/site-resource/${resourceId}/users`, { signal });
>(`/resource/${resourceId}/users`, { signal });
return res.data.data.users;
}
}),
@@ -238,18 +239,39 @@ export const resourceQueries = {
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListSiteResourceRolesResponse>
>(`/site-resource/${resourceId}/roles`, { signal });
>(`/resource/${resourceId}/roles`, { signal });
return res.data.data.roles;
}
}),
resourceClients: ({ resourceId }: { resourceId: number }) =>
siteResourceUsers: ({ siteResourceId }: { siteResourceId: number }) =>
queryOptions({
queryKey: ["RESOURCES", resourceId, "CLIENTS"] as const,
queryKey: ["SITE_RESOURCES", siteResourceId, "USERS"] as const,
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListSiteResourceUsersResponse>
>(`/site-resource/${siteResourceId}/users`, { signal });
return res.data.data.users;
}
}),
siteResourceRoles: ({ siteResourceId }: { siteResourceId: number }) =>
queryOptions({
queryKey: ["SITE_RESOURCES", siteResourceId, "ROLES"] as const,
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListSiteResourceRolesResponse>
>(`/site-resource/${siteResourceId}/roles`, { signal });
return res.data.data.roles;
}
}),
siteResourceClients: ({ siteResourceId }: { siteResourceId: number }) =>
queryOptions({
queryKey: ["SITE_RESOURCES", siteResourceId, "CLIENTS"] as const,
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListSiteResourceClientsResponse>
>(`/site-resource/${resourceId}/clients`, { signal });
>(`/site-resource/${siteResourceId}/clients`, { signal });
return res.data.data.clients;
}

2
src/lib/types/env.ts
View File

@@ -19,6 +19,7 @@ export type Env = {
resourceAccessTokenHeadersToken: string;
reoClientId?: string;
maxmind_db_path?: string;
maxmind_asn_path?: string;
};
email: {
emailEnabled: boolean;
@@ -32,6 +33,7 @@ export type Env = {
disableBasicWireguardSites: boolean;
hideSupporterKey: boolean;
usePangolinDns: boolean;
disableProductHelpBanners: boolean;
};
branding: {
appName?: string;

28
src/providers/OrgProvider.tsx
View File

@@ -10,15 +10,37 @@ interface OrgProviderProps {
org: GetOrgResponse | null;
}
export function OrgProvider({ children, org }: OrgProviderProps) {
export function OrgProvider({ children, org: serverOrg }: OrgProviderProps) {
const t = useTranslations();
if (!org) {
if (!serverOrg) {
throw new Error(t("orgErrorNoProvided"));
}
const [org, setOrg] = useState<GetOrgResponse>(serverOrg);
const updateOrg = (updatedOrg: Partial<GetOrgResponse["org"]>) => {
if (!org) {
throw new Error(t("orgErrorNoUpdate"));
}
setOrg((prev) => {
if (!prev) {
return prev;
}
return {
...prev,
org: {
...prev.org,
...updatedOrg
}
};
});
};
return (
<OrgContext.Provider value={{ org }}>{children}</OrgContext.Provider>
<OrgContext.Provider value={{ org, updateOrg }}>
{children}
</OrgContext.Provider>
);
}