@slashid/jump-page 0.0.7-beta.0 → 0.0.7-beta.2

package/.turbo/turbo-build.log

@@ -1,32 +0,0 @@
-
-> @slashid/jump-page@0.0.6 build /Users/ivankovic/projects/slashid/javascript/apps/jump-page
-> astro build
-
-05:00:06 PM [content] No content directory found. Skipping type generation.
-05:00:06 PM [build] output target: static
-05:00:06 PM [build] Collecting build info...
-05:00:06 PM [build] Completed in 111ms.
-05:00:06 PM [build] Building static entrypoints...
-05:00:07 PM [build] Completed in 1.68s.
-
- building client 
-vite v4.5.0 building for production...
-transforming...
-✓ 384 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/_astro/index.cc62d81f.css   31.75 kB │ gzip:  5.49 kB
-dist/_astro/index.03be2d59.js     6.83 kB │ gzip:  2.72 kB
-dist/_astro/client.a5ffbec0.js  135.34 kB │ gzip: 43.73 kB
-dist/_astro/app.51fc6a0f.js     203.42 kB │ gzip: 56.61 kB
-✓ built in 1.94s
-Completed in 1.95s.
-
-
- generating static routes 
-▶ src/pages/index.astro
-  └─ /index.html (+122ms)
-Completed in 132ms.
-
-05:00:09 PM [build] 1 page(s) built in 3.88s
-05:00:09 PM [build] Complete!

package/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

package/.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

package/CHANGELOG.md

@@ -1,37 +0,0 @@
-# @slashid/jump-page
-
-## 0.0.6
-
-### Patch Changes
-
-- Updated dependencies [64212fd]
-  - @slashid/react-primitives@0.1.4
-
-## 0.0.5
-
-### Patch Changes
-
-- Updated dependencies [21c2948]
-  - @slashid/react-primitives@0.1.3
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [0e2fb6b]
-  - @slashid/react-primitives@0.1.2
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [0e4746c]
-  - @slashid/react-primitives@0.1.1
-
-## 0.0.2
-
-### Patch Changes
-
-- c1cf068: Update dependencies
-- Updated dependencies [c1cf068]
-  - @slashid/react-primitives@0.1.0

package/src/components/README.md

@@ -1,3 +0,0 @@
-# Components
-
-This folder should only contain components meant to render server side and then hydrate on the client side.

package/src/components/app/app.component.tsx

@@ -1,83 +0,0 @@
-import { SlashID } from "@slashid/slashid";
-import * as Sentry from "@sentry/react";
-import {
-  Logo,
-  TextProvider,
-  ThemeRoot,
-  isBrowser,
-} from "@slashid/react-primitives";
-
-import {
-  AppContext,
-  initialAppContextState,
-  type AppState,
-  type AppContextState,
-  type AppReadyState,
-} from "./app.context";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { I18N, detectLanguage } from "../../domain/i18n";
-import { Flow, Error } from "../flow";
-import { Card } from "../card";
-
-import * as styles from "./app.css";
-import { config } from "../../config";
-
-export function App() {
-  const isClientSide = isBrowser();
-  const [appState, setAppState] = useState<AppState>("initial");
-  const sidRef = useRef<SlashID | undefined>(undefined);
-
-  useEffect(() => {
-    if (appState === "initial") {
-      Sentry.init({
-        dsn: "https://6435e8a20ba8b61404fb4621d2aedd4a@o4505317722619904.ingest.sentry.io/4506275681075200",
-      });
-
-      sidRef.current = new SlashID({
-        analyticsEnabled: false,
-        sdkURL: config.sdkURL,
-        baseURL: config.baseURL,
-      });
-
-      setAppState("ready");
-    }
-  }, [appState]);
-
-  const state: AppContextState = useMemo(() => {
-    // checking for hydration makes the first client side render the same as the one on the server side
-    // language check and URL params can only be done on the client side so we need to wait for the first render
-    if (!isClientSide || appState == "initial") {
-      return initialAppContextState;
-    }
-
-    const appReadyState: AppReadyState = {
-      // TODO read customisation props from the URL
-      logo: <Logo />,
-      language: detectLanguage(),
-      state: appState,
-      sdk: sidRef.current as SlashID,
-    };
-
-    return appReadyState;
-  }, [appState, isClientSide]);
-
-  return (
-    <ThemeRoot theme="light">
-      <Sentry.ErrorBoundary
-        fallback={
-          <Card>
-            <Error type="error" />
-          </Card>
-        }
-      >
-        <AppContext.Provider value={state}>
-          <TextProvider text={I18N[state.language]}>
-            <main className={styles.app}>
-              <Flow />
-            </main>
-          </TextProvider>
-        </AppContext.Provider>
-      </Sentry.ErrorBoundary>
-    </ThemeRoot>
-  );
-}

