Implement editing of own profile

public/i18n/de.json

@@ -130,7 +130,7 @@
         "SYSTEM_CONTACT": "Systemkontakt",
         "EMAIL_ADDRESSES": "E-Mail-Adressen",
         "PHONE_NUMBERS": "Telefonnummern",
-        "EDIT_RECEIVER": "{receiverName} bearbeiten",
+        "EDIT_RECEIVER": "Profil bearbeiten",
         "CREATE_GROUP": "Neue Gruppe",
         "GROUP_SELECT_CONTACTS": "Mitglieder wählen",
         "GROUP_DELETE": "Gruppe löschen",

public/i18n/en.json

@@ -130,7 +130,7 @@
         "SYSTEM_CONTACT": "System contact",
         "EMAIL_ADDRESSES": "Emails",
         "PHONE_NUMBERS": "Phone numbers",
-        "EDIT_RECEIVER": "Edit {receiverName}",
+        "EDIT_RECEIVER": "Edit profile",
         "CREATE_GROUP": "New group",
         "GROUP_SELECT_CONTACTS": "Select members",
         "GROUP_DELETE": "Delete group",

public/img/ic_qr.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 24 24" width="24" height="24" style="fill: rgba(0, 0, 0, 0.87);">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 24 24" width="24" height="24" style="fill: rgba(0, 0, 0, 0.54);">
     <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb" d="M 5 5 L 5 6 L 5 12 L 5 13 L 6 13 L 7 13 L 7 15 L 9 15 L 9 13 L 12 13 L 13 13 L 13 12 L 13 6 L 13 5 L 12 5 L 6 5 L 5 5 z M 13 13 L 13 15 L 15 15 L 15 17 L 11 17 L 11 19 L 6 19 L 5 19 L 5 20 L 5 26 L 5 27 L 6 27 L 12 27 L 13 27 L 13 26 L 13 20 L 13 19 L 19 19 L 19 17 L 17 17 L 17 15 L 21 15 L 21 13 L 23 13 L 23 15 L 25 15 L 25 13 L 26 13 L 27 13 L 27 12 L 27 6 L 27 5 L 26 5 L 20 5 L 19 5 L 19 6 L 19 12 L 19 13 L 13 13 z M 25 15 L 25 17 L 27 17 L 27 15 L 25 15 z M 25 17 L 23 17 L 23 19 L 25 19 L 25 17 z M 25 19 L 25 21 L 27 21 L 27 19 L 25 19 z M 25 21 L 23 21 L 23 19 L 21 19 L 21 21 L 18 21 L 16 21 L 16 27 L 18 27 L 18 23 L 22 23 L 22 25 L 24 25 L 24 23 L 25 23 L 25 21 z M 22 25 L 20 25 L 20 27 L 22 27 L 22 25 z M 23 17 L 23 15 L 21 15 L 21 17 L 23 17 z M 11 17 L 11 15 L 9 15 L 9 17 L 11 17 z M 7 15 L 5 15 L 5 17 L 7 17 L 7 15 z M 15 5 L 15 9 L 14 9 L 14 11 L 15 11 L 15 12 L 17 12 L 17 9 L 18 9 L 18 7 L 17 7 L 17 5 L 15 5 z M 7 7 L 11 7 L 11 11 L 7 11 L 7 7 z M 21 7 L 25 7 L 25 11 L 21 11 L 21 7 z M 8 8 L 8 10 L 10 10 L 10 8 L 8 8 z M 22 8 L 22 10 L 24 10 L 24 8 L 22 8 z M 7 21 L 11 21 L 11 25 L 7 25 L 7 21 z M 8 22 L 8 24 L 10 24 L 10 22 L 8 22 z M 25 25 L 25 27 L 27 27 L 27 25 L 25 25 z"/>
 </svg>

src/controller_model/contact.ts

