improved org idp login flow

2026-05-15 20:59:53 +00:00 · 2026-01-14 19:15:19 -08:00
parent 5f184e9e5e
commit 2f2c2b4222
22 changed files with 1872 additions and 412 deletions
--- a/src/components/OrgSignInLink.tsx
+++ b/src/components/OrgSignInLink.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
+import { Button } from "@app/components/ui/button";
+
+type OrgSignInLinkProps = {
+    href: string;
+    linkText: string;
+    descriptionText: string;
+};
+
+const STORAGE_KEY_CLICKED = "orgSignInLinkClicked";
+const STORAGE_KEY_ACKNOWLEDGED = "orgSignInTipAcknowledged";
+
+export default function OrgSignInLink({
+    href,
+    linkText,
+    descriptionText
+}: OrgSignInLinkProps) {
+    const router = useRouter();
+    const t = useTranslations();
+    const [showTip, setShowTip] = useState(false);
+
+    useEffect(() => {
+        // Check if tip was previously acknowledged
+        const acknowledged =
+            localStorage.getItem(STORAGE_KEY_ACKNOWLEDGED) === "true";
+        if (acknowledged) {
+            // Clear the clicked flag if tip was acknowledged
+            localStorage.removeItem(STORAGE_KEY_CLICKED);
+        }
+    }, []);
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+
+        const hasClickedBefore =
+            localStorage.getItem(STORAGE_KEY_CLICKED) === "true";
+        const isAcknowledged =
+            localStorage.getItem(STORAGE_KEY_ACKNOWLEDGED) === "true";
+
+        if (hasClickedBefore && !isAcknowledged) {
+            // Second click (or later) - show tip
+            setShowTip(true);
+        } else {
+            // First click - store flag and navigate
+            localStorage.setItem(STORAGE_KEY_CLICKED, "true");
+            router.push(href);
+        }
+    };
+
+    const handleContinueAnyway = () => {
+        setShowTip(false);
+        router.push(href);
+    };
+
+    const handleDontShowAgain = () => {
+        setShowTip(false);
+        localStorage.setItem(STORAGE_KEY_ACKNOWLEDGED, "true");
+        localStorage.removeItem(STORAGE_KEY_CLICKED);
+    };
+
+    return (
+        <>
+            {showTip && (
+                <Alert className="mb-4 mt-8">
+                    <AlertTitle>{t("orgSignInNotice")}</AlertTitle>
+                    <AlertDescription className="space-y-3 mt-3">
+                        <p>{t("orgSignInTip")}</p>
+                        <div className="flex items-center gap-2">
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                className="w-full"
+                                onClick={handleDontShowAgain}
+                            >
+                                {t("dontShowAgain")}
+                            </Button>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="w-full"
+                                onClick={handleContinueAnyway}
+                            >
+                                {t("continueAnyway")}
+                            </Button>
+                        </div>
+                    </AlertDescription>
+                </Alert>
+            )}
+            <div className="text-sm text-center text-muted-foreground mt-8 flex flex-col items-center">
+                <span>{descriptionText}</span>
+                <button
+                    onClick={handleClick}
+                    className="underline text-inherit bg-transparent border-none p-0 cursor-pointer"
+                >
+                    {linkText}
+                </button>
+            </div>
+        </>
+    );
+}