package/src/components/app/app.context.tsx

@@ -1,41 +0,0 @@
-import { createContext, useContext } from "react";
-import { Logo } from "@slashid/react-primitives";
-import type { SlashID } from "@slashid/slashid";
-
-import { type Language } from "../../domain/i18n";
-
-export type AppState = "initial" | "ready";
-
-type AppConfig = {
-  logo: string | React.ReactNode;
-  language: Language;
-};
-
-export type AppInitialState = AppConfig & {
-  state: "initial";
-  sdk: undefined;
-};
-
-export type AppReadyState = AppConfig & {
-  state: "ready";
-  sdk: SlashID;
-};
-
-export type AppContextState = AppInitialState | AppReadyState;
-
-export const initialAppContextState: AppContextState = {
-  logo: <Logo />,
-  language: "en",
-  state: "initial",
-  sdk: undefined,
-};
-
-export const AppContext = createContext<AppContextState>(
-  initialAppContextState
-);
-
-export const useAppContext = () => {
-  const appContext = useContext(AppContext);
-
-  return appContext;
-};

package/src/components/app/app.css.ts

@@ -1,15 +0,0 @@
-import { publicVariables } from "@slashid/react-primitives";
-import { style } from "@vanilla-extract/css";
-
-export const app = style({
-  fontFamily: publicVariables.font.fontFamily,
-  backgroundColor: publicVariables.color.background,
-  boxSizing: "border-box",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "100%",
-  height: "100vh",
-  padding: 0,
-  margin: 0,
-});

package/src/components/app/index.ts

@@ -1 +0,0 @@
-export * from "./app.component";

package/src/components/card/card.component.tsx

@@ -1,42 +0,0 @@
-import { useAppContext } from "../app/app.context";
-import { Text } from "../text";
-import * as styles from "./card.css";
-
-export type Props = {
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  header?: React.ReactNode;
-};
-
-function DefaultHeader() {
-  const { logo } = useAppContext();
-
-  return <div className={styles.logo}>{logo}</div>;
-}
-
-function DefaultFooter() {
-  return (
-    <Text
-      t="footer.text"
-      variant={{
-        size: "xs",
-        weight: "semibold",
-        color: "placeholder",
-      }}
-    />
-  );
-}
-
-export function Card({
-  children,
-  header = <DefaultHeader />,
-  footer = <DefaultFooter />,
-}: Props) {
-  return (
-    <article className={styles.card}>
-      {header && <header className={styles.header}>{header}</header>}
-      <div>{children}</div>
-      {footer && <footer className={styles.footer}>{footer}</footer>}
-    </article>
-  );
-}

package/src/components/card/card.css.ts

@@ -1,40 +0,0 @@
-import { publicVariables, theme } from "@slashid/react-primitives";
-import { globalStyle, style } from "@vanilla-extract/css";
-
-export const card = style({
-  display: "grid",
-  gridTemplateRows: "auto 1fr auto",
-  backgroundColor: publicVariables.color.panel,
-  width: "100%",
-  minHeight: "100vh",
-  padding: "32px 32px 16px 32px",
-  boxSizing: "border-box",
-
-  "@media": {
-    "screen and (min-width: 768px)": {
-      borderRadius: `calc(2 * ${publicVariables.border.radius})`,
-      width: "465px",
-      minHeight: "330px",
-    },
-  },
-});
-
-export const header = style({
-  marginBottom: theme.space[1],
-});
-
-export const footer = style({
-  width: "100%",
-  textAlign: "center",
-  marginTop: theme.space[8],
-});
-
-export const logo = style({
-  width: 32,
-  height: 32,
-});
-
-globalStyle(`${logo} > svg`, {
-  height: 32,
-  width: 32,
-});

package/src/components/card/index.ts

@@ -1 +0,0 @@
-export * from "./card.component";

package/src/components/flow/flow.component.tsx

