server-page: Use buttons for server actions.

* Use button instead of a span for adding new server + create org link. * Focus buttons on tab. * Make add new server page responsive. Fixes $457.
2025-10-23 16:13:37 +00:00 · 2018-03-23 01:27:47 +05:30 · 2018-03-23 01:21:53 +05:30 · 2018-03-23 00:28:06 +05:30 · 2018-03-23 00:26:24 +05:30 · 2018-03-23 00:23:04 +05:30
8 changed files with 96 additions and 51 deletions
--- a/app/renderer/about.html
+++ b/app/renderer/about.html
@@ -1,45 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="css/about.css">
-	</head>
-	<body>
+
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="css/about.css">
+</head>
+
+<body>
 	<div class="about">
 		<img class="logo" src="../resources/zulip.png" />
 		<p class="detail" id="version">v?.?.?</p>
 		<div class="maintenance-info">
 			<p class="detail maintainer">
-				Maintained by <a onclick="linkInBrowser('website')">Zulip</a>
+				Maintained by
+				<a onclick="linkInBrowser('website')">Zulip</a>
 			</p>
 			<p class="detail license">
-				Available under the <a onclick="linkInBrowser('license')">Apache 2.0 License</a>
+				Available under the
+				<a onclick="linkInBrowser('license')">Apache 2.0 License</a>
 			</p>
 			<a class="bug" onclick="linkInBrowser('bug')" href="#">Found bug?</a>
 		</div>
 	</div>
 	<script>

-	const { app } = require('electron').remote;
-	const { shell } = require('electron');
-	const version_tag = document.querySelector('#version');
-	version_tag.innerHTML = 'v' + app.getVersion();
+		const { app } = require('electron').remote;
+		const { shell } = require('electron');
+		const version_tag = document.querySelector('#version');
+		version_tag.innerHTML = 'v' + app.getVersion();

