display linked device in settings

ts/components/DevicePairingDialog.tsx

@@ -27,7 +27,6 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     this.onKeyUp = this.onKeyUp.bind(this);
     this.stopReceivingRequests = this.stopReceivingRequests.bind(this);
     this.startReceivingRequests = this.startReceivingRequests.bind(this);
-    this.getPubkeyName = this.getPubkeyName.bind(this);
     this.skipDevice = this.skipDevice.bind(this);
     this.allowDevice = this.allowDevice.bind(this);
     this.validateSecondaryDevice = this.validateSecondaryDevice.bind(this);
@@ -60,8 +59,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
   public renderFilterRequestsView() {
     const { currentPubKey, accepted, deviceAlias } = this.state;
     const secretWords = window.mnemonic.pubkey_to_secret_words(currentPubKey);
-    const deviceAliasPlaceholder = this.getPubkeyName(currentPubKey);
-    const deviceName = deviceAliasPlaceholder.deviceAlias;
+    const deviceAliasPlaceholder = 'Unnamed Device';
 
     if (accepted) {
       return (
@@ -71,7 +69,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
           onClose={this.closeDialog}
         >
           <div className="session-modal__centered">
-            <input onChange={this.handleUpdateDeviceAlias}>{deviceName}</input>
+            <input onChange={this.handleUpdateDeviceAlias}>{deviceAliasPlaceholder}</input>
             <div className="session-modal__button-group">
               <SessionButton
                 text={window.i18n('ok')}
@@ -170,18 +168,6 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     );
   }
 
-  private getPubkeyName(pubKey: string | null) {
-    if (!pubKey) {
-      return {};
-    }
-
-    const secretWords = window.mnemonic.pubkey_to_secret_words(pubKey);
-    const conv = window.ConversationController.get(this.state.currentPubKey);
-    const deviceAlias = conv ? conv.getNickname() : 'Unnamed Device';
-
-    return { deviceAlias, secretWords };
-  }
-
   private reset() {
     this.setState({
       currentPubKey: null,

ts/components/session/settings/SessionLinkedDeviceListItem.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { SessionButton, SessionButtonColor } from '../SessionButton';
+
+interface Props {
+    title: string;
+    description: string;
+    onClick: any;
+}
+
+export class SessionLinkedDeviceListItem extends React.Component<Props> {
+    public constructor(props: Props) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        const { title, description, onClick } = this.props;
+
+        return (
+            <div className={classNames('session-settings-item', 'inline')} >
+                <div className="session-settings-item__info">
+                    <div className="session-settings-item__title">{title}</div>
+                    <div className="session-settings-item__description">
+                        {description}
+                    </div>
+                </div>
+                <div className="session-settings-item__content">
+                    <SessionButton
+                        text={window.i18n('unpairDevice')}
+                        buttonColor={SessionButtonColor.Danger}
+                        onClick={onClick}
+                    />
+                </div>
+            </div >
+        );
+    }
+}

ts/components/session/settings/SessionSettings.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { SettingsHeader } from './SessionSettingsHeader';
 import { SessionSettingListItem } from './SessionSettingListItem';
 import { SessionButtonColor } from '../SessionButton';
+import { SessionLinkedDeviceListItem } from './SessionLinkedDeviceListItem';
 
 export enum SessionSettingCategory {
   General = 'general',
@@ -26,6 +27,7 @@ export interface SettingsViewProps {
 
 interface State {
   hasPassword: boolean | null;
+  linkedPubKeys: Array<any>;
 }
 
 export class SettingsView extends React.Component<SettingsViewProps, State> {
@@ -36,6 +38,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
 
     this.state = {
       hasPassword: null,
+      linkedPubKeys: new Array(),
     };
 
     this.settingsViewRef = React.createRef();
@@ -44,6 +47,16 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     this.hasPassword();
   }
 
+  public componentWillMount() {
+    const ourPubKey = window.textsecure.storage.user.getNumber();
+
+    window.libloki.storage.getSecondaryDevicesFor(ourPubKey).then((pubKeys: any) => {
+      this.setState({
+        linkedPubKeys: pubKeys,
+      });
+    });
+  }
+
   /* tslint:disable-next-line:max-func-body-length */
   public renderSettingInCategory(): JSX.Element {
     const { category } = this.props;
@@ -317,7 +330,51 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   }
 
 
+  private getPubkeyName(pubKey: string | null) {
+    if (!pubKey) {
+      return {};
+    }
+
+    const secretWords = window.mnemonic.pubkey_to_secret_words(pubKey);
+    const conv = window.ConversationController.get(pubKey);
+    const deviceAlias = conv ? conv.getNickname() : 'Unnamed Device';
+
+    return { deviceAlias, secretWords };
+  }
+
   private renderLinkedDevicesCategory(): JSX.Element {
-    return <div />;
+    const { linkedPubKeys } = this.state;
+
+            /*const li = $('<li>').html(name);
+        if (window.lokiFeatureFlags.multiDeviceUnpairing) {
+          const link = $('<a>')
+            .text('Unpair')
+            .attr('href', '#');
+          link.on('click', () => this.requestUnpairDevice(x));
+          li.append(' - ');
+          li.append(link);
+        }*/
+
+    if (linkedPubKeys && linkedPubKeys.length > 0) {
+      //this.$('#startPairing').attr('disabled', true);
+      const items = linkedPubKeys.map((pubkey: any) => {
+        const { deviceAlias, secretWords } = this.getPubkeyName(pubkey);
+        const description = `${secretWords} ${window.shortenPubkey(pubkey)}`;
+
+        return (
+          <SessionLinkedDeviceListItem onClick={() => {}} title={deviceAlias} key={pubkey}  description={description} />
+        );
+      });
+
+      return (
+        <div>
+        {items}
+        </div>);
+    } else {
+      //this.$('#startPairing').removeAttr('disabled');
+      //this.$('#pairedPubKeys').append('<li>No paired devices</li>');
+
+      return (<li>No paired devices</li>);
+    }
   }
 }