From b0a229bf13d2dc262f20c9389bb8af7b0b214d74 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 16 Dec 2020 16:18:42 +1100 Subject: [PATCH] add Dialog on app start to ask to update SessionID --- background.html | 1 + js/background.js | 4 + js/modules/signal.js | 6 +- js/views/app_view.js | 6 + js/views/session_confirm_view.js | 1 + js/views/session_id_reset_view.js | 35 +++++ stylesheets/_session.scss | 4 +- stylesheets/_session_signin.scss | 2 + ts/components/ConfirmDialog.tsx | 35 ----- ts/components/session/ActionsPanel.tsx | 11 ++ ts/components/session/SessionConfirm.tsx | 148 ++++++++---------- .../session/SessionIDResetDialog.tsx | 78 +++++++++ ts/components/session/icon/Icons.tsx | 7 + ts/components/session/icon/SessionIcon.tsx | 2 +- ts/receiver/contentMessage.ts | 4 +- ts/session/crypto/index.ts | 1 + ts/window.d.ts | 1 + 17 files changed, 223 insertions(+), 123 deletions(-) create mode 100644 js/views/session_id_reset_view.js delete mode 100644 ts/components/ConfirmDialog.tsx create mode 100644 ts/components/session/SessionIDResetDialog.tsx diff --git a/background.html b/background.html index e8e85a4b4..12c55a3ec 100644 --- a/background.html +++ b/background.html @@ -174,6 +174,7 @@ + diff --git a/js/background.js b/js/background.js index e2e90cdcf..77472bacb 100644 --- a/js/background.js +++ b/js/background.js @@ -555,6 +555,10 @@ confirmDialog.render(); }; + window.showResetSessionIdDialog = () => { + appView.showResetSessionIdDialog(); + }; + window.showEditProfileDialog = async () => { const ourNumber = window.storage.get('primaryDevicePubKey'); const conversation = await ConversationController.getOrCreateAndWait( diff --git a/js/modules/signal.js b/js/modules/signal.js index 73255871e..f8c947a16 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -39,6 +39,9 @@ const { SessionModal } = require('../../ts/components/session/SessionModal'); const { SessionSeedModal, } = require('../../ts/components/session/SessionSeedModal'); +const { + SessionIDResetDialog, +} = require('../../ts/components/session/SessionIDResetDialog'); const { SessionRegistrationView, } = require('../../ts/components/session/SessionRegistrationView'); @@ -77,7 +80,6 @@ const { const { GroupInvitation, } = require('../../ts/components/conversation/GroupInvitation'); -const { ConfirmDialog } = require('../../ts/components/ConfirmDialog'); const { MediaGallery, } = require('../../ts/components/conversation/media-gallery/MediaGallery'); @@ -232,7 +234,6 @@ exports.setup = (options = {}) => { UserDetailsDialog, DevicePairingDialog, SessionInboxView, - ConfirmDialog, UpdateGroupNameDialog, UpdateGroupMembersDialog, InviteContactsDialog, @@ -243,6 +244,7 @@ exports.setup = (options = {}) => { SessionConfirm, SessionModal, SessionSeedModal, + SessionIDResetDialog, SessionPasswordModal, SessionPasswordPrompt, SessionRegistrationView, diff --git a/js/views/app_view.js b/js/views/app_view.js index 3a11409f8..b484c3d81 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -129,6 +129,12 @@ const dialog = new Whisper.EditProfileDialogView(options); this.el.prepend(dialog.el); }, + showResetSessionIdDialog() { + const theme = this.getThemeObject(); + const resetSessionIDDialog = new Whisper.SessionIDResetDialog({ theme }); + + this.el.prepend(resetSessionIDDialog.el); + }, showUserDetailsDialog(options) { // eslint-disable-next-line no-param-reassign options.theme = this.getThemeObject(); diff --git a/js/views/session_confirm_view.js b/js/views/session_confirm_view.js index a86fd3017..1d5a6b8a8 100644 --- a/js/views/session_confirm_view.js +++ b/js/views/session_confirm_view.js @@ -33,6 +33,7 @@ unregisterEvents() { document.removeEventListener('keyup', this.props.onClickClose, false); + this.$('.session-confirm-wrapper').remove(); }, render() { diff --git a/js/views/session_id_reset_view.js b/js/views/session_id_reset_view.js new file mode 100644 index 000000000..cfe180ecc --- /dev/null +++ b/js/views/session_id_reset_view.js @@ -0,0 +1,35 @@ +/* global Whisper */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.SessionIDResetDialog = Whisper.View.extend({ + className: 'loki-dialog session-id-reset-dialog modal', + initialize(options) { + this.close = this.close.bind(this); + this.theme = options.theme; + this.render(); + }, + + render() { + this.dialogView = new Whisper.ReactWrapperView({ + className: 'session-id-dialog-wrapper', + Component: window.Signal.Components.SessionIDResetDialog, + props: { + onClose: this.close, + theme: this.theme, + }, + }); + + this.$el.append(this.dialogView.el); + return this; + }, + + close() { + this.remove(); + }, + }); +})(); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 2e4066397..7d8c6ab01 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -426,7 +426,7 @@ label { min-width: 300px; box-sizing: border-box; max-height: 70vh; - max-width: 70vw; + max-width: calc(min(70vw, 800px)); font-family: $session-font-default; @include themify($themes) { background-color: themed('modalBackground'); @@ -508,6 +508,8 @@ label { display: flex; flex-direction: column; align-items: center; + // to allow new lines + white-space: pre-wrap; } &__button-group { diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 5950dd324..c4bb55f9f 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -176,6 +176,7 @@ &-input-with-label-container { height: 46.5px; width: 280px; + font-family: $session-font-default; @include themify($themes) { color: themed('textColor'); } @@ -215,6 +216,7 @@ @include themify($themes) { color: themed('textColor'); } + font-family: $session-font-default; font-size: 12px; line-height: 14px; position: absolute; diff --git a/ts/components/ConfirmDialog.tsx b/ts/components/ConfirmDialog.tsx deleted file mode 100644 index c8e003243..000000000 --- a/ts/components/ConfirmDialog.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; - -import { SessionModal } from './session/SessionModal'; -import { SessionButton } from './session/SessionButton'; -import { DefaultTheme } from 'styled-components'; -type Props = { - titleText: string; - messageText: string; - okText: string; - cancelText: string; - onConfirm: any; - onClose: any; - theme: DefaultTheme; -}; - -export const ConfirmDialog = (props: Props) => { - return ( - null} - theme={props.theme} - > -
-

{props.messageText}

-
- -
- - - -
- - ); -}; diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 04ccaa18f..681bb1e3f 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -12,6 +12,7 @@ import { DefaultTheme } from 'styled-components'; import { StateType } from '../../state/reducer'; import { MessageEncrypter } from '../../session/crypto'; import { PubKey } from '../../session/types'; +import { UserUtil } from '../../util'; // tslint:disable-next-line: no-import-side-effect no-submodule-imports export enum SectionType { @@ -49,6 +50,8 @@ class ActionsPanelPrivate extends React.Component { const newThemeObject = theme === 'dark' ? darkTheme : lightTheme; this.props.applyTheme(newThemeObject); + + void this.showResetSessionIDDialogIfNeeded(); } public Section = ({ @@ -186,6 +189,14 @@ class ActionsPanelPrivate extends React.Component { private readonly handleSectionSelect = (section: SectionType): void => { this.props.onSectionSelected(section); }; + + private async showResetSessionIDDialogIfNeeded() { + const userED25519KeyPairHex = await UserUtil.getUserED25519KeyPair(); + if (userED25519KeyPairHex) { + return; + } + window.showResetSessionIdDialog(); + } } const mapStateToProps = (state: StateType) => { diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 16ac7c36c..d5060eda7 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -5,7 +5,7 @@ import { SessionHtmlRenderer } from './SessionHTMLRenderer'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; import { DefaultTheme, withTheme } from 'styled-components'; -interface Props { +type Props = { message: string; messageSub: string; title: string; @@ -21,96 +21,80 @@ interface Props { sessionIcon?: SessionIconType; iconSize?: SessionIconSize; theme: DefaultTheme; -} +}; -class SessionConfirmInner extends React.Component { - public static defaultProps = { - title: '', - messageSub: '', - okTheme: SessionButtonColor.Primary, - closeTheme: SessionButtonColor.Primary, - hideCancel: false, - }; +const SessionConfirmInner = (props: Props) => { + const { + title = '', + message, + messageSub = '', + okTheme = SessionButtonColor.Primary, + closeTheme = SessionButtonColor.Primary, + onClickOk, + onClickClose, + hideCancel = false, + sessionIcon, + iconSize, + } = props; - constructor(props: any) { - super(props); - } + const okText = props.okText || window.i18n('ok'); + const cancelText = props.cancelText || window.i18n('cancel'); + const showHeader = !!props.title; - public render() { - const { - title, - message, - messageSub, - okTheme, - closeTheme, - onClickOk, - onClickClose, - hideCancel, - sessionIcon, - iconSize, - } = this.props; + const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle'; - const okText = this.props.okText || window.i18n('ok'); - const cancelText = this.props.cancelText || window.i18n('cancel'); - const showHeader = !!this.props.title; + return ( + null} + showExitIcon={false} + showHeader={showHeader} + theme={props.theme} + > + {!showHeader &&
} - const messageSubText = messageSub - ? 'session-confirm-main-message' - : 'subtle'; - - return ( - null} - showExitIcon={false} - showHeader={showHeader} - theme={this.props.theme} - > - {!showHeader &&
} +
+ {sessionIcon && iconSize && ( + <> + +
+ + )} -
- {sessionIcon && iconSize && ( -
- -
-
- )} + + +
- - -
+
+ -
+ {!hideCancel && ( - - {!hideCancel && ( - - )} -
- - ); - } -} + )} +
+ + ); +}; export const SessionConfirm = withTheme(SessionConfirmInner); diff --git a/ts/components/session/SessionIDResetDialog.tsx b/ts/components/session/SessionIDResetDialog.tsx new file mode 100644 index 000000000..daf72d1bf --- /dev/null +++ b/ts/components/session/SessionIDResetDialog.tsx @@ -0,0 +1,78 @@ +import React, { useState } from 'react'; + +import { SessionModal } from './SessionModal'; +import { SessionButton, SessionButtonColor } from './SessionButton'; +import { DefaultTheme, withTheme } from 'styled-components'; +import { + SessionIcon, + SessionIconButton, + SessionIconSize, + SessionIconType, +} from './icon'; + +type Props = { + onClose: any; + theme: DefaultTheme; +}; +/* tslint:disable:use-simple-attributes */ + +const SessionIDResetDialogInner = (props: Props) => { + const [firstScreen, setFirstScreen] = useState(true); + + const descFirst = + 'We’ve upgraded Session IDs to make them even more private and secure. We recommend upgrading to a new Session ID now.\n\n\ + You will lose existing contacts and conversations, but you’ll gain even more privacy and security. You will need to upgrade your Session ID eventually, but you can choose to delay the upgrade if you need to save contacts or conversations.'; + + const descSecond = + 'You’re upgrading to a new Session ID. This will give you improved privacy and security, but it will clear ALL app data. Contacts and conversations will be lost. Proceed?'; + return ( + null} + onClose={props.onClose} + theme={props.theme} + > +
+
+ {firstScreen && ( + + )} +
+ + {(firstScreen && descFirst) || descSecond} + +
+
+
+ +
+ { + if (firstScreen) { + setFirstScreen(false); + } else { + window.deleteAccount('Session ID Upgrade'); + props.onClose(); + } + }} + buttonColor={SessionButtonColor.Danger} + /> + { + props.onClose(); + }} + /> +
+ + ); +}; + +export const SessionIDResetDialog = withTheme(SessionIDResetDialogInner); diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx index 4eceb1def..54726ce23 100644 --- a/ts/components/session/icon/Icons.tsx +++ b/ts/components/session/icon/Icons.tsx @@ -29,6 +29,7 @@ export enum SessionIconType { Reply = 'reply', Search = 'search', Send = 'send', + Shield = 'shield', Star = 'star', Stopwatch = 'stopwatch', Sun = 'sun', @@ -248,6 +249,12 @@ export const icons = { viewBox: '0 0 22 21', ratio: 1, }, + [SessionIconType.Shield]: { + path: + 'M 349.875 62.773438 L 205.875 2.773438 C 197.015625 -0.898438 187.058594 -0.898438 178.199219 2.773438 L 34.199219 62.773438 C 20.773438 68.324219 12 81.449219 12 96 C 12 244.875 97.875 347.773438 178.125 381.226563 C 186.976563 384.898438 196.949219 384.898438 205.800781 381.226563 C 270.074219 354.449219 372 261.976563 372 96 C 372 81.449219 363.226563 68.324219 349.875 62.773438 Z M 192.074219 334.726563 L 192 48.976563 L 323.925781 103.949219 C 321.449219 217.5 262.351563 299.773438 192.074219 334.726563 Z M 192.074219 334.726563', + viewBox: '0 0 384 384', + ratio: 1, + }, [SessionIconType.Stopwatch]: { path: 'm282.523438 1.34375c-8.800782-.886719-17.640626-1.328125-26.484376-1.3242188h-.265624c-14.636719.2421878-26.339844 12.2421878-26.214844 26.8828128v105.53125c-.035156 3.554687.6875 7.074218 2.117187 10.328125 4.582031 10.90625 15.863281 17.429687 27.597657 15.964843 13.554687-2.03125 23.5-13.792968 23.25-27.492187v-76.484375c98.890624 12.980469 173.726562 95.839844 176.59375 195.539062 2.867187 99.699219-67.078126 186.726563-165.058594 205.367188-97.980469 18.644531-195-36.613281-228.945313-130.398438-33.945312-93.785156 5.226563-198.339843 92.441407-246.730468 11.59375-6.566406 16.445312-20.769532 11.289062-33.054688l-.03125-.074218c-2.890625-6.988282-8.625-12.40625-15.765625-14.902344-7.136719-2.492188-15-1.820313-21.613281 1.84375-110.347656 61.484375-159.351563 194.269531-115.402344 312.695312 43.945312 118.429688 167.710938 187.097656 291.453125 161.710938 123.742187-25.386719 210.472656-137.238282 204.238281-263.40625-6.230468-126.164063-103.558594-228.925782-229.199218-241.996094zm0 0 M159.300781 170.949219c10.652344 28.050781 45.503907 94.28125 71.574219 122.480469 16.027344 18.09375 43.394531 20.515624 62.351562 5.523437 9.484376-7.957031 15.191407-19.527344 15.738282-31.894531.542968-12.363282-4.132813-24.390625-12.878906-33.148438-27.265626-27.261718-96.464844-63.382812-125.480469-74.398437-3.25-1.222657-6.917969-.417969-9.363281 2.050781-2.441407 2.472656-3.203126 6.148438-1.941407 9.386719zm0 0', diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index 26e2b45db..85afa1961 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -79,7 +79,7 @@ const SessionSvg = (props: { rotateDuration?: number; theme: DefaultTheme; }) => { - const colorSvg = props.iconColor || props?.theme?.colors.textColor || 'red'; + const colorSvg = props.iconColor || props?.theme?.colors.textColor; const pathArray = props.path instanceof Array ? props.path : [props.path]; return ( diff --git a/ts/receiver/contentMessage.ts b/ts/receiver/contentMessage.ts index f88d77af3..52ac750b7 100644 --- a/ts/receiver/contentMessage.ts +++ b/ts/receiver/contentMessage.ts @@ -218,9 +218,9 @@ async function decryptWithSessionProtocol( // set the sender identity on the envelope itself. if (isMediumGroup) { - envelope.senderIdentity = '05' + toHex(senderX25519PublicKey); + envelope.senderIdentity = `05${toHex(senderX25519PublicKey)}`; } - return plaintext; + return unpad(plaintext); } function unpad(paddedData: ArrayBuffer): ArrayBuffer { diff --git a/ts/session/crypto/index.ts b/ts/session/crypto/index.ts index 096116437..8cc179096 100644 --- a/ts/session/crypto/index.ts +++ b/ts/session/crypto/index.ts @@ -3,6 +3,7 @@ import * as MessageEncrypter from './MessageEncrypter'; export { MessageEncrypter }; // libsodium-wrappers requires the `require` call to work +// tslint:disable-next-line: no-require-imports import libsodiumwrappers = require('libsodium-wrappers'); export async function getSodium(): Promise { diff --git a/ts/window.d.ts b/ts/window.d.ts index b14e86b3d..4981b632b 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -86,6 +86,7 @@ declare global { setSettingValue: any; shortenPubkey: (pubKey: string) => string; showEditProfileDialog: any; + showResetSessionIdDialog: any; storage: any; textsecure: LibTextsecure; toggleLinkPreview: any;