mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 11:23:10 +02:00
Merge branch 'main' into SaaS
This commit is contained in:
Anthony Stirling
@@ -0,0 +1,262 @@
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Stack,
|
||||
Paper,
|
||||
Text,
|
||||
Group,
|
||||
Alert,
|
||||
Code,
|
||||
Badge,
|
||||
Button,
|
||||
CopyButton,
|
||||
Tabs,
|
||||
Tooltip,
|
||||
ThemeIcon,
|
||||
} from "@mantine/core";
|
||||
import LocalIcon from "@app/components/shared/LocalIcon";
|
||||
import { useAppConfig } from "@app/contexts/AppConfigContext";
|
||||
import { openAppSettings } from "@app/utils/appSettings";
|
||||
|
||||
/** Strip a single trailing slash so we can safely append paths. */
|
||||
function trimTrailingSlash(url: string): string {
|
||||
return url.endsWith("/") ? url.slice(0, -1) : url;
|
||||
}
|
||||
|
||||
/** A small copy-to-clipboard button that sits inline next to a URL/snippet. */
|
||||
function CopyInline({ value, label }: { value: string; label: string }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<CopyButton value={value} timeout={1500}>
|
||||
{({ copied, copy }) => (
|
||||
<Tooltip
|
||||
label={
|
||||
copied
|
||||
? t("config.mcp.copy.tooltipCopied", "{{label}} copied", {
|
||||
label,
|
||||
})
|
||||
: t("config.mcp.copy.tooltip", "Copy {{label}}", { label })
|
||||
}
|
||||
withArrow
|
||||
>
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="subtle"
|
||||
color={copied ? "teal" : "gray"}
|
||||
onClick={copy}
|
||||
leftSection={
|
||||
<LocalIcon
|
||||
icon={copied ? "check-rounded" : "content-copy-rounded"}
|
||||
width={14}
|
||||
height={14}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{copied
|
||||
? t("config.mcp.copy.copied", "Copied")
|
||||
: t("config.mcp.copy.copy", "Copy")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</CopyButton>
|
||||
);
|
||||
}
|
||||
|
||||
// SaaS MCP guide: always shown, explains how to point an AI assistant at the
|
||||
// OAuth-protected /mcp endpoint with per-client config.
|
||||
export default function McpSection() {
|
||||
const { t } = useTranslation();
|
||||
const { config } = useAppConfig();
|
||||
|
||||
const baseUrl = useMemo(() => {
|
||||
const raw =
|
||||
config?.baseUrl ||
|
||||
(typeof window !== "undefined" ? window.location.origin : "");
|
||||
return trimTrailingSlash(raw);
|
||||
}, [config?.baseUrl]);
|
||||
|
||||
const mcpUrl = `${baseUrl}/mcp`;
|
||||
|
||||
// Per-client connection snippets pointing at this deployment's /mcp endpoint.
|
||||
const clients = useMemo(
|
||||
() => [
|
||||
{
|
||||
value: "claude",
|
||||
label: "Claude Desktop",
|
||||
file: "claude_desktop_config.json",
|
||||
config: JSON.stringify(
|
||||
{ mcpServers: { "stirling-pdf": { type: "http", url: mcpUrl } } },
|
||||
null,
|
||||
2,
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "codex",
|
||||
label: "Codex CLI",
|
||||
file: "~/.codex/config.toml",
|
||||
config: `[mcp_servers.stirling-pdf]\nurl = "${mcpUrl}"`,
|
||||
},
|
||||
{
|
||||
value: "vscode",
|
||||
label: "VS Code",
|
||||
file: ".vscode/mcp.json",
|
||||
config: JSON.stringify(
|
||||
{ servers: { "stirling-pdf": { type: "http", url: mcpUrl } } },
|
||||
null,
|
||||
2,
|
||||
),
|
||||
},
|
||||
],
|
||||
[mcpUrl],
|
||||
);
|
||||
|
||||
const tools: { icon: string; key: string; fallback: string }[] = [
|
||||
{
|
||||
icon: "sync-alt-rounded",
|
||||
key: "config.mcp.tools.convert",
|
||||
fallback: "Convert",
|
||||
},
|
||||
{
|
||||
icon: "description-rounded",
|
||||
key: "config.mcp.tools.pages",
|
||||
fallback: "Pages",
|
||||
},
|
||||
{ icon: "lock", key: "config.mcp.tools.security", fallback: "Security" },
|
||||
{
|
||||
icon: "construction-rounded",
|
||||
key: "config.mcp.tools.misc",
|
||||
fallback: "Misc",
|
||||
},
|
||||
{ icon: "smart-toy-rounded", key: "config.mcp.tools.ai", fallback: "AI" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="settings-section-container">
|
||||
<Stack gap="md" className="settings-section-content">
|
||||
<div>
|
||||
<Group gap="sm" align="center">
|
||||
<ThemeIcon variant="light" size="lg" radius="md">
|
||||
<LocalIcon icon="smart-toy-rounded" width={22} height={22} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600} size="lg">
|
||||
{t("config.mcp.title", "MCP Server")}
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" mt={6}>
|
||||
{t(
|
||||
"config.mcp.description",
|
||||
"Model Context Protocol (MCP) lets AI assistants like Claude use your Stirling PDF tools directly. Connect a client once and your assistant can convert, edit, secure and process documents on your behalf.",
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Endpoint */}
|
||||
<Paper withBorder p="sm" radius="md">
|
||||
<Group gap="xs" wrap="nowrap" align="center">
|
||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text fw={500} size="sm">
|
||||
{t("config.mcp.endpoint.label", "Your MCP endpoint")}
|
||||
</Text>
|
||||
<Code style={{ overflowX: "auto" }}>{mcpUrl}</Code>
|
||||
</Stack>
|
||||
<CopyInline
|
||||
value={mcpUrl}
|
||||
label={t("config.mcp.copy.endpointLabel", "Endpoint URL")}
|
||||
/>
|
||||
</Group>
|
||||
</Paper>
|
||||
|
||||
{/* Per-client setup */}
|
||||
<Paper withBorder p="sm" radius="md">
|
||||
<Stack gap="xs">
|
||||
<Text fw={500} size="sm">
|
||||
{t("config.mcp.setup.title", "Connect your AI assistant")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t(
|
||||
"config.mcp.setup.hint",
|
||||
"Pick your client, paste the snippet into the file shown, then restart it. You'll sign in with your Stirling account on first use - no keys to copy.",
|
||||
)}
|
||||
</Text>
|
||||
<Tabs defaultValue="claude" variant="pills" radius="md" mt={4}>
|
||||
<Tabs.List>
|
||||
{clients.map((c) => (
|
||||
<Tabs.Tab key={c.value} value={c.value}>
|
||||
{c.label}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
{clients.map((c) => (
|
||||
<Tabs.Panel key={c.value} value={c.value} pt="sm">
|
||||
<Stack gap="xs">
|
||||
<Group justify="space-between" align="center" wrap="nowrap">
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("config.mcp.setup.addTo", "Add to")}{" "}
|
||||
<Code>{c.file}</Code>
|
||||
</Text>
|
||||
<CopyInline
|
||||
value={c.config}
|
||||
label={t("config.mcp.copy.configLabel", "Config")}
|
||||
/>
|
||||
</Group>
|
||||
<Code block>{c.config}</Code>
|
||||
</Stack>
|
||||
</Tabs.Panel>
|
||||
))}
|
||||
</Tabs>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Available tools */}
|
||||
<div>
|
||||
<Text fw={500} size="sm" mb="xs">
|
||||
{t("config.mcp.tools.title", "What your assistant can do")}
|
||||
</Text>
|
||||
<Group gap="xs">
|
||||
{tools.map((tool) => (
|
||||
<Badge
|
||||
key={tool.key}
|
||||
variant="light"
|
||||
color="gray"
|
||||
radius="sm"
|
||||
size="lg"
|
||||
leftSection={
|
||||
<LocalIcon icon={tool.icon} width={13} height={13} />
|
||||
}
|
||||
>
|
||||
{t(tool.key, tool.fallback)}
|
||||
</Badge>
|
||||
))}
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
{/* Tip / cross-link */}
|
||||
<Alert
|
||||
variant="light"
|
||||
color="blue"
|
||||
icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
|
||||
>
|
||||
<Group justify="space-between" align="center" wrap="nowrap" gap="sm">
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"config.mcp.tip",
|
||||
"Every action your assistant runs is performed as your account and counts towards your usage, just like using Stirling PDF directly.",
|
||||
)}
|
||||
</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
style={{ flexShrink: 0 }}
|
||||
leftSection={
|
||||
<LocalIcon icon="key-rounded" width={14} height={14} />
|
||||
}
|
||||
onClick={() => openAppSettings("api-keys")}
|
||||
>
|
||||
{t("config.mcp.viewApiKeys", "View API keys")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import GeneralSection from "@app/components/shared/config/configSections/General
|
||||
import PasswordSecurity from "@app/components/shared/config/configSections/PasswordSecurity";
|
||||
import ApiKeys from "@app/components/shared/config/configSections/ApiKeys";
|
||||
import Plan from "@app/components/shared/config/configSections/Plan";
|
||||
import McpSection from "@app/components/shared/config/configSections/McpSection";
|
||||
|
||||
type OverviewComponent = React.ComponentType<{ onLogoutClick: () => void }>;
|
||||
|
||||
@@ -108,6 +109,44 @@ function appendBillingSection(
|
||||
];
|
||||
}
|
||||
|
||||
// Add an "MCP Server" tab in the Developer section. Always shown in SaaS;
|
||||
// purely informational, so it appears for anonymous users too.
|
||||
function appendMcpSection(
|
||||
sections: ConfigNavSection[],
|
||||
t: TFunction<"translation", undefined>,
|
||||
): ConfigNavSection[] {
|
||||
const hasMcp = sections.some((section) =>
|
||||
section.items.some((item) => item.key === "mcp"),
|
||||
);
|
||||
|
||||
if (hasMcp) {
|
||||
return sections;
|
||||
}
|
||||
|
||||
const mcpItem = {
|
||||
key: "mcp" as const,
|
||||
label: t("config.mcp.navLabel", "MCP Server"),
|
||||
icon: "smart-toy-rounded",
|
||||
component: <McpSection />,
|
||||
};
|
||||
|
||||
const developerIndex = sections.findIndex((section) =>
|
||||
section.items.some(
|
||||
(item) => item.key === "developer" || item.key === "api-keys",
|
||||
),
|
||||
);
|
||||
|
||||
if (developerIndex === -1) {
|
||||
return [...sections, { title: "Developer", items: [mcpItem] }];
|
||||
}
|
||||
|
||||
return sections.map((section, index) =>
|
||||
index === developerIndex
|
||||
? { ...section, items: [...section.items, mcpItem] }
|
||||
: section,
|
||||
);
|
||||
}
|
||||
|
||||
export function createSaasConfigNavSections(
|
||||
Overview: OverviewComponent,
|
||||
onLogoutClick: () => void,
|
||||
@@ -151,6 +190,7 @@ export function createSaasConfigNavSections(
|
||||
|
||||
sections = ensurePreferencesSection(sections);
|
||||
sections = appendDeveloperSection(sections);
|
||||
sections = appendMcpSection(sections, t);
|
||||
|
||||
if (!isAnonymous) {
|
||||
sections = appendBillingSection(sections, t);
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { VALID_NAV_KEYS as CORE_NAV_KEYS } from "@core/components/shared/config/types";
|
||||
|
||||
// SaaS adds an "overview" account section. All other keys (including ones
|
||||
// SaaS doesn't render today) come from core - subtracting them here would
|
||||
// just break the type union without affecting runtime nav.
|
||||
export const VALID_NAV_KEYS = [...CORE_NAV_KEYS, "overview"] as const;
|
||||
// SaaS adds an "overview" account section and an "mcp" integrations tab. All
|
||||
// other keys (including ones SaaS doesn't render today) come from core -
|
||||
// subtracting them here would just break the type union without affecting
|
||||
// runtime nav.
|
||||
export const VALID_NAV_KEYS = [...CORE_NAV_KEYS, "overview", "mcp"] as const;
|
||||
|
||||
export type NavKey = (typeof VALID_NAV_KEYS)[number];
|
||||
|
||||
@@ -7,17 +7,18 @@ import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
|
||||
import AuthLayout from "@app/routes/authShared/AuthLayout";
|
||||
import "@app/routes/authShared/auth.css";
|
||||
import "@app/routes/authShared/saas-auth.css";
|
||||
import GuestSignInButton from "@app/routes/authShared/GuestSignInButton";
|
||||
import {
|
||||
absoluteWithBasePath,
|
||||
getBaseUrl,
|
||||
withBasePath,
|
||||
} from "@app/constants/app";
|
||||
import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
|
||||
|
||||
// Import login components
|
||||
import LoginHeader from "@app/routes/login/LoginHeader";
|
||||
import ErrorMessage from "@app/routes/login/ErrorMessage";
|
||||
import EmailPasswordForm from "@app/routes/login/EmailPasswordForm";
|
||||
import MagicLinkForm from "@app/routes/login/MagicLinkForm";
|
||||
import OAuthButtons from "@app/routes/login/OAuthButtons";
|
||||
import DividerWithText from "@app/components/shared/DividerWithText";
|
||||
import LoggedInState from "@app/routes/login/LoggedInState";
|
||||
import { absoluteWithBasePath, getBaseUrl } from "@app/constants/app";
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
@@ -25,11 +26,13 @@ export default function Login() {
|
||||
const { t } = useTranslation();
|
||||
const [isSigningIn, setIsSigningIn] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showMagicLink, setShowMagicLink] = useState(false);
|
||||
const [showMagicLinkForm, setShowMagicLinkForm] = useState(false);
|
||||
const [showEmailForm, setShowEmailForm] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [magicLinkEmail, setMagicLinkEmail] = useState("");
|
||||
const [magicLinkSent, setMagicLinkSent] = useState(false);
|
||||
|
||||
// Prefill email from query param (e.g. after password reset)
|
||||
useEffect(() => {
|
||||
try {
|
||||
@@ -37,6 +40,7 @@ export default function Login() {
|
||||
const emailFromQuery = url.searchParams.get("email");
|
||||
if (emailFromQuery) {
|
||||
setEmail(emailFromQuery);
|
||||
setShowEmailForm(true);
|
||||
}
|
||||
} catch (_) {
|
||||
// ignore
|
||||
@@ -174,12 +178,9 @@ export default function Login() {
|
||||
setError(error.message);
|
||||
} else {
|
||||
setError(null);
|
||||
alert(t("login.magicLinkSent", { email: magicLinkEmail }));
|
||||
setMagicLinkEmail("");
|
||||
setShowMagicLink(false);
|
||||
setMagicLinkSent(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Login] Unexpected error:", err);
|
||||
setError(
|
||||
t("login.unexpectedError", {
|
||||
message: err instanceof Error ? err.message : "Unknown error",
|
||||
@@ -190,10 +191,6 @@ export default function Login() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleForgotPassword = () => {
|
||||
navigate("/auth/reset");
|
||||
};
|
||||
|
||||
const handleAnonymousSignIn = async () => {
|
||||
try {
|
||||
setIsSigningIn(true);
|
||||
@@ -227,115 +224,210 @@ export default function Login() {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleEmailForm = () => {
|
||||
setShowEmailForm((v) => !v);
|
||||
setShowMagicLinkForm(false);
|
||||
setMagicLinkSent(false);
|
||||
};
|
||||
|
||||
const toggleMagicLink = () => {
|
||||
setShowMagicLinkForm((v) => !v);
|
||||
setShowEmailForm(false);
|
||||
setMagicLinkSent(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthLayout isEmailFormExpanded={showEmailForm}>
|
||||
<LoginHeader
|
||||
title={t("login.login")}
|
||||
subtitle={t("login.subtitle", "Sign back in to Stirling PDF")}
|
||||
/>
|
||||
<AuthLayout isEmailFormExpanded={showEmailForm || showMagicLinkForm}>
|
||||
{/* Centered logo */}
|
||||
<div className="auth-logo-block">
|
||||
<img
|
||||
src={withBasePath("/modern-logo/LoginLightModeHeader.svg")}
|
||||
alt="Stirling PDF"
|
||||
className="auth-logo-header auth-logo-header--light"
|
||||
/>
|
||||
<img
|
||||
src={withBasePath("/modern-logo/LoginDarkModeHeader.svg")}
|
||||
alt="Stirling PDF"
|
||||
className="auth-logo-header auth-logo-header--dark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ErrorMessage error={error} />
|
||||
|
||||
{/* OAuth first */}
|
||||
<OAuthButtons
|
||||
onProviderClick={signInWithProvider}
|
||||
isSubmitting={isSigningIn}
|
||||
layout="fullwidth"
|
||||
/>
|
||||
{/* OAuth + magic link group — single flex column so gap is uniform */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
marginBottom: "2.5rem",
|
||||
}}
|
||||
>
|
||||
<OAuthButtons
|
||||
onProviderClick={signInWithProvider}
|
||||
isSubmitting={isSigningIn}
|
||||
layout="fullwidth"
|
||||
labelPrefix={`${t("login.signInWith", "Sign in with")} `}
|
||||
/>
|
||||
|
||||
{/* Divider between OAuth and Email */}
|
||||
<DividerWithText
|
||||
text={t("signup.or", "or")}
|
||||
respondsToDarkMode={false}
|
||||
opacity={0.4}
|
||||
/>
|
||||
{/* Magic link button + its expandable form as one unit */}
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isSigningIn}
|
||||
onClick={toggleMagicLink}
|
||||
className={`oauth-button-fullwidth auth-expandable-trigger ${showMagicLinkForm ? "auth-expandable-trigger--active" : ""}`}
|
||||
>
|
||||
<span className="oauth-btn-group">
|
||||
<LinkRoundedIcon
|
||||
style={{
|
||||
width: "1.75rem",
|
||||
height: "1.75rem",
|
||||
marginRight: "0.5rem",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<span className="oauth-btn-label">
|
||||
{t("login.useMagicLink", "Use magic link")}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Sign in with email button (primary color to match signup CTA) */}
|
||||
<div className="auth-section">
|
||||
<div
|
||||
className={`auth-expand-grid ${showMagicLinkForm ? "auth-expand-grid--open" : ""}`}
|
||||
>
|
||||
<div className="auth-expand-inner">
|
||||
<div style={{ paddingTop: "0.25rem" }}>
|
||||
{magicLinkSent ? (
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
color: "#059669",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{t("login.magicLinkSent", { email: magicLinkEmail })}
|
||||
</p>
|
||||
) : (
|
||||
<div className="auth-magic-row">
|
||||
<input
|
||||
type="email"
|
||||
placeholder={t(
|
||||
"login.enterEmailForMagicLink",
|
||||
"Enter your email",
|
||||
)}
|
||||
value={magicLinkEmail}
|
||||
onChange={(e) => setMagicLinkEmail(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" &&
|
||||
!isSigningIn &&
|
||||
signInWithMagicLink()
|
||||
}
|
||||
className="auth-input"
|
||||
/>
|
||||
<button
|
||||
onClick={signInWithMagicLink}
|
||||
disabled={isSigningIn || !magicLinkEmail}
|
||||
className="auth-magic-button"
|
||||
>
|
||||
{isSigningIn
|
||||
? t("login.sending")
|
||||
: t("login.sendMagicLink")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email & Password button */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isSigningIn}
|
||||
onClick={toggleEmailForm}
|
||||
className={`oauth-button-fullwidth auth-expandable-trigger ${showEmailForm ? "auth-expandable-trigger--active" : ""}`}
|
||||
style={{ marginBottom: "0.75rem" }}
|
||||
>
|
||||
<span className="oauth-btn-group">
|
||||
<span className="auth-at-icon">@</span>
|
||||
<span className="oauth-btn-label">{`${t("login.signInWith", "Sign in with")} email`}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Email form — animated expand */}
|
||||
<div
|
||||
className={`auth-expand-grid ${showEmailForm ? "auth-expand-grid--open" : ""}`}
|
||||
>
|
||||
<div className="auth-expand-inner">
|
||||
<div style={{ paddingBottom: "0.5rem" }}>
|
||||
<EmailPasswordForm
|
||||
email={email}
|
||||
password={password}
|
||||
setEmail={setEmail}
|
||||
setPassword={setPassword}
|
||||
onSubmit={signInWithEmail}
|
||||
isSubmitting={isSigningIn}
|
||||
submitButtonText={
|
||||
isSigningIn ? t("login.loggingIn") : t("login.login")
|
||||
}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/auth/reset")}
|
||||
className="auth-link-black"
|
||||
style={{ fontSize: "0.8125rem", marginTop: "0.25rem" }}
|
||||
>
|
||||
{t("login.forgotPassword", "Forgot your password?")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skip */}
|
||||
<div style={{ textAlign: "center", margin: "1rem 0" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowEmailForm((v) => !v)}
|
||||
onClick={handleAnonymousSignIn}
|
||||
disabled={isSigningIn}
|
||||
className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 700,
|
||||
color: "#000000",
|
||||
}}
|
||||
>
|
||||
{t("login.useEmailInstead", "Sign in with email")}
|
||||
{isSigningIn
|
||||
? t("login.signingIn", "Signing in...")
|
||||
: `${t("signup.skip", "Skip")} →`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showEmailForm && (
|
||||
<EmailPasswordForm
|
||||
email={email}
|
||||
password={password}
|
||||
setEmail={setEmail}
|
||||
setPassword={setPassword}
|
||||
onSubmit={signInWithEmail}
|
||||
isSubmitting={isSigningIn}
|
||||
submitButtonText={
|
||||
isSigningIn ? t("login.loggingIn") : t("login.login")
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showEmailForm && (
|
||||
<div className="auth-section-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleForgotPassword}
|
||||
className="auth-link-black"
|
||||
>
|
||||
{t("login.forgotPassword", "Forgot your password?")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Divider then Guest */}
|
||||
<DividerWithText
|
||||
text={t("signup.or", "or")}
|
||||
respondsToDarkMode={false}
|
||||
opacity={0.4}
|
||||
/>
|
||||
|
||||
<GuestSignInButton
|
||||
onClick={handleAnonymousSignIn}
|
||||
disabled={isSigningIn}
|
||||
label={
|
||||
isSigningIn
|
||||
? t("login.signingIn", "Signing in...")
|
||||
: t("login.signInAnonymously", "Sign in as a Guest")
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="auth-bottom-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMagicLink(true)}
|
||||
className="auth-link-black"
|
||||
>
|
||||
{t("login.useMagicLink", "Sign in with magic link")}
|
||||
</button>
|
||||
|
||||
{/* Bottom */}
|
||||
<div
|
||||
style={{
|
||||
textAlign: "center",
|
||||
marginTop: "auto",
|
||||
paddingTop: "1rem",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/signup")}
|
||||
className="auth-link-black"
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.875rem",
|
||||
color: "#9ca3af",
|
||||
}}
|
||||
>
|
||||
{t("signup.signUp", "Sign up")}
|
||||
{t("login.createAccount", "Create an account")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Magic link form renders on demand */}
|
||||
{showMagicLink && (
|
||||
<div style={{ marginTop: "0.5rem" }}>
|
||||
<MagicLinkForm
|
||||
showMagicLink={showMagicLink}
|
||||
magicLinkEmail={magicLinkEmail}
|
||||
setMagicLinkEmail={setMagicLinkEmail}
|
||||
setShowMagicLink={setShowMagicLink}
|
||||
onSubmit={signInWithMagicLink}
|
||||
isSubmitting={isSigningIn}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,18 +4,15 @@ import { signInAnonymously } from "@app/auth/supabase";
|
||||
import { useAuth } from "@app/auth/UseSession";
|
||||
import { useTranslation } from "@app/hooks/useTranslation";
|
||||
import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
|
||||
import { getBaseUrl } from "@app/constants/app";
|
||||
import { getBaseUrl, withBasePath } from "@app/constants/app";
|
||||
import AuthLayout from "@app/routes/authShared/AuthLayout";
|
||||
import "@app/routes/authShared/auth.css";
|
||||
import "@app/routes/authShared/saas-auth.css";
|
||||
import GuestSignInButton from "@app/routes/authShared/GuestSignInButton";
|
||||
import { alert } from "@app/components/toast";
|
||||
|
||||
// Import signup components
|
||||
import LoginHeader from "@app/routes/login/LoginHeader";
|
||||
import ErrorMessage from "@app/routes/login/ErrorMessage";
|
||||
import OAuthButtons from "@app/routes/login/OAuthButtons";
|
||||
import DividerWithText from "@app/components/shared/DividerWithText";
|
||||
import SignupForm from "@app/routes/signup/SignupForm";
|
||||
import {
|
||||
useSignupFormValidation,
|
||||
@@ -184,84 +181,112 @@ export default function Signup() {
|
||||
|
||||
return (
|
||||
<AuthLayout isEmailFormExpanded={showEmailForm}>
|
||||
<LoginHeader title={t("signup.title")} subtitle={t("signup.subtitle")} />
|
||||
{/* Centered logo */}
|
||||
<div className="auth-logo-block">
|
||||
<img
|
||||
src={withBasePath("/modern-logo/LoginLightModeHeader.svg")}
|
||||
alt="Stirling PDF"
|
||||
className="auth-logo-header auth-logo-header--light"
|
||||
/>
|
||||
<img
|
||||
src={withBasePath("/modern-logo/LoginDarkModeHeader.svg")}
|
||||
alt="Stirling PDF"
|
||||
className="auth-logo-header auth-logo-header--dark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ErrorMessage error={error} />
|
||||
|
||||
{/* OAuth first */}
|
||||
<div style={{ marginBottom: "0.5rem" }}>
|
||||
{/* OAuth providers */}
|
||||
<div>
|
||||
<OAuthButtons
|
||||
onProviderClick={handleProviderSignIn}
|
||||
isSubmitting={isSigningUp}
|
||||
layout="fullwidth"
|
||||
labelPrefix={`${t("signup.signUpWith", "Sign up with")} `}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Divider between OAuth and Email */}
|
||||
<div style={{ margin: "0.5rem 0" }}>
|
||||
<DividerWithText
|
||||
text={t("signup.or", "or")}
|
||||
respondsToDarkMode={false}
|
||||
opacity={0.4}
|
||||
/>
|
||||
{/* Email & Password button */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isSigningUp}
|
||||
onClick={() => setShowEmailForm((v) => !v)}
|
||||
className={`oauth-button-fullwidth auth-expandable-trigger ${showEmailForm ? "auth-expandable-trigger--active" : ""}`}
|
||||
style={{ marginTop: "2.5rem", marginBottom: "0.75rem" }}
|
||||
>
|
||||
<span className="oauth-btn-group">
|
||||
<span className="auth-at-icon">@</span>
|
||||
<span className="oauth-btn-label">{`${t("signup.signUpWith", "Sign up with")} email`}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Email form — animated expand */}
|
||||
<div
|
||||
className={`auth-expand-grid ${showEmailForm ? "auth-expand-grid--open" : ""}`}
|
||||
>
|
||||
<div className="auth-expand-inner">
|
||||
<div style={{ paddingBottom: "0.5rem" }}>
|
||||
<SignupForm
|
||||
name={name}
|
||||
email={email}
|
||||
password={password}
|
||||
confirmPassword={confirmPassword}
|
||||
agree={agree}
|
||||
setName={setName}
|
||||
setEmail={setEmail}
|
||||
setPassword={setPassword}
|
||||
setConfirmPassword={setConfirmPassword}
|
||||
setAgree={setAgree}
|
||||
onSubmit={handleSignUp}
|
||||
isSubmitting={isSigningUp}
|
||||
fieldErrors={fieldErrors}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Use Email Instead button (toggles email form) */}
|
||||
<div className="auth-section">
|
||||
{/* Skip */}
|
||||
<div style={{ textAlign: "center", margin: "1rem 0" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAnonymousSignIn}
|
||||
disabled={isSigningUp}
|
||||
onClick={() => setShowEmailForm((v) => !v)}
|
||||
className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 700,
|
||||
color: "#000000",
|
||||
}}
|
||||
>
|
||||
{t("signup.useEmailInstead", "Use Email Instead")}
|
||||
{isSigningUp
|
||||
? t("login.signingIn", "Signing in...")
|
||||
: `${t("signup.skip", "Skip")} →`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showEmailForm && (
|
||||
<SignupForm
|
||||
name={name}
|
||||
email={email}
|
||||
password={password}
|
||||
confirmPassword={confirmPassword}
|
||||
agree={agree}
|
||||
setName={setName}
|
||||
setEmail={setEmail}
|
||||
setPassword={setPassword}
|
||||
setConfirmPassword={setConfirmPassword}
|
||||
setAgree={setAgree}
|
||||
onSubmit={handleSignUp}
|
||||
isSubmitting={isSigningUp}
|
||||
fieldErrors={fieldErrors}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="auth-section-sm">
|
||||
<DividerWithText
|
||||
text={t("signup.or", "or")}
|
||||
respondsToDarkMode={false}
|
||||
opacity={0.4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<GuestSignInButton
|
||||
onClick={handleAnonymousSignIn}
|
||||
disabled={isSigningUp}
|
||||
label={
|
||||
isSigningUp
|
||||
? t("login.signingIn", "Signing in...")
|
||||
: t("login.signInAnonymously", "Sign in as a Guest")
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Bottom row */}
|
||||
<div className="auth-bottom-right">
|
||||
{/* Bottom */}
|
||||
<div
|
||||
style={{
|
||||
textAlign: "center",
|
||||
marginTop: "auto",
|
||||
paddingTop: "1rem",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/login")}
|
||||
className="auth-link-black"
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.875rem",
|
||||
color: "#9ca3af",
|
||||
}}
|
||||
>
|
||||
{t("login.logIn", "Log In")}
|
||||
{t("signup.alreadyHaveAccount", "I already have an account")}
|
||||
</button>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.625rem;
|
||||
border-radius: 100px;
|
||||
background-color: #ffffff;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
@@ -22,6 +22,10 @@
|
||||
cursor: pointer;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
|
||||
transition:
|
||||
background-color 150ms ease,
|
||||
box-shadow 150ms ease,
|
||||
border-color 150ms ease;
|
||||
}
|
||||
|
||||
.oauth-button-fullwidth:disabled {
|
||||
@@ -29,6 +33,11 @@
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.oauth-button-fullwidth:hover:not(:disabled) {
|
||||
background-color: #fafafa;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.auth-dropdown-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
@@ -72,3 +81,90 @@
|
||||
color: #9c2f30;
|
||||
border: 2px solid currentColor;
|
||||
}
|
||||
|
||||
/* ── Logo block ─────────────────────────────────────────────────────── */
|
||||
.auth-logo-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
animation: authFadeUp 0.4s ease both;
|
||||
}
|
||||
|
||||
.auth-logo-header {
|
||||
height: 8rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.auth-logo-header--dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── Page entrance animation ────────────────────────────────────────── */
|
||||
@keyframes authFadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Expandable trigger button state ────────────────────────────────── */
|
||||
.auth-expandable-trigger {
|
||||
transition:
|
||||
background-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
border-color 180ms ease;
|
||||
}
|
||||
|
||||
.auth-expandable-trigger--active {
|
||||
border-color: #af3434 !important;
|
||||
box-shadow: 0 0 0 3px rgba(175, 52, 52, 0.12);
|
||||
}
|
||||
|
||||
/* ── Animated expand/collapse via grid-template-rows ───────────────── */
|
||||
.auth-expand-grid {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition:
|
||||
grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 220ms ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.auth-expand-grid--open {
|
||||
grid-template-rows: 1fr;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.auth-expand-inner {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Icon+label group — keeps icons vertically aligned across buttons ── */
|
||||
.oauth-btn-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 12.5rem;
|
||||
}
|
||||
|
||||
.oauth-btn-label {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Icon helpers inside oauth-button-fullwidth ─────────────────────── */
|
||||
.auth-at-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
margin-right: 0.5rem;
|
||||
display: inline-block;
|
||||
width: 1.75rem;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ interface OAuthButtonsProps {
|
||||
isSubmitting: boolean;
|
||||
layout?: "vertical" | "grid" | "icons" | "fullwidth";
|
||||
enabledProviders?: string[]; // List of enabled provider IDs from backend
|
||||
labelPrefix?: string;
|
||||
}
|
||||
|
||||
export default function OAuthButtons({
|
||||
@@ -24,6 +25,7 @@ export default function OAuthButtons({
|
||||
isSubmitting,
|
||||
layout = "vertical",
|
||||
enabledProviders: _enabledProviders = [],
|
||||
labelPrefix = "",
|
||||
}: OAuthButtonsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -92,12 +94,18 @@ export default function OAuthButtons({
|
||||
className="oauth-button-fullwidth"
|
||||
title={p.label}
|
||||
>
|
||||
<img
|
||||
src={withBasePath(`/Login/${p.file}`)}
|
||||
alt={p.label}
|
||||
className={`oauth-icon-medium ${p.isDisabled ? "opacity-20" : ""}`}
|
||||
/>
|
||||
{p.label}
|
||||
<span className="oauth-btn-group">
|
||||
<img
|
||||
src={withBasePath(`/Login/${p.file}`)}
|
||||
alt={p.label}
|
||||
className={`oauth-icon-medium ${p.isDisabled ? "opacity-20" : ""}`}
|
||||
style={{ marginRight: "0.5rem", flexShrink: 0 }}
|
||||
/>
|
||||
<span className="oauth-btn-label">
|
||||
{labelPrefix}
|
||||
{p.label}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,15 @@ vi.mock("@app/auth/supabase", () => ({
|
||||
},
|
||||
}));
|
||||
|
||||
// Stub apiClient's heavy UI/util deps so importing it stays cheap. None are
|
||||
// exercised here (toast, plan settings and handleHttpError paths aren't hit),
|
||||
// and re-importing the real toast graph per test made these tests time out.
|
||||
vi.mock("@app/components/toast", () => ({ alert: vi.fn() }));
|
||||
vi.mock("@app/utils/appSettings", () => ({ openPlanSettings: vi.fn() }));
|
||||
vi.mock("@app/services/httpErrorHandler", () => ({
|
||||
handleHttpError: vi.fn().mockResolvedValue(undefined),
|
||||
}));
|
||||
|
||||
describe("apiClient", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
--auth-label-text: #2b3230;
|
||||
--auth-button-bg: #af3434;
|
||||
--auth-button-text: #ffffff;
|
||||
--auth-magic-button-bg: #8b5cf6;
|
||||
--auth-magic-button-bg: #af3434;
|
||||
--auth-magic-button-text: #ffffff;
|
||||
|
||||
/* Light-only auth colors (no dark mode equivalents) used for login/signup */
|
||||
@@ -45,7 +45,7 @@
|
||||
--auth-label-text-light-only: #2b3230;
|
||||
--auth-button-bg-light-only: #af3434;
|
||||
--auth-button-text-light-only: #ffffff;
|
||||
--auth-magic-button-bg-light-only: #8b5cf6;
|
||||
--auth-magic-button-bg-light-only: #af3434;
|
||||
--auth-magic-button-text-light-only: #ffffff;
|
||||
--auth-bg-color-light-only: #ffffff;
|
||||
--auth-card-bg-light-only: #ffffff;
|
||||
|
||||
Reference in New Issue
Block a user