diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index e58951412..36aaa78d9 100644
--- a/_locales/en/messages.json
+++ b/_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":
diff --git a/background.html b/background.html
index ff532f26c..391894588 100644
--- a/background.html
+++ b/background.html
@@ -282,6 +282,29 @@
+
+
+
+
diff --git a/js/background.js b/js/background.js
index 710471086..ccf1f0214 100644
--- a/js/background.js
+++ b/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();
diff --git a/js/views/add_server_dialog_view.js b/js/views/add_server_dialog_view.js
new file mode 100644
index 000000000..0e8fe3cf1
--- /dev/null
+++ b/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;
+ }
+ },
+ });
+})();
+
diff --git a/js/views/app_view.js b/js/views/app_view.js
index 31235bf9f..0c680d946 100644
--- a/js/views/app_view.js
+++ b/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);
+ },
});
})();
diff --git a/js/views/connecting_to_server_dialog_view.js b/js/views/connecting_to_server_dialog_view.js
new file mode 100644
index 000000000..177262ce2
--- /dev/null
+++ b/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;
+ }
+ },
+ });
+})();
+
+
diff --git a/test/index.html b/test/index.html
index ef36a342e..4528bef6b 100644
--- a/test/index.html
+++ b/test/index.html
@@ -567,7 +567,8 @@
-
+
+
diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
index 8f099dfd3..b0f5d8d36 100644
--- a/ts/components/MainHeader.tsx
+++ b/ts/components/MainHeader.tsx
@@ -334,6 +334,17 @@ export class MainHeader extends React.Component {
trigger('showQRDialog');
},
},
+ {
+ id: 'showAddServer',
+ name: i18n('showAddServer'),
+ onClick: () => {
+ trigger('showAddServerDialog', {
+ resolve: (serverUrl) => {
+ console.log(`Adding a new server: ${serverUrl}`);
+ },
+ });
+ },
+ },
];
const passItem = (type: string) => ({