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

package/.turbo/turbo-build.log

@@ -1,32 +1,32 @@
 
-> @slashid/jump-page@0.0.6 build /home/runner/work/javascript/javascript/apps/jump-page
+> @slashid/jump-page@0.0.6 build /Users/ivankovic/projects/slashid/javascript/apps/jump-page
 > astro build
 
-12:55:55 PM [content] No content directory found. Skipping type generation.
-12:55:55 PM [build] output target: static
-12:55:55 PM [build] Collecting build info...
-12:55:55 PM [build] Completed in 116ms.
-12:55:55 PM [build] Building static entrypoints...
-12:55:58 PM [build] Completed in 3.16s.
+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...
+vite v4.5.0 building for production...
 transforming...
-✓ 377 modules transformed.
+✓ 384 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/_astro/index.e24832a0.css   31.53 kB │ gzip:  5.44 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.16dd2e70.js     166.26 kB │ gzip: 47.25 kB
-✓ built in 3.46s
-Completed in 3.46s.
+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 (+85ms)
-Completed in 96ms.
+  └─ /index.html (+122ms)
+Completed in 132ms.
 
-12:56:02 PM [build] 1 page(s) built in 6.85s
-12:56:02 PM [build] Complete!
+05:00:09 PM [build] 1 page(s) built in 3.88s
+05:00:09 PM [build] Complete!

package/astro.config.mjs

@@ -1,12 +1,25 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig } from "astro/config";
 
 import react from "@astrojs/react";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [react()],
   vite: {
     plugins: [vanillaExtractPlugin()],
+    resolve: {
+      alias: {
+        "@slashid/react-primitives": path.resolve(
+          __dirname,
+          "../../packages/react-primitives/src/main.ts"
+        ),
+      },
+    },
   },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slashid/jump-page",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7-beta.0",
   "private": false,
   "publishConfig": {
     "access": "restricted"
@@ -9,29 +9,28 @@
   "bin": {
     "sid-jump-cli": "./cli.js"
   },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "test": "astro check",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
   "dependencies": {
     "@astrojs/check": "^0.3.1",
     "@astrojs/react": "^3.0.5",
     "@sentry/react": "^7.81.1",
-    "@slashid/slashid": "3.16.0",
+    "@slashid/slashid": "3.17.4-beta.3",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^3.5.5",
     "commander": "^11.1.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@slashid/react-primitives": "0.1.4"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/vite-plugin": "^3.9.2"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "test": "astro check",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
   }
-}
+}

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