@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react";
-import * as Sentry from "@sentry/react";
-import { Card } from "../card";
-import { Initial } from "./flow.initial";
-import { Error } from "./flow.error";
-import type { Challenges, State, FlowType } from "./flow.types";
-import { useAppContext } from "../app/app.context";
-import { Progress } from "./flow.progress";
-import type { ChallengeListInner } from "@slashid/slashid";
-import { Success } from "./flow.success";
-import { ensureError } from "./flow.domain";
-
-function isPasswordRecoveryFlow(challenges: Challenges): boolean {
-  return challenges.some((challenge) => challenge.type === "password_reset");
-}
-
-function getFlowTypeFromChallenges(challenges: Challenges): FlowType {
-  if (isPasswordRecoveryFlow(challenges)) {
-    return "password-recovery";
-  }
-
-  return "catch-all";
-}
-
-export function Flow() {
-  const [flowState, setFlowState] = useState<State>({ state: "initial" });
-  const { sdk, state: appState } = useAppContext();
-
-  useEffect(() => {
-    if (flowState.state !== "initial") return;
-
-    async function processChallenges() {
-      if (!sdk) return;
-      setFlowState({ state: "parsing-url" });
-
-      let challenges: ChallengeListInner[] | null = [];
-
-      try {
-        challenges = await sdk.getChallengesFromURL();
-      } catch (e: unknown) {
-        Sentry.captureException(ensureError(e));
-      }
-
-      if (!challenges) {
-        setFlowState({ state: "no-challenges", challenges: null });
-        return;
-      }
-
-      const flowType = getFlowTypeFromChallenges(challenges);
-
-      setFlowState({ state: "progress", challenges, flowType });
-    }
-
-    processChallenges();
-  }, [appState, flowState.state, sdk]);
-
-  const handleSuccess = () => {
-    if (flowState.state !== "progress") return;
-
-    setFlowState({
-      state: "success",
-      challenges: flowState.challenges,
-      flowType: flowState.flowType,
-    });
-  };
-
-  const handleError = ({ error }: { error: Error }) => {
-    if (flowState.state !== "progress") return;
-
-    setFlowState({
-      state: "error",
-      challenges: flowState.challenges,
-      flowType: flowState.flowType,
-      error,
-    });
-  };
-
-  return (
-    <Card>
-      {(appState !== "ready" || flowState.state === "parsing-url") && (
-        <Initial />
-      )}
-      {appState === "ready" && (
-        <>
-          {flowState.state === "progress" && (
-            <Progress
-              onSuccess={handleSuccess}
-              onError={handleError}
-              flowType={flowState.flowType}
-            />
-          )}
-          {flowState.state === "no-challenges" && <Error type="warning" />}
-          {flowState.state === "success" && <Success />}
-          {flowState.state === "error" && <Error type="error" />}
-        </>
-      )}
-    </Card>
-  );
-}

package/src/components/flow/flow.css.ts

@@ -1,20 +0,0 @@
-import { publicVariables, theme } from "@slashid/react-primitives";
-import { style } from "@vanilla-extract/css";
-
-export const formInputs = style({
-  margin: "24px 0",
-});
-
-export const passwordRecoveryPrompt = style({
-  display: "flex",
-  alignItems: "baseline",
-  marginTop: "8px",
-});
-
-export const errorMessage = style({
-  display: "block",
-  marginTop: theme.space[2],
-  color: publicVariables.color.error,
-  fontWeight: "600",
-  lineHeight: "122%",
-});

package/src/components/flow/flow.domain.ts

@@ -1,18 +0,0 @@
-/**
- * Ensure that a valid Error instance is returned, since in JS you can throw anything.
- */
-export function ensureError(value: unknown): Error {
-  if (value instanceof Error) return value;
-
-  let stringified = "[Unable to stringify the thrown value]";
-  try {
-    stringified = JSON.stringify(value);
-  } catch {
-    // ignore
-  }
-
-  const error = new Error(
-    `This value was thrown as is, not through an Error: ${stringified}`
-  );
-  return error;
-}

package/src/components/flow/flow.error.tsx

@@ -1,32 +0,0 @@
-import { Circle, Exclamation, Stack } from "@slashid/react-primitives";
-import { Text } from "../text";
-
-export type ErrorType = "warning" | "error";
-
-function ErrorIcon({ type }: { type: ErrorType }) {
-  return (
-    <Circle variant={type === "warning" ? "blue" : "red"} shouldAnimate={false}>
-      <Exclamation />
-    </Circle>
-  );
-}
-
-export function Error({ type }: { type: ErrorType }) {
-  return (
-    <>
-      <Stack space="0.25">
-        <Text
-          as="h1"
-          variant={{ size: "2xl-title", weight: "bold" }}
-          t="error.title"
-        />
-        <Text
-          as="h2"
-          t="error.detail"
-          variant={{ color: "contrast", weight: "semibold" }}
-        />
-      </Stack>
-      <ErrorIcon type={type} />
-    </>
-  );
-}

