Add missing lib to try-ii (#3162)

add lib

Author: LXIF

.gitignore

@@ -18,6 +18,7 @@ dist-showcase/
 .env
 lib
 !src/frontend/src/lib
+!src/try-ii/src/try-ii-frontend/src/lib
 /.svelte-kit
 
 # Cargo build output

src/try-ii/src/try-ii-frontend/src/lib/authFunctions.ts

@@ -0,0 +1,149 @@
+import type { SignIdentity, Signature } from "@dfinity/agent";
+import {
+  Delegation,
+  DelegationChain,
+  DelegationIdentity,
+  type SignedDelegation,
+} from "@dfinity/identity";
+import { Principal } from "@dfinity/principal";
+
+// The type of response from II as per the spec
+interface AuthResponseSuccess {
+  kind: "authorize-client-success";
+  delegations: {
+    delegation: {
+      pubkey: Uint8Array;
+      expiration: bigint;
+      targets?: Principal[];
+    };
+    signature: Uint8Array;
+  }[];
+  userPublicKey: Uint8Array;
+  authnMethod: "pin" | "passkey" | "recovery";
+}
+
+// Perform a sign in to II using parameters set in this app
+export const authWithII = async ({
+  url: url_,
+  maxTimeToLive,
+  allowPinAuthentication,
+  derivationOrigin,
+  sessionIdentity,
+  autoSelectionPrincipal,
+}: {
+  url: string;
+  maxTimeToLive?: bigint;
+  allowPinAuthentication?: boolean;
+  derivationOrigin?: string;
+  autoSelectionPrincipal?: string;
+  sessionIdentity: SignIdentity;
+}): Promise<{ identity: DelegationIdentity; authnMethod: string }> => {
+  // Figure out the II URL to use
+  const iiUrl = new URL(url_);
+  iiUrl.hash = "#authorize";
+
+  // Open an II window and kickstart the flow
+  const win = window.open(iiUrl, "ii-window");
+  if (win === null) {
+    throw new Error(`Could not open window for '${iiUrl}'`);
+  }
+
+  // Wait for II to say it's ready
+  const evnt = await new Promise<MessageEvent>((resolve) => {
+    const readyHandler = (e: MessageEvent) => {
+      if (e.origin !== iiUrl.origin) {
+        // Ignore messages from other origins (e.g. from a metamask extension)
+        return;
+      }
+      window.removeEventListener("message", readyHandler);
+      resolve(e);
+    };
+    window.addEventListener("message", readyHandler);
+  });
+
+  if (evnt.data.kind !== "authorize-ready") {
+    throw new Error("Bad message from II window: " + JSON.stringify(evnt));
+  }
+
+  // Send the request to II
+  const sessionPublicKey: Uint8Array = new Uint8Array(
+    sessionIdentity.getPublicKey().toDer()
+  );
+
+  const request = {
+    kind: "authorize-client",
+    sessionPublicKey,
+    maxTimeToLive,
+    derivationOrigin,
+    allowPinAuthentication,
+    autoSelectionPrincipal,
+  };
+
+  win.postMessage(request, iiUrl.origin);
+
+  // Wait for the II response and update the local state
+  const response = await new Promise<MessageEvent>((resolve) => {
+    const responseHandler = (e: MessageEvent) => {
+      if (e.origin !== iiUrl.origin) {
+        // Ignore messages from other origins (e.g. from a metamask extension)
+        return;
+      }
+      window.removeEventListener("message", responseHandler);
+      win.close();
+      resolve(e);
+    };
+    window.addEventListener("message", responseHandler);
+  });
+
+  const message = response.data;
+  if (message.kind !== "authorize-client-success") {
+    throw new Error("Bad reply: " + JSON.stringify(message));
+  }
+
+  const identity = identityFromResponse({
+    response: message as AuthResponseSuccess,
+    sessionIdentity,
+  });
+
+  return { identity, authnMethod: message.authnMethod };
+};
+
+// Read delegations the delegations from the response
+const identityFromResponse = ({
+  sessionIdentity,
+  response,
+}: {
+  sessionIdentity: SignIdentity;
+  response: AuthResponseSuccess;
+}): DelegationIdentity => {
+  const delegations = response.delegations.map(extractDelegation);
+
+  const delegationChain = DelegationChain.fromDelegations(
+    delegations,
+    response.userPublicKey.buffer
+  );
+
+  const identity = DelegationIdentity.fromDelegation(
+    sessionIdentity,
+    delegationChain
+  );
+
+  return identity;
+};
+
+// Infer the type of an array's elements
+type ElementOf<Arr> = Arr extends readonly (infer ElementOf)[]
+  ? ElementOf
+  : "argument is not an array";
+
+export const extractDelegation = (
+  signedDelegation: ElementOf<AuthResponseSuccess["delegations"]>
+): SignedDelegation => ({
+  delegation: new Delegation(
+    signedDelegation.delegation.pubkey,
+    signedDelegation.delegation.expiration,
+    signedDelegation.delegation.targets
+  ),
+  signature: signedDelegation.signature
+    .buffer as Signature /* brand type for agent-js */,
+});

src/try-ii/src/try-ii-frontend/src/lib/components/Badge.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Color = "surface";
+  type Size = "sm" | "md" | "lg";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    color?: Color;
+    size?: Size;
+  };
+
+  const {
+    children,
+    class: className,
+    color = "surface",
+    size = "md",
+    ...props
+  }: Props = $props();
+</script>
+
+<div
+  {...props}
+  class={[
+    "rounded-full border font-medium",
+    {
+      surface: "border-border-tertiary text-text-secondary bg-bg-primary",
+    }[color],
+    {
+      sm: "px-2 py-0.5 text-xs",
+      md: "px-2 py-0.5 text-sm",
+      lg: "px-2.5 py-1 text-sm",
+    }[size],
+    className,
+  ]}
+>
+  {@render children?.()}
+</div>