@@ -55,9 +55,7 @@ export class ContactControllerModel implements threema.ControllerModel<threema.C
 
         switch (this.getMode()) {
             case ControllerModelMode.EDIT:
-                this.subject = $translate.instant('messenger.EDIT_RECEIVER', {
-                    receiverName: '@NAME@',
-                }).replace('@NAME@', this.contact.displayName);
+                this.subject = $translate.instant('messenger.EDIT_RECEIVER');
                 this.firstName = this.contact.firstName;
                 this.lastName = this.contact.lastName;
                 this.avatarController = new AvatarControllerModel(

src/controller_model/distributionList.ts

@@ -51,9 +51,7 @@ export class DistributionListControllerModel implements threema.ControllerModel<
 
         switch (this.getMode()) {
             case ControllerModelMode.EDIT:
-                this.subject = $translate.instant('messenger.EDIT_RECEIVER', {
-                    receiverName: '@NAME@',
-                }).replace('@NAME@', this.distributionList.displayName);
+                this.subject = $translate.instant('messenger.EDIT_RECEIVER');
                 this.name = this.distributionList.displayName;
                 this.members = this.distributionList.members;
                 break;

src/controller_model/group.ts

@@ -53,9 +53,7 @@ export class GroupControllerModel implements threema.ControllerModel<threema.Gro
 
         switch (this.getMode()) {
             case ControllerModelMode.EDIT:
-                this.subject = $translate.instant('messenger.EDIT_RECEIVER', {
-                    receiverName: '@NAME@',
-                }).replace('@NAME@', this.group.displayName);
+                this.subject = $translate.instant('messenger.EDIT_RECEIVER');
                 this.name = this.group.displayName;
                 this.members = this.group.members;
                 this.avatarController = new AvatarControllerModel(

src/controller_model/me.ts

@@ -31,9 +31,6 @@ export class MeControllerModel implements threema.ControllerModel<threema.MeRece
     // Own services
     private webClientService: WebClientService;
 
-    // Callbacks
-    private onRemovedCallback: threema.OnRemovedCallback;
-
     // Own receiver instance
     private me: threema.MeReceiver;
 
@@ -44,7 +41,7 @@ export class MeControllerModel implements threema.ControllerModel<threema.MeRece
     public subject: string;
     public isLoading = false;
 
-    // Data shown on page
+    // Profile data
     public nickname: string;
 
     // Editing mode
@@ -63,25 +60,18 @@ export class MeControllerModel implements threema.ControllerModel<threema.MeRece
         this.webClientService = webClientService;
         this.mode = mode;
 
+        const profile = webClientService.getProfile();
         switch (mode) {
-            /*case ControllerModelMode.EDIT:
-                this.subject = $translate.instant('messenger.EDIT_RECEIVER', {
-                    receiverName: '@NAME@',
-                }).replace('@NAME@', this.me.displayName);
-                this.firstName = this.me.firstName;
-                this.lastName = this.me.lastName;
+            case ControllerModelMode.EDIT:
+                this.subject = $translate.instant('messenger.EDIT_RECEIVER');
+                this.nickname = profile.publicNickname;
                 this.avatarController = new AvatarControllerModel(
                     this.$log, this.webClientService, this.me,
                 );
-
-                this.access = this.me.access;
-                this.firstNameLabel = this.access.canChangeLastName ?
-                    $translate.instant('messenger.FIRST_NAME') :
-                    $translate.instant('messenger.NAME');
-                break;*/
+                break;
             case ControllerModelMode.VIEW:
                 this.subject = $translate.instant('messenger.MY_THREEMA_ID');
-                this.nickname = webClientService.getProfile().publicNickname;
+                this.nickname = profile.publicNickname;
                 break;
             default:
                 $log.error(this.logTag, 'Invalid controller model mode: ', this.getMode());
@@ -92,7 +82,7 @@ export class MeControllerModel implements threema.ControllerModel<threema.MeRece
      * Set the on removed callback.
      */
     public setOnRemoved(callback: threema.OnRemovedCallback): void {
-        this.onRemovedCallback = callback;
+        // Not applicable
     }
 
     /**
@@ -151,10 +141,8 @@ export class MeControllerModel implements threema.ControllerModel<threema.MeRece
      * Can this receiver be edited?
      */
     public canEdit(): boolean {
-        // The own contact can always be edited
-        // TODO: Restrictions?
-        // return true;
-        return false;
+        // TODO: Restrictions regarding work?
+        return true;
     }
 
     public canShowQr(): boolean {
@@ -162,21 +150,25 @@ export class MeControllerModel implements threema.ControllerModel<threema.MeRece
     }
 
     /**
-     * Save the changes, return a promise with the receiver.
+     * Save the changes, return a promise.
      */
     public save(): Promise<threema.MeReceiver> {
-        /*
         switch (this.getMode()) {
             case ControllerModelMode.EDIT:
                 return this.webClientService.modifyProfile(
                     this.nickname,
                     this.avatarController.getAvatar(),
-                );
+                ).then((val) => {
+                    const profile = this.webClientService.getProfile();
+                    profile.publicNickname = this.nickname;
+                    if (this.avatarController.avatarChanged) {
+                        profile.avatar = this.avatarController.getAvatar();
+                    }
+                    return this.me;
+                });
             default:
                 this.$log.error(this.logTag, 'Not allowed to save profile: Invalid mode');
-
+                return Promise.reject('unknown');
         }
-        */
-        return Promise.reject(null);
     }
 }

src/partials/messenger.receiver/me.edit.html

@@ -0,0 +1,20 @@
+<div layout="column" layout-wrap layout-margin layout-align="center center">
+
+       <h3 class="md-headline" translate>messenger.RECEIVER_AVATAR</h3>
+
+    <avatar-area
+            load-avatar="ctrl.controllerModel.avatarController.loadAvatar"
+            on-change="ctrl.controllerModel.avatarController.onChangeAvatar"
+            color="ctrl.controllerModel.me.color"
+            enable-clear="true">
+    </avatar-area>
+</div>
+
+<md-card>
+       <md-card-content>
+               <md-input-container class="md-block">
+                       <label translate>messenger.MY_PUBLIC_NICKNAME</label>
+                       <input ng-disabled="ctrl.isSaving()" ng-model="ctrl.controllerModel.nickname">
+               </md-input-container>
+       </md-card-content>
+</md-card>

src/partials/messenger.ts

@@ -901,6 +901,7 @@ class NavigationController {
      * Show profile.
      */
     public showProfile(ev): void {
+        this.receiverService.setActive(undefined);
         this.$state.go('messenger.home.detail', this.webClientService.me);
     }
 
@@ -1265,9 +1266,11 @@ class ReceiverEditController {
         const receiver = webClientService.receivers.getData($stateParams);
         switch (receiver.type) {
             case 'me':
-                $log.warn(this.logTag, 'Cannot edit own contact');
-                $state.go('messenger.home');
-                return;
+                this.controllerModel = controllerModelService.me(
+                    receiver as threema.MeReceiver,
+                    ControllerModelMode.EDIT,
+                );
+                break;
             case 'contact':
                 this.controllerModel = controllerModelService.contact(
                     receiver as threema.ContactReceiver,

src/services/webclient.ts

@@ -1331,6 +1331,31 @@ export class WebClientService {
         return this._sendDeletePromise(WebClientService.SUB_TYPE_CLEAN_RECEIVER_CONVERSATION, args);
     }
 
+    /**
+     * Modify own profile.
+     */
+    public modifyProfile(nickname?: string,
+                         avatar?: ArrayBuffer): Promise<null> {
+
+        // Prepare payload data
+        const data = {};
+        if (nickname !== undefined && nickname !== null) {
+            data[WebClientService.ARGUMENT_NICKNAME] = nickname;
+        }
+        if (avatar !== undefined && avatar !== null) {
+            data[WebClientService.ARGUMENT_AVATAR] = avatar;
+        }
+
+        // If no changes happened, resolve the promise immediately.
+        if (Object.keys(data).length === 0) {
+            this.$log.warn(this.logTag, 'Trying to modify profile without any changes');
+            return Promise.resolve(null);
+        }
+
+        // Send update, get back promise
+        return this._sendUpdatePromise(WebClientService.SUB_TYPE_PROFILE, null, data);
+    }
+
     /**
      * Return whether the specified contact is currently typing.
      */

src/threema.d.ts

@@ -396,7 +396,7 @@ declare namespace threema {
         identity: string;
         publicNickname: string;
         publicKey: ArrayBuffer;
-        avatar: Uint8Array;
+        avatar: ArrayBuffer;
     }
 
     interface TrustedKeyStoreData {