From 862b8343e76b2e5b792803f02d0ca9605e5b4ad0 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 14 May 2024 10:25:07 +1000
Subject: [PATCH] feat: added hide password permenantly ui

---
 _locales/en/messages.json                      |  2 ++
 .../section/CategoryRecoveryPassword.tsx       | 18 ++++++++++++++++--
 ts/types/LocalizerKeys.ts                      |  2 ++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 30b926e3f..466779485 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -425,6 +425,8 @@
   "recoveryPasswordErrorMessageGeneric": "Please check your recovery password and try again.",
   "recoveryPasswordErrorMessageIncorrect": "Some of the words in your Recovery Password are incorrect. Please check and try again.",
   "recoveryPasswordErrorMessageShort": "The Recovery Password you entered is not long enough. Please check and try again.",
+  "recoveryPasswordHidePermanently": "Hide Recovery Password Permanently",
+  "recoveryPasswordHideRecoveryPasswordDescription": "Permanently hide your recover password on this device.",
   "recoveryPasswordWarningSendDescription": "This is your recovery password. If you send it to someone they'll have full access to your account.",
   "recoveryPhraseSavePromptMain": "Your recovery password is the master key to your Account ID — you can use it to restore your Account ID if you lose access to your device. Store your recovery password in a safe place, and don't give it to anyone.",
   "remove": "Remove",
diff --git a/ts/components/settings/section/CategoryRecoveryPassword.tsx b/ts/components/settings/section/CategoryRecoveryPassword.tsx
index 96a27c9c2..454a28bce 100644
--- a/ts/components/settings/section/CategoryRecoveryPassword.tsx
+++ b/ts/components/settings/section/CategoryRecoveryPassword.tsx
@@ -12,10 +12,11 @@ import { THEME_GLOBALS, getThemeValue } from '../../../themes/globals';
 import { getCurrentRecoveryPhrase } from '../../../util/storage';
 import { SessionQRCode } from '../../SessionQRCode';
 import { AnimatedFlex } from '../../basic/Flex';
+import { SessionButtonColor } from '../../basic/SessionButton';
 import { SessionHtmlRenderer } from '../../basic/SessionHTMLRenderer';
 import { SpacerMD, SpacerSM } from '../../basic/Text';
 import { SessionIconButton } from '../../icon';
-import { SessionSettingsItemWrapper } from '../SessionSettingListItem';
+import { SessionSettingButtonItem, SessionSettingsItemWrapper } from '../SessionSettingListItem';
 
 const StyledSettingsItemContainer = styled.div`
   p {
@@ -23,6 +24,10 @@ const StyledSettingsItemContainer = styled.div`
     line-height: 30px;
     margin: 0;
   }
+
+  button[data-testid='hide-recovery-password-button'] {
+    width: 130px;
+  }
 `;
 
 const StyledRecoveryPassword = styled(AnimatedFlex)<{ color: string }>`
@@ -160,8 +165,17 @@ export const SettingsCategoryRecoveryPassword = () => {
         >
           {isQRVisible ? 'View as Password' : 'View QR'}
         </SessionIconButton>
-        {/* TODO Permenantly hide button */}
       </SessionSettingsItemWrapper>
+      <SessionSettingButtonItem
+        title={window.i18n('recoveryPasswordHidePermanently')}
+        description={window.i18n('recoveryPasswordHideRecoveryPasswordDescription')}
+        onClick={() => {
+          // TODO
+        }}
+        buttonText={window.i18n('hide')}
+        buttonColor={SessionButtonColor.Danger}
+        dataTestId={'hide-recovery-password-button'}
+      />
     </StyledSettingsItemContainer>
   );
 };
diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts
index 8b04bd121..40add78f4 100644
--- a/ts/types/LocalizerKeys.ts
+++ b/ts/types/LocalizerKeys.ts
@@ -425,6 +425,8 @@ export type LocalizerKeys =
   | 'recoveryPasswordErrorMessageGeneric'
   | 'recoveryPasswordErrorMessageIncorrect'
   | 'recoveryPasswordErrorMessageShort'
+  | 'recoveryPasswordHidePermanently'
+  | 'recoveryPasswordHideRecoveryPasswordDescription'
   | 'recoveryPasswordWarningSendDescription'
   | 'recoveryPhraseSavePromptMain'
   | 'remove'