Add initial add server UI skeleton

_locales/en/messages.json

@@ -1940,6 +1940,14 @@
     "message": "Show QR code",
     "description": "Button action that the user can click to view their QR code"
   },
+  "showAddServer": {
+    "message": "Add public server",
+    "description": "Button action that the user can click to connect to a new public server"
+  },
+  "addServerDialogTitle": {
+    "message": "Connect to new public server",
+    "description": "Title for the dialog box used to connect to a new public server"
+  },
 
   "seedViewTitle": {
     "message":

background.html

@@ -282,6 +282,29 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='connecting-to-server-template'>
+    <div class="content">
+      {{ #title }}
+        <h4>{{ title }}</h4>
+      {{ /title }}
+      <div class='buttons'>
+        <button class='cancel' tabindex='2'>{{ cancel }}</button>
+      </div>
+    </div>
+  </script>
+  <script type='text/x-tmpl-mustache' id='add-server-template'>
+    <div class="content">
+      {{ #title }}
+        <h4>{{ title }}</h4>
+      {{ /title }}
+      <input type='text' id='server-url' placeholder='Server Url' autofocus>
+      <div class='error'></div>
+      <div class='buttons'>
+        <button class='cancel' tabindex='2'>{{ cancel }}</button>
+        <button class='ok' tabindex='1'>{{ ok }}</button>
+      </div>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='qr-code-template'>
     <div class="content">
       <div id="qr">
@@ -693,6 +716,8 @@
   <script type='text/javascript' src='js/views/password_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/seed_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/qr_dialog_view.js'></script>
+  <script type='text/javascript' src='js/views/connecting_to_server_dialog_view.js'></script>
+  <script type='text/javascript' src='js/views/add_server_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/beta_release_disclaimer_view.js'></script>
   <script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
   <script type='text/javascript' src='js/views/install_view.js'></script>

js/background.js

@@ -749,6 +749,13 @@
       }
     });
 
+    Whisper.events.on('showAddServerDialog', async options => {
+      console.log('Adding new server: background');
+      if (appView) {
+        appView.showAddServerDialog(options);
+      }
+    });
+
     Whisper.events.on('showQRDialog', async () => {
       if (appView) {
         const ourNumber = textsecure.storage.user.getNumber();

js/views/add_server_dialog_view.js

@@ -0,0 +1,57 @@
+/* global Whisper, i18n, QRCode, lokiPublicChatAPI */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.AddServerDialogView = Whisper.View.extend({
+    templateName: 'add-server-template',
+    className: 'loki-dialog add-server modal',
+    initialize(options = {}) {
+      console.log(`Add server init: ${options}`);
+      this.title =  i18n('addServerDialogTitle');
+      this.okText = options.okText || i18n('ok');
+      this.cancelText = options.cancelText || i18n('cancel');
+      this.resolve = options.resolve;
+      this.render();
+      this.$('.add-server').bind('keyup', event => this.onKeyup(event));
+    },
+    events: {
+      'click .ok': 'confirm',
+      'click .cancel': 'close',
+    },
+    render_attributes() {
+      return {
+        title: this.title,
+        ok: this.okText,
+        cancel: this.cancelText,
+      };
+    },
+    confirm() {
+      const serverUrl = this.$('#server-url').val();
+      console.log(`You confirmed the adding of a new server: ${serverUrl}`);
+      const dialog = new Whisper.ConnectingToServerDialogView({ serverUrl });
+      this.el.append(dialog.el);
+    },
+    async validateServer() {
+    },
+    close() {
+      this.remove();
+    },
+    onKeyup(event) {
+      switch (event.key) {
+        case 'Enter':
+          break;
+        case 'Escape':
+        case 'Esc':
+          this.close();
+          break;
+        default:
+          break;
+      }
+    },
+  });
+})();
+

js/views/app_view.js

@@ -200,5 +200,10 @@
       const dialog = new Whisper.QRDialogView({ string });
       this.el.append(dialog.el);
     },
+    showAddServerDialog({ resolve }) {
+      console.log('Adding new server: AppView');
+      const dialog = new Whisper.AddServerDialogView({ resolve });
+      this.el.append(dialog.el);
+    },
   });
 })();

js/views/connecting_to_server_dialog_view.js

@@ -0,0 +1,47 @@
+/* global Whisper, i18n, QRCode, lokiPublicChatAPI */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.ConnectingToServerDialogView = Whisper.View.extend({
+    templateName: 'connecting-to-server-template',
+    className: 'loki-dialog connecting-to-server modal',
+    initialize(options = {}) {
+      console.log(`Add server init: ${options}`);
+      this.title =  i18n('loading');
+      this.cancelText = options.cancelText || i18n('cancel');
+      this.render();
+      this.$('.connecting-to-server').bind('keyup', event => this.onKeyup(event));
+      const serverAPI = lokiPublicChatAPI.findOrCreateServer(
+        options.serverUrl
+      );
+    },
+    events: {
+      'click .cancel': 'close',
+    },
+    render_attributes() {
+      return {
+        title: this.title,
+        cancel: this.cancelText,
+      };
+    },
+    close() {
+      this.remove();
+    },
+    onKeyup(event) {
+      switch (event.key) {
+        case 'Escape':
+        case 'Esc':
+          this.close();
+          break;
+        default:
+          break;
+      }
+    },
+  });
+})();
+
+

test/index.html

@@ -567,7 +567,8 @@
   <script type='text/javascript' src='../js/views/nickname_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/password_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/seed_dialog_view.js' data-cover></script>
-  <script type='text/javascript' src='js/views/qr_dialog_view.js'></script>
+  <script type='text/javascript' src='../js/views/qr_dialog_view.js'></script>
+  <script type='text/javascript' src='../js/views/add_server_dialog_view.js'></script>
   <script type='text/javascript' src='../js/views/identicon_svg_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/last_seen_indicator_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/scroll_down_button_view.js' data-cover></script>

ts/components/MainHeader.tsx

@@ -334,6 +334,17 @@ export class MainHeader extends React.Component<Props, any> {
           trigger('showQRDialog');
         },
       },
+      {
+        id: 'showAddServer',
+        name: i18n('showAddServer'),
+        onClick: () => {
+          trigger('showAddServerDialog', {
+            resolve: (serverUrl) => {
+              console.log(`Adding a new server: ${serverUrl}`);
+            },
+          });
+        },
+      },
     ];
 
     const passItem = (type: string) => ({