src/try-ii/src/try-ii-frontend/src/lib/components/Button.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import ButtonOrAnchor from "$lib/components/ButtonOrAnchor.svelte";
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes,
+  } from "svelte/elements";
+
+  type Variant = "primary" | "secondary" | "tertiary";
+  type Size = "sm" | "md" | "lg" | "xl";
+
+  type Props = HTMLButtonAttributes &
+    HTMLAnchorAttributes & {
+      element?: HTMLElement;
+      variant?: Variant;
+      size?: Size;
+      iconOnly?: boolean;
+    };
+
+  let {
+    children,
+    element = $bindable(),
+    class: className,
+    variant = "primary",
+    size = "md",
+    iconOnly,
+    ...props
+  }: Props = $props();
+</script>
+
+<ButtonOrAnchor
+  bind:element
+  {...props}
+  class={[
+    "box-border flex items-center justify-center justify-self-start rounded-md font-semibold whitespace-nowrap opacity-100",
+    {
+      primary: [
+        "bg-bg-brand-solid text-text-primary-inversed",
+        "not-disabled:hover:bg-bg-brand-solid_hover",
+        "disabled:bg-bg-disabled disabled:text-fg-disabled",
+      ],
+      secondary: [
+        "bg-bg-primary border-border-secondary text-fg-primary border",
+        "not-disabled:hover:bg-bg-primary_hover",
+        "disabled:border-border-disabled disabled:text-fg-disabled",
+      ],
+      tertiary: [
+        "text-fg-primary",
+        "not-disabled:hover:bg-bg-primary_hover",
+        "disabled:text-fg-disabled",
+      ],
+    }[variant],
+    "focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    {
+      sm: iconOnly ? "size-9" : "h-9 gap-1.5 px-3 text-sm",
+      md: iconOnly ? "size-10" : "h-10 gap-1.5 px-3.5 text-sm",
+      lg: iconOnly ? "size-11" : "text-md h-11 gap-2.5 px-4",
+      xl: iconOnly ? "size-12" : "text-md h-12 gap-2.5 px-4.5",
+    }[size],
+    className,
+  ]}
+>
+  {@render children?.()}
+</ButtonOrAnchor>

