add org auth slug with device auth support

src/app/[orgId]/settings/general/layout.tsx

@@ -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,10 @@ 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>
         </>

src/app/[orgId]/settings/general/page.tsx

@@ -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>

src/app/auth/2fa/setup/page.tsx

@@ -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("/");

src/app/auth/login/device/success/page.tsx

@@ -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>
+        </>
     );
 }

src/app/auth/login/page.tsx

@@ -119,6 +119,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}` : "";
+}

src/app/auth/org/[orgId]/page.tsx

@@ -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}
+        />
+    );
+}

src/app/auth/org/page.tsx

@@ -13,36 +13,37 @@ 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";
 
     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 +52,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 +83,9 @@ export default async function OrgAuthPage(props: {
             redirect(env.app.dashboardUrl);
         }
 
-        if (user) {
+        console.log(user, forceLogin);
+
+        if (user && !forceLogin) {
             let redirectToken: string | undefined;
             try {
                 const res = await priv.post<
@@ -102,13 +103,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 +148,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}
+        />
     );
 }