fix: encryption status title (#643)

* fix: encryption status title

* fix: derive encryption status directly from appState and application

* Update app/assets/javascripts/preferences/panes/Encryption.tsx

Co-authored-by: Mo Bitar <mo@standardnotes.org>

Co-authored-by: Mo Bitar <mo@standardnotes.org>
This commit is contained in:
Gorjan Petrovski
2021-09-22 17:23:15 +02:00
committed by GitHub
parent 30deea79b2
commit 52ddb49bd7
2 changed files with 18 additions and 6 deletions

View File

@@ -1,5 +1,6 @@
import { DecoratedInput } from "@/components/DecoratedInput"; import { DecoratedInput } from "@/components/DecoratedInput";
import { Icon } from "@/components/Icon"; 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 { AppState } from "@/ui_models/app_state";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { FunctionComponent } from "preact"; 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 ( return (
<PreferencesGroup> <PreferencesGroup>
<PreferencesSegment> <PreferencesSegment>
<Title>End-to-end encryption</Title> <Title>Encryption</Title>
<Text>{appState.accountMenu.encryptionStatusString}</Text> <Text>{encryptionStatusString}</Text>
{appState.accountMenu.isEncryptionEnabled && {isEncryptionEnabled &&
<EncryptionEnabled appState={appState} />} <EncryptionEnabled appState={appState} />}
</PreferencesSegment> </PreferencesSegment>
</PreferencesGroup> </PreferencesGroup>

View File

@@ -1,7 +1,7 @@
import { AppState } from '@/ui_models/app_state'; import { AppState } from '@/ui_models/app_state';
import { FunctionComponent } from 'preact'; import { FunctionComponent } from 'preact';
import { PreferencesPane } from '../components'; import { PreferencesPane } from '../components';
import { EndToEndEncryption } from './EndToEndEncryption'; import { Encryption } from './Encryption';
import { TwoFactorAuthWrapper } from './two-factor-auth'; import { TwoFactorAuthWrapper } from './two-factor-auth';
import { MfaProps } from './two-factor-auth/MfaProps'; import { MfaProps } from './two-factor-auth/MfaProps';
@@ -11,7 +11,7 @@ interface SecurityProps extends MfaProps {
export const Security: FunctionComponent<SecurityProps> = (props) => ( export const Security: FunctionComponent<SecurityProps> = (props) => (
<PreferencesPane> <PreferencesPane>
<EndToEndEncryption appState={props.appState} /> <Encryption appState={props.appState} />
<TwoFactorAuthWrapper <TwoFactorAuthWrapper
mfaProvider={props.mfaProvider} mfaProvider={props.mfaProvider}
userProvider={props.userProvider} userProvider={props.userProvider}