Settings lock view

ts/components/session/settings/SessionSettings.tsx

@@ -30,8 +30,22 @@ export interface SettingsViewProps {
 
 interface State {
   hasPassword: boolean | null;
-  shouldLockSettings: boolean | null;
   pwdLockError: string | null;
+  shouldLockSettings: boolean | null;
+  linkedPubKeys: Array<any>;
+}
+
+interface LocalSettingType {
+  category: SessionSettingCategory;
+  description: string | undefined;
+  comparisonValue: string | undefined;
+  id: any;
+  content: any | undefined;
+  hidden: any;
+  title: string;
+  type: SessionSettingType | undefined;
+  setFn: any;
+  onClick: any;
 }
 
 export class SettingsView extends React.Component<SettingsViewProps, State> {
@@ -44,6 +58,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
       hasPassword: null,
       pwdLockError: null,
       shouldLockSettings: true,
+      linkedPubKeys: new Array(),
     };
 
     this.settingsViewRef = React.createRef();
@@ -51,16 +66,228 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     this.validatePasswordLock = this.validatePasswordLock.bind(this);
 
     this.hasPassword();
+    this.refreshLinkedDevice = this.refreshLinkedDevice.bind(this);
+  }
+
+  public componentDidMount() {
+    window.Whisper.events.on('refreshLinkedDeviceList', async () => {
+      setTimeout(() => {
+        this.refreshLinkedDevice();
+      }, 1000);
+    });
+    this.refreshLinkedDevice();
+  }
+
+  public componentWillUnmount() {
+    window.Whisper.events.off('refreshLinkedDeviceList');
   }
 
   /* tslint:disable-next-line:max-func-body-length */
