mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-25 02:33:36 +00:00
add org auth slug with device auth support
This commit is contained in:
miloschwartz
@@ -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>
|
||||
|
||||
42
src/components/OrgInfoCard.tsx
Normal file
42
src/components/OrgInfoCard.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
|
||||
122
src/components/OrgLoginPage.tsx
Normal file
122
src/components/OrgLoginPage.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
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
155
src/components/OrgSelectionForm.tsx
Normal 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/identity-providers/add-an-idp"
|
||||
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}` : "";
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -117,7 +117,7 @@ function CollapsibleNavItem({
|
||||
"flex items-center w-full rounded-md transition-colors",
|
||||
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
|
||||
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"
|
||||
)}
|
||||
@@ -258,7 +258,7 @@ export function SidebarNav({
|
||||
"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",
|
||||
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"
|
||||
)}
|
||||
@@ -347,7 +347,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 +402,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"
|
||||
|
||||
@@ -57,9 +57,15 @@ export default function IdpLoginButtons({
|
||||
|
||||
let redirectToUrl: string | undefined;
|
||||
try {
|
||||
console.log(
|
||||
"generating",
|
||||
idpId,
|
||||
redirect || "/",
|
||||
orgId
|
||||
);
|
||||
const response = await generateOidcUrlProxy(
|
||||
idpId,
|
||||
redirect || "/auth/org?gotoapp=app",
|
||||
redirect || "/",
|
||||
orgId
|
||||
);
|
||||
|
||||
@@ -70,7 +76,6 @@ export default function IdpLoginButtons({
|
||||
}
|
||||
|
||||
const data = response.data;
|
||||
console.log("Redirecting to:", data?.redirectUrl);
|
||||
if (data?.redirectUrl) {
|
||||
redirectToUrl = data.redirectUrl;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user