Magic-link sign in UI and APIs

2026-04-06 16:37:15 -06:00
parent 331ed40234
commit 7218947df3
74 changed files with 1582 additions and 363 deletions
@@ -0,0 +1,57 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import ModalHeader from "../../utility/ModalHeader";
+import type { LoginViewProps } from "./Login.types";
+
+export function LoginView({
+  isOpen,
+  onClose,
+  children,
+  belowCard,
+  className,
+  ariaLabel,
+  ariaLabelledBy,
+  dialogRef,
+  backdropRef,
+  portalReady,
+  usePortal,
+}: LoginViewProps) {
+  if (!isOpen) return null;
+  if (usePortal && !portalReady) return null;
+
+  const content = (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-[9998] flex flex-col items-center justify-center gap-6 overflow-y-auto bg-[var(--color-surface-inverse-brand-primary)] px-4 py-8"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500,20px)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ModalHeader onClose={onClose} onMoreOptions={onClose} />
+        <div className="scrollbar-design flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto px-6 pb-8 pt-0">
+          {children}
+        </div>
+      </div>
+      {belowCard ? (
+        <div className="shrink-0" onClick={(e) => e.stopPropagation()}>
+          {belowCard}
+        </div>
+      ) : null}
+    </div>
+  );
+
+  if (usePortal) {
+    return createPortal(content, document.body);
+  }
+
+  return content;
+}