-	function linkInBrowser(type) {
-		let url;
-		switch (type) {
-			case 'website': 
-				url = "https://zulipchat.com";
-				break;
-			case 'license': 
-				url = "https://github.com/zulip/zulip-electron/blob/master/LICENSE";
-				break;
-			default:
-				url = 'https://github.com/zulip/zulip-electron/issues/new?body=' + 
-				      '%3C!--Please%20describe%20your%20issue%20and%20steps%20to%20reproduce%20it.--%3E';
+		function linkInBrowser(type) {
+			let url;
+			switch (type) {
+				case 'website':
+					url = "https://zulipchat.com";
+					break;
+				case 'license':
+					url = "https://github.com/zulip/zulip-electron/blob/master/LICENSE";
+					break;
+				default:
+					url = 'https://github.com/zulip/zulip-electron/issues/new?body=' +
+						'%3C!--Please%20describe%20your%20issue%20and%20steps%20to%20reproduce%20it.--%3E';
+			}
+			shell.openExternal(url);
 		}
-		shell.openExternal(url);
-	}
 	</script>
-	</body>
+	<script>require('./js/shared/preventdrag.js')</script>
+</body>
 </html>
--- a/app/renderer/css/preference.css
+++ b/app/renderer/css/preference.css
@@ -129,6 +129,7 @@ td:nth-child(odd) {
    content: '';
 }

+
 /* We don't want to show this in nav item since we have the + button for adding an Organization */

 #nav-AddServer {
@@ -319,9 +320,10 @@ img.server-info-icon {
    border: rgba(239, 83, 80, 0.5) solid 1px;
 }

-.red:hover{
+.red:hover {
    color: #e63431;
-    border: rgba(239, 83, 80, 0.7) solid 1px;;
+    border: rgba(239, 83, 80, 0.7) solid 1px;
+    ;
 }

 .blue {
@@ -477,6 +479,7 @@ input.toggle-round:checked+label:after {
    height: 100%;
    /* background: rgba(61, 64, 67, 15); */
    background: linear-gradient(35deg, #003b52, #45b59b);
+    overflow: auto;
 }


@@ -499,15 +502,14 @@ input.toggle-round:checked+label:after {

 .divider {
    margin-bottom: 30px;
-    margin-right: 10px;
    margin-top: 30px;
    color: #7d878a;
 }

 .divider hr {
-    margin-left: auto;
-    margin-right: auto;
-    width: 45%;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: 44%;
 }

 .left {
@@ -523,24 +525,31 @@ input.toggle-round:checked+label:after {
    text-align: center;
    align-items: center;
    padding-top: 13px;
+    margin-left: -5px;
 }

-.server-center span {
+.server-center button {
    font-weight: bold;
    font-size: 1.1rem;
-    padding: 10px;
    margin: auto;
    align-items: center;
    text-align: center;
-}
-
-.server-center .blue {
+    color: #fff;
+    background: #4EBFAC;
+    border-color: none;
+    border: none;
+    width: 98%;
+    height: 46px;
    border-radius: 3px;
+    cursor: pointer;
 }

-.server-center .blue:hover {
-    border-right: 2px solid #309085;
-    border-bottom: 2px solid #309085;
+.server-center button:hover {
+    background: #329588;
+}
+
+.server-center button:focus {
+    background: #329588;
 }


@@ -564,10 +573,19 @@ input.toggle-round:checked+label:after {
        padding: 40px;
        min-width: 300px;
    }
-    .server-center .blue {
-        margin-right: 1px;
+    .server-center button {
+        margin-right: -12px;
+        width: 100%;
+    }
+    .divider {
+        margin-right: -8px;
+    }
+    .divider hr {
+        margin-left: 6px;
+        margin-right: 6px;
+        width: 43%;
    }
    #new-server-container {
        padding-left: 0px;
    }
-}
+}
--- a/app/renderer/js/pages/preference/new-server-form.js
+++ b/app/renderer/js/pages/preference/new-server-form.js
@@ -15,11 +15,11 @@ class NewServerForm extends BaseComponent {
 			<div class="server-input-container">
 				<div class="title">Organization URL</div>
 				<div class="add-server-info-row">
-					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or chat.your-organization.com"/>
+					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
 				</div>
 				<div class="server-center">
-					<div class="action blue server-save-action">
-						<span id="connect">Connect</span>
+					<div class="server-save-action">
+						<button id="connect">Connect</button>
 					</div>
 				</div>
 				<div class="server-center">
@@ -28,8 +28,8 @@ class NewServerForm extends BaseComponent {
 				</div>
 				</div>
 				<div class="server-center">
-				<div class="action blue server-save-action">
-					<span id="open-create-org-link">Create a new organization</span>
+				<div class="server-save-action">
+					<button id="open-create-org-link">Create a new organization</button>
 			</div>
 					</div>
 			</div>
@@ -44,7 +44,6 @@ class NewServerForm extends BaseComponent {
 	initForm() {
 		this.$newServerForm = this.generateNodeFromTemplate(this.template());
 		this.$saveServerButton = this.$newServerForm.getElementsByClassName('server-save-action')[0];
-
 		this.props.$root.innerHTML = '';
 		this.props.$root.appendChild(this.$newServerForm);

@@ -64,7 +63,7 @@ class NewServerForm extends BaseComponent {
 	}

 	openCreateNewOrgExternalLink() {
-		const link = 'https://zulipchat.com/beta/';
+		const link = 'https://zulipchat.com/new/';
 		const externalCreateNewOrgEl = document.getElementById('open-create-org-link');
 		externalCreateNewOrgEl.addEventListener('click', () => {
 			shell.openExternal(link);
--- a/app/renderer/js/preload.js
+++ b/app/renderer/js/preload.js
@@ -8,6 +8,9 @@ const ConfigUtil = require(__dirname + '/utils/config-util.js');
 // eslint-disable-next-line import/no-unassigned-import
 require('./notification');

+// Prevent drag and drop event in main process which prevents remote code executaion
+require(__dirname + '/shared/preventdrag.js');
+
 const logout = () => {
 	// Create the menu for the below
 	document.querySelector('.dropdown-toggle').click();
--- a/app/renderer/js/shared/preventdrag.js
+++ b/app/renderer/js/shared/preventdrag.js
@@ -0,0 +1,17 @@
+'use strict';
+
+// This is a security fix. Following function prevents drag and drop event in the app
+// so that attackers can't execute any remote code within the app
+// It doesn't affect the compose box so that users can still
+// use drag and drop event to share files etc
+
+const preventDragAndDrop = () => {
+	const preventEvents = ['dragover', 'drop'];
+	preventEvents.forEach(dragEvents => {
+		document.addEventListener(dragEvents, event => {
+			event.preventDefault();
+		});
+	});
+};
+
+preventDragAndDrop();
--- a/app/renderer/main.html
+++ b/app/renderer/main.html
@@ -44,4 +44,5 @@
  </div>
 </body>
 <script src="js/main.js"></script>
+<script>require('./js/shared/preventdrag.js')</script>
 </html>
--- a/app/renderer/network.html
+++ b/app/renderer/network.html
@@ -17,5 +17,6 @@
      <div id="reconnect">Try now</div>
    </div>
  </body>
-  <script src="js/pages/network.js"></script>  
+  <script src="js/pages/network.js"></script>
+  <script>require('./js/shared/preventdrag.js')</script>
 </html>
--- a/app/renderer/preference.html
+++ b/app/renderer/preference.html
@@ -13,4 +13,5 @@
    </div>
  </body>
  <script src="js/pages/preference/preference.js"></script>
+  <script>require('./js/shared/preventdrag.js')</script>
 </html>
Author	SHA1	Message	Date
Akash Nimare	297c056090	server-page: Use buttons for server actions. * Use button instead of a span for adding new server + create org link. * Focus buttons on tab. * Make add new server page responsive. Fixes $457.	2018-03-23 01:27:47 +05:30
Akash Nimare	34411e2a6b	server-page: Use buttons for server actions. * Make new server page responsive. * Focus buttons on tab. * Update styling of button. Fixes #457.	2018-03-23 01:21:53 +05:30
Akash Nimare	88f5a0e699	server-page: Fix a typo in background color.	2018-03-23 00:28:06 +05:30
Akash Nimare	2b6e76d5cd	server-page: Add overflow for smaller window.	2018-03-23 00:26:24 +05:30
Akash Nimare	4840cbe043	server-page: Remove border from connect button. WIP #457.	2018-03-23 00:23:04 +05:30
Akash Nimare	c8537acdf5	server-page: Update placeholder text. * Update link to create a new organization. * Update placeholder text for demo zulip server. WIP #457.	2018-03-23 00:11:47 +05:30
Akash Nimare	e776222d6b	browser-window: Prevent drag and drop events. This stops a remote code execution via drag and drop event in the main/renderer process. Fixes #453.	2018-03-22 23:23:18 +05:30