Skip to content

Commit

Permalink
Moves to using react posthog provider so we can use env vars (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickzelei
nickzelei authored May 2, 2024
1 parent 5540a61 commit a8f81d2
Show file tree
Hide file tree
Showing 6 changed files with 300 additions and 253 deletions.
5 changes: 0 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,6 @@
}
</style>

<script>
!function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []);
posthog.init("%POSTHOG_KEY%", { api_host: "%POSTHOG_HOST%" })
</script>

<meta name="keycloakify-ignore-start" />
<script>
console.log(
Expand Down
35 changes: 30 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "neosync",
"homepage": "https://neosync.dev",
"version": "1.0.9",
"version": "1.0.10",
"description": "Auth templates for Neosync Cloud",
"repository": {
"type": "git",
Expand All @@ -20,7 +20,8 @@
"keywords": [],
"dependencies": {
"evt": "^2.5.7",
"keycloakify": "^9.5.3",
"keycloakify": "^9.6.7",
"posthog-js": "^1.130.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Expand Down
192 changes: 103 additions & 89 deletions src/account/Template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
import { assert } from "keycloakify/tools/assert";
import { clsx } from "keycloakify/tools/clsx";
import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { useEffect } from "react";
import type { I18n } from "./i18n";
import type { KcContext } from "./kcContext";

Expand All @@ -18,6 +21,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {

const { locale, url, features, realm, message, referrer } = kcContext;

useEffect(() => {
posthog.init(kcContext.properties.POSTHOG_KEY ?? "fake-key", {
api_host: kcContext.properties.POSTHOG_HOST,
});
}, [kcContext?.properties?.POSTHOG_KEY, kcContext?.properties?.POSTHOG_HOST]);

const { isReady } = usePrepareTemplate({
doFetchDefaultThemeResources: doUseDefaultCss,
styles: [
Expand All @@ -35,111 +44,116 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {

return (
<>
<header className="navbar navbar-default navbar-pf navbar-main header">
<nav className="navbar" role="navigation">
<div className="navbar-header">
<div className="container">
<h1 className="navbar-title">Keycloak</h1>
<PostHogProvider>
<header className="navbar navbar-default navbar-pf navbar-main header">
<nav className="navbar" role="navigation">
<div className="navbar-header">
<div className="container">
<h1 className="navbar-title">Keycloak</h1>
</div>
</div>
</div>
<div className="navbar-collapse navbar-collapse-1">
<div className="container">
<ul className="nav navbar-nav navbar-utility">
{realm.internationalizationEnabled &&
(assert(locale !== undefined), true) &&
locale.supported.length > 1 && (
<li>
<div className="kc-dropdown" id="kc-locale-dropdown">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a href="#" id="kc-current-locale-link">
{labelBySupportedLanguageTag[currentLanguageTag]}
</a>
<ul>
{locale.supported.map(({ languageTag }) => (
<li key={languageTag} className="kc-dropdown-item">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a
href="#"
onClick={() => changeLocale(languageTag)}
<div className="navbar-collapse navbar-collapse-1">
<div className="container">
<ul className="nav navbar-nav navbar-utility">
{realm.internationalizationEnabled &&
(assert(locale !== undefined), true) &&
locale.supported.length > 1 && (
<li>
<div className="kc-dropdown" id="kc-locale-dropdown">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a href="#" id="kc-current-locale-link">
{labelBySupportedLanguageTag[currentLanguageTag]}
</a>
<ul>
{locale.supported.map(({ languageTag }) => (
<li
key={languageTag}
className="kc-dropdown-item"
>
{labelBySupportedLanguageTag[languageTag]}
</a>
</li>
))}
</ul>
</div>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a
href="#"
onClick={() => changeLocale(languageTag)}
>
{labelBySupportedLanguageTag[languageTag]}
</a>
</li>
))}
</ul>
</div>
</li>
)}
{referrer?.url && (
<li>
<a href={referrer.url} id="referrer">
{msg("backTo", referrer.name)}
</a>
</li>
)}
{referrer?.url && (
<li>
<a href={referrer.url} id="referrer">
{msg("backTo", referrer.name)}
</a>
<a href={url.getLogoutUrl()}>{msg("doSignOut")}</a>
</li>
)}
<li>
<a href={url.getLogoutUrl()}>{msg("doSignOut")}</a>
</li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
</header>
</nav>
</header>

<div className="container">
<div className="bs-sidebar col-sm-3">
<ul>
<li className={clsx(active === "account" && "active")}>
<a href={url.accountUrl}>{msg("account")}</a>
</li>
{features.passwordUpdateSupported && (
<li className={clsx(active === "password" && "active")}>
<a href={url.passwordUrl}>{msg("password")}</a>
<div className="container">
<div className="bs-sidebar col-sm-3">
<ul>
<li className={clsx(active === "account" && "active")}>
<a href={url.accountUrl}>{msg("account")}</a>
</li>
)}
<li className={clsx(active === "totp" && "active")}>
<a href={url.totpUrl}>{msg("authenticator")}</a>
</li>
{features.identityFederation && (
<li className={clsx(active === "social" && "active")}>
<a href={url.socialUrl}>{msg("federatedIdentity")}</a>
{features.passwordUpdateSupported && (
<li className={clsx(active === "password" && "active")}>
<a href={url.passwordUrl}>{msg("password")}</a>
</li>
)}
<li className={clsx(active === "totp" && "active")}>
<a href={url.totpUrl}>{msg("authenticator")}</a>
</li>
)}
<li className={clsx(active === "sessions" && "active")}>
<a href={url.sessionsUrl}>{msg("sessions")}</a>
</li>
<li className={clsx(active === "applications" && "active")}>
<a href={url.applicationsUrl}>{msg("applications")}</a>
</li>
{features.log && (
<li className={clsx(active === "log" && "active")}>
<a href={url.logUrl}>{msg("log")}</a>
{features.identityFederation && (
<li className={clsx(active === "social" && "active")}>
<a href={url.socialUrl}>{msg("federatedIdentity")}</a>
</li>
)}
<li className={clsx(active === "sessions" && "active")}>
<a href={url.sessionsUrl}>{msg("sessions")}</a>
</li>
)}
{realm.userManagedAccessAllowed && features.authorization && (
<li className={clsx(active === "authorization" && "active")}>
<a href={url.resourceUrl}>{msg("myResources")}</a>
<li className={clsx(active === "applications" && "active")}>
<a href={url.applicationsUrl}>{msg("applications")}</a>
</li>
)}
</ul>
</div>

<div className="col-sm-9 content-area">
{message !== undefined && (
<div className={clsx("alert", `alert-${message.type}`)}>
{message.type === "success" && (
<span className="pficon pficon-ok"></span>
{features.log && (
<li className={clsx(active === "log" && "active")}>
<a href={url.logUrl}>{msg("log")}</a>
</li>
)}
{message.type === "error" && (
<span className="pficon pficon-error-circle-o"></span>
{realm.userManagedAccessAllowed && features.authorization && (
<li className={clsx(active === "authorization" && "active")}>
<a href={url.resourceUrl}>{msg("myResources")}</a>
</li>
)}
<span className="kc-feedback-text">{message.summary}</span>
</div>
)}
</ul>
</div>

<div className="col-sm-9 content-area">
{message !== undefined && (
<div className={clsx("alert", `alert-${message.type}`)}>
{message.type === "success" && (
<span className="pficon pficon-ok"></span>
)}
{message.type === "error" && (
<span className="pficon pficon-error-circle-o"></span>
)}
<span className="kc-feedback-text">{message.summary}</span>
</div>
)}

{children}
{children}
</div>
</div>
</div>
</PostHogProvider>
</>
);
}
Loading

0 comments on commit a8f81d2

Please sign in to comment.