add unpairing of device from settings

_locales/en/messages.json

@@ -994,6 +994,9 @@
   "unpairDevice": {
     "message": "Unpair Device"
   },
+  "deviceUnpaired": {
+    "message": "Device Unpaired"
+  },
   "clear": {
     "message": "Clear"
   },

js/background.js

@@ -1198,9 +1198,9 @@
       }
     });
 
-    Whisper.events.on('showDevicePairingDialog', async () => {
+    Whisper.events.on('showDevicePairingDialog', async (options = {}) => {
       if (appView) {
-        appView.showDevicePairingDialog();
+        appView.showDevicePairingDialog(options);
       }
     });
 
@@ -1269,6 +1269,7 @@
       await window.lokiFileServerAPI.updateOurDeviceMapping();
       // TODO: we should ensure the message was sent and retry automatically if not
       await libloki.api.sendUnpairingMessageToSecondary(pubKey);
+      Whisper.events.trigger('refreshLinkedDeviceList');
     });
   }
 

js/views/app_view.js

@@ -213,8 +213,8 @@
       });
       this.el.append(dialog.el);
     },
-    showDevicePairingDialog() {
-      const dialog = new Whisper.DevicePairingDialogView();
+    showDevicePairingDialog(options) {
+      const dialog = new Whisper.DevicePairingDialogView(options);
 
       this.el.append(dialog.el);
     },

js/views/device_pairing_dialog_view.js

@@ -8,8 +8,9 @@
 
   Whisper.DevicePairingDialogView = Whisper.View.extend({
     className: 'loki-dialog device-pairing-dialog modal',
-    initialize() {
+    initialize(options) {
       this.close = this.close.bind(this);
+      this.pubKeyToUnpair = options.pubKeyToUnpair;
       this.render();
     },
 
@@ -20,6 +21,7 @@
         props: {
           i18n,
           onClose: this.close,
+          pubKeyToUnpair: this.pubKeyToUnpair,
         },
       });
 

ts/components/DevicePairingDialog.tsx

@@ -2,18 +2,19 @@ import React, { ChangeEvent } from 'react';
 import { QRCode } from 'react-qr-svg';
 
 import { SessionModal } from './session/SessionModal';
-import { SessionButton } from './session/SessionButton';
+import { SessionButton, SessionButtonColor } from './session/SessionButton';
 import { SessionSpinner } from './session/SessionSpinner';
 
 interface Props {
   onClose: any;
+  pubKeyToUnpair: string | undefined;
 }
 
 interface State {
   currentPubKey: string | undefined;
   accepted: boolean;
   pubKeyRequests: Array<any>;
-  currentView: 'filterRequestView' | 'qrcodeView';
+  currentView: 'filterRequestView' | 'qrcodeView' | 'unpairDeviceView';
   errors: any;
   loading: boolean;
   deviceAlias: string | undefined;
@@ -31,12 +32,13 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     this.allowDevice = this.allowDevice.bind(this);
     this.validateSecondaryDevice = this.validateSecondaryDevice.bind(this);
     this.handleUpdateDeviceAlias = this.handleUpdateDeviceAlias.bind(this);
+    this.triggerUnpairDevice = this.triggerUnpairDevice.bind(this);
 
     this.state = {
       currentPubKey: undefined,
       accepted: false,
       pubKeyRequests: Array(),
-      currentView: 'qrcodeView',
+      currentView: props.pubKeyToUnpair ? 'unpairDeviceView' : 'qrcodeView',
       loading: false,
       errors: undefined,
       deviceAlias: 'Unnamed Device',
@@ -44,21 +46,21 @@ export class DevicePairingDialog extends React.Component<Props, State> {
   }
 
   public componentWillMount() {
-    this.startReceivingRequests();
+    if (this.state.currentView === 'qrcodeView') {
+      this.startReceivingRequests();
+    }
   }
 
   public componentWillUnmount() {
     this.closeDialog();
   }
 
-  /*
-  dialog.on('deviceUnpairingRequested', pubKey =>
-    Whisper.events.trigger('deviceUnpairingRequested', pubKey)
-  );*/
-
   public renderFilterRequestsView() {
     const { currentPubKey, accepted, deviceAlias } = this.state;
-    const secretWords = window.mnemonic.pubkey_to_secret_words(currentPubKey);
+    let secretWords: undefined;
+    if (currentPubKey) {
+      secretWords = window.mnemonic.pubkey_to_secret_words(currentPubKey);
+    }
 
     if (accepted) {
       return (
@@ -68,7 +70,12 @@ export class DevicePairingDialog extends React.Component<Props, State> {
           onClose={this.closeDialog}
         >
           <div className="session-modal__centered">
-            <input type="text" onChange={this.handleUpdateDeviceAlias} value={deviceAlias} id={currentPubKey}/>
+            <input
+              type="text"
+              onChange={this.handleUpdateDeviceAlias}
+              value={deviceAlias}
+              id={currentPubKey}
+            />
             <div className="session-modal__button-group">
               <SessionButton
                 text={window.i18n('ok')}
@@ -154,15 +161,60 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     );
   }
 
+  public renderUnpairDeviceView() {
+    const { pubKeyToUnpair } = this.props;
+    const secretWords = window.mnemonic.pubkey_to_secret_words(pubKeyToUnpair);
+    const conv = window.ConversationController.get(pubKeyToUnpair);
+    let description;
+
+    if (conv && conv.getNickname()) {
+      description = `${conv.getNickname()}: ${window.shortenPubkey(
+        pubKeyToUnpair
+      )} ${secretWords}`;
+    } else {
+      description = `${window.shortenPubkey(pubKeyToUnpair)} ${secretWords}`;
+    }
+
+    return (
+      <SessionModal
+        title={window.i18n('unpairDevice')}
+        onOk={() => null}
+        onClose={this.closeDialog}
+      >
+        <div className="session-modal__centered">
+          <p className="session-modal__description">
+            {window.i18n('confirmUnpairingTitle')}
+            <br />
+            <span className="text-subtle">{description}</span>
+          </p>
+          <div className="spacer-xs" />
+          <div className="session-modal__button-group">
+            <SessionButton
+              text={window.i18n('cancel')}
+              onClick={this.closeDialog}
+            />
+            <SessionButton
+              text={window.i18n('unpairDevice')}
+              onClick={this.triggerUnpairDevice}
+              buttonColor={SessionButtonColor.Danger}
+            />
+          </div>
+        </div>
+      </SessionModal>
+    );
+  }
+
   public render() {
     const { currentView } = this.state;
     const renderQrCodeView = currentView === 'qrcodeView';
     const renderFilterRequestView = currentView === 'filterRequestView';
+    const renderUnpairDeviceView = currentView === 'unpairDeviceView';
 
     return (
       <>
         {renderQrCodeView && this.renderQrCodeView()}
         {renderFilterRequestView && this.renderFilterRequestsView()}
+        {renderUnpairDeviceView && this.renderUnpairDeviceView()}
       </>
     );
   }
@@ -232,6 +284,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
       // FIXME display error somewhere
       // FIXME display list of linked device
       // FIXME do not show linked device in list of contacts
+      console.log('FIXME');
 
       return;
     }
@@ -283,6 +336,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
       this.state.currentPubKey,
       (errors: any) => {
         this.transmissionCB(errors);
+        window.Whisper.events.trigger('refreshLinkedDeviceList');
 
         return true;
       }
@@ -314,4 +368,15 @@ export class DevicePairingDialog extends React.Component<Props, State> {
       this.setState({ deviceAlias: undefined });
     }
   }
+
+  private triggerUnpairDevice() {
+    window.Whisper.events.trigger(
+      'deviceUnpairingRequested',
+      this.props.pubKeyToUnpair
+    );
+    window.pushToast({
+      title: window.i18n('deviceUnpaired'),
+    });
+    this.closeDialog();
+  }
 }

ts/components/session/LeftPaneSettingSection.tsx

@@ -31,8 +31,6 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
 
     this.setCategory = this.setCategory.bind(this);
     this.renderRows = this.renderRows.bind(this);
-
-    //this.updateSearchBound = this.updateSearch.bind(this);
   }
 
   public render(): JSX.Element {

ts/components/session/settings/SessionSettingListItem.tsx

@@ -40,10 +40,9 @@ export class SessionSettingListItem extends React.Component<Props, State> {
   public render(): JSX.Element {
     const { title, description, type, value, content } = this.props;
 
-    const inline = !!type && ![
-      SessionSettingType.Options,
-      SessionSettingType.Slider,
-    ].includes(type);
+    const inline =
+      !!type &&
+      ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
 
     const currentSliderValue =
       type === SessionSettingType.Slider && (this.state.sliderValue || value);

ts/components/session/settings/SessionSettings.tsx

@@ -57,19 +57,20 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     this.onPasswordUpdated = this.onPasswordUpdated.bind(this);
 
     this.hasPassword();
+    this.refreshLinkedDevice = this.refreshLinkedDevice.bind(this);
   }
 
-  public componentWillMount() {
-    const { category } = this.props;
-    if (category === SessionSettingCategory.Devices) {
-      const ourPubKey = window.textsecure.storage.user.getNumber();
+  public componentDidMount() {
+    window.Whisper.events.on('refreshLinkedDeviceList', async () => {
+      setTimeout(() => {
+        this.refreshLinkedDevice();
+      }, 1000);
+    });
+    this.refreshLinkedDevice();
+  }
 
-      window.libloki.storage.getSecondaryDevicesFor(ourPubKey).then((pubKeys: any) => {
-        this.setState({
-          linkedPubKeys: pubKeys,
-        });
-      });
-    }
+  public componentWillUnmount() {
+    window.Whisper.events.off('refreshLinkedDeviceList');
   }
 
   /* tslint:disable-next-line:max-func-body-length */
@@ -93,7 +94,6 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
       <>
         {this.state.hasPassword !== null &&
           settings.map(setting => {
-            const { category } = this.props;
             const content = setting.content || undefined;
             const shouldRenderSettings = setting.category === category;
             const description = setting.description || '';
@@ -137,7 +137,6 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     );
   }
 
-
   public render() {
     const { category } = this.props;
 
@@ -152,7 +151,6 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   }
 
 
-
   public setOptionsSetting(settingID: string) {
     const selectedValue = $(`#${settingID} .session-radio input:checked`).val();
     window.setSettingValue(settingID, selectedValue);
@@ -210,7 +208,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   }
 
   // tslint:disable-next-line: max-func-body-length
-  private getLocalSettings() : Array<LocalSettingType> {
+  private getLocalSettings(): Array<LocalSettingType> {
     const { Settings } = window.Signal.Types;
 
     return [
@@ -385,7 +383,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     ];
   }
 
-  private getLinkedDeviceSettings() : Array<LocalSettingType> {
+  private getLinkedDeviceSettings(): Array<LocalSettingType> {
     const { linkedPubKeys } = this.state;
 
     if (linkedPubKeys && linkedPubKeys.length > 0) {
@@ -393,69 +391,69 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         const { deviceAlias, secretWords } = this.getPubkeyName(pubkey);
         const description = `${secretWords} ${window.shortenPubkey(pubkey)}`;
 
-        return {
-          id: pubkey,
-          title: deviceAlias,
-          description: description,
-          type: SessionSettingType.Button,
+        if (window.lokiFeatureFlags.multiDeviceUnpairing) {
+          return {
+            id: pubkey,
+            title: deviceAlias,
+            description: description,
+            type: SessionSettingType.Button,
+            category: SessionSettingCategory.Devices,
+            content: {
+              buttonColor: SessionButtonColor.Danger,
+              buttonText: window.i18n('unpairDevice'),
+            },
+            comparisonValue: undefined,
+            setFn: () => {
+              window.Whisper.events.trigger('showDevicePairingDialog', {
+                pubKeyToUnpair: pubkey,
+              });
+            },
+            hidden: undefined,
+            onClick: undefined,
+          };
+        } else {
+          return {
+            id: pubkey,
+            title: deviceAlias,
+            description: description,
+            type: undefined,
+            category: SessionSettingCategory.Devices,
+            content: {},
+            comparisonValue: undefined,
+            setFn: undefined,
+            hidden: undefined,
+            onClick: undefined,
+          };
+        }
+      });
+    } else {
+      return [
+        {
+          id: 'no-linked-device',
+          title: window.i18n('noPairedDevices'),
+          type: undefined,
+          description: '',
           category: SessionSettingCategory.Devices,
-          content: {
-            buttonColor: SessionButtonColor.Danger,
-            buttonText: window.i18n('unpairDevice'),
-          },
+          content: {},
           comparisonValue: undefined,
           onClick: undefined,
           setFn: undefined,
           hidden: undefined,
-        };
-      });
-    } else {
-      return [{
-        id: 'no-linked-device',
-        title: window.i18n('noPairedDevices'),
-        type: undefined,
-        description: '',
-        category: SessionSettingCategory.Devices,
-        content: {},
-        comparisonValue: undefined,
-        setFn: undefined,
-        hidden: undefined,
-        onClick: undefined,
-      }];
+        },
+      ];
     }
   }
-}
 
-  //
-
-  //           /*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>);
-  //   }
+  private refreshLinkedDevice() {
+    const ourPubKey = window.textsecure.storage.user.getNumber();
+
+    window.libloki.storage
+      .getSecondaryDevicesFor(ourPubKey)
+      .then((pubKeys: any) => {
+        this.setState({
+          linkedPubKeys: pubKeys,
+        });
+      });
+  }
+}
+//     //this.$('#startPairing').removeAttr('disabled');

ts/global.d.ts

@@ -41,6 +41,7 @@ interface Window {
 
   getSettingValue: any;
   setSettingValue: any;
+  lokiFeatureFlags: any;
 }
 
 interface Promise<T> {