Update DomainUtil and finish PreferenceView.

app/renderer/css/preference.css

@@ -55,6 +55,7 @@ html, body {
     width: 100%;
     display: flex;
     padding: 30px;
+    overflow-y: scroll;
 }
 
 .server-info-container {
@@ -103,6 +104,7 @@ img.server-info-icon {
     border-bottom: #ddd 1px solid;
     outline-width: 0;
     background: transparent;
+    max-width: 500px;
 }
 
 .server-info-value:focus {
@@ -115,6 +117,7 @@ img.server-info-icon {
     color: #235d3a;
     vertical-align: middle;
     margin: 10px 0;
+    flex-wrap: wrap;
 }
 
 .action {
@@ -146,10 +149,14 @@ img.server-info-icon {
 
 .server-info.active {
     background: #ecf4ef;
-    padding: 20px;
 }
 
 .server-info {
     display: flex;
-    margin: 20px 0;
+    padding: 10px;
+    margin: 10px 0 10px 0;
+}
+
+.hidden {
+    display: none;
 }

app/renderer/js/main.js

@@ -82,7 +82,7 @@ class ServerManagerView {
         const $webView = document.getElementById(`webview-${index}`);
         this.isLoading = false;
         $webView.classList.remove('loading');
-        // $webView.openDevTools();
+        $webView.openDevTools();
     }
 
 	initActions() {

app/renderer/js/preference.js

@@ -6,22 +6,25 @@ class PreferenceView {
     constructor() {
         this.$newServerButton = document.getElementById('new-server-action');
         this.$saveServerButton = document.getElementById('save-server-action');
-        this.$serverInfoContainer = document.querySelector('.server-info-container');        
+        this.$serverInfoContainer = document.querySelector('.server-info-container');
     }
 
     init() {
        this.domainUtil = new DomainUtil();
        this.initServers();
+       this.initActions();
     }
 
     initServers() {
+        this.$serverInfoContainer.innerHTML = '';
+        this.initNewServerForm();
         const servers = this.domainUtil.getDomains();
-		for (let server of servers) {
+		for (let i in servers) {
-			this.initServer(server);
+			this.initServer(servers[i], i);
 		}
     }
 
-    initServer(server) {
+    initServer(server, index) {
         const {
 			alias,
 			url,
@@ -35,21 +38,86 @@ class PreferenceView {
                     <div class="server-info-right">
                         <div class="server-info-row">
                             <span class="server-info-key">Name</span>
-                            <input class="server-info-value" value="${alias}"/>
+                            <input class="server-info-value" disabled value="${alias}"/>
                         </div>
                         <div class="server-info-row">
                             <span class="server-info-key">Url</span>
-                            <input class="server-info-value" value="${url}"/>
+                            <input class="server-info-value" disabled value="${url}"/>
                         </div>
                         <div class="server-info-row">
                             <span class="server-info-key">Icon</span>
-                            <input class="server-info-value" value="${icon}"/>
+                            <input class="server-info-value" disabled value="${icon}"/>
+                        </div>
+                        <div class="server-info-row">
+                            <span class="server-info-key">Actions</span>
+                            <div class="action server-info-value" id="delete-server-action-${index}">
+                                <i class="material-icons">indeterminate_check_box</i>
+                                <span>Delete</span>
+                            </div>
                         </div>
                     </div>
                 </div>`;
         this.$serverInfoContainer.appendChild(this.__insert_node(serverInfoTemplate));
+        document.getElementById(`delete-server-action-${index}`).addEventListener('click', () => {
+            this.domainUtil.removeDomain(index);
+            this.initServers();
+        });
     }
 
+    initNewServerForm() {
+        const newServerFormTemplate = `
+                <div class="server-info active hidden">
+                    <div class="server-info-left">
+                        <img class="server-info-icon" src="https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png"/>
+                    </div>
+                    <div class="server-info-right">
+                        <div class="server-info-row">
+                            <span class="server-info-key">Name</span>
+                            <input class="server-info-value" placeholder="(Required)"/>
+                        </div>
+                        <div class="server-info-row">
+                            <span class="server-info-key">Url</span>
+                            <input class="server-info-value" placeholder="(Required)"/>
+                        </div>
+                        <div class="server-info-row">
+                            <span class="server-info-key">Icon</span>
+                            <input class="server-info-value" placeholder="(Optional)"/>
+                        </div>
+                    </div>
+                </div>
+        `;
+        this.$serverInfoContainer.appendChild(this.__insert_node(newServerFormTemplate));
+
+        this.$newServerForm = document.querySelector('.server-info.active');
+        this.$newServerAlias = this.$newServerForm.querySelectorAll('input.server-info-value')[0];
+        this.$newServerUrl = this.$newServerForm.querySelectorAll('input.server-info-value')[1];
+        this.$newServerIcon = this.$newServerForm.querySelectorAll('input.server-info-value')[2];
+    }
+
+    initActions() {
+        this.$newServerButton.addEventListener('click', () => {
+            this.$newServerForm.classList.remove('hidden');
+            this.$saveServerButton.classList.remove('hidden');
+            this.$newServerButton.classList.add('hidden');
+        });
+        this.$saveServerButton.addEventListener('click', () => {
+            this.domainUtil.checkDomain(this.$newServerUrl.value).then((domain) => {
+                const server = {
+                    alias: this.$newServerAlias.value,
+                    url: domain,
+                    icon: this.$newServerIcon.value
+                };
+                this.domainUtil.addDomain(server);
+                this.$saveServerButton.classList.add('hidden');
+                this.$newServerButton.classList.remove('hidden');
+                this.$newServerForm.classList.add('hidden');
+
+                this.initServers();
+            }, (errorMessage) => {
+                alert(errorMessage);
+            });
+        });
+    }
     __insert_node(html) {
         let wrapper= document.createElement('div');
         wrapper.innerHTML= html;

app/renderer/js/utils/domain-util.js

@@ -2,6 +2,7 @@
 
 const {app} = require('electron').remote;
 const JsonDB = require('node-json-db');
+const request = require('request');
 
 class DomainUtil {
     constructor() {
@@ -12,18 +13,37 @@ class DomainUtil {
         return this.db.getData('/domains');
     }
 
-    addDomain() {
+    addDomain(server) {
-        const servers = {
+        server.icon = server.icon || 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png';
-            url: 'https://chat.zulip.org',
-            alias: 'Zulip 2333',
-            icon: 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png'
-        }
         this.db.push("/domains[]", servers, true);
     }
 
     removeDomains() {
         this.db.delete("/domains");
     }
+
+    removeDomain(index) {
+        this.db.delete(`/domains[${index}]`);
+    }
+
+    checkDomain(domain) {
+        const hasPrefix = (domain.indexOf('http') == 0);
+        if (!hasPrefix) {
+            domain = (domain.indexOf('localhost:') >= 0)? `http://${domain}` : `https://${domain}`;
+        }
+
+		const checkDomain = domain + '/static/audio/zulip.ogg';
+
+        return new Promise((res, rej) => {
+            request(checkDomain, (error, response) => {
+                if (!error && response.statusCode !== 404) {
+                    res(domain);
+                } else {
+                    rej('Not a valid Zulip server');
+                }
+            });
+        })
+    }
 }
 
 module.exports = DomainUtil;

app/renderer/preference.html

@@ -25,7 +25,7 @@
                     <i class="material-icons">add_box</i>
                     <span>New Server</span>
                 </div>
-                <div class="action" id="save-server-action">
+                <div class="action hidden" id="save-server-action">
                     <i class="material-icons">check_box</i>
                     <span>Verify & Save</span>
                 </div>