https://www.zoosk.com/assets/js/clerk-init.js

1// Loads Clerk from the brand FAPI CDN and mounts the sign-in widget. Copy for the
2// sign-in header comes from content.json (via window.__LANDING), not the Clerk
3// dashboard; brand colors/fonts come from content.json brand.clerk.
4const cfg = window.__LANDING || {};
5const vars = cfg.clerkVars || {};
6
7const appearance = {
8  variables: {
9    colorPrimary: vars.colorPrimary || "#1379de",
10    borderRadius: vars.borderRadius || "8px",
11    fontFamily: vars.fontFamily || "Inter, sans-serif",
12    fontSize: "16px",
13  },
14  layout: {
15    socialButtonsVariant: "blockButton",
16    socialButtonsPlacement: "bottom",
17    showOptionalFields: false,
18    unsafe_disableDevelopmentModeWarnings: true,
19  },
20  elements: {
21    rootBox: "clerk-card-box",
22    cardBox: "clerk-card-box",
23    card: "clerk-card",
24    header: "clerk-header",
25    headerTitle: "clerk-header-title",
26    headerTitleText: "clerk-header-title",
27    headerSubtitle: "clerk-header-subtitle",
28    headerSubtitleText: "clerk-header-subtitle",
29    main: "clerk-main",
30    formFieldLabelRow: "clerk-label-row",
31    formFieldInput__identifier: "clerk-input",
32    formFieldInput__emailAddress: "clerk-input-email",
33    formFieldRow__password: "clerk-password-row",
34    formButtonPrimary: "clerk-btn-primary",
35    buttonArrowIcon: "clerk-btn-arrow",
36    socialButtonsBlockButton: "clerk-social-btn",
37    socialButtonsBlockButtonText: "clerk-social-text",
38    socialButtonsProviderIcon: "clerk-social-icon",
39    identityPreviewText: "clerk-identity-text",
40    otpCodeFieldInput: "clerk-otp-input",
41    formResendCodeLink: "clerk-resend-link",
42    identityPreviewEditButtonIcon: "clerk-edit-icon",
43    footer: "clerk-footer",
44  },
45  captcha: { theme: "light", size: "flexible" },
46};
47
48const localization = {
49  signIn: {
50    start: {
51      title: cfg.signInTitle,
52      titleCombined: cfg.signInTitle,
53      subtitle: cfg.signInSubtitle,
54      subtitleCombined: cfg.signInSubtitle,
55    },
56  },
57  signUp: {
58    start: {
59      title: cfg.signInTitle,
60      titleCombined: cfg.signInTitle,
61      subtitle: cfg.signInSubtitle,
62      subtitleCombined: cfg.signInSubtitle,
63    },
64  },
65};
66
67const clerkLoadOptions = { appearance, localization };
68
69const loadScript = (src, publishableKey) =>
70  new Promise((res, rej) => {
71    const s = document.createElement("script");
72    s.async = true;
73    s.crossOrigin = "anonymous";
74    s.dataset.clerkPublishableKey = publishableKey;
75    s.src = src;
76    s.addEventListener("load", res);
77    s.addEventListener("error", () => rej(new Error("Failed to load Clerk")));
78    document.head.appendChild(s);
79  });
80
81const mount = async () => {
82  const el = document.getElementById("clerk-signin");
83  if (!el) return;
84
85  const showUnavailable = () => {
86    el.innerHTML =
87      '<p class="card__terms">Sign in is temporarily unavailable. Please try again.</p>';
88    el.removeAttribute("aria-busy");
89  };
90
91  if (!cfg.publishableKey || !cfg.clerkJsUrl || !cfg.afterSignInUrl) {
92    console.error("Clerk config incomplete: missing publishableKey, clerkJsUrl, or afterSignInUrl");
93    showUnavailable();
94    return;
95  }
96
97  try {
98    await loadScript(cfg.clerkJsUrl, cfg.publishableKey);
99    await window.Clerk.load(clerkLoadOptions);
100
101    if (window.Clerk.user) {
102      window.location.href = cfg.afterSignInUrl;
103      return;
104    }
105
106    el.innerHTML = "";
107    el.removeAttribute("aria-busy");
108    window.Clerk.mountSignIn(el, {
109      withSignUp: true,
110      fallbackRedirectUrl: cfg.afterSignInUrl,
111      signUpFallbackRedirectUrl: cfg.afterSignInUrl,
112      appearance,
113      localization,
114    });
115  } catch (err) {
116    console.error(err);
117    showUnavailable();
118  }
119};
120
121mount();