rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: encryption status dynamic string (#642)

Browse Source
This commit is contained in:
Gorjan Petrovski
2021-09-22 16:27:51 +02:00
committed by GitHub
parent 7b5b78832a
commit 30deea79b2
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx
View File

@@ -7,7 +7,7 @@ import { PreferencesGroup, PreferencesSegment, Text, Title } from "../components
const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`; const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`;
export const EndToEndEncryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => { const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
const count = appState.accountMenu.structuredNotesAndTagsCount; const count = appState.accountMenu.structuredNotesAndTagsCount;
const notes = formatCount(count.notes, 'notes'); const notes = formatCount(count.notes, 'notes');
const tags = formatCount(count.tags, 'tags'); const tags = formatCount(count.tags, 'tags');
@@ -19,21 +19,31 @@ export const EndToEndEncryption: FunctionComponent<{ appState: AppState }> = obs
const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />; const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />; const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />; const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />;
return (
<>
<div className="flex flex-row pb-1 pt-1.5" >
<DecoratedInput disabled={true} text={notes} right={[checkIcon]} left={[noteIcon]} />
<div className="min-w-3" />
<DecoratedInput disabled={true} text={tags} right={[checkIcon]} left={[tagIcon]} />
</div>
<div className="flex flex-row" >
<DecoratedInput disabled={true} text={archived} right={[checkIcon]} left={[archiveIcon]} />
<div className="min-w-3" />
<DecoratedInput disabled={true} text={deleted} right={[checkIcon]} left={[trashIcon]} />
</div>
</>
);
});
export const EndToEndEncryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
return ( return (
<PreferencesGroup> <PreferencesGroup>
<PreferencesSegment> <PreferencesSegment>
<Title>End-to-end encryption</Title> <Title>End-to-end encryption</Title>
<Text>Your data is encrypted before syncing to your private account.</Text> <Text>{appState.accountMenu.encryptionStatusString}</Text>
<div className="flex flex-row pb-1 pt-1.5" >
<DecoratedInput disabled={true} text={notes} right={[checkIcon]} left={[noteIcon]} /> {appState.accountMenu.isEncryptionEnabled &&
<div className="min-w-3" /> <EncryptionEnabled appState={appState} />}
<DecoratedInput disabled={true} text={tags} right={[checkIcon]} left={[tagIcon]} />
</div>
<div className="flex flex-row" >
<DecoratedInput disabled={true} text={archived} right={[checkIcon]} left={[archiveIcon]} />
<div className="min-w-3" />
<DecoratedInput disabled={true} text={deleted} right={[checkIcon]} left={[trashIcon]} />
</div>
</PreferencesSegment> </PreferencesSegment>
</PreferencesGroup> </PreferencesGroup>
); );