clean up login page

messages/en-US.json

@@ -1135,7 +1135,7 @@
     "create": "Create",
     "orgs": "Organizations",
     "loginError": "An error occurred while logging in",
-    "loginRequiredForDevice": "Login is required to authenticate your device.",
+    "loginRequiredForDevice": "Login is required for your device.",
     "passwordForgot": "Forgot your password?",
     "otpAuth": "Two-Factor Authentication",
     "otpAuthDescription": "Enter the code from your authenticator app or one of your single-use backup codes.",
@@ -1876,7 +1876,7 @@
     "orgAuthChooseIdpDescription": "Choose your identity provider to continue",
     "orgAuthNoIdpConfigured": "This organization doesn't have any identity providers configured. You can log in with your Pangolin identity instead.",
     "orgAuthSignInWithPangolin": "Sign in with Pangolin",
-    "orgAuthSignInToOrg": "Sign in to an organization",
+    "orgAuthSignInToOrg": "Use organization's identity provider",
     "orgAuthSelectOrgTitle": "Organization Sign In",
     "orgAuthSelectOrgDescription": "Enter your organization ID to continue",
     "orgAuthOrgIdPlaceholder": "your-organization",

server/routers/auth/index.ts

@@ -16,4 +16,4 @@ export * from "./checkResourceSession";
 export * from "./securityKey";
 export * from "./startDeviceWebAuth";
 export * from "./verifyDeviceWebAuth";
-export * from "./pollDeviceWebAuth";
+export * from "./pollDeviceWebAuth";

src/app/auth/layout.tsx

@@ -44,7 +44,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
 
     return (
         <div className="h-full flex flex-col">
-            <div className="flex justify-end items-center p-3 space-x-2">
+            <div className="hidden md:flex justify-end items-center p-3 space-x-2">
                 <ThemeSwitcher />
             </div>
 
@@ -127,26 +127,6 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
                                 </a>
                             </>
                         )}
-                        <Separator orientation="vertical" />
-                        <a
-                            href="https://docs.pangolin.net"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            aria-label="Built by Fossorial"
-                            className="flex items-center space-x-2 whitespace-nowrap"
-                        >
-                            <span>{t("docs")}</span>
-                        </a>
-                        <Separator orientation="vertical" />
-                        <a
-                            href="https://github.com/fosrl/pangolin"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            aria-label="GitHub"
-                            className="flex items-center space-x-2 whitespace-nowrap"
-                        >
-                            <span>{t("github")}</span>
-                        </a>
                     </div>
                 </footer>
             )}

src/app/auth/login/page.tsx

@@ -103,6 +103,10 @@ export default async function Page(props: {
                 redirect={redirectUrl}
                 idps={loginIdps}
                 forceLogin={forceLogin}
+                showOrgLogin={
+                    !isInvite && (build === "saas" || env.flags.useOrgOnlyIdp)
+                }
+                searchParams={searchParams}
             />
 
             {(!signUpDisabled || isInvite) && (
@@ -120,35 +124,6 @@ export default async function Page(props: {
                     </Link>
                 </p>
             )}
-
-            {!isInvite && (build === "saas" || env.flags.useOrgOnlyIdp) ? (
-                <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/components/DashboardLoginForm.tsx

@@ -17,17 +17,26 @@ import { cleanRedirect } from "@app/lib/cleanRedirect";
 import BrandingLogo from "@app/components/BrandingLogo";
 import { useTranslations } from "next-intl";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { ArrowRight } from "lucide-react";
 
 type DashboardLoginFormProps = {
     redirect?: string;
     idps?: LoginFormIDP[];
     forceLogin?: boolean;
+    showOrgLogin?: boolean;
+    searchParams?: {
+        [key: string]: string | string[] | undefined;
+    };
 };
 
 export default function DashboardLoginForm({
     redirect,
     idps,
-    forceLogin
+    forceLogin,
+    showOrgLogin,
+    searchParams
 }: DashboardLoginFormProps) {
     const router = useRouter();
     const { env } = useEnvContext();
@@ -35,6 +44,9 @@ export default function DashboardLoginForm({
     const { isUnlocked } = useLicenseStatusContext();
 
     function getSubtitle() {
+        if (forceLogin) {
+            return t("loginRequiredForDevice");
+        }
         if (isUnlocked() && env.branding?.loginPage?.subtitleText) {
             return env.branding.loginPage.subtitleText;
         }
@@ -57,6 +69,22 @@ export default function DashboardLoginForm({
                 <div className="text-center space-y-1 pt-3">
                     <p className="text-muted-foreground">{getSubtitle()}</p>
                 </div>
+                {showOrgLogin && (
+                    <div className="space-y-2 mt-4">
+                        <Link
+                            href={`/auth/org${buildQueryString(searchParams || {})}`}
+                            className="underline"
+                        >
+                            <Button
+                                variant="secondary"
+                                className="w-full gap-2"
+                            >
+                                {t("orgAuthSignInToOrg")}
+                                <ArrowRight className="h-4 w-4" />
+                            </Button>
+                        </Link>
+                    </div>
+                )}
             </CardHeader>
             <CardContent className="pt-6">
                 <LoginForm
@@ -76,3 +104,20 @@ export default function DashboardLoginForm({
         </Card>
     );
 }
+
+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/components/LoginForm.tsx

@@ -409,15 +409,6 @@ export default function LoginForm({
 
     return (
         <div className="space-y-4">
-            {forceLogin && (
-                <Alert variant="neutral">
-                    <AlertDescription className="flex items-center gap-2">
-                        <LockIcon className="w-4 h-4" />
-                        {t("loginRequiredForDevice")}
-                    </AlertDescription>
-                </Alert>
-            )}
-
             {showSecurityKeyPrompt && (
                 <Alert>
                     <FingerprintIcon className="w-5 h-5 mr-2" />