zudoku 0.3.0-dev.60 → 0.3.0-dev.62

package/lib/zudoku.plugin-api-keys.js

@@ -1,5 +1,5 @@
 import { j as e, b as j, O as v } from "./jsx-runtime-BIr0WBt_.js";
-import { u as w, R as b } from "./hook-Q_gAL2NZ.js";
+import { u as w, R as b } from "./hook-BY1NP0kj.js";
 import { u as k, a as h, S as N, b as K, c as E, d as A, e as P, f as p } from "./Select-CEnkyfyn.js";
 import { c, a as m, L as x } from "./Markdown-BjRJKl_E.js";
 import { u as y, x as S, y as I } from "./DevPortalProvider-BBhQ8kgI.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.60",
+  "version": "0.3.0-dev.62",
   "type": "module",
   "files": [
     "dist",

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,27 +1,29 @@
-import type { RouteObject } from "react-router-dom";
 import {
   CommonPlugin,
   NavigationPlugin,
   ProfileMenuPlugin,
 } from "../core/plugins.js";
-import { Login } from "./components/Login.js";
-import { Logout } from "./components/Logout.js";
+import { SignIn } from "./components/SignIn.js";
+import { SignOut } from "./components/SignOut.js";
+import { SignUp } from "./components/SignUp.js";
 
 type PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;
 
 export class AuthenticationPlugin implements PluginInterface {
-  constructor(private additionalRoutes: RouteObject[] = []) {}
   getRoutes() {
     return [
       {
-        path: "/logout",
-        element: <Logout />,
+        path: "/signout",
+        element: <SignOut />,
       },
       {
-        path: "/login",
-        element: <Login />,
+        path: "/signin",
+        element: <SignIn />,
+      },
+      {
+        path: "/signup",
+        element: <SignUp />,
       },
-      ...this.additionalRoutes,
     ];
   }
 
@@ -29,7 +31,7 @@ export class AuthenticationPlugin implements PluginInterface {
     return [
       {
         label: "Logout",
-        path: "/logout",
+        path: "/signout",
       },
     ];
   }

package/src/lib/authentication/authentication.ts

@@ -1,15 +1,13 @@
 import { DevPortalPlugin } from "../core/plugins.js";
 
 export interface AuthenticationProvider {
-  login(): Promise<void>;
+  signUp(): Promise<void>;
+  signIn(): Promise<void>;
+  signOut(): Promise<void>;
   getAccessToken(): Promise<string>;
-  logout(): Promise<void>;
   getAuthenticationPlugin?(): DevPortalPlugin;
 }
 
-/**
- * Function to get an initialized AuthenticationProvider
- */
 export interface AuthenticationProviderInitializer<TConfig> {
   (config: TConfig): AuthenticationProvider;
 }

package/src/lib/authentication/components/{Login.tsx → SignIn.tsx}

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
 import { useDevPortal } from "../../components/context/DevPortalProvider.js";
 
-export const Login = () => {
+export const SignIn = () => {
   const context = useDevPortal();
   useEffect(() => {
-    void context.authentication?.login();
+    void context.authentication?.signIn();
   }, [context.authentication]);
 
   return null;

package/src/lib/authentication/components/SignOut.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+
+export const SignOut = () => {
+  const context = useDevPortal();
+  useEffect(() => {
+    void context.authentication?.signOut();
+  }, [context.authentication]);
+
+  return null;
+};

package/src/lib/authentication/components/{Logout.tsx → SignUp.tsx}

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
 import { useDevPortal } from "../../components/context/DevPortalProvider.js";
 
-export const Logout = () => {
+export const SignUp = () => {
   const context = useDevPortal();
   useEffect(() => {
-    void context.authentication?.logout();
+    void context.authentication?.signUp();
   }, [context.authentication]);
 
   return null;

package/src/lib/authentication/hook.ts

@@ -17,7 +17,7 @@ export const useAuth = () => {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.login();
+      await authentication.signIn();
     },
 
     logout: async () => {
@@ -25,7 +25,7 @@ export const useAuth = () => {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.logout();
+      await authentication.signOut();
 
       // Redirect to home
       window.location.href = "/";

package/src/lib/authentication/providers/auth0.tsx

@@ -4,7 +4,7 @@ import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
 class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
-  override async logout(): Promise<void> {
+  override async signOut(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
@@ -12,7 +12,9 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     });
     const as = await this.getAuthServer();
 
-    const redirectUrl = new URL(window.location.href);
+    const redirectUrl = new URL(
+      window.location.origin + this.logoutRedirectUrlPath,
+    );
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0

package/src/lib/authentication/providers/clerk.tsx

@@ -39,9 +39,13 @@ class ClerkAuthPlugin extends AuthenticationPlugin {
 
 const clerkAuth: AuthenticationProviderInitializer<
   ClerkAuthenticationConfig
-> = ({ clerkPubKey }) => {
+> = ({
+  clerkPubKey,
+  redirectToAfterSignOut = "/",
+  redirectToAfterSignUp = "/",
+  redirectToAfterSignIn = "/",
+}) => {
   let clerkApi: Clerk;
-
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
     const { Clerk } = await import("@clerk/clerk-js");
@@ -65,13 +69,24 @@ const clerkAuth: AuthenticationProviderInitializer<
 
   return {
     getAccessToken,
-    logout: async () => {
-      await clerkApi.signOut();
+    signOut: async () => {
+      await ensureLoaded;
+      await clerkApi.signOut({
+        redirectUrl: window.location.origin + redirectToAfterSignOut,
+      });
     },
-    login: async () => {
+    signIn: async () => {
+      await ensureLoaded;
       await clerkApi.redirectToSignIn({
-        signInForceRedirectUrl: "http://localhost:9000/",
-        signUpForceRedirectUrl: "http://localhost:9000/",
+        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      });
+    },
+    signUp: async () => {
+      await ensureLoaded;
+      await clerkApi.redirectToSignUp({
+        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });
     },
     getAuthenticationPlugin() {

package/src/lib/authentication/providers/openid.tsx

@@ -48,12 +48,18 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected callbackUrlPath = "/oauth/callback";
   protected logoutRedirectUrlPath = "/";
+  private redirectToAfterSignUp?: string;
+  private redirectToAfterSignIn?: string;
+  private redirectToAfterSignOut?: string;
 
   constructor({
     issuer,
     authorizationEndpoint,
     tokenEndpoint,
     clientId,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -62,6 +68,9 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     this.issuer = issuer;
     this.authorizationEndpoint = authorizationEndpoint;
     this.tokenEndpoint = tokenEndpoint;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
   }
 
   protected async getAuthServer() {
@@ -109,7 +118,15 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
   }
 
-  async login(): Promise<void> {
+  async signUp() {
+    return this.authorize(true);
+  }
+
+  async signIn() {
+    return this.authorize();
+  }
+
+  private async authorize(signUp = false): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
 
@@ -129,10 +146,18 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
     // redirect user to as.authorization_endpoint
     const authorizationUrl = new URL(
-      authorizationServer.authorization_endpoint,
+      signUp
+        ? authorizationServer.registration_endpoint ??
+          authorizationServer.authorization_endpoint
+        : authorizationServer.authorization_endpoint,
     );
 
-    const redirectUrl = new URL(window.location.href);
+    const redirectUrl = new URL(
+      (signUp
+        ? window.location.origin + this.redirectToAfterSignUp
+        : window.location.origin + this.redirectToAfterSignIn) ??
+        window.location.href,
+    );
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
@@ -161,6 +186,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
   }
+
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
     if (!this.tokens) {
@@ -191,7 +217,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return this.tokens.accessToken;
   }
 
-  async logout(): Promise<void> {
+  async signOut(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
@@ -200,7 +226,9 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
     const as = await this.getAuthServer();
 
-    const redirectUrl = new URL(window.location.href);
+    const redirectUrl = new URL(
+      window.location.origin + this.redirectToAfterSignOut,
+    );
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     let logoutUrl: URL;

package/src/lib/components/Header.tsx

@@ -54,28 +54,32 @@ export const Header = memo(function HeaderInner() {
     <header className="fixed top-0 w-full z-10 bg-background/80 backdrop-blur">
       <div className="max-w-screen-2xl mx-auto">
         <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
-          <div className="flex items-center gap-3.5">
-            {page?.logo && (
-              <>
-                <img
-                  src={page.logo.src.light}
-                  alt={page.logo.alt ?? page.pageTitle}
-                  style={{ width: page.logo.width }}
-                  className={cn("h-10", isDark && "hidden")}
-                  loading="lazy"
-                />
-                <img
-                  src={page.logo.src.dark}
-                  alt={page.logo.alt ?? page.pageTitle}
-                  style={{ width: page.logo.width }}
-                  className={cn("h-10", !isDark && "hidden")}
-                  loading="lazy"
-                />
-              </>
-            )}
-            <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-              {page?.pageTitle}
-            </span>
+          <div className="flex">
+            <Link to="/">
+              <div className="flex items-center gap-3.5">
+                {page?.logo && (
+                  <>
+                    <img
+                      src={page.logo.src.light}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", isDark && "hidden")}
+                      loading="lazy"
+                    />
+                    <img
+                      src={page.logo.src.dark}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", !isDark && "hidden")}
+                      loading="lazy"
+                    />
+                  </>
+                )}
+                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                  {page?.pageTitle}
+                </span>
+              </div>
+            </Link>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full max-w-prose">
@@ -93,7 +97,7 @@ export const Header = memo(function HeaderInner() {
             <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
               {isAuthEnabled && !isAuthenticated ? (
                 <Button variant="ghost" asChild>
-                  <Link to="/login">Login</Link>
+                  <Link to="/signin">Login</Link>
                 </Button>
               ) : (
                 <DropdownMenu>

package/src/lib/components/navigation/SideNavigationItem.tsx

@@ -14,7 +14,7 @@ import { AnchorLink } from "../AnchorLink.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
-export const navigationListItem = cva(
+const navigationListItem = cva(
   "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
@@ -51,7 +51,7 @@ export const SideNavigationItem = ({
   const [isOpen, setIsOpen] = useNavigationCollapsibleState({
     item,
     path: currentPath,
-    defaultOpen: () => checkHasActiveItem(item, location.pathname, currentPath),
+    defaultOpen: () => checkHasActiveItem(item, location.pathname, basePath),
   });
 
   if (isLinkItem(item)) {

package/src/lib/core/DevPortalContext.ts

@@ -71,6 +71,7 @@ type Metadata = Partial<{
   creator: string;
   publisher: string;
 }>;
+
 type Page = Partial<{
   pageTitle?: string;
   logo?: {
@@ -82,6 +83,7 @@ type Page = Partial<{
     alt?: string;
   };
 }>;
+
 export type ZudokuContextOptions = {
   metadata?: Metadata;
   page?: Page;

package/dist/lib/authentication/components/Login.d.ts

@@ -1 +0,0 @@
-export declare const Login: () => null;

package/dist/lib/authentication/components/Login.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Login.js","sourceRoot":"","sources":["../../../../src/lib/authentication/components/Login.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,MAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,OAAO,CAAC,cAAc,EAAE,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;IAE7B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/dist/lib/authentication/components/Logout.d.ts

@@ -1 +0,0 @@
-export declare const Logout: () => null;

package/dist/lib/authentication/routes.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    path: string;
-    element: import("react/jsx-runtime").JSX.Element;
-}[];
-export default _default;

package/dist/lib/authentication/routes.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default [
-    {
-        path: "/logout",
-        element: _jsx("div", { children: "Logout" }),
-    },
-    {
-        path: "/login",
-        element: _jsx("div", { children: "Login" }),
-    },
-];
-//# sourceMappingURL=routes.js.map

package/dist/lib/authentication/routes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"routes.js","sourceRoot":"","sources":["../../../src/lib/authentication/routes.tsx"],"names":[],"mappings":";AAAA,eAAe;IACb;QACE,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,mCAAiB;KAC3B;IACD;QACE,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,kCAAgB;KAC1B;CACF,CAAC"}

package/lib/AuthenticationPlugin-CG6Bw32B.js

@@ -1,46 +0,0 @@
-import { j as n } from "./jsx-runtime-BIr0WBt_.js";
-import { useEffect as e } from "react";
-import { u as i } from "./DevPortalProvider-BBhQ8kgI.js";
-const u = () => {
-  const o = i();
-  return e(() => {
-    var t;
-    (t = o.authentication) == null || t.login();
-  }, [o.authentication]), null;
-}, a = () => {
-  const o = i();
-  return e(() => {
-    var t;
-    (t = o.authentication) == null || t.logout();
-  }, [o.authentication]), null;
-};
-class c {
-  constructor(t = []) {
-    this.additionalRoutes = t;
-  }
-  getRoutes() {
-    return [
-      {
-        path: "/logout",
-        element: /* @__PURE__ */ n.jsx(a, {})
-      },
-      {
-        path: "/login",
-        element: /* @__PURE__ */ n.jsx(u, {})
-      },
-      ...this.additionalRoutes
-    ];
-  }
-  getProfileMenuItems() {
-    return [
-      {
-        label: "Logout",
-        path: "/logout"
-      }
-    ];
-  }
-}
-export {
-  c as A
-};
-//# sourceMappingURL=AuthenticationPlugin-CG6Bw32B.js.map

package/lib/AuthenticationPlugin-CG6Bw32B.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthenticationPlugin-CG6Bw32B.js","sources":["../src/lib/authentication/components/Login.tsx","../src/lib/authentication/components/Logout.tsx","../src/lib/authentication/AuthenticationPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDevPortal } from \"../../components/context/DevPortalProvider.js\";\n\nexport const Login = () => {\n  const context = useDevPortal();\n  useEffect(() => {\n    void context.authentication?.login();\n  }, [context.authentication]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useDevPortal } from \"../../components/context/DevPortalProvider.js\";\n\nexport const Logout = () => {\n  const context = useDevPortal();\n  useEffect(() => {\n    void context.authentication?.logout();\n  }, [context.authentication]);\n\n  return null;\n};\n","import type { RouteObject } from \"react-router-dom\";\nimport {\n  CommonPlugin,\n  NavigationPlugin,\n  ProfileMenuPlugin,\n} from \"../core/plugins.js\";\nimport { Login } from \"./components/Login.js\";\nimport { Logout } from \"./components/Logout.js\";\n\ntype PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;\n\nexport class AuthenticationPlugin implements PluginInterface {\n  constructor(private additionalRoutes: RouteObject[] = []) {}\n  getRoutes() {\n    return [\n      {\n        path: \"/logout\",\n        element: <Logout />,\n      },\n      {\n        path: \"/login\",\n        element: <Login />,\n      },\n      ...this.additionalRoutes,\n    ];\n  }\n\n  getProfileMenuItems() {\n    return [\n      {\n        label: \"Logout\",\n        path: \"/logout\",\n      },\n    ];\n  }\n}\n"],"names":["Login","context","useDevPortal","useEffect","_a","Logout","AuthenticationPlugin","additionalRoutes"],"mappings":";;;AAGO,MAAMA,IAAQ,MAAM;AACzB,QAAMC,IAAUC;AAChB,SAAAC,EAAU,MAAM;;AACT,KAAAC,IAAAH,EAAQ,mBAAR,QAAAG,EAAwB;AAAA,EAAM,GAClC,CAACH,EAAQ,cAAc,CAAC,GAEpB;AACT,GCPaI,IAAS,MAAM;AAC1B,QAAMJ,IAAUC;AAChB,SAAAC,EAAU,MAAM;;AACT,KAAAC,IAAAH,EAAQ,mBAAR,QAAAG,EAAwB;AAAA,EAAO,GACnC,CAACH,EAAQ,cAAc,CAAC,GAEpB;AACT;ACCO,MAAMK,EAAgD;AAAA,EAC3D,YAAoBC,IAAkC,IAAI;AAAtC,SAAA,mBAAAA;AAAA,EAAuC;AAAA,EAC3D,YAAY;AACH,WAAA;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,+BAAUF,GAAO,EAAA;AAAA,MACnB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUL,GAAM,EAAA;AAAA,MAClB;AAAA,MACA,GAAG,KAAK;AAAA,IAAA;AAAA,EAEZ;AAAA,EAEA,sBAAsB;AACb,WAAA;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACF;"}

package/src/lib/authentication/routes.tsx

@@ -1,10 +0,0 @@
-export default [
-  {
-    path: "/logout",
-    element: <div>Logout</div>,
-  },
-  {
-    path: "/login",
-    element: <div>Login</div>,
-  },
-];