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

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/cli.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 import { program } from "commander";
-import { exec } from "child_process";
 import { createRequire } from "node:module";
+import { build, preview } from "astro";
 
 const require = createRequire(import.meta.url);
 
@@ -16,7 +16,14 @@ program
 program
   .command("serve")
   .description("Start the development server")
-  .option("-p, --port <number>", "Port to use for the development server", 4321)
+  .option(
+    "-p, --port <number>",
+    "Port to use for the development server",
+    (value) => {
+      return parseInt(value);
+    },
+    4321
+  )
   .option(
     "-a, --api-url <char>",
     "SlashID API URL",
@@ -27,22 +34,12 @@ program
     "SlashID SDK URL",
     "https://cdn.sandbox.slashid.com/sdk.html"
   )
-  .action((options) => {
-    const command = `PUBLIC_SID_SDK_URL=${options.sdkUrl} PUBLIC_SID_API_URL=${options.apiUrl} npm run dev`;
-
-    // Set the required env variables and execute the "dev" script defined in package.json
-    const childProcess = exec(command);
-
-    childProcess.stdout.pipe(process.stdout);
-    childProcess.stderr.pipe(process.stderr);
-
-    childProcess.on("error", (error) => {
-      console.error(`Error: ${error.message}`);
-    });
+  .action(async (options) => {
+    process.env.PUBLIC_SID_SDK_URL = options.sdkUrl;
+    process.env.PUBLIC_SID_API_URL = options.apiUrl;
 
-    childProcess.on("close", (code) => {
-      console.log(`Child process exited with code ${code}`);
-    });
+    await build({});
+    await preview({ server: { port: options.port } });
   });
 
 // Parse the command line arguments

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slashid/jump-page",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7-beta.1",
   "private": false,
   "publishConfig": {
     "access": "restricted"
@@ -9,29 +9,36 @@
   "bin": {
     "sid-jump-cli": "./cli.js"
   },
+  "files": [
+    "src",
+    "package.json",
+    "README.md",
+    "cli.js",
+    "astro.config.mjs",
+    "tsconfig.json"
+  ],
+  "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/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"]
+    }
   }
-}
+}

package/.turbo/turbo-build.log

@@ -1,32 +0,0 @@
-
-> @slashid/jump-page@0.0.6 build /home/runner/work/javascript/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.
-
- building client 
-vite v4.5.0 building for production...
-transforming...
-✓ 377 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.
-
-
- generating static routes 
-▶ src/pages/index.astro
-  └─ /index.html (+85ms)
-Completed in 96ms.
-
-12:56:02 PM [build] 1 page(s) built in 6.85s
-12:56:02 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