diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 0b2847a4f..7050831ae 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1037,8 +1037,7 @@ "description": "Placeholder text in the message entry field" }, "secondaryDeviceDefaultFR": { - "message": - "Please accept to enable messages to be synced across devices", + "message": "Please accept to enable messages to be synced across devices", "description": "Placeholder text in the message entry field when it is disabled because a secondary device conversation is visible" }, @@ -2039,10 +2038,9 @@ "description": "A toast message telling the user that the message text was copied" }, - "editDisplayName": { - "message": "Edit display name", - "description": - "Button action that the user can click to edit their display name" + "editProfile": { + "message": "Edit profile", + "description": "Button action that the user can click to edit their profile" }, "createGroupDialogTitle": { @@ -2213,12 +2211,22 @@ "message": "Group Name cannot be empty", "description": "Error message displayed on empty group name" }, + "emptyProfileNameError": { + "message": "Profile name cannot be empty", + "description": "Error message displayed on empty profile name" + }, "maxGroupMembersError": { "message": "Max number of members for small group chats is: " }, "nonAdminDeleteMember": { "message": "Only group admin can remove members!" }, + "editProfileDialogTitle": { + "message": "Editing Profile" + }, + "profileName": { + "message": "Profile Name" + }, "groupNamePlaceholder": { "message": "Group Name" } diff --git a/background.html b/background.html index 06bb30afc..8757b64be 100644 --- a/background.html +++ b/background.html @@ -816,6 +816,7 @@ + diff --git a/js/background.js b/js/background.js index a4e8623ff..eca5269f8 100644 --- a/js/background.js +++ b/js/background.js @@ -832,15 +832,70 @@ ourNumber, 'private' ); + + const readFile = attachment => + new Promise((resolve, reject) => { + const FR = new FileReader(); + FR.onload = e => { + const data = e.target.result; + resolve({ + ...attachment, + data, + size: data.byteLength, + }); + }; + FR.onerror = reject; + FR.onabort = reject; + FR.readAsArrayBuffer(attachment.file); + }); + + const avatarPath = conversation.getAvatarPath(); const profile = conversation.getLokiProfile(); const displayName = profile && profile.displayName; + if (appView) { - appView.showNicknameDialog({ - title: window.i18n('editProfileTitle'), - message: window.i18n('editProfileDisplayNameWarning'), - nickname: displayName, - onOk: newName => - conversation.setLokiProfile({ displayName: newName }), + appView.showEditProfileDialog({ + profileName: displayName, + pubkey: ourNumber, + avatarPath, + avatarColor: conversation.getColor(), + onOk: async (newName, avatar) => { + let newAvatarPath = ''; + + if (avatar) { + const data = await readFile({ file: avatar }); + + // For simplicity we use the same attachment pointer that would send to + // others, which means we need to wait for the database response. + // To avoid the wait, we create a temporary url for the local image + // and use it until we the the response from the server + const tempUrl = window.URL.createObjectURL(avatar); + conversation.setLokiProfile({ displayName: newName }); + conversation.set('avatar', tempUrl); + + const avatarPointer = await textsecure.messaging.uploadAvatar( + data + ); + + conversation.set('avatarPointer', avatarPointer.url); + + const downloaded = await messageReceiver.downloadAttachment({ + url: avatarPointer.url, + isRaw: true, + }); + const upgraded = await Signal.Migrations.processNewAttachment( + downloaded + ); + newAvatarPath = upgraded.path; + } + + // Replace our temporary image with the attachment pointer from the server: + conversation.set('avatar', null); + conversation.setLokiProfile({ + displayName: newName, + avatar: newAvatarPath, + }); + }, }); } }); diff --git a/js/models/conversations.js b/js/models/conversations.js index 82fab3e7f..a682e6fd9 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -2255,14 +2255,18 @@ await this.updateProfileName(); }, - async setLokiProfile(profile) { - if (!_.isEqual(this.get('profile'), profile)) { - this.set({ profile }); + async setLokiProfile(newProfile) { + if (!_.isEqual(this.get('profile'), newProfile)) { + this.set({ profile: newProfile }); await window.Signal.Data.updateConversation(this.id, this.attributes, { Conversation: Whisper.Conversation, }); } + if (newProfile.avatar) { + await this.setProfileAvatar({ path: newProfile.avatar }); + } + await this.updateProfileName(); }, async updateProfileName() { @@ -2435,10 +2439,10 @@ }); } }, - async setProfileAvatar(avatarPath) { + async setProfileAvatar(avatar) { const profileAvatar = this.get('profileAvatar'); - if (profileAvatar !== avatarPath) { - this.set({ profileAvatar: avatarPath }); + if (profileAvatar !== avatar) { + this.set({ profileAvatar: avatar }); await window.Signal.Data.updateConversation(this.id, this.attributes, { Conversation: Whisper.Conversation, }); @@ -2749,22 +2753,20 @@ getAvatarPath() { const avatar = this.get('avatar') || this.get('profileAvatar'); - if (avatar) { - if (avatar.path) { - return getAbsoluteAttachmentPath(avatar.path); - } + if (typeof avatar === 'string') { return avatar; } + if (avatar && avatar.path && typeof avatar.path === 'string') { + return getAbsoluteAttachmentPath(avatar.path); + } + return null; }, getAvatar() { const title = this.get('name'); const color = this.getColor(); - const avatar = this.get('avatar') || this.get('profileAvatar'); - - const url = - avatar && avatar.path ? getAbsoluteAttachmentPath(avatar.path) : avatar; + const url = this.getAvatarPath(); if (url) { return { url, color }; diff --git a/js/models/messages.js b/js/models/messages.js index 2f080e8c3..30a8be424 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -801,7 +801,7 @@ const isFromMe = contact ? contact.id === this.OUR_NUMBER : false; const onClick = noClick ? null - : (event) => { + : event => { event.stopPropagation(); this.trigger('scroll-to-message', { author, @@ -2180,8 +2180,6 @@ } else { sendingDeviceConversation.setProfileKey(profileKey); } - } else if (dataMessage.profile) { - sendingDeviceConversation.setLokiProfile(dataMessage.profile); } let autoAccept = false; diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js index 1c4c9b2c0..53c51a161 100644 --- a/js/modules/loki_app_dot_net_api.js +++ b/js/modules/loki_app_dot_net_api.js @@ -760,7 +760,7 @@ class LokiPublicChannelAPI { } // timestamp is the only required field we've had since the first deployed version - const { timestamp, quote } = noteValue; + const { timestamp, quote, avatar } = noteValue; if (quote) { // TODO: Enable quote attachments again using proper ADN style @@ -823,6 +823,7 @@ class LokiPublicChannelAPI { attachments, preview, quote, + avatar, }; } @@ -889,7 +890,13 @@ class LokiPublicChannelAPI { return false; } - const { timestamp, quote, attachments, preview } = messengerData; + const { + timestamp, + quote, + attachments, + preview, + avatar, + } = messengerData; if (!timestamp) { return false; // Invalid message } @@ -924,6 +931,7 @@ class LokiPublicChannelAPI { ].splice(-5); const from = adnMessage.user.name || 'Anonymous'; // profileName + const avatarObj = avatar || null; // track sources for multidevice support if (pubKeys.indexOf(`@${adnMessage.user.username}`) === -1) { @@ -961,6 +969,7 @@ class LokiPublicChannelAPI { preview, profile: { displayName: from, + avatar: avatarObj, }, }, }; @@ -1141,6 +1150,8 @@ class LokiPublicChannelAPI { LokiPublicChannelAPI.getAnnotationFromPreview ); + const avatarAnnotation = data.profile.avatar || null; + const payload = { text, annotations: [ @@ -1148,12 +1159,14 @@ class LokiPublicChannelAPI { type: 'network.loki.messenger.publicChat', value: { timestamp: messageTimeStamp, + avatar: avatarAnnotation, }, }, ...attachmentAnnotations, ...previewAnnotations, ], }; + if (quote && quote.id) { payload.annotations[0].value.quote = quote; diff --git a/js/modules/signal.js b/js/modules/signal.js index 36b78e76e..91459bc65 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -48,6 +48,7 @@ const { BulkEdit } = require('../../ts/components/conversation/BulkEdit'); const { CreateGroupDialog, } = require('../../ts/components/conversation/CreateGroupDialog'); +const { EditProfileDialog } = require('../../ts/components/EditProfileDialog'); const { UpdateGroupDialog, } = require('../../ts/components/conversation/UpdateGroupDialog'); @@ -228,6 +229,7 @@ exports.setup = (options = {}) => { MainHeader, MemberList, CreateGroupDialog, + EditProfileDialog, ConfirmDialog, UpdateGroupDialog, BulkEdit, diff --git a/js/views/app_view.js b/js/views/app_view.js index 3154ba777..5a0a8fc6f 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -176,6 +176,10 @@ }); } }, + showEditProfileDialog(options) { + const dialog = new Whisper.EditProfileDialogView(options); + this.el.append(dialog.el); + }, showNicknameDialog({ pubKey, title, message, nickname, onOk, onCancel }) { const _title = title || `Change nickname for ${pubKey}`; const dialog = new Whisper.NicknameDialogView({ diff --git a/js/views/edit_profile_dialog_view.js b/js/views/edit_profile_dialog_view.js new file mode 100644 index 000000000..9aa13bdf8 --- /dev/null +++ b/js/views/edit_profile_dialog_view.js @@ -0,0 +1,44 @@ +/* global i18n, Whisper */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.EditProfileDialogView = Whisper.View.extend({ + className: 'loki-dialog modal', + initialize({ profileName, avatarPath, avatarColor, pubkey, onOk }) { + this.close = this.close.bind(this); + + this.profileName = profileName; + this.pubkey = pubkey; + this.avatarPath = avatarPath; + this.avatarColor = avatarColor; + this.onOk = onOk; + + this.$el.focus(); + this.render(); + }, + render() { + this.dialogView = new Whisper.ReactWrapperView({ + className: 'edit-profile-dialog', + Component: window.Signal.Components.EditProfileDialog, + props: { + onOk: this.onOk, + onClose: this.close, + profileName: this.profileName, + pubkey: this.pubkey, + avatarPath: this.avatarPath, + i18n, + }, + }); + + this.$el.append(this.dialogView.el); + return this; + }, + close() { + this.remove(); + }, + }); +})(); diff --git a/libtextsecure/message_receiver.js b/libtextsecure/message_receiver.js index 6e1113717..1aa5154db 100644 --- a/libtextsecure/message_receiver.js +++ b/libtextsecure/message_receiver.js @@ -22,6 +22,7 @@ /* global lokiFileServerAPI: false */ /* global WebAPI: false */ /* global ConversationController: false */ +/* global Signal: false */ /* eslint-disable more/no-then */ /* eslint-disable no-unreachable */ @@ -164,7 +165,16 @@ MessageReceiver.prototype.extend({ }; this.httpPollingResource.handleMessage(message, options); }, - handleUnencryptedMessage({ message }) { + async handleUnencryptedMessage({ message }) { + const isMe = message.source === textsecure.storage.user.getNumber(); + if (!isMe && message.message.profile) { + const conversation = await window.ConversationController.getOrCreateAndWait( + message.source, + 'private' + ); + await this.updateProfile(conversation, message.message.profile); + } + const ev = new Event('message'); ev.confirm = function confirmTerm() {}; ev.data = message; @@ -1228,6 +1238,35 @@ MessageReceiver.prototype.extend({ return true; }, + async updateProfile(conversation, profile) { + // Retain old values unless changed: + const newProfile = conversation.get('profile') || {}; + + newProfile.displayName = profile.displayName; + + // TODO: may need to allow users to reset their avatars to null + if (profile.avatar) { + const prevPointer = conversation.get('avatarPointer'); + const needsUpdate = + !prevPointer || !_.isEqual(prevPointer, profile.avatar); + + if (needsUpdate) { + conversation.set('avatarPointer', profile.avatar); + + const downloaded = await this.downloadAttachment({ + url: profile.avatar, + isRaw: true, + }); + + const upgraded = await Signal.Migrations.processNewAttachment( + downloaded + ); + newProfile.avatar = upgraded.path; + } + } + + await conversation.setLokiProfile(newProfile); + }, handleDataMessage(envelope, msg) { if (!envelope.isP2p) { const timestamp = envelope.timestamp.toNumber(); @@ -1258,11 +1297,8 @@ MessageReceiver.prototype.extend({ // Check if we need to update any profile names if (!isMe && conversation) { - let profile = null; if (message.profile) { - profile = JSON.parse(message.profile.encodeJSON()); - // Update the conversation - await conversation.setLokiProfile(profile); + await this.updateProfile(conversation, message.profile); } } diff --git a/libtextsecure/sendmessage.js b/libtextsecure/sendmessage.js index 7b366b78d..7dec5f5c5 100644 --- a/libtextsecure/sendmessage.js +++ b/libtextsecure/sendmessage.js @@ -148,6 +148,15 @@ Message.prototype = { if (this.profile && this.profile.displayName) { const profile = new textsecure.protobuf.DataMessage.LokiProfile(); profile.displayName = this.profile.displayName; + + const conversation = window.ConversationController.get( + textsecure.storage.user.getNumber() + ); + const avatarPointer = conversation.get('avatarPointer'); + + if (avatarPointer) { + profile.avatar = avatarPointer; + } proto.profile = profile; } @@ -168,7 +177,7 @@ MessageSender.prototype = { constructor: MessageSender, // makeAttachmentPointer :: Attachment -> Promise AttachmentPointerProto - async makeAttachmentPointer(attachment, publicServer = null) { + async makeAttachmentPointer(attachment, publicServer = null, isRaw = false) { if (typeof attachment !== 'object' || attachment == null) { return Promise.resolve(undefined); } @@ -187,9 +196,15 @@ MessageSender.prototype = { const proto = new textsecure.protobuf.AttachmentPointer(); let attachmentData; let server; + if (publicServer) { - attachmentData = attachment.data; server = publicServer; + } else { + ({ server } = this); + } + + if (publicServer || isRaw) { + attachmentData = attachment.data; } else { proto.key = libsignal.crypto.getRandomBytes(64); const iv = libsignal.crypto.getRandomBytes(16); @@ -200,7 +215,6 @@ MessageSender.prototype = { ); proto.digest = result.digest; attachmentData = result.ciphertext; - ({ server } = this); } const result = await server.putAttachment(attachmentData); @@ -538,6 +552,10 @@ MessageSender.prototype = { return this.server.getAvatar(path); }, + uploadAvatar(attachment) { + return this.makeAttachmentPointer(attachment, null, true); + }, + sendRequestConfigurationSyncMessage(options) { const myNumber = textsecure.storage.user.getNumber(); const myDevice = textsecure.storage.user.getDeviceId(); @@ -1220,6 +1238,7 @@ textsecure.MessageSender = function MessageSenderWrapper(username, password) { this.sendSyncMessage = sender.sendSyncMessage.bind(sender); this.getProfile = sender.getProfile.bind(sender); this.getAvatar = sender.getAvatar.bind(sender); + this.uploadAvatar = sender.uploadAvatar.bind(sender); this.syncReadMessages = sender.syncReadMessages.bind(sender); this.syncVerification = sender.syncVerification.bind(sender); this.sendDeliveryReceipt = sender.sendDeliveryReceipt.bind(sender); diff --git a/protos/SignalService.proto b/protos/SignalService.proto index c825d8d88..f70505168 100644 --- a/protos/SignalService.proto +++ b/protos/SignalService.proto @@ -197,6 +197,7 @@ message DataMessage { // Loki: A custom message for our profile message LokiProfile { optional string displayName = 1; + optional string avatar = 2; } optional string body = 1; diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index a0bf73772..aa6d03d31 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -10,6 +10,60 @@ overflow: hidden; } +.edit-profile-dialog { + .content { + max-width: 100% !important; + } + + .buttons { + margin: 8px; + } + + .profile-name { + font-size: larger; + text-align: center; + } + + .title-text { + font-size: large; + text-align: center; + } + + .message { + font-style: italic; + color: $grey; + font-size: 12px; + margin-bottom: 16px; + } + + .module-avatar { + display: block; + margin-bottom: 1em; + } + + .avatar-upload { + display: flex; + justify-content: center; + } + + .avatar-upload-inner { + display: flex; + } + + .upload-btn-background { + background-color: #ffffff70; + align-self: center; + margin-left: -24px; + margin-top: 40px; + z-index: 1; + border-radius: 8px; + } + + .input-file { + display: none; + } +} + .expired { .conversation-stack, .gutter { diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index a4a5b32b7..b3d226c56 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -54,15 +54,20 @@ .hidden { display: none; } +} +.create-group-dialog, +.edit-profile-dialog { .error-message { text-align: center; color: red; - margin-bottom: 0.5em; + display: block; + user-select: none; } .error-faded { opacity: 0; + margin-top: -20px; transition: all 100ms linear; } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 8d9c362f2..70468c93e 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -98,6 +98,18 @@ right: 100%; } +.module-message__buttons__upload { + height: 24px; + width: 24px; + transform: rotate(180deg); + display: inline-block; + cursor: pointer; + @include color-svg('../images/download.svg', $color-light-45); + &:hover { + @include color-svg('../images/download.svg', $color-gray-90); + } +} + .module-message__buttons__download { min-height: 24px; min-width: 24px; diff --git a/test/index.html b/test/index.html index b73ed1af0..f8cae2a6e 100644 --- a/test/index.html +++ b/test/index.html @@ -576,6 +576,7 @@ + diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx new file mode 100644 index 000000000..56bf25f8e --- /dev/null +++ b/ts/components/EditProfileDialog.tsx @@ -0,0 +1,212 @@ +import React from 'react'; +import classNames from 'classnames'; +import { Avatar } from './Avatar'; + +declare global { + interface Window { + displayNameRegex: any; + } +} + +interface Props { + i18n: any; + profileName: string; + avatarPath: string; + avatarColor: string; + pubkey: string; + onClose: any; + onOk: any; +} + +interface State { + profileName: string; + errorDisplayed: boolean; + errorMessage: string; + avatar: string; +} + +export class EditProfileDialog extends React.Component { + private readonly inputEl: any; + + constructor(props: any) { + super(props); + + this.onNameEdited = this.onNameEdited.bind(this); + this.closeDialog = this.closeDialog.bind(this); + this.onClickOK = this.onClickOK.bind(this); + this.showError = this.showError.bind(this); + this.onKeyUp = this.onKeyUp.bind(this); + this.onFileSelected = this.onFileSelected.bind(this); + + this.state = { + profileName: this.props.profileName, + errorDisplayed: false, + errorMessage: 'placeholder', + avatar: this.props.avatarPath, + }; + + this.inputEl = React.createRef(); + + window.addEventListener('keyup', this.onKeyUp); + } + + public render() { + const i18n = this.props.i18n; + + const cancelText = i18n('cancel'); + const okText = i18n('ok'); + const placeholderText = i18n('profileName'); + + const errorMessageClasses = classNames( + 'error-message', + this.state.errorDisplayed ? 'error-shown' : 'error-faded' + ); + + return ( +
+
+
+ {this.renderAvatar()} +
+ +
{ + const el = this.inputEl.current; + if (el) { + el.click(); + } + }} + /> +
+
+
+ +
{i18n('editProfileDisplayNameWarning')}
+ {this.state.errorMessage} +
+ + +
+
+ ); + } + + private onFileSelected() { + const file = this.inputEl.current.files[0]; + const url = window.URL.createObjectURL(file); + + this.setState({ + avatar: url, + }); + } + + private renderAvatar() { + const avatarPath = this.state.avatar; + const color = this.props.avatarColor; + + return ( + + ); + } + + private onNameEdited(e: any) { + e.persist(); + + const newName = e.target.value.replace(window.displayNameRegex, ''); + + this.setState(state => { + return { + ...state, + profileName: newName, + }; + }); + } + + private onKeyUp(event: any) { + switch (event.key) { + case 'Enter': + this.onClickOK(); + break; + case 'Esc': + case 'Escape': + this.closeDialog(); + break; + default: + } + } + + private showError(msg: string) { + if (this.state.errorDisplayed) { + return; + } + + this.setState({ + errorDisplayed: true, + errorMessage: msg, + }); + + setTimeout(() => { + this.setState({ + errorDisplayed: false, + }); + }, 3000); + } + + private onClickOK() { + const newName = this.state.profileName.trim(); + + if (newName === '') { + this.showError(this.props.i18n('emptyProfileNameError')); + + return; + } + + const avatar = + this.inputEl && + this.inputEl.current && + this.inputEl.current.files && + this.inputEl.current.files.length > 0 + ? this.inputEl.current.files[0] + : null; + + this.props.onOk(newName, avatar); + this.closeDialog(); + } + + private closeDialog() { + window.removeEventListener('keyup', this.onKeyUp); + + this.props.onClose(); + } +} diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index 2f3d6d9b3..f44d6979f 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -334,8 +334,8 @@ export class MainHeader extends React.Component { onClick: onCopyPublicKey, }, { - id: 'editDisplayName', - name: i18n('editDisplayName'), + id: 'editProfile', + name: i18n('editProfile'), onClick: () => { trigger('onEditProfile'); },