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

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 />
-    </>
-  );
-}

package/src/components/flow/flow.recover.tsx

@@ -1,121 +0,0 @@
-import type { InvalidPasswordSubmittedEvent } from "@slashid/slashid";
-import { useEffect, useState } from "react";
-import {
-  Input,
-  Stack,
-  Text,
-  Button,
-  sprinkles,
-} from "@slashid/react-primitives";
-
-import * as styles from "./flow.css";
-import { useI18n } from "../text/use-i18n";
-import { useAppContext } from "../app/app.context";
-import type { TranslationKeys } from "../../domain/i18n";
-
-function getValidationI18nKey(
-  errorEvent: InvalidPasswordSubmittedEvent
-): TranslationKeys {
-  const textKey = `authenticating.setPassword.validation.${errorEvent.failedRules[0].name}`;
-
-  // prefer the first error
-  return textKey as TranslationKeys;
-}
-
-function ErrorMessage({ message }: { message: string }) {
-  return <span className={styles.errorMessage}>{message}</span>;
-}
-
-export function Recover() {
-  const i18n = useI18n();
-  const { sdk } = useAppContext();
-  const [password, setPassword] = useState("");
-  const [passwordConfirm, setPasswordConfirm] = useState("");
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const onInvalidPassword = (
-      invalidPasswordEvent: InvalidPasswordSubmittedEvent
-    ) => {
-      console.log("onInvalidPassword", invalidPasswordEvent);
-      setError(i18n(getValidationI18nKey(invalidPasswordEvent)));
-    };
-
-    sdk?.subscribe("invalidPasswordSubmitted", onInvalidPassword);
-
-    return () => {
-      sdk?.unsubscribe("invalidPasswordSubmitted", onInvalidPassword);
-    };
-  }, [i18n, sdk, setError]);
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!sdk) {
-      return;
-    }
-
-    sdk.publish("passwordSubmitted", password);
-  };
-
-  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(event.target.value);
-  };
-
-  const handleConfirmPasswordChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setPasswordConfirm(event.target.value);
-  };
-
-  return (
-    <>
-      <Stack space="0.25">
-        <Text
-          as="h1"
-          variant={{ size: "2xl-title", weight: "bold" }}
-          t="recover.password.title"
-        />
-        <Text
-          variant={{ color: "contrast", weight: "semibold" }}
-          as="h2"
-          t="recover.password.details"
-        />
-      </Stack>
-      <form onSubmit={handleSubmit}>
-        <div className={styles.formInputs}>
-          {/* TODO add an error state to the input (change border color) */}
-          <Input
-            id="password-input"
-            label={i18n("recover.password.input.password.label")}
-            placeholder={i18n("recover.password.input.placeholder")}
-            name="password"
-            type="password"
-            value={password ?? ""}
-            onChange={handlePasswordChange}
-          />
-          <Input
-            id="password-input-confirm"
-            label={i18n("recover.password.input.confirmPassword.label")}
-            placeholder={i18n("recover.password.input.placeholder")}
-            name="passwordConfirm"
-            type="password"
-            value={passwordConfirm ?? ""}
-            onChange={handleConfirmPasswordChange}
-            className={sprinkles({ marginTop: "4" })}
-          />
-          {error && <ErrorMessage message={error} />}
-        </div>
-
-        <Button
-          type="submit"
-          variant="primary"
-          testId="sid-form-initial-submit-button"
-          disabled={!password || password !== passwordConfirm}
-        >
-          {i18n("recover.password.submit")}
-        </Button>
-      </form>
-    </>
-  );
-}