From 3dd18a0c9ccbe508ac8db96663d3a8abae21b64e Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Fri, 24 Jan 2020 12:26:15 +1100
Subject: [PATCH] Profile picture upload, fixes and copy

---
 _locales/en/messages.json                 |  19 ++-
 background.html                           |  36 -----
 js/background.js                          |   6 +-
 js/models/conversations.js                |   7 +-
 js/views/edit_profile_dialog_view.js      |  11 +-
 js/views/inbox_view.js                    |   3 +-
 stylesheets/_mentions.scss                |   6 +-
 stylesheets/_session.scss                 |  10 +-
 ts/components/EditProfileDialog.tsx       |  54 ++++---
 ts/components/conversation/MemberList.tsx |   5 +-
 ts/components/session/ActionsPanel.tsx    | 182 ++++++++++++----------
 ts/global.d.ts                            |   3 +
 12 files changed, 176 insertions(+), 166 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ecb6f561a..b13f8cb7e 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1182,7 +1182,8 @@
     "description": "Warning for account deletion in settings view"
   },
   "deleteAccountWarningSub": {
-    "message": "This is completely irreversible and will leave no trace.",
+    "message":
+      "Delete all history, including all messages, sessions, and contacts. Once deleted, these cannot be restored.",
     "description": "Warning for account deletion in settings view"
   },
   "deleteContact": {
@@ -1355,7 +1356,8 @@
       "Option to control creation and send of link previews in setting screen"
   },
   "linkPreviewDescription": {
-    "message": "Enable link previews",
+    "message":
+      "Link previews supported for Imgur, Instagram, Pinterest, Reddit, and YouTube.",
     "description": "Description shown for the Link Preview option "
   },
   "mediaPermissionsTitle": {
@@ -1442,17 +1444,17 @@
     "description": "Label for disabling notifications"
   },
   "nameAndMessage": {
-    "message": "Both sender name and message",
+    "message": "Name and content",
     "description":
       "Label for setting notifications to display name and message text"
   },
   "noNameOrMessage": {
-    "message": "Neither name nor message",
+    "message": "No name or content",
     "description":
       "Label for setting notifications to display no name and no message text"
   },
   "nameOnly": {
-    "message": "Only sender name",
+    "message": "Name Only",
     "description": "Label for setting notifications to display sender name only"
   },
   "newMessage": {
@@ -2132,6 +2134,10 @@
     "message": "Copied public key",
     "description": "A toast message telling the user that the key was copied"
   },
