mergable settingsview

_locales/en/messages.json

@@ -1843,10 +1843,10 @@
     "message": "Dark",
     "description": "Label text for dark theme"
   },
-  "themeToggleTitle" : {
+  "themeToggleTitle": {
     "message": "Light Mode"
   },
-  "themeToggleDescription" : {
+  "themeToggleDescription": {
     "message": "Choose the theme best suited to you"
   },
   "noteToSelf": {

js/background.js

@@ -907,23 +907,21 @@
     };
 
     window.toggleMenuBar = () => {
-      const newValue = ! window.getSettingValue('hide-menu-bar');
+      const newValue = !window.getSettingValue('hide-menu-bar');
       window.Events.setHideMenuBar(newValue);
-    }
+    };
 
     window.toggleSpellCheck = () => {
-      const newValue = ! window.getSettingValue('spell-check');
+      const newValue = !window.getSettingValue('spell-check');
       window.Events.setSpellCheck(newValue);
-    }
+    };
 
     window.toggleLinkPreview = () => {
-      const newValue = ! window.getSettingValue('link-preview-setting');
+      const newValue = !window.getSettingValue('link-preview-setting');
       window.Events.setLinkPreviewSetting(newValue);
-    }
-
-    window.toggleMediaPermissions= () => {
+    };
 
-    }
+    window.toggleMediaPermissions = () => {};
 
     window.sendGroupInvitations = (serverInfo, pubkeys) => {
       pubkeys.forEach(async pubkey => {

preload.js

@@ -185,18 +185,17 @@ ipc.on('remove-dark-overlay', () => {
   }
 });
 
-
 window.getSettingValue = (settingID, comparisonValue = null) => {
   // Comparison value allows you to pull boolean values from any type.
   // Eg. window.getSettingValue('theme', 'light')
   // returns 'false' when the value is 'dark'.
   const settingVal = window.storage.get(settingID);
   return comparisonValue ? !!settingVal === comparisonValue : settingVal;
-}
+};
 
 window.setSettingValue = (settingID, value) => {
   window.storage.put(settingID, value);
-}
+};
 
 installGetter('device-name', 'getDeviceName');
 

stylesheets/_session.scss

@@ -1012,7 +1012,7 @@ label {
       @include session-color-subtle($session-color-white);
     }
 
