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

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

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

@@ -1,40 +0,0 @@
-import { Circle } from "@slashid/react-primitives";
-import { Text } from "../text";
-
-const CheckIcon = () => (
-  <Circle>
-    <svg
-      width="21"
-      height="18"
-      viewBox="0 0 21 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M19.8505 0.705985C20.6342 1.38283 20.7209 2.56684 20.044 3.35055L8.16908 17.1005C7.80192 17.5256 7.2635 17.7637 6.70195 17.7493C6.1404 17.7349 5.61489 17.4695 5.27002 17.0261L0.895049 11.4011C0.259296 10.5837 0.406547 9.4057 1.22394 8.76995C2.04134 8.13419 3.21935 8.28145 3.8551 9.09884L6.82592 12.9185L17.2059 0.89949C17.8828 0.115778 19.0668 0.0291434 19.8505 0.705985Z"
-        fill="white"
-      />
-    </svg>
-  </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">
-      <Text
-        as="h1"
-        t="success.title"
-        variant={{ size: "2xl-title", weight: "bold" }}
-      />
-      <Text
-        as="h2"
-        t="success.details"
-        variant={{ color: "contrast", weight: "semibold" }}
-      />
-      <CheckIcon />
-    </article>
-  );
-}

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

@@ -1,48 +0,0 @@
-import type { SlashID } from "@slashid/slashid";
-
-export type InitialState = {
-  state: "initial";
-};
-
-export type ParsingURLState = {
-  state: "parsing-url";
-};
-
-export type NoChallengesState = {
-  state: "no-challenges";
-  challenges: null;
-};
-
-export type ProgressState = {
-  state: "progress";
-  challenges: Challenges;
-  flowType: FlowType;
-};
-
-export type SuccessState = {
-  state: "success";
-  challenges: Challenges;
-  flowType: FlowType;
-};
-
-export type ErrorState = {
-  state: "error";
-  error: Error;
-  challenges: Challenges;
-  flowType: FlowType;
-};
-
-export type State =
-  | InitialState
-  | ParsingURLState
-  | NoChallengesState
-  | ProgressState
-  | SuccessState
-  | ErrorState;
-
-export type FlowType = "catch-all" | "password-recovery";
-
-export type ChallengesInURL = Awaited<
-  ReturnType<SlashID["getChallengesFromURL"]>
->;
-export type Challenges = NonNullable<ChallengesInURL>;

package/src/components/flow/index.ts

@@ -1,3 +0,0 @@
-export * from "./flow.component";
-export * from "./flow.types";
-export * from "./flow.error";

package/src/components/text/index.ts

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

package/src/components/text/text.component.tsx

@@ -1,8 +0,0 @@
-import { Text as BaseText, type TextProps } from "@slashid/react-primitives";
-import type { TranslationKeys } from "../../domain/i18n";
-
-type Props = TextProps<Record<TranslationKeys, string>>;
-
-export const Text: React.FC<Props> = (props) => {
-  return <BaseText {...props} />;
-};

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

@@ -1,13 +0,0 @@
-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,13 +0,0 @@
-// 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

@@ -1,115 +0,0 @@
-// based on RFC 5646
-export type Language = "en" | "ja";
-
-/**
- * Check the language based on the browser settings.
- * Default to "en"
- */
-export function detectLanguage(): Language {
-  const language = navigator.language.toLowerCase();
-  if (language === "ja" || language.startsWith("ja-")) {
-    return "ja";
-  }
-
-  return "en";
-}
-
-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...",
-  "error.detail": "Please log in again.",
-};
-
-export type TranslationKeys = keyof typeof defaultStrings;
-export type Translations = {
-  [key in Language]: {
-    [key in TranslationKeys]: string;
-  };
-};
-
-// TODO add translations for password validation errors
-export const I18N: Translations = {
-  en: defaultStrings,
-  ja: {
-    "footer.text": defaultStrings["footer.text"],
-    "initial.title": "ログイン処理を行っています。",
-    "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": "再度ログインをしてください。",
-  },
-} as const;
-
-export type TranslationKey = keyof Translations[Language];
-
-export type Translate = (
-  key: TranslationKey
-) => (typeof I18N)[Language][TranslationKey];
-
-export const createI18n = (language: Language) => (key: TranslationKey) =>
-  I18N[language][key];

package/src/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="astro/client" />

package/src/layouts/README.md

@@ -1,3 +0,0 @@
-# Layouts
-
-This folder should only contain [Astro layouts](https://docs.astro.build/en/core-concepts/layouts/).

package/src/layouts/page.astro

@@ -1,33 +0,0 @@
----
-interface Props {
-	title: string;
-}
-
-const { title } = Astro.props;
----
-
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
-		<link rel="icon" href="/favicon.png">
-		<title>{title}</title>        
-    </head>
-
-    <body>
-		<slot />
-    </body>
-</html>
-
-<style>
-	body {
-		width: 100%;
-		height: 100vh;
-		margin: 0;
-		padding: 0;
-	}	
-</style>

package/src/pages/index.astro

@@ -1,8 +0,0 @@
----
-import Page from "../layouts/page.astro";
-import { App } from "../components/app";
----
-
-<Page title="/id | Jump page">
-    <App client:load/> 
-</Page>