+  "copiedChatId": {
+    "message": "Copied chat ID",
+    "description": "A toast message telling the user that the key was copied"
+  },
   "copyMessage": {
     "message": "Copy message text",
     "description":
@@ -2175,7 +2181,8 @@
     "description": "Prompt for user to set account password in settings view"
   },
   "setAccountPasswordDescription": {
-    "message": "Secure your account and public key with a password",
+    "message":
+      "Require password to unlock Session’s screen.You can still receive message notifications while Screen Lock is enabled. Loki Messenger’s notification settings allow you to customize information that is displayed",
     "description": "Description for set account password setting view"
   },
   "changeAccountPasswordTitle": {
diff --git a/background.html b/background.html
index 3a4f7e988..429fa65b7 100644
--- a/background.html
+++ b/background.html
@@ -192,42 +192,6 @@
     </div>
   </script>
 
-  <script type='text/x-tmpl-mustache' id='beta-disclaimer-dialog'>
-    <div class="content">
-      <div class="betaDisclaimerView" style="display: none;">
-        <h2>
-          Thanks for testing Session Messenger!
-        </h2>
-        <p>
-            Thanks for testing Session Messenger! This software is a beta version of the full Session Messenger software suite, and so is missing some of the features the full version will have.
-        </p>
-
-        <p>
-          <b>
-            This version of Session Messenger provides no guarantees of metadata privacy.
-          </b>
-        </p>
-
-        <p>
-            While your messages are secured using end to end encryption, in this beta version of Loki messenger, <b>third parties (like your ISP or the Service Node network) can see who you’re talking to</b> and when you’re sending or receiving messages.
-        </p>
-
-        <p>
-            It is also possible that <b>third parties could correlate your public key to your IP address</b> and your real identity if they learn your public key.
-        </p>
-
-        <p>
-            However, no one except you and your intended recipients will be able to see the contents of your messages. We recommend using existing methods, like Tor or I2P to mask your IP address while using Session Messenger beta version.
-        </p>
-
-        <p>
-            As a beta, this software is still experimental. When things aren't working for you, or you feel confused by the app, please let us know by filing an issue on <a href="https://github.com/loki-project/loki-messenger">Github</a> or making suggestions on <a href="https://discordapp.com/invite/67GXfD6">Discord</a>.
-        </p>
-
-        <button class='ok' tabindex='1'>{{ ok }}</button>
-      </div>
-    </div>
-  </script>
   <script type='text/x-tmpl-mustache' id='connecting-to-server-template'>
     <div class="content">
       {{ #title }}
diff --git a/js/background.js b/js/background.js
index 91d35bd38..2843177be 100644
--- a/js/background.js
+++ b/js/background.js
@@ -823,7 +823,7 @@
     window.showQRDialog = window.owsDesktopApp.appView.showQRDialog;
     window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog;
     window.showPasswordDialog = window.owsDesktopApp.appView.showPasswordDialog;
-    window.showEditProfileDialog = async () => {
+    window.showEditProfileDialog = async callback => {
       const ourNumber = window.storage.get('primaryDevicePubKey');
       const conversation = await ConversationController.getOrCreateAndWait(
         ourNumber,
@@ -852,6 +852,7 @@
 
       if (appView) {
         appView.showEditProfileDialog({
+          callback,
           profileName: displayName,
           pubkey: ourNumber,
           avatarPath,
@@ -972,6 +973,9 @@
       return toastID;
     };
 
+    // Get memberlist. This function is not accurate >>
+    // window.getMemberList = window.lokiPublicChatAPI.getListOfMembers();
+
     window.deleteAccount = async () => {
       try {
         window.log.info('Deleting everything!');
diff --git a/js/models/conversations.js b/js/models/conversations.js
index 3d1a8c7ea..c3c80e381 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -2680,8 +2680,13 @@
     copyPublicKey() {
       clipboard.writeText(this.id);
 
+      const isGroup = this.getProps().type === 'group';
+      const copiedMessage = isGroup
+        ? i18n('copiedChatId')
+        : i18n('copiedPublicKey');
+
       window.pushToast({
-        title: i18n('copiedPublicKey'),
+        title: copiedMessage,
         type: 'success',
         id: 'copiedPublicKey',
       });
diff --git a/js/views/edit_profile_dialog_view.js b/js/views/edit_profile_dialog_view.js
index 9aa13bdf8..b96eabfec 100644
--- a/js/views/edit_profile_dialog_view.js
+++ b/js/views/edit_profile_dialog_view.js
@@ -8,9 +8,17 @@
 
   Whisper.EditProfileDialogView = Whisper.View.extend({
     className: 'loki-dialog modal',
-    initialize({ profileName, avatarPath, avatarColor, pubkey, onOk }) {
+    initialize({
+      profileName,
+      avatarPath,
+      avatarColor,
+      pubkey,
+      onOk,
+      callback,
+    }) {
       this.close = this.close.bind(this);
 
+      this.callback = callback;
       this.profileName = profileName;
       this.pubkey = pubkey;
       this.avatarPath = avatarPath;
@@ -25,6 +33,7 @@
         className: 'edit-profile-dialog',
         Component: window.Signal.Components.EditProfileDialog,
         props: {
+          callback: this.callback,
           onOk: this.onOk,
           onClose: this.close,
           profileName: this.profileName,
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index a10c3f3aa..f0a5eab57 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -123,7 +123,8 @@
       });
 
       if (!window.storage.get('betaReleaseDisclaimerAccepted')) {
-        this.showBetaReleaseDisclaimer();
+        // Beta disclaimer disabled.
+        // this.showBetaReleaseDisclaimer();
       }
 
       if (!options.initialLoadComplete) {
diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss
index 3871345f7..9289e6c62 100644
--- a/stylesheets/_mentions.scss
+++ b/stylesheets/_mentions.scss
@@ -140,12 +140,12 @@
 
     .name-part {
       font-weight: 300;
-      margin-left: 6px;
+      margin-left: 12px;
     }
 
     .pubkey-part {
-      margin-left: 6px;
-      color: darkslategrey;
+      margin-left: 10px;
+      opacity: 0.6;
     }
   }
 }
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 8ee6dc6d5..9baf6d4f8 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1140,12 +1140,12 @@ label {
   &__version-info {
     display: flex;
     justify-content: space-between;
-    
+
     padding: $session-margin-sm $session-margin-md;
     background-color: $session-shade-5;
     font-size: $session-font-xs;
 
-    span{
+    span {
       opacity: 0.4;
       transition: $session-transition-duration;
 
@@ -1197,7 +1197,8 @@ label {
   }
 }
 
-#qr svg {
+#qr svg,
+.qr-image svg {
   width: $session-modal-size-sm;
   height: $session-modal-size-sm;
   padding: $session-margin-xs;
@@ -1384,7 +1385,8 @@ button.module-scroll-down {
 /* Memberlist */
 .member-list-container .member {
   &-item {
-    padding: $session-margin-sm;
+    font-family: "SF Pro Text";
+    padding: $session-margin-sm $session-margin-md;
     background-color: $session-shade-5;
 
     &:hover:not(.member-selected) {
diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx
index 8a8c47cca..e9c683075 100644
--- a/ts/components/EditProfileDialog.tsx
+++ b/ts/components/EditProfileDialog.tsx
@@ -23,6 +23,7 @@ declare global {
 }
 
 interface Props {
+  callback: any;
   i18n: any;
   profileName: string;
   avatarPath: string;
@@ -50,6 +51,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
     this.onClickOK = this.onClickOK.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onFileSelected = this.onFileSelected.bind(this);
+    this.fireInputEvent = this.fireInputEvent.bind(this);
 
     this.state = {
       profileName: this.props.profileName,
@@ -139,19 +141,16 @@ export class EditProfileDialog extends React.Component<Props, State> {
             <div
               className="image-upload-section"
               role="button"
-              onClick={() => {
-                this.setState({mode: 'edit'}, this.fireInputEvent);
-              }}
-            >
-              <input
-                type="file"
-                ref={this.inputEl}
-                className="input-file"
-                placeholder="input file"
-                name="name"
-                onChange={this.onFileSelected}
-              />
-            </div>
+              onClick={this.fireInputEvent}
+            />
+            <input
+              type="file"
+              ref={this.inputEl}
+              className="input-file"
+              placeholder="input file"
+              name="name"
+              onChange={this.onFileSelected}
+            />
             <div className="qr-view-button">
               <SessionIconButton
                 iconType={SessionIconType.QR}
@@ -169,10 +168,12 @@ export class EditProfileDialog extends React.Component<Props, State> {
   }
 
   private fireInputEvent() {
-    const el = this.inputEl.current;
-    if (el) {
-      el.click();
-    }
+    this.setState({ mode: 'edit' }, () => {
+      const el = this.inputEl.current;
+      if (el) {
+        el.click();
+      }
+    });
   }
 
   private renderDefaultView() {
@@ -275,7 +276,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':
-        if (this.state.mode === 'edit'){
+        if (this.state.mode === 'edit') {
           this.onClickOK();
         }
         break;
@@ -301,8 +302,6 @@ export class EditProfileDialog extends React.Component<Props, State> {
     const newName = this.state.profileName.trim();
 
     if (newName === '') {
-      this.setState({mode: 'default'});
-      
       return;
     }
 
@@ -316,10 +315,17 @@ export class EditProfileDialog extends React.Component<Props, State> {
 
     this.props.onOk(newName, avatar);
 
-    this.setState({
-      mode: 'default',
-      setProfileName: this.state.profileName,
-    });
+    this.setState(
+      {
+        mode: 'default',
+        setProfileName: this.state.profileName,
+      },
+      () => {
+        // Update settinngs in dialog complete;
+        // now callback to reloadactions panel avatar
+        this.props.callback(this.state.avatar);
+      }
+    );
   }
 
   private closeDialog() {
diff --git a/ts/components/conversation/MemberList.tsx b/ts/components/conversation/MemberList.tsx
index 80601b04a..36b6aa8b3 100644
--- a/ts/components/conversation/MemberList.tsx
+++ b/ts/components/conversation/MemberList.tsx
@@ -68,8 +68,6 @@ class MemberItem extends React.Component<MemberItemProps> {
 
     const mark = markType === 'kicked' ? '✘' : '✔';
 
-    const nameAndPubKey = `${name} ${window.shortenPubkey(pubkey)}`;
-
     return (
       <div
         role="button"
@@ -80,7 +78,8 @@ class MemberItem extends React.Component<MemberItemProps> {
         onClick={this.handleClick}
       >
         {this.renderAvatar()}
-        <span className="name-part">{nameAndPubKey}</span>
+        <span className="name-part">{name}</span>
+        <span className="pubkey-part">{pubkey}</span>
         <span className={classNames(markClasses)}>{mark}</span>
       </div>
     );
diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx
index f1dceb134..073d69d23 100644
--- a/ts/components/session/ActionsPanel.tsx
+++ b/ts/components/session/ActionsPanel.tsx
@@ -24,92 +24,14 @@ interface Props {
   receivedFriendRequestCount: number;
 }
 
-const Section = ({
-  isSelected,
-  onSelect,
-  type,
-  avatarPath,
-  notificationCount,
-}: {
-  isSelected: boolean;
-  onSelect?: (event: SectionType) => void;
-  type: SectionType;
-  avatarPath?: string;
-  avatarColor?: string;
-  notificationCount?: number;
-}) => {
-  const handleClick = onSelect
-    ? () => {
-        type === SectionType.Profile
-          ? window.showEditProfileDialog()
-          : /* tslint:disable-next-line:no-void-expression */
-            onSelect(type);
-      }
-    : undefined;
-
-  if (type === SectionType.Profile) {
-    return (
-      <Avatar
-        avatarPath={avatarPath}
-        conversationType="direct"
-        i18n={window.i18n}
-        // tslint:disable-next-line: no-backbone-get-set-outside-model
-        phoneNumber={window.storage.get('primaryDevicePubKey')}
-        size={28}
-        onAvatarClick={handleClick}
-      />
-    );
-  }
-
-  let iconType: SessionIconType;
-  switch (type) {
-    case SectionType.Message:
-      iconType = SessionIconType.ChatBubble;
-      break;
-    case SectionType.Contact:
-      iconType = SessionIconType.Users;
-      break;
-    case SectionType.Channel:
-      iconType = SessionIconType.Globe;
-      break;
-    case SectionType.Settings:
-      iconType = SessionIconType.Gear;
-      break;
-    case SectionType.Moon:
-      iconType = SessionIconType.Moon;
-      break;
-
-    default:
-      iconType = SessionIconType.Moon;
-  }
-  if (!isSelected) {
-    return (
-      <SessionIconButton
-        iconSize={SessionIconSize.Medium}
-        iconType={iconType}
-        notificationCount={notificationCount}
-        onClick={handleClick}
-      />
-    );
-  } else {
-    return (
-      <SessionIconButton
-        iconSize={SessionIconSize.Medium}
-        iconType={iconType}
-        notificationCount={notificationCount}
-        onClick={handleClick}
-        isSelected={isSelected}
-      />
-    );
-  }
-};
-
 export class ActionsPanel extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       avatarPath: '',
     };
+
+    this.editProfileHandle = this.editProfileHandle.bind(this);
   }
 
   public componentDidMount() {
@@ -125,6 +47,94 @@ export class ActionsPanel extends React.Component<Props, State> {
     );
   }
 
+  public Section = ({
+    isSelected,
+    onSelect,
+    type,
+    avatarPath,
+    notificationCount,
+  }: {
+    isSelected: boolean;
+    onSelect?: (event: SectionType) => void;
+    type: SectionType;
+    avatarPath?: string;
+    avatarColor?: string;
+    notificationCount?: number;
+  }) => {
+    const handleClick = onSelect
+      ? () => {
+          type === SectionType.Profile
+            ? this.editProfileHandle()
+            : /* tslint:disable-next-line:no-void-expression */
+              onSelect(type);
+        }
+      : undefined;
+
+    if (type === SectionType.Profile) {
+      return (
+        <Avatar
+          avatarPath={avatarPath}
+          conversationType="direct"
+          i18n={window.i18n}
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          phoneNumber={window.storage.get('primaryDevicePubKey')}
+          size={28}
+          onAvatarClick={handleClick}
+        />
+      );
+    }
+
+    let iconType: SessionIconType;
+    switch (type) {
+      case SectionType.Message:
+        iconType = SessionIconType.ChatBubble;
+        break;
+      case SectionType.Contact:
+        iconType = SessionIconType.Users;
+        break;
+      case SectionType.Channel:
+        iconType = SessionIconType.Globe;
+        break;
+      case SectionType.Settings:
+        iconType = SessionIconType.Gear;
+        break;
+      case SectionType.Moon:
+        iconType = SessionIconType.Moon;
+        break;
+
+      default:
+        iconType = SessionIconType.Moon;
+    }
+    if (!isSelected) {
+      return (
+        <SessionIconButton
+          iconSize={SessionIconSize.Medium}
+          iconType={iconType}
+          notificationCount={notificationCount}
+          onClick={handleClick}
+        />
+      );
+    } else {
+      return (
+        <SessionIconButton
+          iconSize={SessionIconSize.Medium}
+          iconType={iconType}
+          notificationCount={notificationCount}
+          onClick={handleClick}
+          isSelected={isSelected}
+        />
+      );
+    }
+  };
+
+  public editProfileHandle() {
+    window.showEditProfileDialog((avatar: any) => {
+      this.setState({
+        avatarPath: avatar,
+      });
+    });
+  }
+
   public render(): JSX.Element {
     const {
       selectedSection,
@@ -141,35 +151,35 @@ export class ActionsPanel extends React.Component<Props, State> {
 
     return (
       <div className="module-left-pane__sections-container">
-        <Section
+        <this.Section
           type={SectionType.Profile}
           avatarPath={this.state.avatarPath}
           isSelected={isProfilePageSelected}
           onSelect={this.handleSectionSelect}
         />
-        <Section
+        <this.Section
           type={SectionType.Message}
           isSelected={isMessagePageSelected}
           onSelect={this.handleSectionSelect}
           notificationCount={unreadMessageCount}
         />
-        <Section
+        <this.Section
           type={SectionType.Contact}
           isSelected={isContactPageSelected}
           onSelect={this.handleSectionSelect}
           notificationCount={receivedFriendRequestCount}
         />
-        <Section
+        <this.Section
           type={SectionType.Channel}
           isSelected={isChannelPageSelected}
           onSelect={this.handleSectionSelect}
         />
-        <Section
+        <this.Section
           type={SectionType.Settings}
           isSelected={isSettingsPageSelected}
           onSelect={this.handleSectionSelect}
         />
-        <Section
+        <this.Section
           type={SectionType.Moon}
           isSelected={isMoonPageSelected}
           onSelect={this.handleSectionSelect}
diff --git a/ts/global.d.ts b/ts/global.d.ts
index 997a55148..d94312f61 100644
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -18,6 +18,9 @@ interface Window {
   Signal: any;
   Whisper: any;
   ConversationController: any;
+  
+  // Following function needs to be written in background.js
+  // getMemberList: any;  
 
   setPassword: any;
   textsecure: any;