Migrate showcase to static pages (#2322)

* Migrate Astro to static pages

* Remove iiPageName

* Move dapps

* Add end of line

src/showcase/src/constants.ts

@@ -0,0 +1,3 @@
+import { getDapps } from "$src/flows/dappsExplorer/dapps";
+
+export const dapps = getDapps();

src/showcase/src/i18n.ts

@@ -0,0 +1,3 @@
+import { I18n } from "$src/utils/i18n";
+
+export const i18n = new I18n("en");

src/showcase/src/pages/[page].astro

@@ -4,48 +4,20 @@ import "$src/styles/main.css";
 export const iiPageNames = [
   "displayUserNumber",
   "displayUserNumberTempKey",
-  "promptDeviceAlias",
-  "authorizeNew",
-  "authorizeNewKnown",
-  "authorizeNewAlt",
-  "authorizeNewKnownAlt",
-  "authorizeUseExisting",
-  "authorizeUseExistingKnown",
-  "authorizeUseExistingKnownAlt",
-  "authorizePick",
-  "authorizePickMany",
-  "manageNew",
-  "manageUseExisting",
-  "managePick",
-  "protectDeviceInfo",
-  "unprotectDeviceInfo",
-  "resetPhraseInfo",
-  "recoverWithDevice",
-  "savePasskey",
-  "savePasskeyWithPin",
   "promptCaptcha",
   "promptCaptchaReady",
-  "pinInfo",
-  "setPin",
-  "confirmPin",
-  "usePin",
   "displayManage",
   "displayManageSingle",
   "displayManageTempKey",
-  "pollForTentativeDevicePage",
   "deviceRegistrationDisabledInfo",
   "showVerificationCode",
   "verifyTentativeDevice",
   "loader",
-  "addPhrase",
-  "addPhraseWarning",
   "displaySeedPhrase",
   "confirmSeedPhrase",
   "banner",
   "toasts",
-  "dappsExplorer",
   "addDeviceSuccess",
-  "allowCredentials",
   "abortedCredentialsInternalError",
 ];
 

src/showcase/src/pages/abortedCredentialsInternalError.astro

@@ -0,0 +1,18 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Aborted Credentials Internal Error" pageName="abortedCredentialsInternalError">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { html } from "lit-html";
+    import { abortedCredentialsPage } from "$src/flows/verifiableCredentials/abortedCredentials";
+
+    abortedCredentialsPage({
+      i18n,
+      reason: "internal_error",
+      onAcknowledge: () => toast.info(html`Acked`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/addPhrase.astro

@@ -0,0 +1,18 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Add Phrase" pageName="addPhrase">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { addPhrasePage } from "$src/flows/recovery/recoveryWizard";
+
+    addPhrasePage({
+      ok: () => toast.info("ok"),
+      cancel: () => toast.info("cancel"),
+      i18n,
+      intent: "userInitiated",
+    });
+  </script>
+</Screen>

src/showcase/src/pages/addPhraseWarning.astro

@@ -0,0 +1,18 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Add Phrase Warning" pageName="addPhraseWarning">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { addPhrasePage } from "$src/flows/recovery/recoveryWizard";
+
+    addPhrasePage({
+      ok: () => toast.info("ok"),
+      cancel: () => toast.info("cancel"),
+      i18n,
+      intent: "securityReminder",
+    });
+  </script>
+</Screen>

src/showcase/src/pages/allowCredentials.astro

@@ -0,0 +1,77 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Allow Credentials" pageName="allowCredentials">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { html } from "lit-html";
+    import { allowCredentialsPage } from "$src/flows/verifiableCredentials/allowCredentials";
+
+    allowCredentialsPage({
+      i18n,
+      relyingOrigin: "https://oc.app",
+      providerOrigin: "https://nns.ic0.app",
+      consentMessage: `
+# ACME Inc Employment Credential
+
+Credential that states that the holder is employed by the ACME Inc at the time of issuance.
+___
+
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+Test link: [Visit website](https://www.example.com)
+
+### Unordered
+
++ Create a list by starting a line with '+', '-', or '*'
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+### Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+      `,
+      onAllow: () => toast.info(html`Allowed`),
+      onCancel: () => toast.info(html`Canceled`),
+    })
+  </script>
+</Screen>

src/showcase/src/pages/authorizeNew.astro

@@ -0,0 +1,16 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize New" pageName="authorizeNew">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authz } from "../templates";
+
+    authz.firstTime({
+      useExisting: () => toast.info(html`Asked for existing`),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizeNewAlt.astro

@@ -0,0 +1,16 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize New Alt" pageName="authorizeNewAlt">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authzAlt } from "../templates";
+
+    authzAlt.firstTime({
+      useExisting: () => toast.info("Use existing"),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizeNewKnown.astro

@@ -0,0 +1,16 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize New Known" pageName="authorizeNewKnown">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authzKnown } from "../templates";
+
+    authzKnown.firstTime({
+      useExisting: () => toast.info("Use existing"),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizeNewKnownAlt.astro

@@ -0,0 +1,16 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize New Known Alt" pageName="Authorize New Known Alt">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authzKnownAlt } from "../templates";
+
+    authzKnownAlt.firstTime({
+      useExisting: () => toast.info("Use existing"),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizePick.astro

@@ -0,0 +1,18 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize Pick" pageName="authorizePick">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authz } from "../templates";
+
+    authz.pick({
+      anchors: [BigInt(10000), BigInt(243099)],
+      moreOptions: () => toast.info(html`Asked for more options`),
+      onSubmit: (userNumber) =>
+        toast.info(html`User number submitted: ${userNumber.toString()}`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizePickMany.astro

@@ -0,0 +1,21 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize Pick Many" pageName="authorzePickMany">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authz } from "../templates";
+import { NonEmptyArray } from "$src/utils/utils";
+
+    authz.pick({
+      anchors: [...Array(10).keys()].map((x) =>
+        BigInt(10000 + 129 * x * x)
+      ) as NonEmptyArray<bigint>,
+      moreOptions: () => toast.info(html`Asked for more options`),
+      onSubmit: (userNumber) =>
+        toast.info(html`User number submitted: ${userNumber.toString()}`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizeUseExisting.astro

@@ -0,0 +1,19 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize Use Existing" pageName="authorizeUseExisting">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authz } from "../templates";
+
+    authz.useExisting({
+      recover: () => toast.info(html`Asked for recovery`),
+      onSubmit: (userNumber) =>
+        toast.info(html`User number submitted: ${userNumber.toString()}`),
+      addDevice: () => toast.info(html`Asked for adding device`),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizeUseExistingKnown.astro

@@ -0,0 +1,19 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize Use Existing Known" pageName="authorizeUseExistingKnown">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authzKnown } from "../templates";
+
+    authzKnown.useExisting({
+      recover: () => toast.info(html`Asked for recovery`),
+      onSubmit: (userNumber) =>
+        toast.info(html`User number submitted: ${userNumber.toString()}`),
+      addDevice: () => toast.info(html`Asked for adding device`),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/authorizeUseExistingKnownAlt.astro

@@ -0,0 +1,19 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Authorize Use Existing Known Alt" pageName="authorizeUseExistingKnownAlt">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { html } from "lit-html";
+    import { authzKnownAlt } from "../templates";
+
+    authzKnownAlt.useExisting({
+      recover: () => toast.info(html`Asked for recovery`),
+      onSubmit: (userNumber) =>
+        toast.info(html`User number submitted: ${userNumber.toString()}`),
+      addDevice: () => toast.info(html`Asked for adding device`),
+      register: () => toast.info(html`Asked for registration`),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/confirmPin.astro

@@ -0,0 +1,19 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Confirm Pin" pageName="confirmPin">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { confirmPinPage } from "$src/flows/pin/confirmPin";
+    import { i18n } from "../i18n";
+
+    confirmPinPage({
+      i18n,
+      onContinue: () => toast.info("PIN confirmed"),
+      expectedPin: "123456",
+      cancel: () => toast.info("cancel"),
+      retry: () => toast.info("retry"),
+    });
+  </script>
+</Screen>

src/showcase/src/pages/dappsExplorer.astro

@@ -0,0 +1,14 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Dapps Explorer" pageName="dappsExplorer">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { dappsExplorerPage } from "$src/flows/dappsExplorer";
+    import { dapps } from "../constants";
+
+    dappsExplorerPage({ dapps, i18n, back: () => toast.info("back") });
+  </script>
+</Screen>