Skip to content

Commit a808b6b

Browse files
rrrooommmaaaTom J
rrrooommmaaa
and
Tom J
authored
issue #4201 replaced signature info with badge, also added encryption badge (#4203)
* replaced signature info with badge * removed ttf support * lint fix * test fix * fixed output * removed RTL tuning * lint fix * removed RTL signature tests * encryption badge * updated badges tests * better styling * update badges css Co-authored-by: Tom J <[email protected]>
1 parent 85bcd1d commit a808b6b

File tree

14 files changed

+175
-128
lines changed

14 files changed

+175
-128
lines changed

‎build.sh‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ set -euxo pipefail
77
shopt -s globstar
88

99
if [[ "$#" == 1 ]] && [[ "$1" == "--assets-only" ]]; then # only build static assets, without re-building TS
10-
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,ttf,woff2,png,svg,txt} ../build/chrome-enterprise )
11-
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,ttf,woff2,png,svg,txt} ../build/chrome-consumer )
12-
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,ttf,woff2,png,svg,txt} ../build/firefox-consumer )
10+
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,woff2,png,svg,txt} ../build/chrome-enterprise )
11+
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,woff2,png,svg,txt} ../build/chrome-consumer )
12+
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,woff2,png,svg,txt} ../build/firefox-consumer )
1313
exit 0
1414
fi
1515

@@ -71,7 +71,7 @@ cp node_modules/bootstrap/dist/css/bootstrap.min.css $OUTDIR/lib/bootstrap/boots
7171
# WARN: the steps above are not working as of forge 0.10.0 due to eval/CSP mentioned here: https://github.com/digitalbazaar/forge/issues/814
7272

7373
# remaining build steps sequentially
74-
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,ttf,woff2,png,svg,txt} ./{.web-extension-id,manifest.json} ../$OUTDIR )
74+
( cd $SRCDIR && cp -r --parents ./**/*.{js,htm,css,woff2,png,svg,txt} ./{.web-extension-id,manifest.json} ../$OUTDIR )
7575
node ./build/tooling/resolve-modules
7676
node ./build/tooling/fill-values
7777
node ./build/tooling/bundle-content-scripts

‎extension/chrome/elements/pgp_block.htm‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313

1414
<body style="background-color: transparent;">
1515
<div id="pgp_background" class="pgp_secure">
16-
<div id="pgp_signature" data-test="pgp-signature">
17-
<div class="cursive"><span></span></div>
18-
<div class="result"></div>
16+
<div id="pgp_encryption" data-test="pgp-encryption" class="pgp_badge short">
17+
</div>
18+
<div id="pgp_signature" data-test="pgp-signature" class="pgp_badge short">
1919
</div>
2020
<div id="pgp_block" data-test="pgp-block-content">Loading...</div>
2121
</div>