@@ -26,6 +26,7 @@ export const header = style({
 export const footer = style({
   width: "100%",
   textAlign: "center",
+  marginTop: theme.space[8],
 });
 
 export const logo = style({

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

@@ -10,9 +10,15 @@ import type { ChallengeListInner } from "@slashid/slashid";
 import { Success } from "./flow.success";
 import { ensureError } from "./flow.domain";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function isPasswordRecoveryFlow(challenges: Challenges): boolean {
+  return challenges.some((challenge) => challenge.type === "password_reset");
+}
+
 function getFlowTypeFromChallenges(challenges: Challenges): FlowType {
-  // TODO treat passwords as a special case
+  if (isPasswordRecoveryFlow(challenges)) {
+    return "password-recovery";
+  }
+
   return "catch-all";
 }
 
@@ -77,7 +83,11 @@ export function Flow() {
       {appState === "ready" && (
         <>
           {flowState.state === "progress" && (
-            <Progress onSuccess={handleSuccess} onError={handleError} />
+            <Progress
+              onSuccess={handleSuccess}
+              onError={handleError}
+              flowType={flowState.flowType}
+            />
           )}
           {flowState.state === "no-challenges" && <Error type="warning" />}
           {flowState.state === "success" && <Success />}

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

@@ -0,0 +1,20 @@
+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.progress.tsx

@@ -1,9 +1,12 @@
-import { Stack } from "@slashid/react-primitives";
+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 { useEffect } from "react";
 import { useAppContext } from "../app/app.context";
+import { Recover } from "./flow.recover";
 
 type SlashIDErrorMessage = { message: string };
 class SlashIDError extends Error {
@@ -51,12 +54,14 @@ function ensureError(value: unknown): Error {
 }
 
 export type Props = {
+  flowType: FlowType;
   onSuccess: () => void;
   onError: ({ error }: { error: Error }) => void;
 };
 
-export function Progress({ onSuccess, onError }: Props) {
+export function Progress({ onSuccess, onError, flowType }: Props) {
   const { sdk } = useAppContext();
+
   useEffect(() => {
     if (!sdk) return;
 
@@ -71,8 +76,28 @@ export function Progress({ onSuccess, onError }: Props) {
       }
     }
 
+    function handlePasswordResetEvent() {
+      console.log("Password reset - input ready");
+    }
+
+    if (flowType === "password-recovery") {
+      console.log("Subscribed");
+      sdk.subscribe("passwordResetReady", handlePasswordResetEvent);
+    }
+
     authenticate();
-  }, [onError, onSuccess, sdk]);
+
+    return () => {
+      if (flowType === "password-recovery") {
+        console.log("Cleaned up");
+        sdk.unsubscribe("passwordResetReady", handlePasswordResetEvent);
+      }
+    };
+  }, [flowType, onError, onSuccess, sdk]);
+
+  if (flowType === "password-recovery") {
+    return <Recover />;
+  }
 
   return (
     <>

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

@@ -0,0 +1,121 @@
+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>
+    </>
+  );
+}

package/src/components/flow/flow.success.tsx

@@ -20,6 +20,7 @@ const CheckIcon = () => (
   </Circle>
 );
 
+// TODO this view always tells you are logged in, even in cases when you just verify the handle and not have a token
 export function Success() {
   return (
     <article data-testid="sid-form-success-state">

package/src/components/flow/flow.types.ts

@@ -40,7 +40,7 @@ export type State =
   | SuccessState
   | ErrorState;
 
-export type FlowType = "catch-all";
+export type FlowType = "catch-all" | "password-recovery";
 
 export type ChallengesInURL = Awaited<
   ReturnType<SlashID["getChallengesFromURL"]>

package/src/components/text/use-i18n.ts

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import { createI18n } from "../../domain/i18n";
+import { useAppContext } from "../app/app.context";
+
+export function useI18n() {
+  const { language } = useAppContext();
+
+  const i18n = useMemo(() => {
+    return createI18n(language);
+  }, [language]);
+
+  return i18n;
+}

package/src/config.ts

@@ -1,7 +1,13 @@
-export const config = {
+// TODO this does not work with .env files
+/* export const config = {
   sdkURL:
     import.meta.env.PUBLIC_SID_SDK_URL ||
     "https://cdn.sandbox.slashid.com/sdk.html",
   baseURL:
     import.meta.env.PUBLIC_SID_API_URL || "https://api.sandbox.slashid.com",
+}; */
+
+export const config = {
+  baseURL: "https://slashid.local",
+  sdkURL: "https://jump.slashid.local/sdk.html",
 };

package/src/domain/i18n.ts

@@ -18,6 +18,29 @@ export const defaultStrings = {
   "footer.text": "Top-tier security by SlashID",
   "initial.title": "Logging you in...",
   "initial.details": "Please follow the on-screen instructions.",
+  "recover.password.title": "Reset password",
+  "recover.password.details": "Enter your new password.",
+  "recover.password.input.password.label": "Password",
+  "recover.password.input.confirmPassword.label": "Confirm password",
+  "recover.password.input.placeholder": "Type your new password",
+  "recover.password.submit": "Reset password",
+  "recover.password.validation.length": "Password is too short",
+  "recover.password.validation.password_variants": "Contains word 'password'",
+  "recover.password.validation.admin_variants": "Contains word 'admin'",
+  "recover.password.validation.user_variants": "Contains word 'user'",
+  "recover.password.validation.alphanumeric_sequences_1":
+    "Sequence of alphanumeric characters",
+  "recover.password.validation.alphanumeric_sequences_2":
+    "Sequence of alphanumeric characters",
+  "recover.password.validation.numeric_sequences_ascending":
+    "Sequence of alphanumeric characters",
+  "recover.password.validation.numeric_subsequences_ascending":
+    "Sequence of alphanumeric characters",
+  "recover.password.validation.numeric_sequences_descending":
+    "Sequence of alphanumeric characters",
+  "recover.password.validation.numeric_subsequences_descending":
+    "Sequence of alphanumeric characters",
+  "recover.password.validation.common_password_xkcd": "Common password",
   "success.title": "Thank you, you're signed in!",
   "success.details": "You can now close this page.",
   "error.title": "Something went wrong...",
@@ -31,6 +54,7 @@ export type Translations = {
   };
 };
 
+// TODO add translations for password validation errors
 export const I18N: Translations = {
   en: defaultStrings,
   ja: {
@@ -39,6 +63,43 @@ export const I18N: Translations = {
     "initial.details": "処理完了後、画面は自動で切り替わります。",
     "success.title": "認証が完了しました！",
     "success.details": "このページを閉じて、元のページへ戻ってください。",
+    "recover.password.title": defaultStrings["recover.password.title"],
+    "recover.password.details": defaultStrings["recover.password.details"],
+    "recover.password.input.password.label":
+      defaultStrings["recover.password.input.password.label"],
+    "recover.password.input.confirmPassword.label":
+      defaultStrings["recover.password.input.confirmPassword.label"],
+    "recover.password.input.placeholder":
+      defaultStrings["recover.password.input.placeholder"],
+    "recover.password.submit": defaultStrings["recover.password.submit"],
+    "recover.password.validation.length":
+      defaultStrings["recover.password.validation.length"],
+    "recover.password.validation.password_variants":
+      defaultStrings["recover.password.validation.password_variants"],
+    "recover.password.validation.admin_variants":
+      defaultStrings["recover.password.validation.admin_variants"],
+    "recover.password.validation.user_variants":
+      defaultStrings["recover.password.validation.user_variants"],
+    "recover.password.validation.alphanumeric_sequences_1":
+      defaultStrings["recover.password.validation.alphanumeric_sequences_1"],
+    "recover.password.validation.alphanumeric_sequences_2":
+      defaultStrings["recover.password.validation.alphanumeric_sequences_2"],
+    "recover.password.validation.numeric_sequences_ascending":
+      defaultStrings["recover.password.validation.numeric_sequences_ascending"],
+    "recover.password.validation.numeric_subsequences_ascending":
+      defaultStrings[
+        "recover.password.validation.numeric_subsequences_ascending"
+      ],
+    "recover.password.validation.numeric_sequences_descending":
+      defaultStrings[
+        "recover.password.validation.numeric_sequences_descending"
+      ],
+    "recover.password.validation.numeric_subsequences_descending":
+      defaultStrings[
+        "recover.password.validation.numeric_subsequences_descending"
+      ],
+    "recover.password.validation.common_password_xkcd":
+      defaultStrings["recover.password.validation.common_password_xkcd"],
     "error.title": defaultStrings["error.title"],
     "error.detail": "再度ログインをしてください。",
   },

package/tsconfig.json

@@ -2,6 +2,9 @@
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "paths": {
+      "@slashid/react-primitives": ["../../packages/react-primitives/src/main.ts"]
+    }
   }
-}
+}