From fe2784179b43dbb2e9a24e4ef62dc6d294e6db69 Mon Sep 17 00:00:00 2001
From: Frederik Rothenberger <frederik.rothenberger@dfinity.org>
Date: Wed, 20 Sep 2023 17:41:45 +0200
Subject: [PATCH] Add temp key warning to registration success screen (#1916)

* Add temp key warning to registration success screen

This adds the temp key warning also to the registration success page.

* Rename slot to marketingIntroSlot
---
 src/frontend/src/flows/register/finish.ts | 6 ++++++
 src/frontend/src/flows/register/index.ts  | 6 ++++++
 src/showcase/src/pages/[page].astro       | 1 +
 src/showcase/src/showcase.ts              | 9 +++++++++
 4 files changed, 22 insertions(+)

diff --git a/src/frontend/src/flows/register/finish.ts b/src/frontend/src/flows/register/finish.ts
index 0ff357148b..784928878b 100644
--- a/src/frontend/src/flows/register/finish.ts
+++ b/src/frontend/src/flows/register/finish.ts
@@ -21,12 +21,14 @@ export const displayUserNumberTemplate = ({
   userNumber,
   identityBackground,
   stepper,
+  marketingIntroSlot,
   scrollToTop = false,
 }: {
   onContinue: () => void;
   userNumber: bigint;
   identityBackground: IdentityBackground;
   stepper: TemplateResult;
+  marketingIntroSlot?: TemplateResult;
   /* put the page into view */
   scrollToTop?: boolean;
 }) => {
@@ -84,6 +86,7 @@ export const displayUserNumberTemplate = ({
         I saved it, continue
       </button>
     <section class="c-marketing-block">
+      ${marketingIntroSlot}
       <aside class="l-stack">
         <h3 class="t-title">This number is your Internet Identity</h3>
         <p class="t-paragraph">With your Internet Identity and your passkey, you will be able to create and securely connect to Internet Computer dapps</p>
@@ -126,10 +129,12 @@ export const displayUserNumber = ({
   userNumber,
   identityBackground,
   stepper,
+  marketingIntroSlot,
 }: {
   userNumber: bigint;
   identityBackground: IdentityBackground;
   stepper: TemplateResult;
+  marketingIntroSlot?: TemplateResult;
 }): Promise<void> => {
   return new Promise((resolve) =>
     displayUserNumberPage({
@@ -137,6 +142,7 @@ export const displayUserNumber = ({
       userNumber,
       identityBackground,
       stepper,
+      marketingIntroSlot,
       scrollToTop: true,
     })
   );
diff --git a/src/frontend/src/flows/register/index.ts b/src/frontend/src/flows/register/index.ts
index e19965d2f6..ab101c5b87 100644
--- a/src/frontend/src/flows/register/index.ts
+++ b/src/frontend/src/flows/register/index.ts
@@ -8,11 +8,13 @@ import {
   PinIdentityMaterial,
   constructPinIdentity,
 } from "$src/crypto/pinIdentity";
+import { tempKeyWarningBox } from "$src/flows/manage/tempKeys";
 import { idbStorePinIdentityMaterial } from "$src/flows/pin/idb";
 import { setPinFlow } from "$src/flows/pin/setPin";
 import { pinStepper } from "$src/flows/pin/stepper";
 import { registerStepper } from "$src/flows/register/stepper";
 import { registerDisabled } from "$src/flows/registerDisabled";
+import { I18n } from "$src/i18n";
 import { authenticatorAttachmentToKeyType } from "$src/utils/authenticatorAttachment";
 import { LoginFlowCanceled } from "$src/utils/flowResult";
 import {
@@ -98,6 +100,7 @@ export const registerFlow = async <T>({
         keyType: { browser_storage_key: null },
         finalizeIdentity: (userNumber: bigint) =>
           storePinIdentity({ userNumber, pinIdentityMaterial }),
+        finishSlot: tempKeyWarningBox({ i18n: new I18n() }),
       };
     } else {
       const identity = savePasskeyResult;
@@ -131,6 +134,7 @@ export const registerFlow = async <T>({
     credentialId,
     keyType,
     finalizeIdentity,
+    finishSlot,
   }: {
     identity: SignIdentity;
     alias: string;
@@ -139,6 +143,7 @@ export const registerFlow = async <T>({
     credentialId?: CredentialId;
     keyType: KeyType;
     finalizeIdentity?: (userNumber: bigint) => Promise<void>;
+    finishSlot?: TemplateResult;
   } = result_;
 
   const result = await promptCaptcha({
@@ -173,6 +178,7 @@ export const registerFlow = async <T>({
     await displayUserNumber({
       userNumber,
       stepper: finishStepper,
+      marketingIntroSlot: finishSlot,
     });
   }
   return result;
diff --git a/src/showcase/src/pages/[page].astro b/src/showcase/src/pages/[page].astro
index 7bf05b6a8b..92fee364c3 100644
--- a/src/showcase/src/pages/[page].astro
+++ b/src/showcase/src/pages/[page].astro
@@ -3,6 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import "$src/styles/main.css";
 export const iiPageNames = [
   "displayUserNumber",
+  "displayUserNumberTempKey",
   "compatibilityNotice",
   "promptDeviceAlias",
   "authorizeNew",
diff --git a/src/showcase/src/showcase.ts b/src/showcase/src/showcase.ts
index ae8e14b1c2..fc33e0e9d2 100644
--- a/src/showcase/src/showcase.ts
+++ b/src/showcase/src/showcase.ts
@@ -31,6 +31,7 @@ import {
   resetPhraseInfoPage,
   unprotectDeviceInfoPage,
 } from "$src/flows/manage/deviceSettings";
+import { tempKeyWarningBox } from "$src/flows/manage/tempKeys";
 import { confirmPinPage } from "$src/flows/pin/confirmPin";
 import { pinInfoPage } from "$src/flows/pin/pinInfo";
 import { setPinPage } from "$src/flows/pin/setPin";
@@ -149,6 +150,14 @@ export const iiPages: Record<string, () => void> = {
       onContinue: () => console.log("done"),
       stepper: registerStepper({ current: "finish" }),
     }),
+  displayUserNumberTempKey: () =>
+    displayUserNumberPage({
+      identityBackground,
+      userNumber,
+      onContinue: () => console.log("done"),
+      stepper: registerStepper({ current: "finish" }),
+      marketingIntroSlot: tempKeyWarningBox({ i18n: new I18n("en") }),
+    }),
   compatibilityNotice: () => compatibilityNotice("This is the reason."),
   promptDeviceAlias: () =>
     promptDeviceAliasPage({