package/src/components/flow/flow.initial.tsx

@@ -1,14 +0,0 @@
-import { Skeleton, Stack } from "@slashid/react-primitives";
-import { Loader } from "./flow.loader";
-
-export function Initial() {
-  return (
-    <>
-      <Stack space="2">
-        <Skeleton width={"75%"} height={24} />
-        <Skeleton width={"50%"} height={16} />
-      </Stack>
-      <Loader />
-    </>
-  );
-}

package/src/components/flow/flow.loader.tsx

@@ -1,9 +0,0 @@
-import { Circle, Spinner } from "@slashid/react-primitives";
-
-export function Loader() {
-  return (
-    <Circle>
-      <Spinner />
-    </Circle>
-  );
-}

package/src/components/flow/flow.progress.tsx

@@ -1,119 +0,0 @@
-import { useEffect } from "react";
-import * as Sentry from "@sentry/react";
-import { Stack } from "@slashid/react-primitives";
-
-import { Loader } from "./flow.loader";
-import type { FlowType } from "./flow.types";
-import { Text } from "../text";
-import { useAppContext } from "../app/app.context";
-import { Recover } from "./flow.recover";
-
-type SlashIDErrorMessage = { message: string };
-class SlashIDError extends Error {
-  errors: SlashIDErrorMessage[];
-
-  constructor(errors: SlashIDErrorMessage[]) {
-    super(errors.length > 0 ? errors[0].message : "Unknown SlashID error");
-    this.errors = errors;
-  }
-}
-
-function isSlashIDError(e: unknown): e is SlashIDError {
-  if (
-    typeof e === "object" &&
-    e !== null &&
-    "errors" in e &&
-    Array.isArray(e.errors)
-  ) {
-    return true;
-  }
-
-  return false;
-}
-
-function ensureError(value: unknown): Error {
-  if (value instanceof Error) return value;
-
-  // special case - sometimes the core SDK throws a non-error object
-  if (isSlashIDError(value)) {
-    const error = new SlashIDError(value.errors);
-    return error;
-  }
-
-  let stringified = "[Unable to stringify the thrown value]";
-  try {
-    stringified = JSON.stringify(value);
-  } catch {
-    // ignore
-  }
-
-  const error = new Error(
-    `This value was thrown as is, not through an Error: ${stringified}`
-  );
-  return error;
-}
-
-export type Props = {
-  flowType: FlowType;
-  onSuccess: () => void;
-  onError: ({ error }: { error: Error }) => void;
-};
-
-export function Progress({ onSuccess, onError, flowType }: Props) {
-  const { sdk } = useAppContext();
-
-  useEffect(() => {
-    if (!sdk) return;
-
-    async function authenticate() {
-      try {
-        await sdk?.getUserFromURL();
-        onSuccess();
-      } catch (e: unknown) {
-        const safeError = ensureError(e);
-        Sentry.captureException(safeError);
-        onError({ error: safeError });
-      }
-    }
-
-    function handlePasswordResetEvent() {
-      console.log("Password reset - input ready");
-    }
-
-    if (flowType === "password-recovery") {
-      console.log("Subscribed");
-      sdk.subscribe("passwordResetReady", handlePasswordResetEvent);
-    }
-
-    authenticate();
-
-    return () => {
-      if (flowType === "password-recovery") {
-        console.log("Cleaned up");
-        sdk.unsubscribe("passwordResetReady", handlePasswordResetEvent);
-      }
-    };
-  }, [flowType, onError, onSuccess, sdk]);
-
-  if (flowType === "password-recovery") {
-    return <Recover />;
-  }
-
-  return (
-    <>
-      <Stack space="0.25">
-        <Text
-          as="h1"
-          variant={{ size: "2xl-title", weight: "bold" }}
-          t="initial.title"
-        />
-        <Text
-          variant={{ color: "contrast", weight: "semibold" }}
-          as="h2"
-          t="initial.details"
-        />
-      </Stack>
-      <Loader />
-    </>
-  );
-}