-  public renderSettingInCategory() {
+  public renderSettingInCategory(): JSX.Element {
+    const { category } = this.props;
+
+    let settings: Array<LocalSettingType>;
+
+    if (category === SessionSettingCategory.Devices) {
+      // special case for linked devices
+      settings = this.getLinkedDeviceSettings();
+    } else {
+      // Grab initial values from database on startup
+      // ID corresponds to installGetter parameters in preload.js
+      // They are NOT arbitrary; add with caution
+
+      settings = this.getLocalSettings();
+    }
+
+    return (
+      <>
+        {this.state.hasPassword !== null &&
+          settings.map(setting => {
+            const content = setting.content || undefined;
+            const shouldRenderSettings = setting.category === category;
+            const description = setting.description || '';
+
+            const comparisonValue = setting.comparisonValue || null;
+            const value =
+              window.getSettingValue(setting.id, comparisonValue) ||
+              (setting.content && setting.content.defaultValue);
+
+            const sliderFn =
+              setting.type === SessionSettingType.Slider
+                ? (settingValue: any) =>
+                    window.setSettingValue(setting.id, settingValue)
+                : () => null;
+
+            const onClickFn =
+              setting.onClick ||
+              (() => {
+                this.updateSetting(setting);
+              });
+
+            return (
+              <div key={setting.id}>
+                {shouldRenderSettings &&
+                  !setting.hidden && (
+                    <SessionSettingListItem
+                      title={setting.title}
+                      description={description}
+                      type={setting.type}
+                      value={value}
+                      onClick={onClickFn}
+                      onSliderChange={sliderFn}
+                      content={content}
+                    />
+                  )}
+              </div>
+            );
+          })}
+      </>
+    );
+  }
+  
+  public renderPasswordLock() {
+    return (
+      <div className="session-settings__password-lock">
+        <div className="session-settings__password-lock-box">
+          <h3>{window.i18n('password')}</h3>
+          <input
+            type="password"
+            id="password-lock-input"
+            defaultValue=""
+            placeholder={" "}
+          />
+
+          {this.state.pwdLockError && (
+            <>
+              <div className="session-label warning">
+                {this.state.pwdLockError}
+              </div>
+              <div className="spacer-lg" />
+            </>
+          )}
+
+          <SessionButton
+            buttonType={SessionButtonType.BrandOutline}
+            buttonColor={SessionButtonColor.Green}
+            text={window.i18n('enter')}
+            onClick={this.validatePasswordLock}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  public async validatePasswordLock() {
+    const enteredPassword = String($('#password-lock-input').val());
+
+    if (!enteredPassword) {
+      this.setState({
+        pwdLockError: window.i18n('noGivenPassword'),
+      });
+      return false;
+    }
+
+    // Check if the password matches the hash we have stored
+    const hash = await window.Signal.Data.getPasswordHash();
+    if (hash && !window.passwordUtil.matchesHash(enteredPassword, hash)) {
+      this.setState({
+        pwdLockError: window.i18n('invalidPassword'),
+      });
+
+      return false;
+    }
+
+    // Unlocked settings
+    this.setState({
+      shouldLockSettings: false,
+      pwdLockError: null,
+    });
+
+    return true;
+  }
+
+  public render() {
+    const { category } = this.props;
+    const shouldRenderPasswordLock =
+      this.state.shouldLockSettings && this.state.hasPassword;
+
+    return (
+      <div className="session-settings">
+        <SettingsHeader category={category} />
+        {shouldRenderPasswordLock ? (
+          this.renderPasswordLock()
+        ) : (
+          <div ref={this.settingsViewRef} className="session-settings-list">
+            {this.renderSettingInCategory()}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  public setOptionsSetting(settingID: string) {
+    const selectedValue = $(`#${settingID} .session-radio input:checked`).val();
+    window.setSettingValue(settingID, selectedValue);
+  }
+
+  public hasPassword() {
+    const hashPromise = window.Signal.Data.getPasswordHash();
+
+    hashPromise.then((hash: any) => {
+      this.setState({
+        hasPassword: !!hash,
+      });
+    });
+  }
+
+  public updateSetting(item: any) {
+    // If there's a custom afterClick function,
+    // execute it instead of automatically updating settings
+    if (item.setFn) {
+      item.setFn();
+    } else {
+      if (item.type === SessionSettingType.Toggle) {
+        // If no custom afterClick function given, alter values in storage here
+        // Switch to opposite state
+        const newValue = !window.getSettingValue(item.id);
+        window.setSettingValue(item.id, newValue);
+      }
+    }
+  }
+
+  public onPasswordUpdated(action: string) {
+    if (action === 'set' || action === 'change') {
+      this.setState({
+        hasPassword: true,
+        shouldLockSettings: true,
+        pwdLockError: null,
+      });
+    }
+
+    if (action === 'remove') {
+      this.setState({
+        hasPassword: false,
+      });
+    }
+  }
+
+  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 };
+  }
+
+  // tslint:disable-next-line: max-func-body-length
+  private getLocalSettings(): Array<LocalSettingType> {
     const { Settings } = window.Signal.Types;
 
-    // Grab initial values from database on startup
+    return [
-    // ID corresponds to instalGetter parameters in preload.js
-    // They are NOT arbitrary; add with caution
-    const localSettings = [
       {
         id: 'theme-setting',
         title: window.i18n('themeToggleTitle'),
@@ -70,7 +297,8 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.General,
         setFn: window.toggleTheme,
-        content: {},
+        content: undefined,
+        onClick: undefined,
       },
       {
         id: 'hide-menu-bar',
@@ -80,7 +308,9 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.General,
         setFn: window.toggleMenuBar,
-        content: {},
+        content: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
       },
       {
         id: 'spell-check',
@@ -90,7 +320,9 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.General,
         setFn: window.toggleSpellCheck,
-        content: {},
+        content: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
       },
       {
         id: 'link-preview-setting',
@@ -100,13 +332,19 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.General,
         setFn: window.toggleLinkPreview,
-        content: {},
+        content: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
       },
       {
         id: 'notification-setting',
         title: window.i18n('notificationSettingsDialog'),
         type: SessionSettingType.Options,
         category: SessionSettingCategory.Notifications,
+        comparisonValue: undefined,
+        description: undefined,
+        hidden: undefined,
+        onClick: undefined,
         setFn: () => {
           this.setOptionsSetting('notification-setting');
         },
@@ -144,7 +382,9 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.Permissions,
         setFn: window.toggleMediaPermissions,
-        content: {},
+        content: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
       },
       {
         id: 'message-ttl',
@@ -154,6 +394,8 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Slider,
         category: SessionSettingCategory.Privacy,
         setFn: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
         content: {
           defaultValue: 24,
         },
@@ -166,6 +408,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Button,
         category: SessionSettingCategory.Privacy,
         setFn: undefined,
+        comparisonValue: undefined,
         content: {
           buttonText: window.i18n('setPassword'),
           buttonColor: SessionButtonColor.Primary,
@@ -184,6 +427,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Button,
         category: SessionSettingCategory.Privacy,
         setFn: undefined,
+        comparisonValue: undefined,
         content: {
           buttonText: window.i18n('changePassword'),
           buttonColor: SessionButtonColor.Primary,
@@ -202,6 +446,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         type: SessionSettingType.Button,
         category: SessionSettingCategory.Privacy,
         setFn: undefined,
+        comparisonValue: undefined,
         content: {
           buttonText: window.i18n('removePassword'),
           buttonColor: SessionButtonColor.Danger,
@@ -213,175 +458,78 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
           }),
       },
     ];
-
-    return (
-      <>
-        {this.state.hasPassword !== null &&
-          localSettings.map(setting => {
-            const { category } = this.props;
-            const content = setting.content || undefined;
-            const shouldRenderSettings = setting.category === category;
-            const description = setting.description || '';
-
-            const comparisonValue = setting.comparisonValue || null;
-            const value =
-              window.getSettingValue(setting.id, comparisonValue) ||
-              setting.content.defaultValue;
-
-            const sliderFn =
-              setting.type === SessionSettingType.Slider
-                ? (settingValue: any) =>
-                    window.setSettingValue(setting.id, settingValue)
-                : () => null;
-
-            const onClickFn =
-              setting.onClick ||
-              (() => {
-                this.updateSetting(setting);
-              });
-
-            return (
-              <div key={setting.id}>
-                {shouldRenderSettings &&
-                  !setting.hidden && (
-                    <SessionSettingListItem
-                      title={setting.title}
-                      description={description}
-                      type={setting.type}
-                      value={value}
-                      onClick={onClickFn}
-                      onSliderChange={sliderFn}
-                      content={content}
-                    />
-                  )}
-              </div>
-            );
-          })}
-      </>
-    );
   }
 
-  public renderPasswordLock() {
+  private getLinkedDeviceSettings(): Array<LocalSettingType> {
-    return (
+    const { linkedPubKeys } = this.state;
-      <div className="session-settings__password-lock">
+
-        <div className="session-settings__password-lock-box">
+    if (linkedPubKeys && linkedPubKeys.length > 0) {
-          <h3>{window.i18n('password')}</h3>
+      return linkedPubKeys.map((pubkey: any) => {
-          <input
+        const { deviceAlias, secretWords } = this.getPubkeyName(pubkey);
-            type="password"
+        const description = `${secretWords} ${window.shortenPubkey(pubkey)}`;
-            id="password-lock-input"
+
-            defaultValue=""
+        if (window.lokiFeatureFlags.multiDeviceUnpairing) {
-            placeholder={" "}
+          return {
-          />
+            id: pubkey,
-
+            title: deviceAlias,
-          {this.state.pwdLockError && (
+            description: description,
-            <>
+            type: SessionSettingType.Button,
-              <div className="session-label warning">
+            category: SessionSettingCategory.Devices,
-                {this.state.pwdLockError}
+            content: {
-              </div>
+              buttonColor: SessionButtonColor.Danger,
-              <div className="spacer-lg" />
+              buttonText: window.i18n('unpairDevice'),
-            </>
+            },
-          )}
+            comparisonValue: undefined,
-
+            setFn: () => {
-          <SessionButton
+              window.Whisper.events.trigger('showDevicePairingDialog', {
-            buttonType={SessionButtonType.BrandOutline}
+                pubKeyToUnpair: pubkey,
-            buttonColor={SessionButtonColor.Green}
+              });
-            text={window.i18n('enter')}
+            },
-            onClick={this.validatePasswordLock}
+            hidden: undefined,
-          />
+            onClick: undefined,
-        </div>
+          };
-      </div>
+        } else {
-    );
+          return {
-  }
+            id: pubkey,
-
+            title: deviceAlias,
-  public async validatePasswordLock() {
+            description: description,
-    const enteredPassword = String($('#password-lock-input').val());
+            type: undefined,
-
+            category: SessionSettingCategory.Devices,
-    if (!enteredPassword) {
+            content: {},
-      this.setState({
+            comparisonValue: undefined,
-        pwdLockError: window.i18n('noGivenPassword'),
+            setFn: undefined,
-      });
+            hidden: undefined,
-      return false;
+            onClick: undefined,
-    }
+          };
-
+        }
-    // Check if the password matches the hash we have stored
-    const hash = await window.Signal.Data.getPasswordHash();
-    if (hash && !window.passwordUtil.matchesHash(enteredPassword, hash)) {
-      this.setState({
-        pwdLockError: window.i18n('invalidPassword'),
-      });
-
-      return false;
-    }
-
-    // Unlocked settings
-    this.setState({
-      shouldLockSettings: false,
-    });
-
-    return true;
-  }
-
-  public hasPassword() {
-    const hashPromise = window.Signal.Data.getPasswordHash();
-
-    hashPromise.then((hash: any) => {
-      this.setState({
-        hasPassword: !!hash,
       });
-    });
-  }
-
-  public render() {
-    const { category } = this.props;
-    const shouldRenderPasswordLock =
-      this.state.shouldLockSettings && this.state.hasPassword;
-
-    return (
-      <div className="session-settings">
-        <SettingsHeader category={category} />
-        {shouldRenderPasswordLock ? (
-          this.renderPasswordLock()
-        ) : (
-          <div ref={this.settingsViewRef} className="session-settings-list">
-            {this.renderSettingInCategory()}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  public updateSetting(item: any) {
-    // If there's a custom afterClick function,
-    // execute it instead of automatically updating settings
-    if (item.setFn) {
-      item.setFn();
     } else {
-      if (item.type === SessionSettingType.Toggle) {
+      return [
-        // If no custom afterClick function given, alter values in storage here
+        {
-        // Switch to opposite state
+          id: 'no-linked-device',
-        const newValue = !window.getSettingValue(item.id);
+          title: window.i18n('noPairedDevices'),
-        window.setSettingValue(item.id, newValue);
+          type: undefined,
-      }
+          description: '',
+          category: SessionSettingCategory.Devices,
+          content: {},
+          comparisonValue: undefined,
+          onClick: undefined,
+          setFn: undefined,
+          hidden: undefined,
+        },
+      ];
     }
   }
 
-  public setOptionsSetting(settingID: string) {
+  private refreshLinkedDevice() {
-    const selectedValue = $(`#${settingID} .session-radio input:checked`).val();
+    const ourPubKey = window.textsecure.storage.user.getNumber();
-    window.setSettingValue(settingID, selectedValue);
-  }
 
-  public onPasswordUpdated(action: string) {
+    window.libloki.storage
-    if (action === 'set' || action === 'change') {
+      .getSecondaryDevicesFor(ourPubKey)
-      this.setState({
+      .then((pubKeys: any) => {
-        hasPassword: true,
+        this.setState({
-        shouldLockSettings: true,
+          linkedPubKeys: pubKeys,
-      });
+        });
-    }
-
-    if (action === 'remove') {
-      this.setState({
-        hasPassword: false,
       });
-    }
   }
-}
+}