+
+ {_t("settings|encryption|delete_key_storage|description")}
+
+
+ {_t("settings|encryption|delete_key_storage|list_first")}
+
+
+ {_t("settings|encryption|delete_key_storage|list_second")}
+
+
+
+
+
+
+
+
+ >
+ );
+}
diff --git a/src/components/views/settings/encryption/KeyStoragePanel.tsx b/src/components/views/settings/encryption/KeyStoragePanel.tsx
index 448025f672..09c6ac0974 100644
--- a/src/components/views/settings/encryption/KeyStoragePanel.tsx
+++ b/src/components/views/settings/encryption/KeyStoragePanel.tsx
@@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
-import React, { FormEvent, JSX, useCallback } from "react";
+import React, { FormEvent, useCallback } from "react";
import { InlineField, InlineSpinner, Label, Root, ToggleControl } from "@vector-im/compound-web";
import { SettingsSection } from "../shared/SettingsSection";
@@ -13,17 +13,25 @@ import { _t } from "../../../../languageHandler";
import { SettingsHeader } from "../SettingsHeader";
import { useKeyStoragePanelViewModel } from "../../../viewmodels/settings/encryption/KeyStoragePanelViewModel";
+interface Props {
+ onKeyStorageDisableClick: () => void;
+}
+
/**
* This component allows the user to set up or change their recovery key.
*/
-export function KeyBackupPanel(): JSX.Element {
+export const KeyStoragePanel: React.FC