-    &__content{
+    &__content {
       label {
         @include session-color-subtle($session-color-white);
       }
@@ -1076,7 +1076,6 @@ label {
   }
 }
 
-
 .session-radio-group fieldset {
   border: none;
   margin-left: $session-margin-sm;
@@ -1088,7 +1087,7 @@ label {
 }
 
 .session-radio {
-  input[type="radio"] {
+  input[type='radio'] {
     border: 0;
     opacity: 0;
     padding: 0;
@@ -1101,11 +1100,11 @@ label {
   }
 
   label:before {
-    content: "";
+    content: '';
     display: inline-block;
     width: 0.5em;
     height: 0.5em;
-    margin-right: 0.80em;
+    margin-right: 0.8em;
     border-radius: 100%;
     vertical-align: -3px;
     border: 2px solid rgba($session-color-white, 0.6);
@@ -1127,4 +1126,3 @@ label {
     transition: all $session-transition-duration ease;
   }
 }
-

ts/components/MainViewController.tsx

@@ -6,23 +6,21 @@ import {
   SettingsView,
 } from './session/settings/SessionSettings';
 
-export class MainViewController {
-  constructor() {}
-
-  static renderMessageView() {
+export const MainViewController = {
+  renderMessageView: () => {
     ReactDOM.render(<MessageView />, document.getElementById('main-view'));
-  }
+  },
 
-  static renderSettingsView(category: SessionSettingCategory) {
+  renderSettingsView: (category: SessionSettingCategory) => {
     ReactDOM.render(
       <SettingsView category={category} />,
       document.getElementById('main-view')
     );
-  }
-}
+  },
+};
 
 export class MessageView extends React.Component {
-  render() {
+  public render() {
     return (
       <div className="conversation-stack">
         <div className="conversation placeholder">

ts/components/session/LeftPaneSettingSection.tsx

@@ -15,15 +15,13 @@ import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { SessionSearchInput } from './SessionSearchInput';
 import { SessionSettingCategory } from './settings/SessionSettings';
 
-export interface Props {}
-
 export interface State {
   settingCategory: SessionSettingCategory;
   searchQuery: string;
 }
 
-export class LeftPaneSettingSection extends React.Component<Props, State> {
-  public constructor(props: Props) {
+export class LeftPaneSettingSection extends React.Component<any, State> {
+  public constructor(props: any) {
     super(props);
 
     this.state = {
@@ -72,7 +70,8 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
               'left-pane-setting-category-list-item',
               item.id === this.state.settingCategory ? 'active' : ''
             )}
-            onClick={() => this.setCategory(item.id)}
+            role="link"
+            onClick={(): void => this.setCategory(item.id)}
           >
             <div>
               <strong>{item.title}</strong>

ts/components/session/RegistrationTabs.tsx

@@ -505,7 +505,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
 
   private renderTermsConditionAgreement() {
     // FIXME
-    console.log(
+    window.log.info(
       'FIXME: add link to our Terms and Conditions and privacy statement'
     );
 
@@ -718,7 +718,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
     );
 
     const onError = async (error: any) => {
-      window.console.error(error);
+      window.log.error.error(error);
 
       await this.resetRegistration();
     };

ts/components/session/SessionButton.tsx

@@ -47,6 +47,7 @@ export class SessionButton extends React.PureComponent<Props> {
     const { buttonType, buttonColor, text, disabled } = this.props;
 
     const buttonTypes = [];
+    const onClickFn = disabled ? () => null : this.clickHandler;
 
     buttonTypes.push(buttonType);
     if (buttonType.includes('-outline')) {
@@ -62,7 +63,7 @@ export class SessionButton extends React.PureComponent<Props> {
           disabled && 'disabled'
         )}
         role="button"
-        onClick={disabled ? () => null : this.clickHandler}
+        onClick={onClickFn}
       >
         {this.props.children || text}
       </div>

ts/components/session/SessionConfirm.tsx

@@ -46,6 +46,10 @@ export class SessionConfirm extends React.Component<Props> {
     const cancelText = this.props.cancelText || window.i18n('cancel');
     const showHeader = !!this.props.title;
 
+    const messageSubText = messageSub
+      ? 'session-confirm-main-message'
+      : 'text-subtle';
+
     return (
       <SessionModal
         title={title}
@@ -57,13 +61,7 @@ export class SessionConfirm extends React.Component<Props> {
         {!showHeader && <div className="spacer-lg" />}
 
         <div className="session-modal__centered">
-          <span
-            className={
-              messageSub ? 'session-confirm-main-message' : 'text-subtle'
-            }
-          >
-            {message}
-          </span>
+          <span className={messageSubText}>{message}</span>
           {messageSub && (
             <span className="session-confirm-sub-message text-subtle">
               {messageSub}

ts/components/session/SessionRadio.tsx

@@ -15,7 +15,7 @@ interface State {
 export class SessionRadio extends React.PureComponent<Props, State> {
   public static defaultProps = {
     onClick: () => null,
-  }
+  };
 
   constructor(props: any) {
     super(props);
@@ -23,24 +23,24 @@ export class SessionRadio extends React.PureComponent<Props, State> {
 
     this.state = {
       active: this.props.active,
-    }
+    };
   }
 
   public render() {
     const active = this.state.active;
     const { label, group, value } = this.props;
 
-    
     return (
-      <div className='session-radio'>
+      <div className="session-radio">
         <input
           type="radio"
           name={group || ''}
           value={value}
-          defaultChecked={ active }
+          defaultChecked={active}
+          aria-checked={active}
           onClick={this.clickHandler}
         />
-        <label>{ label } </label>
+        <label>{label} </label>
       </div>
     );
   }
@@ -53,7 +53,6 @@ export class SessionRadio extends React.PureComponent<Props, State> {
       this.setState({
         active: !this.state.active,
       });
-      
     }
   }
 }

ts/components/session/SessionRadioGroup.tsx

@@ -24,30 +24,29 @@ export class SessionRadioGroup extends React.PureComponent<Props, State> {
 
     this.state = {
       activeItem: this.props.initalItem,
-    }
+    };
   }
 
   public render() {
     const { items, group } = this.props;
 
     return (
-      <div
-        className='session-radio-group'
-      >
+      <div className="session-radio-group">
         <fieldset id={group}>
-          { items.map(item => {
-              return (
-                <SessionRadio
-                  key={item.value}
-                  label={item.label}
-                  active={item.value === this.state.activeItem}
-                  value={item.value}
-                  group={group}
-                  onClick={this.clickHandler}
-                />
-              );
-            })
-          }
+          {items.map(item => {
+            const itemIsActive = item.value === this.state.activeItem;
+
+            return (
+              <SessionRadio
+                key={item.value}
+                label={item.label}
+                active={itemIsActive}
+                value={item.value}
+                group={group}
+                onClick={this.clickHandler}
+              />
+            );
+          })}
         </fieldset>
       </div>
     );

ts/components/session/SessionSeedModal.tsx

@@ -40,6 +40,37 @@ export class SessionSeedModal extends React.Component<Props, State> {
     window.addEventListener('keyup', this.onEnter);
   }
 
+  public render() {
+    const i18n = window.i18n;
+
+    this.checkHasPassword();
+    this.getSeed().ignore();
+
+    const { onClose } = this.props;
+    const { hasPassword, passwordValid } = this.state;
+    const loading = this.state.loadingPassword || this.state.loadingSeed;
+
+    return (
+      <>
+        {!loading && (
+          <SessionModal
+            title={i18n('showSeed')}
+            onOk={() => null}
+            onClose={onClose}
+          >
+            <div className="spacer-sm" />
+
+            {hasPassword && !passwordValid ? (
+              <>{this.renderPasswordView()}</>
+            ) : (
+              <>{this.renderSeedView()}</>
+            )}
+          </SessionModal>
+        )}
+      </>
+    );
+  }
+
   private renderPasswordView() {
     const maxPasswordLen = 64;
     const error = this.state.error;
@@ -109,37 +140,6 @@ export class SessionSeedModal extends React.Component<Props, State> {
     );
   }
 
-  public render() {
-    const i18n = window.i18n;
-
-    this.checkHasPassword();
-    this.getSeed().ignore();
-
-    const { onClose } = this.props;
-    const { hasPassword, passwordValid } = this.state;
-    const loading = this.state.loadingPassword || this.state.loadingSeed;
-
-    return (
-      <>
-        {!loading && (
-          <SessionModal
-            title={i18n('showSeed')}
-            onOk={() => null}
-            onClose={onClose}
-          >
-            <div className="spacer-sm" />
-
-            {hasPassword && !passwordValid ? (
-              <>{this.renderPasswordView()}</>
-            ) : (
-              <>{this.renderSeedView()}</>
-            )}
-          </SessionModal>
-        )}
-      </>
-    );
-  }
-
   private confirmPassword() {
     const passwordHash = this.state.passwordHash;
     const passwordValue = $('#seed-input-password').val();

ts/components/session/settings/SessionSettingListItem.tsx

@@ -20,7 +20,7 @@ interface Props {
 export class SessionSettingListItem extends React.Component<Props> {
   public static defaultProps = {
     inline: true,
-  }
+  };
 
   public constructor(props: Props) {
     super(props);
@@ -30,20 +30,17 @@ export class SessionSettingListItem extends React.Component<Props> {
   }
 
   public render(): JSX.Element {
-    const {
-      title,
-      description,
-      type,
-      value,
-      content,
-    } = this.props;
+    const { title, description, type, value, content } = this.props;
 
-    const inline = ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
+    const inline = ![
+      SessionSettingType.Options,
+      SessionSettingType.Slider,
+    ].includes(type);
 
     return (
       <div className={classNames('session-settings-item', inline && 'inline')}>
-        <div className='session-settings-item__info'>
-          <div className='session-settings-item__title'>{title}</div>
+        <div className="session-settings-item__info">
+          <div className="session-settings-item__title">{title}</div>
 
           {description && (
             <div className="session-settings-item__description">
@@ -55,7 +52,10 @@ export class SessionSettingListItem extends React.Component<Props> {
         <div className="session-settings-item__content">
           {type === SessionSettingType.Toggle && (
             <div className="session-sessings-item__selection">
-              <SessionToggle active={Boolean(value)} onClick={this.handleClick} />
+              <SessionToggle
+                active={Boolean(value)}
+                onClick={this.handleClick}
+              />
             </div>
           )}
 

ts/components/session/settings/SessionSettings.tsx

@@ -40,88 +40,90 @@ export class SettingsView extends React.Component<SettingsViewProps> {
     // ID corresponds to instalGetter parameters in preload.js
     // They are NOT arbitrary; add with caution
     const localSettings = [
-        {
-            id: 'theme-setting',
-            title: window.i18n('themeToggleTitle'),
-            description: 'Choose the theme best suited to you',
-            hidden: true,
-            comparisonValue: 'light',
-            type: SessionSettingType.Toggle,
-            category: SessionSettingCategory.General,
-            setFn: window.toggleTheme,
-            content: {},
-        },
-        {
-            id: 'hide-menu-bar',
-            title: window.i18n('hideMenuBarTitle'),
-            description: window.i18n('hideMenuBarDescription'),
-            hidden: !Settings.isHideMenuBarSupported(),
-            type: SessionSettingType.Toggle,
-            category: SessionSettingCategory.General,
-            setFn: window.toggleMenuBar,
-            content: {},
-        },
-        {
-            id: 'spell-check',
-            title: window.i18n('spellCheckTitle'),
-            description: window.i18n('spellCheckDescription'),
-            hidden: false,
-            type: SessionSettingType.Toggle,
-            category: SessionSettingCategory.General,
-            setFn: window.toggleSpellCheck,
-            content: {},
-        },
-        {
-            id: 'link-preview-setting',
-            title: window.i18n('linkPreviewsTitle'),
-            description: window.i18n('linkPreviewDescription'),
-            hidden: false,
-            type: SessionSettingType.Toggle,
-            category: SessionSettingCategory.General,
-            setFn: window.toggleLinkPreview,
-            content: {},
-        },
+      {
+        id: 'theme-setting',
+        title: window.i18n('themeToggleTitle'),
+        description: 'Choose the theme best suited to you',
+        hidden: true,
+        comparisonValue: 'light',
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.General,
+        setFn: window.toggleTheme,
+        content: {},
+      },
+      {
+        id: 'hide-menu-bar',
+        title: window.i18n('hideMenuBarTitle'),
+        description: window.i18n('hideMenuBarDescription'),
+        hidden: !Settings.isHideMenuBarSupported(),
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.General,
+        setFn: window.toggleMenuBar,
+        content: {},
+      },
+      {
+        id: 'spell-check',
+        title: window.i18n('spellCheckTitle'),
+        description: window.i18n('spellCheckDescription'),
+        hidden: false,
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.General,
+        setFn: window.toggleSpellCheck,
+        content: {},
+      },
+      {
+        id: 'link-preview-setting',
+        title: window.i18n('linkPreviewsTitle'),
+        description: window.i18n('linkPreviewDescription'),
+        hidden: false,
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.General,
+        setFn: window.toggleLinkPreview,
+        content: {},
+      },
 
-        {
-            id: 'notification-setting',
-            title: window.i18n('notificationSettingsDialog'),
-            type: SessionSettingType.Options,
-            category: SessionSettingCategory.Notifications,
-            setFn: () => this.setOptionsSetting('notification-setting'),
-            content: {
-                options: {
-                  group: 'notification-setting',
-                  initalItem: window.getSettingValue('notification-setting'),
-                  items: [{
-                      label: window.i18n('nameAndMessage'),
-                      value: 'message'
-                    },{
-                      label: window.i18n('nameOnly'),
-                      value: 'name'
-                    },{
-                      label: window.i18n('noNameOrMessage'),
-                      value: 'count'
-                    },{
-                      label: window.i18n('disableNotifications'),
-                      value: 'off'
-                  }],
-                },
-            },
+      {
+        id: 'notification-setting',
+        title: window.i18n('notificationSettingsDialog'),
+        type: SessionSettingType.Options,
+        category: SessionSettingCategory.Notifications,
+        setFn: () => this.setOptionsSetting('notification-setting'),
+        content: {
+          options: {
+            group: 'notification-setting',
+            initalItem: window.getSettingValue('notification-setting'),
+            items: [
+              {
+                label: window.i18n('nameAndMessage'),
+                value: 'message',
+              },
+              {
+                label: window.i18n('nameOnly'),
+                value: 'name',
+              },
+              {
+                label: window.i18n('noNameOrMessage'),
+                value: 'count',
+              },
+              {
+                label: window.i18n('disableNotifications'),
+                value: 'off',
+              },
+            ],
+          },
         },
-
-
-        {
-          id: 'media-permissions',
-          title: window.i18n('mediaPermissionsTitle'),
-          description: window.i18n('mediaPermissionsDescription'),
-          hidden: false,
-          type: SessionSettingType.Toggle,
-          category: SessionSettingCategory.Permissions,
-          setFn: window.toggleMediaPermissions,
-          content: {},
       },
 
-        
+      {
+        id: 'media-permissions',
+        title: window.i18n('mediaPermissionsTitle'),
+        description: window.i18n('mediaPermissionsDescription'),
+        hidden: false,
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.Permissions,
+        setFn: window.toggleMediaPermissions,
+        content: {},
+      },
     ];
 
     return (
@@ -129,21 +131,24 @@ export class SettingsView extends React.Component<SettingsViewProps> {
         {localSettings.map(setting => {
           const { category } = this.props;
           const renderSettings = setting.category === category;
+          const description = setting.description || '';
+          const comparisonValue = setting.comparisonValue || null;
 
           return (
             <div key={setting.id}>
-                {renderSettings && !(setting.hidden) && (
-                <SessionSettingListItem
+              {renderSettings &&
+                !setting.hidden && (
+                  <SessionSettingListItem
                     title={setting.title}
-                    description={setting.description || ''}
+                    description={description}
                     type={setting.type}
-                    value={ window.getSettingValue(setting.id, setting.comparisonValue || null) }
+                    value={window.getSettingValue(setting.id, comparisonValue)}
                     onClick={() => {
-                        this.updateSetting(setting);
+                      this.updateSetting(setting);
                     }}
                     content={setting.content || undefined}
-                />
-            )}
+                  />
+                )}
             </div>
           );
         })}
@@ -165,11 +170,10 @@ export class SettingsView extends React.Component<SettingsViewProps> {
   }
 
   public updateSetting(item: any) {
-
     // If there's a custom afterClick function,
     // execute it instead of automatically updating settings
     if (item.setFn) {
-        item.setFn();
+      item.setFn();
     } else {
       if (item.type === SessionSettingType.Toggle) {
         // If no custom afterClick function given, alter values in storage here
@@ -178,12 +182,10 @@ export class SettingsView extends React.Component<SettingsViewProps> {
         window.setSettingValue(item.id, newValue);
       }
     }
-
   }
 
-  public setOptionsSetting(settingID: string){
+  public setOptionsSetting(settingID: string) {
     const selectedValue = $(`#${settingID} .session-radio input:checked`).val();
     window.setSettingValue(settingID, selectedValue);
   }
-
 }

ts/components/session/settings/SessionSettingsHeader.tsx

@@ -12,14 +12,14 @@ export class SettingsHeader extends React.Component<SettingsViewProps> {
     $('.left-pane-setting-section .session-search-input input').focus();
   }
 
-  render() {
+  public render() {
     const category = String(this.props.category);
     const categoryTitlePrefix = category[0].toUpperCase() + category.substr(1);
     // Remove 's' on the end to keep words in singular form
     const categoryTitle =
       categoryTitlePrefix[categoryTitlePrefix.length - 1] === 's'
-        ? categoryTitlePrefix.slice(0, -1) + ' Settings'
-        : categoryTitlePrefix + ' Settings';
+        ? `${categoryTitlePrefix.slice(0, -1)} Settings`
+        : `${categoryTitlePrefix} Settings`;
 
     return (
       <div className="session-settings-header">

ts/global.d.ts

@@ -15,6 +15,7 @@ interface Window {
   setPassword: any;
   textsecure: any;
   Session: any;
+  log: any;
   i18n: any;
   friends: any;
   generateID: any;
@@ -31,7 +32,6 @@ interface Window {
   toggleMediaPermissions: any;
   getSettingValue: any;
   setSettingValue: any;
-  
 }
 
 interface Promise<T> {