Add public server modal to message pane

_locales/en/messages.json

@@ -2480,6 +2480,12 @@
   "decline": {
     "message": "Decline"
   },
+  "generalSettingsTitle": {
+    "message": "Generals"
+  },
+  "generalSettingsDescription": {
+    "message": "General settings and configuration"
+  },
   "accountSettingsTitle": {
     "message": "Account"
   },
@@ -2496,12 +2502,12 @@
     "message": "Notifications"
   },
   "notificationSettingsDescription": {
-    "message": "Choose what you're notified about."
+    "message": "Choose what you're notified about"
   },
   "devicesSettingsTitle": {
     "message": "Devices"
   },
   "devicesSettingsDescription": {
-    "message": "Managed linked devices."
+    "message": "Managed linked devices"
   }
 }

js/background.js

@@ -821,6 +821,7 @@
     };
 
     window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog;
+    window.showAddServerDialog = window.owsDesktopApp.appView.showAddServerDialog;
 
     window.generateID = () =>
       Math.random()
@@ -872,10 +873,10 @@
       return toastID;
     };
 
-    window.deleteAccount = () => {
-      // Delete local data
-      // TOOD. MAKE THIS PROCESS SECURED WITH rm-secure
-      // https://www.npmjs.com/package/secure-rm
+    window.deleteAccount = async () => {
+      await window.Signal.Data.removeAll();
+      await window.storage.fetch();
+
       alert('YOUR ACCOUNT HAS BEEN DELETED');
     };
 

js/views/app_view.js

@@ -17,6 +17,7 @@
       this.applyHideMenu();
 
       this.showSeedDialog = this.showSeedDialog.bind(this);
+      this.showAddServerDialog = this.showAddServerDialog.bind(this);
     },
     events: {
       'click .openInstaller': 'openInstaller', // NetworkStatusView has this button

stylesheets/_session.scss

@@ -226,6 +226,10 @@ $session_message-container-border-radius: 5px;
   cursor: pointer;
   transition: $session-transition-duration;
 
+  &.disabled {
+    cursor: default;
+  }
+
   &.default,
   &.square,
   &.brand {
@@ -234,27 +238,50 @@ $session_message-container-border-radius: 5px;
     &.green {
       border: 2px solid $session-color-green;
       background-color: $session-color-green;
+      
+      &.disabled{
+        background-color: rgba($session-color-green, 0.6);
+      }
+
       &:hover {
         @include transparent-background($session-color-green);
       }
     }
     &.white {
       background-color: $session-color-white;
+      &.disabled{
+        background-color: rgba($session-color-white, 0.6);
+      }
     }
     &.primary {
       background-color: $session-color-primary;
+      &.disabled{
+        background-color: rgba($session-color-primary, 0.6);
+      }
     }
     &.secondary {
       background-color: $session-color-secondary;
+      &.disabled{
+        background-color: rgba($session-color-secondary, 0.6);
+      }
     }
     &.success {
       background-color: $session-color-success;
+      &.disabled{
+        background-color: rgba($session-color-success, 0.6);
+      }
     }
     &.danger {
       background-color: $session-color-danger;
+      &.disabled{
+        background-color: rgba($session-color-danger, 0.6);
+      }
     }
     &.warning {
       background-color: $session-color-warning;
+      &.disabled{
+        background-color: rgba($session-color-warning, 0.6);
+      }
     }
   }
 
@@ -1004,3 +1031,8 @@ label {
 .messages li {
   transition: $session-transition-duration !important;
 }
+
+
+.network-status-container{
+
+}

stylesheets/_session_left_pane.scss

@@ -173,6 +173,16 @@ $session-compose-margin: 20px;
     .session-button {
       margin-left: auto;
     }
+
+    &-buttons {
+      margin-bottom: $session-margin-sm;
+      display: inline-flex;
+      width: 100%;
+
+      .session-button {
+        flex: 1;
+      }
+    }
   }
 
   &__title {

ts/components/MainViewController.tsx

@@ -176,10 +176,15 @@ export class SettingsHeader extends React.Component<SettingsViewProps>{
 
   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';
 
     return (
       <div className="session-settings-header">
-        {category[0].toUpperCase() + category.substr(1)} Settings
+        { categoryTitle } 
         <SessionIconButton
           iconType={SessionIconType.Search}
           iconSize={SessionIconSize.Large}

ts/components/session/LeftPaneMessageSection.tsx

@@ -17,6 +17,7 @@ import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { SearchOptions } from '../../types/Search';
 import { validateNumber } from '../../types/PhoneNumber';
 import { LeftPane, RowRendererParamsType } from '../LeftPane';
+import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
 
 export interface Props {
   searchTerm: string;
@@ -145,6 +146,18 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     return [list];
   }
 
+  public renderMessagePanelButtons(): JSX.Element {
+    return (
+      <div className="module-left-pane__header-buttons">
+        <SessionButton
+          text={window.i18n('showAddServer')}
+          buttonType={SessionButtonType.Square}
+          onClick={window.showAddServerDialog}
+        />
+      </div>
+    );
+  }
+
   public renderHeader(): JSX.Element {
     const labels = [window.i18n('messagesHeader')];
 
@@ -180,6 +193,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   public renderConversations() {
     return (
       <div>
+        {this.renderMessagePanelButtons()}
         <SessionSearchInput
           searchString={this.props.searchTerm}
           onChange={this.updateSearchBound}

ts/components/session/LeftPaneSectionHeader.tsx

@@ -85,6 +85,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
           text={window.i18n('compose')}
           onClick={buttonClicked}
           key="compose"
+          disabled={false}
         />
       );
     } else if (notificationCount && notificationCount > 0) {

ts/components/session/LeftPaneSettingSection.tsx

@@ -175,6 +175,11 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
 
   public getCategories() {
     return [
+      {
+        id: SessionSettingCategory.General,
+        title: window.i18n('generalSettingsTitle'),
+        description: window.i18n('generalSettingsDescription'),
+      },
       {
         id: SessionSettingCategory.Account,
         title: window.i18n('accountSettingsTitle'),

ts/components/session/SessionButton.tsx

@@ -24,6 +24,7 @@ export enum SessionButtonColor {
 
 interface Props {
   text?: string;
+  disabled?: boolean;
   buttonType: SessionButtonType;
   buttonColor: SessionButtonColor;
   onClick: any;
@@ -33,6 +34,7 @@ export class SessionButton extends React.PureComponent<Props> {
   public static defaultProps = {
     buttonType: SessionButtonType.Default,
     buttonColor: SessionButtonColor.Primary,
+    disabled: false,
     onClick: () => null,
   };
 
@@ -42,7 +44,7 @@ export class SessionButton extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { buttonType, buttonColor, text } = this.props;
+    const { buttonType, buttonColor, text, disabled } = this.props;
 
     const buttonTypes = [];
 
@@ -53,9 +55,9 @@ export class SessionButton extends React.PureComponent<Props> {
 
     return (
       <div
-        className={classNames('session-button', ...buttonTypes, buttonColor)}
+        className={classNames('session-button', ...buttonTypes, buttonColor, disabled && 'disabled')}
         role="button"
-        onClick={this.clickHandler}
+        onClick={disabled ? () => null : this.clickHandler}
       >
         {this.props.children || text}
       </div>

ts/global.d.ts

@@ -23,6 +23,7 @@ interface Window {
   pushToast: any;
   confirmationDialog: any;
   showSeedDialog: any;
+  showAddServerDialog: any;
   toggleTheme: any;
 }