feat: added hide password permenantly ui

_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",

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>
   );
 };

ts/types/LocalizerKeys.ts

@@ -425,6 +425,8 @@ export type LocalizerKeys =
   | 'recoveryPasswordErrorMessageGeneric'
   | 'recoveryPasswordErrorMessageIncorrect'
   | 'recoveryPasswordErrorMessageShort'
+  | 'recoveryPasswordHidePermanently'
+  | 'recoveryPasswordHideRecoveryPasswordDescription'
   | 'recoveryPasswordWarningSendDescription'
   | 'recoveryPhraseSavePromptMain'
   | 'remove'