pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-15 17:36:37 +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>