‎extension/chrome/elements/pgp_block_modules/pgp-block-decrypt-module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export class PgpBlockViewDecryptModule {
7676
verificationPubs, async (verificationPubs: string[]) => {
7777
const decryptResult = await decrypt(verificationPubs);
7878
if (!decryptResult.success) {
79-
return undefined; // note: this internal error results in a wrong "Message Not Signed" badge
79+
return undefined; // note: this internal error results in a wrong "Not Signed" badge
8080
} else {
8181
return decryptResult.signature;
8282
}

‎extension/chrome/elements/pgp_block_modules/pgp-block-error-module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export class PgpBlockViewErrorModule {
2222
const showRawMsgPrompt = renderRawMsg ? '<a href="#" class="action_show_raw_pgp_block">show original message</a>' : '';
2323
await this.view.renderModule.renderContent(`<div class="error">${errBoxContent.replace(/\n/g, '<br>')}</div>${showRawMsgPrompt}`, true);
2424
$('.action_show_raw_pgp_block').click(this.view.setHandler(async () => { // this may contain content missing MDC
25+
this.view.renderModule.renderEncryptionStatus('decrypt error: security hazard');
26+
this.view.renderModule.renderSignatureStatus('not signed');
2527
Xss.sanitizeAppend('#pgp_block', `<div class="raw_pgp_block">${Xss.escape(renderRawMsg!)}</div>`); // therefore the .escape is crucial
2628
}));
2729
$('.button.settings_keyserver').click(this.view.setHandler(async () => await Browser.openSettingsPage('index.htm', this.view.acctEmail, '/chrome/settings/modules/keyserver.htm')));

‎extension/chrome/elements/pgp_block_modules/pgp-block-render-module.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { Catch } from '../../../js/common/platform/catch.js';
1010
import { Mime } from '../../../js/common/core/mime.js';
1111
import { MsgBlock } from '../../../js/common/core/msg-block.js';
1212
import { PgpBlockView } from '../pgp_block.js';
13-
import { Str } from '../../../js/common/core/common.js';
1413
import { Ui } from '../../../js/common/browser/ui.js';
1514
import { Xss } from '../../../js/common/platform/xss.js';
1615
import { MsgBlockParser } from '../../../js/common/core/msg-block-parser.js';
@@ -76,9 +75,23 @@ export class PgpBlockViewRenderModule {
7675
}
7776
};
7877

78+
public renderEncryptionStatus = (status: string): JQuery<HTMLElement> => {
79+
return $('#pgp_encryption').addClass(status === 'encrypted' ? 'green_label' : 'red_label').text(status);
80+
};
81+
82+
public renderSignatureStatus = (status: string): JQuery<HTMLElement> => {
83+
return $('#pgp_signature').addClass(status === 'signed' ? 'green_label' : 'red_label').text(status);
84+
};
85+
7986
public decideDecryptedContentFormattingAndRender = async (decryptedBytes: Buf, isEncrypted: boolean, sigResult: VerifyRes | undefined,
8087
verificationPubs: string[], retryVerification: (verificationPubs: string[]) => Promise<VerifyRes | undefined>, plainSubject?: string) => {
81-
this.setFrameColor(isEncrypted ? 'green' : 'gray');
88+
if (isEncrypted) {
89+
this.renderEncryptionStatus('encrypted');
90+
this.setFrameColor('green');
91+
} else {
92+
this.renderEncryptionStatus('not encrypted');
93+
this.setFrameColor('gray');
94+
}
8295
const publicKeys: string[] = [];
8396
let renderableAttachments: Attachment[] = [];
8497
let decryptedContent = decryptedBytes.toUtfStr();
@@ -116,9 +129,6 @@ export class PgpBlockViewRenderModule {
116129
}
117130
}
118131
await this.view.quoteModule.separateQuotedContentAndRenderText(decryptedContent, isHtml);
119-
if (Str.mostlyRTL(Xss.htmlSanitizeAndStripAllTags(decryptedContent, '\n'))) {
120-
$('#pgp_signature').addClass('rtl');
121-
}
122132
await this.view.signatureModule.renderPgpSignatureCheckResult(sigResult, verificationPubs, retryVerification);
123133
if (isEncrypted && publicKeys.length) {
124134
BrowserMsg.send.renderPublicKeys(this.view.parentTabId, { afterFrameId: this.view.frameId, publicKeys });

‎extension/chrome/elements/pgp_block_modules/pgp-block-signature-module.ts‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,20 @@ export class PgpBlockViewSignatureModule {
2626
await this.view.decryptModule.initialize(verificationPubs, true);
2727
return;
2828
}
29-
$('#pgp_signature').addClass('bad');
30-
$('#pgp_signature > .result').text(verifyRes.error);
29+
this.view.renderModule.renderSignatureStatus(`error verifying signature: ${verifyRes.error}`);
3130
this.view.renderModule.setFrameColor('red');
3231
} else if (!verifyRes || !verifyRes.signerLongids.length) {
33-
$('#pgp_signature').addClass('bad');
34-
$('#pgp_signature > .cursive').remove();
35-
$('#pgp_signature > .result').text('Message Not Signed');
32+
this.view.renderModule.renderSignatureStatus('not signed');
3633
} else if (verifyRes.match) {
37-
$('#pgp_signature').addClass('good');
38-
$('#pgp_signature > .result').text('matching signature');
34+
this.view.renderModule.renderSignatureStatus('signed');
3935
} else {
4036
if (retryVerification) {
4137
const signerEmail = this.view.getExpectedSignerEmail();
4238
if (!signerEmail) {
4339
// in some tests we load the block without sender information
44-
$('#pgp_signature').addClass('bad').find('.result').text(`Cannot verify: missing pubkey, missing sender info`);
40+
this.view.renderModule.renderSignatureStatus('could not verify signature: missing pubkey, missing sender info');
4541
} else {
46-
$('#pgp_signature > .result').text('Verifying message...');
42+
$('#pgp_signature').addClass('gray_label').text('verifying signature...');
4743
try {
4844
const { pubkeys } = await this.view.pubLookup.lookupEmail(signerEmail);
4945
if (pubkeys.length) {
@@ -55,9 +51,9 @@ export class PgpBlockViewSignatureModule {
5551
} catch (e) {
5652
if (ApiErr.isSignificant(e)) {
5753
Catch.reportErr(e);
58-
$('#pgp_signature').addClass('bad').find('.result').text(`Could not load sender's pubkey due to an error.`);
54+
this.view.renderModule.renderSignatureStatus(`error verifying signature: ${e}`);
5955
} else {
60-
$('#pgp_signature').addClass('bad').find('.result').text(`Could not look up sender's pubkey due to network error, click to retry.`).click(
56+
this.view.renderModule.renderSignatureStatus('error verifying signature: offline, click to retry').click(
6157
this.view.setHandler(() => window.location.reload()));
6258
}
6359
}
@@ -66,25 +62,16 @@ export class PgpBlockViewSignatureModule {
6662
this.renderMissingPubkeyOrBadSignature(verifyRes);
6763
}
6864
}
69-
if (verifyRes) {
70-
this.setSigner(verifyRes);
71-
}
7265
this.view.renderModule.doNotSetStateAsReadyYet = false;
7366
Ui.setTestState('ready');
7467
};
7568

76-
private setSigner = (signature: VerifyRes): void => {
77-
const signerEmail = signature.match ? this.view.getExpectedSignerEmail() : undefined;
78-
$('#pgp_signature > .cursive > span').text(signerEmail || 'Unknown Signer');
79-
};
80-
8169
private renderMissingPubkey = (signerLongid: string) => {
82-
$('#pgp_signature').addClass('bad').find('.result').text(`Missing pubkey ${signerLongid}`);
70+
this.view.renderModule.renderSignatureStatus(`could not verify signature: missing pubkey ${signerLongid}`);
8371
};
8472

8573
private renderBadSignature = () => {
86-
$('#pgp_signature').addClass('bad');
87-
$('#pgp_signature > .result').text('signature does not match');
74+
this.view.renderModule.renderSignatureStatus('bad signature');
8875
this.view.renderModule.setFrameColor('red'); // todo: in what other cases should we set the frame red?
8976
};
9077

‎extension/css/cryptup.css‎

Lines changed: 11 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
11
/* © 2016-2018 FlowCrypt Limited. Limitations apply. Contact [email protected] */
22

3-
@font-face {
4-
font-family: signature;
5-
src: url('/fonts/Tangerine_Regular.ttf');
6-
}
7-
8-
@font-face {
9-
font-family: signature;
10-
src: url('/fonts/Tangerine_Bold.ttf');
11-
font-weight: bold;
12-
}
13-
143
.button {
154
text-transform: uppercase;
165
display: inline-block;
@@ -75,6 +64,7 @@ span.gray { color: #b7b7b7; }
7564
cursor: pointer;
7665
}
7766

67+
.gray_label,
7868
.green_label,
7969
.orange_label,
8070
.red_label {
@@ -88,10 +78,16 @@ span.gray { color: #b7b7b7; }
8878
margin-right: 10px;
8979
}
9080

81+
.gray_label.short,
9182
.green_label.short,
9283
.orange_label.short,
9384
.red_label.short { min-width: 0; }
9485

86+
.gray_label {
87+
color: white !important;
88+
background-color: #b7b7b7;
89+
}
90+
9591
.green_label {
9692
color: white !important;
9793
background-color: #31a217;
@@ -1305,39 +1301,16 @@ td {
13051301
height: 37px;
13061302
}
13071303

1308-
#pgp_signature {
1309-
max-width: 300px;
1310-
float: right;
1311-
text-align: right;
1312-
opacity: 0.5;
1313-
margin-left: 1em;
1314-
}
1315-
1316-
#pgp_signature.rtl {
1317-
float: left;
1318-
text-align: left;
1319-
margin-left: 0;
1320-
margin-right: 1em;
1321-
}
1322-
1323-
#pgp_signature > .cursive {
1324-
font-family: signature; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
1325-
font-size: 24px;
1326-
font-weight: bold;
1304+
.pgp_badge {
1305+
opacity: 1;
1306+
margin-bottom: 1em;
13271307
}
13281308

1329-
#pgp_signature > .result {
1309+
.pgp_badge > .result {
13301310
font-size: 10px;
13311311
font-family: monospace;
13321312
}
13331313

1334-
#pgp_signature.neutral,
1335-
#pgp_signature.bad,
1336-
#pgp_signature:hover { opacity: 1; }
1337-
#pgp_signature.neutral > .cursive { border-bottom: 1px dotted #b7b7b7; }
1338-
#pgp_signature.bad > .cursive { border-bottom: 1px dotted #a44; }
1339-
#pgp_signature.good > .cursive { border-bottom: 1px dotted #088447; }
1340-
13411314
#pgp_block.pgp_pubkey { padding-top: 7px; }
13421315
#pgp_block.pgp_pubkey .line { margin: 0; }
13431316
#pgp_block.pgp_pubkey .add_contact:not(.line) { text-align: center; }

‎extension/fonts/Tangerine_Bold.ttf‎

-64.3 KB
Binary file not shown.

‎extension/fonts/Tangerine_Regular.ttf‎

-59.4 KB
Binary file not shown.

‎extension/js/common/core/crypto/pgp/openpgp-key.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ export class OpenPGPKey {
472472
verifyRes.error = 'FlowCrypt is not equipped to verify this message';
473473
verifyRes.isErrFatal = true; // don't try to re-fetch the message from API
474474
} else if (verifyErr instanceof Error && verifyErr.message.startsWith('Insecure message hash algorithm:')) {
475-
verifyRes.error = `Could not verify message: ${verifyErr.message}. Sender is using old, insecure OpenPGP software.`;
475+
verifyRes.error = `${verifyErr.message}. Sender is using old, insecure OpenPGP software.`;
476476
verifyRes.isErrFatal = true; // don't try to re-fetch the message from API
477477
} else if (verifyErr instanceof Error && verifyErr.message === 'Signature is expired') {
478478
verifyRes.error = verifyErr.message;

0 commit comments

Comments
 (0)