From 862db49c324133cc03ce07b282c80a20a7026679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karol=20S=C3=B3jko?= <karolsojko@proton.me>
Date: Thu, 20 Apr 2023 13:19:49 +0200
Subject: [PATCH] chore(web): display recovery code on hardware security keys
 section

---
 .../Preferences/Panes/Security/U2F/U2FView/U2FView.tsx    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx
index 41e9b95b0..c8ea3817c 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx
@@ -12,6 +12,7 @@ import Button from '@/Components/Button/Button'
 import U2FAddDeviceView from '../U2FAddDeviceView'
 import U2FDevicesList from './U2FDevicesList'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
+import RecoveryCodeBanner from '@/Components/RecoveryCodeBanner/RecoveryCodeBanner'
 
 type Props = {
   application: WebApplication
@@ -67,6 +68,13 @@ const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
             onClick={handleAddDeviceClick}
           />
         </PreferencesSegment>
+        {devices.length > 0 && (
+          <PreferencesSegment>
+            <div className="mt-3">
+              <RecoveryCodeBanner application={application} />
+            </div>
+          </PreferencesSegment>
+        )}
       </PreferencesGroup>
       <ModalOverlay isOpen={showDeviceAddingModal}>
         <U2FAddDeviceView