Implement review feedback

Author: Frederik Rothenberger

src/frontend/src/flows/manage/deviceSettings.ts

@@ -13,6 +13,7 @@ import { phraseRecoveryPage } from "../recovery/recoverWith/phrase";
 import { mainWindow } from "../../components/mainWindow";
 import {
   isRecoveryDevice,
+  RecoveryDevice,
   recoveryDeviceToLabel,
 } from "../../utils/recoveryDevice";
 
@@ -28,7 +29,7 @@ const deviceSettingsTemplate = ({
   isOnlyDevice,
   back,
 }: {
-  protectDevice: () => void;
+  protectDevice: (device: DeviceData & RecoveryDevice) => void;
   deleteDevice: () => void;
   device: DeviceData;
   isOnlyDevice: boolean;
@@ -48,7 +49,7 @@ const deviceSettingsTemplate = ({
               your recovery phrase to delete it.
             </p>
             <button
-              @click="${() => protectDevice()}"
+              @click="${() => protectDevice(device)}"
               data-action="protect"
               class="c-button"
             >
@@ -96,7 +97,9 @@ const deviceSettingsTemplate = ({
 
 // We offer to protect unprotected recovery phrases only, although in the
 // future we may offer to protect all devices
-const shouldOfferToProtect = (device: DeviceData): boolean =>
+const shouldOfferToProtect = (
+  device: DeviceData
+): device is RecoveryDevice & DeviceData =>
   "recovery" in device.purpose &&
   "seed_phrase" in device.key_type &&
   !isProtected(device);
@@ -125,8 +128,14 @@ export const deviceSettings = async (
       device,
       isOnlyDevice,
       back: resolve,
-      protectDevice: () =>
-        protectDevice(userNumber, connection, device, isOnlyDevice, resolve),
+      protectDevice: (recoveryDevice: DeviceData & RecoveryDevice) =>
+        protectDevice(
+          userNumber,
+          connection,
+          recoveryDevice,
+          isOnlyDevice,
+          resolve
+        ),
       deleteDevice: () =>
         deleteDevice(userNumber, connection, device, isOnlyDevice, resolve),
     });
@@ -138,7 +147,7 @@ export const deviceSettings = async (
 const deviceConnection = async (
   connection: Connection,
   userNumber: bigint,
-  device: DeviceData,
+  device: DeviceData & RecoveryDevice,
   recoveryPhraseMessage: string
 ): Promise<AuthenticatedConnection | null> => {
   try {
@@ -200,14 +209,15 @@ const deleteDevice = async (
 
   // If the device is protected then we need to be authenticated with the device to remove it
   // NOTE: the user may be authenticated with the device already, but for consistency we still ask them to input their recovery phrase
-  const removalConnection = isProtected(device)
-    ? await deviceConnection(
-        connection,
-        userNumber,
-        device,
-        "Please input your recovery phrase to remove it."
-      )
-    : connection;
+  const removalConnection =
+    isRecoveryDevice(device) && isProtected(device)
+      ? await deviceConnection(
+          connection,
+          userNumber,
+          device,
+          "Please input your recovery phrase to remove it."
+        )
+      : connection;
 
   await withLoader(async () => {
     // if null then user canceled so we just redraw the manage page
@@ -233,7 +243,7 @@ const deleteDevice = async (
 const protectDevice = async (
   userNumber: bigint,
   connection: AuthenticatedConnection,
-  device: DeviceData,
+  device: DeviceData & RecoveryDevice,
   isOnlyDevice: boolean,
   back: () => void
 ) => {

src/frontend/src/flows/recovery/recoverWith/device.ts

@@ -7,9 +7,9 @@ import {
   LoginFlowSuccess,
   LoginFlowCanceled,
 } from "../../../utils/flowResult";
-import { DeviceData } from "../../../../generated/internet_identity_types";
 import { Connection } from "../../../utils/iiConnection";
 import { mainWindow } from "../../../components/mainWindow";
+import { RecoveryDevice } from "../../../utils/recoveryDevice";
 
 const pageContent = () => {
   const pageContentSlot = html`
@@ -49,7 +49,7 @@ const pageContent = () => {
 export const deviceRecoveryPage = async (
   userNumber: bigint,
   connection: Connection,
-  device: Omit<DeviceData, "alias">
+  device: RecoveryDevice
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> => {
   const container = document.getElementById("pageContent") as HTMLElement;
   render(pageContent(), container);
@@ -59,7 +59,7 @@ export const deviceRecoveryPage = async (
 const init = (
   userNumber: bigint,
   connection: Connection,
-  device: Omit<DeviceData, "alias">
+  device: RecoveryDevice
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> =>
   new Promise((resolve) => {
     const buttonContinue = document.getElementById(

src/frontend/src/flows/recovery/recoverWith/phrase.ts

@@ -1,5 +1,4 @@
 import { html, nothing, render, TemplateResult } from "lit-html";
-import { DeviceData } from "../../../../generated/internet_identity_types";
 import {
   apiResultToLoginFlowResult,
   LoginFlowCanceled,
@@ -17,6 +16,7 @@ import {
 } from "../../../crypto/mnemonic";
 import { warningIcon } from "../../../components/icons";
 import { mainWindow } from "../../../components/mainWindow";
+import { RecoveryDevice } from "../../../utils/recoveryDevice";
 
 const pageContent = (userNumber: bigint, message?: string) => {
   const pageContentSlot = html`
@@ -80,7 +80,7 @@ const pageContent = (userNumber: bigint, message?: string) => {
 export const phraseRecoveryPage = async (
   userNumber: bigint,
   connection: Connection,
-  device: Omit<DeviceData, "alias">,
+  device: RecoveryDevice,
   prefilledPhrase?: string,
   message?: string
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> => {
@@ -92,7 +92,7 @@ export const phraseRecoveryPage = async (
 const init = (
   userNumber: bigint,
   connection: Connection,
-  device: Omit<DeviceData, "alias">,
+  device: RecoveryDevice,
   prefilledPhrase?: string /* if set, prefilled as input */,
   message?: string
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> =>

src/frontend/src/utils/recoveryDevice.ts

@@ -1,12 +1,10 @@
-import { DeviceData, Purpose } from "../../generated/internet_identity_types";
+import { DeviceData } from "../../generated/internet_identity_types";
 
 export type RecoveryDevice = Omit<DeviceData, "alias"> & {
-  purpose: Extract<Purpose, { recovery: null }>;
+  purpose: { recovery: null };
 };
 
-export const recoveryDeviceToLabel = (
-  device: Omit<DeviceData, "alias"> & RecoveryDevice
-): string => {
+export const recoveryDeviceToLabel = (device: RecoveryDevice): string => {
   if ("seed_phrase" in device.key_type) {
     return "Recovery Phrase";
   }