Make action on temp key warning optional (#1915)

This allows using the temp key warning in contexts that
do not offer a button / action to take.

src/frontend/src/flows/manage/index.ts

@@ -22,8 +22,8 @@ import { dappsExplorer } from "$src/flows/dappsExplorer";
 import { KnownDapp, getDapps } from "$src/flows/dappsExplorer/dapps";
 import { dappsHeader, dappsTeaser } from "$src/flows/dappsExplorer/teaser";
 import {
-  TempKeysWarning,
-  tempKeyWarningSection,
+  TempKeyWarningAction,
+  tempKeyWarningBox,
   tempKeysSection,
 } from "$src/flows/manage/tempKeys";
 import { addPhrase, recoveryWizard } from "$src/flows/recovery/recoveryWizard";
@@ -163,7 +163,7 @@ const displayManageTemplate = ({
   dapps: KnownDapp[];
   exploreDapps: () => void;
   identityBackground: IdentityBackground;
-  tempKeysWarning?: TempKeysWarning;
+  tempKeysWarning?: TempKeyWarningAction;
 }): TemplateResult => {
   // Nudge the user to add a passkey if there is none
   const warnNoPasskeys = authenticators.length === 0;
@@ -175,7 +175,7 @@ const displayManageTemplate = ({
     </hgroup>
     ${anchorSection({ userNumber, identityBackground })}
     ${nonNullish(tempKeysWarning)
-      ? tempKeyWarningSection({ i18n, tempKeysWarning })
+      ? tempKeyWarningBox({ i18n, warningAction: tempKeysWarning })
       : ""}
     <p class="t-paragraph">
       ${dappsTeaser({
@@ -335,7 +335,7 @@ export const displayManage = (
     };
 
     // Function to figure out what temp keys warning should be shown, if any.
-    const determineTempKeysWarning = (): TempKeysWarning | undefined => {
+    const determineTempKeysWarning = (): TempKeyWarningAction | undefined => {
       if (!isPinAuthenticated(devices_, connection)) {
         // Don't show the warning, if the user is not authenticated using a PIN
         // protected browser storage key

src/frontend/src/flows/manage/tempKeys.ts

@@ -9,21 +9,22 @@ import { unreachable } from "$src/utils/utils";
 import { TemplateResult, html } from "lit-html";
 
 import { warnBox } from "$src/components/warnBox";
+import { nonNullish } from "@dfinity/utils";
 import copyJson from "./tempKeys.json";
 
-export type TempKeysWarning =
+export type TempKeyWarningAction =
   | { tag: "add_recovery"; action: () => void }
   | { tag: "add_passkey"; action: () => void };
-export const tempKeyWarningSection = ({
+export const tempKeyWarningBox = ({
   i18n,
-  tempKeysWarning,
+  warningAction,
 }: {
   i18n: I18n;
-  tempKeysWarning: TempKeysWarning;
+  warningAction?: TempKeyWarningAction;
 }): TemplateResult => {
   const copy = i18n.i18n(copyJson);
 
-  const warningButtonCopy = (tempKeysWarning: TempKeysWarning) => {
+  const warningButtonCopy = (tempKeysWarning: TempKeyWarningAction) => {
     switch (tempKeysWarning.tag) {
       case "add_recovery":
         return copy.add_recovery_phrase;
@@ -34,19 +35,21 @@ export const tempKeyWarningSection = ({
     }
   };
 
-  const button = html`<button
-    class="c-button c-button--primary l-stack"
-    @click="${tempKeysWarning.action}"
-    id="addRecovery"
-  >
-    <span>${warningButtonCopy(tempKeysWarning)}</span>
-  </button>`;
+  const buttonTemplate = nonNullish(warningAction)
+    ? html`<button
+        class="c-button c-button--primary l-stack"
+        @click="${warningAction.action}"
+        id="addRecovery"
+      >
+        <span>${warningButtonCopy(warningAction)}</span>
+      </button>`
+    : undefined;
 
   return warnBox({
     headerSlot: html`<h2>${copy.security_warning}</h2>`,
     title: copy.you_are_using_temporary_key,
     message: copy.set_up_recovery_and_passkey,
-    slot: button,
+    slot: buttonTemplate,
   });
 };