src/try-ii/src/try-ii-frontend/src/lib/components/ButtonOrAnchor.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type {
+    HTMLButtonAttributes,
+    HTMLAnchorAttributes,
+  } from "svelte/elements";
+  import { nonNullish } from "@dfinity/utils";
+
+  type Props = HTMLButtonAttributes &
+    HTMLAnchorAttributes & {
+      element?: HTMLElement;
+    };
+
+  let { element = $bindable(), ...props }: Props = $props();
+  const buttonProps: HTMLButtonAttributes | undefined = !("href" in props)
+    ? props
+    : undefined;
+  const anchorProps: HTMLAnchorAttributes | undefined =
+    "href" in props ? props : undefined;
+</script>
+
+{#if nonNullish(buttonProps)}
+  <button bind:this={element} {...buttonProps}>
+    {@render buttonProps.children?.()}
+  </button>
+{:else if nonNullish(anchorProps)}
+  <a bind:this={element} {...anchorProps}>
+    {@render anchorProps.children?.()}
+  </a>
+{/if}

src/try-ii/src/try-ii-frontend/src/lib/components/Footer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { SUPPORT_URL } from "$lib/config";
+
+  type Props = HTMLAttributes<HTMLElement>;
+
+  const { children, class: className, ...props }: Props = $props();
+</script>
+
+<footer
+  {...props}
+  class={[
+    "flex h-14 items-center justify-between px-4 py-3 md:px-6 lg:px-8",
+    className,
+  ]}
+>
+  <div class="text-text-tertiary text-sm font-medium">© Internet Identity</div>
+  <nav class="text-text-primary flex gap-4 text-sm font-semibold">
+    <a href={SUPPORT_URL} target="_blank" rel="noopener">Support</a>
+  </nav>
+</footer>

src/try-ii/src/try-ii-frontend/src/lib/components/Header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import Logo from "$lib/components/Logo.svelte";
+
+  type Props = HTMLAttributes<HTMLHeadElement>;
+
+  const { children, class: className, ...props }: Props = $props();
+</script>
+
+<header
+  {...props}
+  class={["flex h-14 items-center px-4 py-3 md:px-6 lg:px-8", className]}
+>
+  <!-- TODO: Revert to anchor tag when we create the landing page -->
+  <div class="flex h-14 items-center gap-4">
+    <Logo class="text-fg-primary h-5.5" />
+    <h1 class="text-md text-text-primary font-semibold md:block">
+      Internet Identity
+    </h1>
+  </div>
+</header>

src/try-ii/src/try-ii-frontend/src/lib/components/Logo.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  type Props = SVGAttributes<SVGSVGElement>;
+
+  const props: Props = $props();
+</script>
+
+<svg viewBox="0 0 46 22" {...props}>
+  <path
+    d="M45.9992 11C45.9992 4.93463 40.9792 0 34.8188 0C32.2505 0 29.4539 1.33375 26.4911 3.96324C25.0903 5.2064 23.8757 6.5361 22.9637 7.60537C19.7613 3.99235 15.4664 0 11.1804 0C5.99986 0 1.4822 3.63324 0.306661 8.44735C0.308259 8.44331 0.309856 8.43765 0.311453 8.43199C0.309856 8.43765 0.308259 8.4425 0.306661 8.44735C0.106213 9.2675 0 10.1224 0 11C0 17.0654 4.94012 22 11.1005 22C13.6688 22 16.5453 20.6663 19.5081 18.0368C20.9089 16.7936 22.1235 15.4639 23.0355 14.3946C26.2379 18.0076 30.5336 22 34.8196 22C40.0001 22 44.5178 18.3668 45.6933 13.5535C45.8938 12.7333 46 11.8784 46 11.0008L45.9992 11ZM23.823 7.59404C24.8699 6.39779 25.9081 5.34147 26.9127 4.45015C29.7557 1.92662 32.4159 0.647059 34.8188 0.647059C40.6318 0.647059 45.3603 5.29132 45.3603 11C45.3603 11.8007 45.2653 12.6007 45.0768 13.3788C45.0465 13.4685 44.6592 14.5426 43.5555 15.5868C42.122 16.9432 40.179 17.6315 37.78 17.6324C40.3603 16.4968 42.1651 13.9457 42.1651 11C42.1651 6.99551 38.8693 3.73838 34.8188 3.73838C33.24 3.73838 31.3074 4.74375 29.0721 6.72779C28.0667 7.62074 27.0485 8.67059 25.9736 9.92507L25.5519 10.4152L23.3917 8.07529L23.823 7.59485V7.59404ZM20.0017 11.1084C19.1488 12.134 17.9189 13.5316 16.5054 14.7861C13.8716 17.1244 12.1594 17.6146 11.1804 17.6146C7.48605 17.6146 4.47294 14.647 4.47294 11C4.47294 7.35301 7.48286 4.40809 11.1804 4.38544C11.3145 4.38544 11.4766 4.39919 11.6731 4.43478C13.5785 5.17485 15.2804 6.35574 16.3082 7.30853C17.1347 8.07529 18.6321 9.64441 20.0009 11.1076L20.0017 11.1084ZM22.1762 14.406C21.1285 15.6022 20.0911 16.6585 19.0865 17.5499C16.2834 20.0378 13.5218 21.3529 11.1005 21.3529C8.29343 21.3529 5.66126 20.2732 3.68712 18.3126C1.72098 16.3601 0.638878 13.7629 0.638878 11C0.638878 10.1993 0.73471 9.39853 0.92238 8.62125C0.954324 8.52824 1.34164 7.45574 2.44371 6.41316C3.87719 5.05677 5.82018 4.36846 8.21916 4.36765C5.6389 5.50324 3.83407 8.05427 3.83407 11C3.83407 15.0045 7.12988 18.2616 11.1804 18.2616C12.7592 18.2616 14.6918 17.2563 16.9271 15.2722C17.9325 14.3793 18.9507 13.3294 20.0256 12.0749L20.4465 11.584C20.4465 11.584 22.5747 13.8891 22.5979 13.915L22.1754 14.406H22.1762ZM25.9975 10.8916C26.8504 9.86603 28.0803 8.46838 29.4938 7.2139C32.1276 4.87559 33.8398 4.38544 34.8188 4.38544C38.5131 4.38544 41.5263 7.35301 41.5263 11C41.5263 14.647 38.5163 17.5919 34.8188 17.6146C34.6847 17.6146 34.5226 17.6008 34.3253 17.5652C34.3269 17.5652 34.3277 17.566 34.3293 17.5668C32.4222 16.8268 30.7188 15.6451 29.6902 14.6915C28.8637 13.9247 27.3663 12.3556 25.9967 10.8924L25.9975 10.8916ZM45.6885 13.5648C45.6901 13.5607 45.6909 13.5559 45.6925 13.5526C45.6917 13.5559 45.6901 13.5607 45.6885 13.5648Z"
+    class="fill-current"
+  />
+</svg>