diff --git a/app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx b/app/assets/javascripts/preferences/panes/Encryption.tsx similarity index 75% rename from app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx rename to app/assets/javascripts/preferences/panes/Encryption.tsx index decf37929..bfd02728a 100644 --- a/app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx +++ b/app/assets/javascripts/preferences/panes/Encryption.tsx @@ -1,5 +1,6 @@ import { DecoratedInput } from "@/components/DecoratedInput"; import { Icon } from "@/components/Icon"; +import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED } from "@/strings"; import { AppState } from "@/ui_models/app_state"; import { observer } from "mobx-react-lite"; import { FunctionComponent } from "preact"; @@ -35,14 +36,25 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({ ); }); -export const EndToEndEncryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => { +export const Encryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => { + const app = appState.application; + const hasUser = app.hasAccount(); + const hasPasscode = app.hasPasscode(); + const isEncryptionEnabled = app.isEncryptionAvailable(); + + const encryptionStatusString = hasUser + ? STRING_E2E_ENABLED + : hasPasscode + ? STRING_LOCAL_ENC_ENABLED + : STRING_ENC_NOT_ENABLED; + return ( - End-to-end encryption - {appState.accountMenu.encryptionStatusString} + Encryption + {encryptionStatusString} - {appState.accountMenu.isEncryptionEnabled && + {isEncryptionEnabled && } diff --git a/app/assets/javascripts/preferences/panes/Security.tsx b/app/assets/javascripts/preferences/panes/Security.tsx index 4d6cae15a..3cbaa97c2 100644 --- a/app/assets/javascripts/preferences/panes/Security.tsx +++ b/app/assets/javascripts/preferences/panes/Security.tsx @@ -1,7 +1,7 @@ import { AppState } from '@/ui_models/app_state'; import { FunctionComponent } from 'preact'; import { PreferencesPane } from '../components'; -import { EndToEndEncryption } from './EndToEndEncryption'; +import { Encryption } from './Encryption'; import { TwoFactorAuthWrapper } from './two-factor-auth'; import { MfaProps } from './two-factor-auth/MfaProps'; @@ -11,7 +11,7 @@ interface SecurityProps extends MfaProps { export const Security: FunctionComponent = (props) => ( - +