Profile picture upload, fixes and copy

_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": {

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 }}

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!');

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',
       });

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,

js/views/inbox_view.js

@@ -123,7 +123,8 @@
       });
 
       if (!window.storage.get('betaReleaseDisclaimerAccepted')) {
-        this.showBetaReleaseDisclaimer();
+        // Beta disclaimer disabled.
+        // this.showBetaReleaseDisclaimer();
       }
 
       if (!options.initialLoadComplete) {

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;
     }
   }
 }

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) {

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() {

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>
     );

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}

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;