diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 86231d6f1..b1a587f94 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -304,6 +304,10 @@ } } }, + "verificationKeysLoadFail": { + "message": "Failed to load verification keys", + "description": "Displayed on `Show Safety Number` option in conversation screen" + }, "youMarkedAsVerified": { "message": "You marked your Safety Number with $name$ as verified", "description": "Shown in the conversation history when the user marks a contact as verified.", @@ -439,10 +443,10 @@ "description": "Label for a button to accept a new safety number" }, "verify": { - "message": "Mark as verified" + "message": "Mark As Verified" }, "unverify": { - "message": "Mark as not verified" + "message": "Mark As Not Verified" }, "isVerified": { "message": "You have verified your safety number with $name$.", @@ -1688,6 +1692,10 @@ "message": "Play audio notification", "description": "Description for audio notification setting" }, + "safetyNumber": { + "message": "Safety Number", + "description": "Title to the safety number view" + }, "safetyNumberChanged": { "message": "Safety Number has changed", "description": "A notification shown in the conversation when a contact reinstalls" diff --git a/background.html b/background.html index db453bb99..d327aa36f 100644 --- a/background.html +++ b/background.html @@ -186,37 +186,6 @@ - - - - diff --git a/background_test.html b/background_test.html index c6a198b6e..477c49394 100644 --- a/background_test.html +++ b/background_test.html @@ -186,37 +186,6 @@ - - - - diff --git a/images/session/insecure.svg b/images/session/insecure.svg new file mode 100644 index 000000000..d6187cbf0 --- /dev/null +++ b/images/session/insecure.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/session/secure.svg b/images/session/secure.svg new file mode 100644 index 000000000..6c0118f2e --- /dev/null +++ b/images/session/secure.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/background.js b/js/background.js index 2bcb012b3..f384f0d16 100644 --- a/js/background.js +++ b/js/background.js @@ -793,6 +793,7 @@ closeTheme: params.closeTheme || undefined, cancelText: params.cancelText || undefined, hideCancel: params.hideCancel || false, + centeredText: params.centeredText || false, }); confirmDialog.render(); diff --git a/js/conversation_controller.js b/js/conversation_controller.js index 847cff220..49bc9a702 100644 --- a/js/conversation_controller.js +++ b/js/conversation_controller.js @@ -61,8 +61,7 @@ window.getConversationByKey = key => { // Key is pubkey or public chat name - const conversation = - conversations.models.find(conv => conv.id === key); + const conversation = conversations.models.find(conv => conv.id === key); return conversation; }; diff --git a/js/models/conversations.d.ts b/js/models/conversations.d.ts index 137ae18ab..2aa5289af 100644 --- a/js/models/conversations.d.ts +++ b/js/models/conversations.d.ts @@ -1,4 +1,5 @@ interface ConversationAttributes { + profileName?: string; members: Array; left: boolean; expireTimer: number; @@ -24,11 +25,15 @@ export interface ConversationModel options: object ) => void; isPrivate: () => boolean; + isVerified: () => boolean; + toggleVerified: () => Promise; + getProfile: (id: string) => Promise; + getProfiles: () => Promise; setProfileKey: (key: string) => void; isMe: () => boolean; getRecipients: () => Array; + getTitle: () => string; onReadMessage: (message: MessageModel) => void; updateTextInputState: () => void; - lastMessage: string; } diff --git a/js/models/conversations.js b/js/models/conversations.js index 0428683b3..5acb4bf74 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -622,8 +622,6 @@ onClick: () => this.trigger('select', this), onBlockContact: () => this.block(), onUnblockContact: () => this.unblock(), - onChangeNickname: () => this.changeNickname(), - onClearNickname: () => this.setNickname(null), onCopyPublicKey: () => this.copyPublicKey(), onDeleteContact: () => this.deleteContact(), onDeleteMessages: () => this.deleteMessages(), @@ -2136,8 +2134,6 @@ }) ); - console.log(`[vince][unread] Read:`, read); - // Some messages we're marking read are local notifications with no sender read = _.filter(read, m => Boolean(m.sender)); unreadMessages = unreadMessages.filter(m => Boolean(m.isIncoming())); diff --git a/js/views/contact_list_view.js b/js/views/contact_list_view.js deleted file mode 100644 index 106598813..000000000 --- a/js/views/contact_list_view.js +++ /dev/null @@ -1,58 +0,0 @@ -/* global Whisper: false */ -/* global textsecure: false */ - -// eslint-disable-next-line func-names -(function() { - 'use strict'; - - window.Whisper = window.Whisper || {}; - - Whisper.ContactListView = Whisper.ListView.extend({ - tagName: 'div', - itemView: Whisper.View.extend({ - tagName: 'div', - className: 'contact', - templateName: 'contact', - initialize(options) { - this.ourNumber = textsecure.storage.user.getNumber(); - this.listenBack = options.listenBack; - - this.listenTo(this.model, 'change', this.render); - }, - render() { - if (this.contactView) { - this.contactView.remove(); - this.contactView = null; - } - - const isMe = this.ourNumber === this.model.id; - - this.contactView = new Whisper.ReactWrapperView({ - className: 'contact-wrapper', - Component: window.Signal.Components.ContactListItem, - props: { - isMe, - color: this.model.getColor(), - avatarPath: this.model.getAvatarPath(), - phoneNumber: this.model.getNumber(), - name: this.model.getName(), - profileName: this.model.getProfileName(), - verified: this.model.isVerified(), - onClick: this.showIdentity.bind(this), - }, - }); - this.$el.append(this.contactView.el); - return this; - }, - showIdentity() { - if (this.model.id === this.ourNumber) { - return; - } - const view = new Whisper.KeyVerificationPanelView({ - model: this.model, - }); - this.listenBack(view); - }, - }), - }); -})(); diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 10eae6816..ca70749ee 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -222,12 +222,6 @@ onUnblockUser: () => { this.model.unblock(); }, - onChangeNickname: () => { - this.model.changeNickname(); - }, - onClearNickname: () => { - this.model.setNickname(null); - }, onCopyPublicKey: () => { this.model.copyPublicKey(); }, @@ -235,9 +229,6 @@ this.unload('archive'); this.model.setArchived(true); }, - onMoveToInbox: () => { - this.model.setArchived(false); - }, onLeaveGroup: () => { window.Whisper.events.trigger('leaveGroup', this.model); }, @@ -1264,22 +1255,6 @@ }); }, - showSafetyNumber(providedModel) { - let model = providedModel; - - if (!model && this.model.isPrivate()) { - // eslint-disable-next-line prefer-destructuring - model = this.model; - } - if (model) { - const view = new Whisper.KeyVerificationPanelView({ - model, - }); - this.listenBack(view); - this.updateHeader(); - } - }, - // THIS DOES NOT DOWNLOAD ANYTHING! downloadAttachment({ attachment, message, isDangerous }) { if (isDangerous) { diff --git a/js/views/key_verification_view.js b/js/views/key_verification_view.js deleted file mode 100644 index af4965cce..000000000 --- a/js/views/key_verification_view.js +++ /dev/null @@ -1,138 +0,0 @@ -/* global Whisper, textsecure, QRCode, dcodeIO, libsignal, i18n, _ */ - -/* eslint-disable more/no-then */ - -// eslint-disable-next-line func-names -(function() { - 'use strict'; - - window.Whisper = window.Whisper || {}; - - Whisper.KeyVerificationPanelView = Whisper.View.extend({ - className: 'key-verification panel', - templateName: 'key-verification', - events: { - 'click button.verify': 'toggleVerified', - }, - initialize(options) { - this.ourNumber = textsecure.storage.user.getNumber(); - if (options.newKey) { - this.theirKey = options.newKey; - } - - this.loadKeys().then(() => { - this.listenTo(this.model, 'change', this.render); - }); - }, - loadKeys() { - return Promise.all([this.loadTheirKey(), this.loadOurKey()]) - .then(this.generateSecurityNumber.bind(this)) - .then(this.render.bind(this)); - // .then(this.makeQRCode.bind(this)); - }, - makeQRCode() { - // Per Lilia: We can't turn this on until it generates a Latin1 string, as is - // required by the mobile clients. - new QRCode(this.$('.qr')[0]).makeCode( - dcodeIO.ByteBuffer.wrap(this.ourKey).toString('base64') - ); - }, - loadTheirKey() { - return textsecure.storage.protocol - .loadIdentityKey(this.model.id) - .then(theirKey => { - this.theirKey = theirKey; - }); - }, - loadOurKey() { - return textsecure.storage.protocol - .loadIdentityKey(this.ourNumber) - .then(ourKey => { - this.ourKey = ourKey; - }); - }, - generateSecurityNumber() { - return new libsignal.FingerprintGenerator(5200) - .createFor(this.ourNumber, this.ourKey, this.model.id, this.theirKey) - .then(securityNumber => { - this.securityNumber = securityNumber; - }); - }, - onSafetyNumberChanged() { - this.model.getProfiles().then(this.loadKeys.bind(this)); - - window.confirmationDialog({ - title: i18n('changedSinceVerifiedTitle'), - message: i18n('changedRightAfterVerify', [ - this.model.getTitle(), - this.model.getTitle(), - ]), - hideCancel: true, - }); - }, - toggleVerified() { - this.$('button.verify').attr('disabled', true); - this.model - .toggleVerified() - .catch(result => { - if (result instanceof Error) { - if (result.name === 'OutgoingIdentityKeyError') { - this.onSafetyNumberChanged(); - } else { - window.log.error( - 'failed to toggle verified:', - result && result.stack ? result.stack : result - ); - } - } else { - const keyError = _.some( - result.errors, - error => error.name === 'OutgoingIdentityKeyError' - ); - if (keyError) { - this.onSafetyNumberChanged(); - } else { - _.forEach(result.errors, error => { - window.log.error( - 'failed to toggle verified:', - error && error.stack ? error.stack : error - ); - }); - } - } - }) - .then(() => { - this.$('button.verify').removeAttr('disabled'); - }); - }, - render_attributes() { - const s = this.securityNumber; - const chunks = []; - for (let i = 0; i < s.length; i += 5) { - chunks.push(s.substring(i, i + 5)); - } - const name = this.model.getTitle(); - const yourSafetyNumberWith = i18n( - 'yourSafetyNumberWith', - this.model.getTitle() - ); - const isVerified = this.model.isVerified(); - const verifyButton = isVerified ? i18n('unverify') : i18n('verify'); - const verifiedStatus = isVerified - ? i18n('isVerified', name) - : i18n('isNotVerified', name); - - return { - learnMore: i18n('learnMore'), - theirKeyUnknown: i18n('theirIdentityUnknown'), - yourSafetyNumberWith, - verifyHelp: i18n('verifyHelp', this.model.getTitle()), - verifyButton, - hasTheirKey: this.theirKey !== undefined, - chunks, - isVerified, - verifiedStatus, - }; - }, - }); -})(); diff --git a/password_preload.js b/password_preload.js index d499b1609..bd18b92db 100644 --- a/password_preload.js +++ b/password_preload.js @@ -32,7 +32,7 @@ window.Signal = { Components: { SessionPasswordPrompt, }, -} +}; window.CONSTANTS = { MAX_LOGIN_TRIES: 3, diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index cd38fc474..30ef2c0f5 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -67,77 +67,6 @@ background-color: $color-white; } -.key-verification { - label { - display: block; - margin: 10px 0; - font-size: $font-size-small; - } - - .icon { - height: 1.25em; - width: 1.25em; - vertical-align: text-bottom; - display: inline-block; - - &.verified { - @include color-svg('../images/verified-check.svg', $color-light-90); - } - &.shield { - @include color-svg('../images/shield.svg', $color-light-90); - } - } - - .key, - .placeholder { - padding: 0 1em; - -webkit-user-select: text; - } - .key { - font-family: monospace; - padding: 10px; - margin: 20px auto 20px auto; - width: 16em; - background: $grey_l; - border: solid 1px $grey_l2; - border-radius: $border-radius; - } - .placeholder { - font-weight: bold; - } - .qr { - border-radius: 200px; - border: solid 1px $grey_l2; - width: 150px; - height: 150px; - text-align: center; - padding: 25px; - margin: 10px auto; - canvas { - display: none; - } - img { - display: inline-block; - max-width: 100%; - } - } - - .summary { - margin: 30px 0 10px; - text-align: center; - } - - div.verify { - text-align: center; - } - button.verify { - border-radius: 5px; - font-weight: bold; - padding: 10px; - margin: 0; - } -} - .message-container, .message-list { list-style: none; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 6efd87566..57e38e68b 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -30,6 +30,10 @@ div.spacer-lg { width: 100%; } +.break-word { + word-break: break-all; +} + input, textarea { caret-color: $session-color-green !important; @@ -643,12 +647,6 @@ label { } &__secret-words { - display: flex; - flex-direction: column; - align-items: center; - background-color: $session-shade-6; - padding: $session-margin-sm $session-margin-lg; - border-radius: 3px; margin-bottom: $session-margin-md; } } @@ -1626,3 +1624,75 @@ input { pointer-events: none; } } + +.session-info-box { + display: flex; + flex-direction: column; + align-items: center; + background-color: $session-shade-6; + padding: $session-margin-sm $session-margin-lg; + border-radius: 4px; +} + +/* ************************************* */ +/* KEY VERIFICATION VIEW (SAFETY NUMBER) */ +/* ************************************* */ + +.key-verification { + display: flex; + flex-direction: column; + align-items: center; + padding-top: $session-margin-lg; + text-align: center; + + &__header { + word-break: break-all; + + h2 { + margin-bottom: 0px; + } + + small { + margin-top: -25px; + opacity: 0.6; + } + } + + &__key { + font-family: $session-font-mono; + margin: 30px 0; + width: 250px; + } + + &__is-verified { + display: flex; + flex-direction: column; + align-items: center; + font-size: $session-font-md; + margin: 30px 0; + + & > span { + svg { + min-width: 30px; + margin-right: 10px; + } + + height: 50px; + display: inline-flex; + align-items: center; + } + + .session-button { + margin: 20px 0; + width: 100%; + } + } + + .session-loader { + margin-top: $session-margin-md; + } +} + +/* ************************************* */ +/* ************************************* */ +/* ************************************* */ diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index f39aae1e7..858ea41eb 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -132,12 +132,47 @@ $composition-container-height: 60px; background-color: $session-shade-2; } +.conversation-content { + display: flex; + flex-grow: 1; + flex-direction: column; + position: relative; + background-color: $session-background; + + .conversation-messages { + display: flex; + flex-direction: column; + flex-grow: 1; + position: absolute; + height: 100%; + width: 100%; + background-color: inherit; + } + + .conversation-info-panel { + position: absolute; + justify-content: flex-start; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; + z-index: 10; + background-color: inherit; + display: none; + padding: 20px; + + &.show { + display: flex; + } + } +} + .messages-wrapper { display: flex; flex-grow: 1; flex-direction: column; position: relative; - height: 0px; + height: 100%; &--blocking-overlay { background-color: rgba(0, 0, 0, 0.8); @@ -213,10 +248,12 @@ $composition-container-height: 60px; } .send-message-input { + cursor: text; display: flex; align-items: center; flex-grow: 1; min-height: $composition-container-height; + padding: $session-margin-md 0; textarea { font-family: $session-font-default; @@ -467,7 +504,7 @@ $rhap_font-family: inherit !default; transition: fill $session-transition-duration; &:hover path { - fill: #FFFFFF; + fill: #ffffff; } } } @@ -533,7 +570,7 @@ $rhap_font-family: inherit !default; margin-left: -10px; background: $session-color-green; box-shadow: none; - box-shadow: rgba($rhap_theme-color, .5) 0 0 5px; + box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px; } .rhap_controls-section { diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 03ccccc3f..824240f91 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -77,13 +77,7 @@ padding-top: 20px; &__secret-words { - display: flex; - flex-direction: column; - align-items: center; - background-color: $session-shade-6; - padding: $session-margin-sm $session-margin-lg; border-radius: 8px; - margin-bottom: 0px; label { margin-bottom: 5px; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 8455d6257..9926d782f 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -15,24 +15,6 @@ body.dark-theme { background-color: $color-gray-95; } - .key-verification { - .key { - color: $color-dark-05; - background: $color-dark-85; - border: solid 1px $color-dark-60; - border-radius: $border-radius; - } - - .icon { - &.verified { - @include color-svg('../images/verified-check.svg', $color-dark-05); - } - &.shield { - @include color-svg('../images/shield.svg', $color-dark-05); - } - } - } - .bottom-bar { form.send { &.video-attachment { @@ -729,9 +711,9 @@ body.dark-theme { } .module-message__text { - color: #FFFFFF; + color: #ffffff; a { - color: #FFFFFF; + color: #ffffff; } } diff --git a/test/index.html b/test/index.html index 7e9022a49..1cc16c31c 100644 --- a/test/index.html +++ b/test/index.html @@ -203,37 +203,6 @@ - - - - diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 72254409c..d9043f849 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -52,8 +52,6 @@ type PropsHousekeeping = { onDeleteMessages?: () => void; onDeleteContact?: () => void; onBlockContact?: () => void; - onChangeNickname?: () => void; - onClearNickname?: () => void; onCopyPublicKey?: () => void; onUnblockContact?: () => void; }; @@ -166,8 +164,6 @@ export class ConversationListItem extends React.PureComponent { onDeleteContact, onDeleteMessages, onBlockContact, - onChangeNickname, - onClearNickname, onCopyPublicKey, onUnblockContact, } = this.props; @@ -180,14 +176,6 @@ export class ConversationListItem extends React.PureComponent { {!isPublic && !isRss && !isMe ? ( {blockTitle} ) : null} - {/* {!isPublic && !isRss && !isMe ? ( - - {i18n('changeNickname')} - - ) : null} */} - {!isPublic && !isRss && !isMe && hasNickname ? ( - {i18n('clearNickname')} - ) : null} {!isPublic && !isRss ? ( {i18n('copyPublicKey')} ) : null} diff --git a/ts/components/DevicePairingDialog.tsx b/ts/components/DevicePairingDialog.tsx index c15604d88..8c5079d74 100644 --- a/ts/components/DevicePairingDialog.tsx +++ b/ts/components/DevicePairingDialog.tsx @@ -4,6 +4,7 @@ import { QRCode } from 'react-qr-svg'; import { SessionModal } from './session/SessionModal'; import { SessionButton, SessionButtonColor } from './session/SessionButton'; import { SessionSpinner } from './session/SessionSpinner'; +import classNames from 'classnames'; interface Props { onClose: any; @@ -119,7 +120,12 @@ export class DevicePairingDialog extends React.Component { {this.renderErrors()} -
+
{secretWords}
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 30c6ba7b7..8d050d146 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -73,7 +73,6 @@ interface Props { onCloseOverlay: () => void; onDeleteSelectedMessages: () => void; - onMoveToInbox: () => void; onShowSafetyNumber: () => void; onShowAllMedia: () => void; onShowGroupMembers: () => void; @@ -82,9 +81,6 @@ interface Props { onBlockUser: () => void; onUnblockUser: () => void; - onClearNickname: () => void; - onChangeNickname: () => void; - onCopyPublicKey: () => void; onLeaveGroup: () => void; diff --git a/ts/components/conversation/CreateGroupDialog.tsx b/ts/components/conversation/CreateGroupDialog.tsx index e4e9a0e28..517eade0e 100644 --- a/ts/components/conversation/CreateGroupDialog.tsx +++ b/ts/components/conversation/CreateGroupDialog.tsx @@ -103,7 +103,9 @@ export class CreateGroupDialog extends React.Component { >
- {this.state.errorDisplayed &&

{this.state.errorMessage}

} + {this.state.errorDisplayed && ( +

{this.state.errorMessage}

+ )} {
{this.renderEnterSessionID(!this.state.secretWords)} {this.state.secretWords && ( -
+
{this.state.secretWords}
diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 859e856c8..4dda4dd43 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { SessionModal } from './SessionModal'; import { SessionButton, SessionButtonColor } from './SessionButton'; +import classNames from 'classnames'; interface Props { message: string; @@ -15,6 +16,7 @@ interface Props { hideCancel: boolean; okTheme: SessionButtonColor; closeTheme: SessionButtonColor; + centeredText?: boolean; } export class SessionConfirm extends React.Component { @@ -40,6 +42,7 @@ export class SessionConfirm extends React.Component { onClickOk, onClickClose, hideCancel, + centeredText, } = this.props; const okText = this.props.okText || window.i18n('ok'); @@ -63,7 +66,12 @@ export class SessionConfirm extends React.Component {
{message} {messageSub && ( - + {messageSub} )} diff --git a/ts/components/session/SessionKeyVerification.tsx b/ts/components/session/SessionKeyVerification.tsx new file mode 100644 index 000000000..a7466a9c9 --- /dev/null +++ b/ts/components/session/SessionKeyVerification.tsx @@ -0,0 +1,248 @@ +import React from 'react'; +import * as _ from 'lodash'; + +import { + SessionButton, + SessionButtonColor, + SessionButtonType, +} from './SessionButton'; +import { UserUtil } from '../../util'; +import { MultiDeviceProtocol } from '../../session/protocols'; +import { PubKey } from '../../session/types'; +import { ConversationModel } from '../../../js/models/conversations'; +import { SessionSpinner } from './SessionSpinner'; +import classNames from 'classnames'; +import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; + +interface Props { + conversation: ConversationModel; +} + +interface State { + loading: boolean; + error?: 'verificationKeysLoadFail'; + securityNumber?: string; + isVerified?: boolean; +} + +export class SessionKeyVerification extends React.Component { + constructor(props: any) { + super(props); + + this.state = { + loading: true, + error: undefined, + securityNumber: undefined, + isVerified: this.props.conversation.isVerified(), + }; + + this.toggleVerification = this.toggleVerification.bind(this); + this.onSafetyNumberChanged = this.onSafetyNumberChanged.bind(this); + } + + public async componentWillMount() { + const securityNumber = await this.generateSecurityNumber(); + + if (!securityNumber) { + this.setState({ + error: 'verificationKeysLoadFail', + }); + return; + } + + // Finished loading + this.setState({ + loading: false, + securityNumber, + }); + } + + public render() { + const theirName = this.props.conversation.attributes.profileName; + const theirPubkey = this.props.conversation.id; + const isVerified = this.props.conversation.isVerified(); + + if (this.state.loading) { + return ( +
+ +
+ ); + } + + const verificationIconColor = isVerified ? '#00f782' : '#ff453a'; + const verificationButtonColor = isVerified + ? SessionButtonColor.Warning + : SessionButtonColor.Success; + const verificationButton = ( + + {window.i18n(isVerified ? 'unverify' : 'verify')} + + ); + + return ( +
+ {this.state.error ? ( +

{window.i18n(this.state.error)}

+ ) : ( + <> +
+

{window.i18n('safetyNumber')}

+ {theirPubkey} +
+ +
+ {this.renderSecurityNumber()} +
+ +
+ {window.i18n('verifyHelp', theirName)} +
+ +
+ + + {window.i18n( + isVerified ? 'isVerified' : 'isNotVerified', + theirName + )} + + + {verificationButton} +
+ + )} +
+ ); + } + + public async onSafetyNumberChanged() { + const conversationModel = this.props.conversation; + await conversationModel.getProfiles(); + + const securityNumber = await this.generateSecurityNumber(); + this.setState({ securityNumber }); + + window.confirmationDialog({ + title: window.i18n('changedSinceVerifiedTitle'), + message: window.i18n('changedRightAfterVerify', [ + conversationModel.attributes.profileName, + conversationModel.attributes.profileName, + ]), + hideCancel: true, + centeredText: true, + }); + } + + private async generateSecurityNumber(): Promise { + const ourDeviceKey = await UserUtil.getCurrentDevicePubKey(); + + if (!ourDeviceKey) { + this.setState({ + error: 'verificationKeysLoadFail', + }); + return; + } + + const conversationId = this.props.conversation.id; + const ourPrimaryKey = ( + await MultiDeviceProtocol.getPrimaryDevice(PubKey.cast(ourDeviceKey)) + ).key; + + // Grab identity keys + const ourIdentityKey = await window.textsecure.storage.protocol.loadIdentityKey( + ourPrimaryKey + ); + const theirIdentityKey = await window.textsecure.storage.protocol.loadIdentityKey( + this.props.conversation.id + ); + + if (!ourIdentityKey || !theirIdentityKey) { + return; + } + + // Generate security number + const fingerprintGenerator = new window.libsignal.FingerprintGenerator( + 5200 + ); + return fingerprintGenerator.createFor( + ourPrimaryKey, + ourIdentityKey, + conversationId, + theirIdentityKey + ); + } + + private async toggleVerification() { + const conversationModel = this.props.conversation; + + try { + await conversationModel.toggleVerified(); + this.setState({ isVerified: !this.state.isVerified }); + + await conversationModel.getProfiles(); + } catch (e) { + if (e instanceof Error) { + if (e.name === 'OutgoingIdentityKeyError') { + await this.onSafetyNumberChanged(); + } else { + window.log.error( + 'failed to toggle verified:', + e && e.stack ? e.stack : e + ); + } + } else { + const keyError = _.some( + e.errors, + error => error.name === 'OutgoingIdentityKeyError' + ); + if (keyError) { + await this.onSafetyNumberChanged(); + } else { + _.forEach(e.errors, error => { + window.log.error( + 'failed to toggle verified:', + error && error.stack ? error.stack : error + ); + }); + } + } + } + } + + private renderSecurityNumber(): Array | undefined { + // Turns 32813902154726601686003948952478 ... + // into 32813 90215 47266 ... + const { loading, securityNumber } = this.state; + + if (loading) { + return; + } + + const securityNumberChunks = _.chunk( + Array.from(securityNumber ?? []), + 5 + ).map(chunk => chunk.join('')); + const securityNumberLines = _.chunk(securityNumberChunks, 4).map(chunk => + chunk.join(' ') + ); + + const securityNumberElement = securityNumberLines.map(line => ( +
{line}
+ )); + return securityNumberElement; + } +} diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index b3312b7a5..1d482a6f2 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -178,7 +178,11 @@ export class SessionCompositionBox extends React.Component { onClick={this.onLoadVoiceNoteView} /> -
+
{ // Focus the textarea when user clicks anywhere in the composition box this.textarea.current?.focus(); } - } diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 5c77514eb..c6c52039c 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -18,10 +18,11 @@ import { SessionGroupSettings } from './SessionGroupSettings'; import { ResetSessionNotification } from '../../conversation/ResetSessionNotification'; import { Constants, getMessageQueue } from '../../../session'; import { MessageQueue } from '../../../session/sending'; +import { SessionKeyVerification } from '../SessionKeyVerification'; interface State { conversationKey: string; - + // Message sending progress messageProgressVisible: boolean; sendingProgress: number; @@ -45,6 +46,9 @@ interface State { showOptionsPane: boolean; showScrollButton: boolean; + // For displaying `More Info` on messages, and `Safety Number`, etc. + infoViewState?: 'safetyNumber' | 'messageDetails'; + // dropZoneFiles?: FileList dropZoneFiles: any; } @@ -82,6 +86,8 @@ export class SessionConversation extends React.Component { showOptionsPane: false, showScrollButton: false, + infoViewState: undefined, + dropZoneFiles: undefined, // <-- FileList or something else? }; @@ -184,6 +190,9 @@ export class SessionConversation extends React.Component { !conversationModel.isPrivate() && !conversationModel.isRss(); const groupSettingsProps = this.getGroupSettingsProps(); + const showSafetyNumber = this.state.infoViewState === 'safetyNumber'; + const showMessageDetails = this.state.infoViewState === 'messageDetails'; + return ( <>
{ resetProgress={this.resetSendingProgress} /> */} -
- {loading &&
} - +
- {this.renderMessages()} -
+ {showSafetyNumber && ( + + )} + {showMessageDetails && <> }
- - {showRecordingView && ( -
- )} +
+
+ {loading &&
} + +
+ {this.renderMessages()} +
+
+ + + {showRecordingView && ( +
+ )} +
+ + {!isRss && ( + + )} +
- - {!isRss && ( - - )}
{shouldRenderGroupSettings && ( @@ -311,55 +336,7 @@ export class SessionConversation extends React.Component { public renderHeader() { const headerProps = this.getHeaderProps(); - return ( - - ); + return ; } public renderMessage( @@ -454,6 +431,7 @@ export class SessionConversation extends React.Component { const members = conversation.get('members') || []; const headerProps = { + i18n: window.i18n, id: conversation.id, name: conversation.getName(), phoneNumber: conversation.getNumber(), @@ -476,9 +454,7 @@ export class SessionConversation extends React.Component { selectedMessages: this.state.selectedMessages, isKickedFromGroup: conversation.get('isKickedFromGroup'), expirationSettingName, - showBackButton: Boolean( - conversation.panels && conversation.panels.length - ), + showBackButton: Boolean(this.state.infoViewState), timerOptions: window.Whisper.ExpirationTimerOptions.map((item: any) => ({ name: item.getName(), value: item.get('seconds'), @@ -495,11 +471,14 @@ export class SessionConversation extends React.Component { conversation.endSession(); }, - // These are view only and don't update the Conversation model, so they - // need a manual update call. onShowSafetyNumber: () => { - conversation.showSafetyNumber(); + this.setState({ infoViewState: 'safetyNumber' }); + }, + + onGoBack: () => { + this.setState({ infoViewState: undefined }); }, + onShowAllMedia: async () => { conversation.updateHeader(); }, @@ -507,11 +486,7 @@ export class SessionConversation extends React.Component { conversation.onUpdateGroupName(); }, onShowGroupMembers: async () => { - await conversation.showMembers(); - conversation.updateHeader(); - }, - onGoBack: () => { - conversation.resetPanel(); + window.Whisper.events.trigger('updateGroupMembers', conversation); conversation.updateHeader(); }, @@ -521,24 +496,14 @@ export class SessionConversation extends React.Component { onUnblockUser: () => { conversation.unblock(); }, - onChangeNickname: () => { - conversation.changeNickname(); - }, - onClearNickname: () => { - conversation.setNickname(null); - }, onCopyPublicKey: () => { conversation.copyPublicKey(); }, - onMoveToInbox: () => { - conversation.setArchived(false); - }, onLeaveGroup: () => { window.Whisper.events.trigger('leaveGroup', conversation); }, onInviteContacts: () => { - // VINCE TODO: Inviting contacts ⚡️ - return; + window.Whisper.events.trigger('inviteContacts', conversation); }, onAddModerators: () => { @@ -654,7 +619,6 @@ export class SessionConversation extends React.Component { public onMessageSuccess() { this.updateSendingProgress(100, 2); - } public onMessageFailure() { diff --git a/ts/components/session/conversation/SessionEmojiPanel.tsx b/ts/components/session/conversation/SessionEmojiPanel.tsx index 2a74e696e..fc9b87a27 100644 --- a/ts/components/session/conversation/SessionEmojiPanel.tsx +++ b/ts/components/session/conversation/SessionEmojiPanel.tsx @@ -27,9 +27,7 @@ export class SessionEmojiPanel extends React.Component { return (
- './images/emoji/emoji-sheet-twitter-32.png' - } + backgroundImageFn={() => './images/emoji/emoji-sheet-twitter-32.png'} set={'twitter'} sheetSize={32} darkMode={true} diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index b0c862b00..c27f7f384 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -417,8 +417,6 @@ export class SessionRecording extends React.Component { } private onSendVoiceMessage() { - console.log(`[vince][mic] Sending voice message to composition box1`); - const audioBlob = this.state.mediaBlob.data; if (!audioBlob) { return; @@ -711,10 +709,9 @@ export class SessionRecording extends React.Component { }); } - private onKeyDown(event: any) { + private async onKeyDown(event: any) { if (event.key === 'Escape') { - // FIXME VINCE: Add SessionConfirm - this.onDeleteVoiceMessage(); + await this.onDeleteVoiceMessage(); } } } diff --git a/ts/state/ducks/messages.ts b/ts/state/ducks/messages.ts index 32ab4a8ba..cb5bd2e3f 100644 --- a/ts/state/ducks/messages.ts +++ b/ts/state/ducks/messages.ts @@ -1,4 +1,3 @@ -export const reducer = (state: any, action: any) => { - console.log(`[vince][redux] Action: `, action); +export const reducer = (state: any, _action: any) => { return state; }; diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 562ccbc94..82cf37a0b 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -381,15 +381,6 @@ "updated": "2018-09-19T21:59:32.770Z", "reasonDetail": "Protected from arbitrary input" }, - { - "rule": "jQuery-append(", - "path": "js/views/contact_list_view.js", - "line": " this.$el.append(this.contactView.el);", - "lineNumber": 44, - "reasonCategory": "usageTrusted", - "updated": "2018-10-02T21:18:39.026Z", - "reasonDetail": "Operating on previously-existing DOM elements" - }, { "rule": "jQuery-$(", "path": "js/views/debug_log_view.js", @@ -740,50 +731,6 @@ "updated": "2018-09-19T21:59:32.770Z", "reasonDetail": "Protected from arbitrary input" }, - { - "rule": "jQuery-$(", - "path": "js/views/key_verification_view.js", - "line": " new QRCode(this.$('.qr')[0]).makeCode(", - "lineNumber": 36, - "reasonCategory": "usageTrusted", - "updated": "2018-09-19T21:59:32.770Z", - "reasonDetail": "Protected from arbitrary input" - }, - { - "rule": "jQuery-wrap(", - "path": "js/views/key_verification_view.js", - "line": " dcodeIO.ByteBuffer.wrap(this.ourKey).toString('base64')", - "lineNumber": 37, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-insertBefore(", - "path": "js/views/key_verification_view.js", - "line": " dialog.$el.insertBefore(this.el);", - "lineNumber": 72, - "reasonCategory": "usageTrusted", - "updated": "2018-09-19T18:13:29.628Z", - "reasonDetail": "Interacting with already-existing DOM nodes" - }, - { - "rule": "jQuery-$(", - "path": "js/views/key_verification_view.js", - "line": " this.$('button.verify').attr('disabled', true);", - "lineNumber": 76, - "reasonCategory": "usageTrusted", - "updated": "2018-09-19T21:59:32.770Z", - "reasonDetail": "Protected from arbitrary input" - }, - { - "rule": "jQuery-$(", - "path": "js/views/key_verification_view.js", - "line": " this.$('button.verify').removeAttr('disabled');", - "lineNumber": 107, - "reasonCategory": "usageTrusted", - "updated": "2018-09-19T21:59:32.770Z", - "reasonDetail": "Protected from arbitrary input" - }, { "rule": "jQuery-append(", "path": "js/views/list_view.js",