Redesign the landing page to look more inline with brand design.

This redesigns the landing page to incorporate the Zulip style guide. This also adds two animations: 1. The error text slides down on error and back up when typing. 2. The form section shakes when there is invalid input for 0.5s.
brainwane · Apr 13, 2017 · c1f6159 · c1f6159
1 parent 0d15435
commit c1f6159
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 386 deletions.
diff --git a/app/main/domain.js b/app/main/domain.js
@@ -6,15 +6,37 @@ const request = require('request');
 const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
 const data = db.getData('/');
 
-console.log(data.domain);
 window.addDomain = function () {
+	const el = sel => {
+		return document.querySelector(sel);
+	};
+
+	const $el = {
+		error: el('#error'),
+		main: el('#main'),
+		section: el('section')
+	};
+
+	const event = sel => {
+		return {
+			on: (event, callback) => {
+				document.querySelector(sel).addEventListener(event, callback);
+			}
+		};
+	};
+
+	const displayError = msg => {
+		$el.error.innerText = msg;
+		$el.error.classList.add('show');
+		$el.section.classList.add('shake');
+	};
+
 	let newDomain = document.getElementById('url').value;
 	newDomain = newDomain.replace(/^https?:\/\//, '');
-	newDomain = newDomain.replace(/^http?:\/\//, '');
 	if (newDomain === '') {
-		document.getElementById('server-status').innerHTML = 'Please input a value';
+		displayError('Please input a valid URL.');
 	} else {
-		document.getElementById('main').innerHTML = 'Checking...';
+		el('#main').innerHTML = 'Checking...';
 		if (newDomain.indexOf('localhost:') >= 0) {
 			const domain = 'http://' + newDomain;
 			const checkDomain = domain + '/static/audio/zulip.ogg';
@@ -24,8 +46,8 @@ window.addDomain = function () {
 					db.push('/domain', domain);
 					ipcRenderer.send('new-domain', domain);
 				} else {
-					document.getElementById('main').innerHTML = 'Connect';
-					document.getElementById('server-status').innerHTML = 'Not a valid Zulip Local Server.';
+					$el.main.innerHTML = 'Connect';
+					displayError('Not a valid Zulip local server');
 				}
 			});
 			//	});
@@ -35,14 +57,22 @@ window.addDomain = function () {
 
 			request(checkDomain, (error, response) => {
 				if (!error && response.statusCode !== 404) {
-					document.getElementById('main').innerHTML = 'Connect';
+					$el.main.innerHTML = 'Connect';
 					db.push('/domain', domain);
 					ipcRenderer.send('new-domain', domain);
 				} else {
-					document.getElementById('main').innerHTML = 'Connect';
-					document.getElementById('server-status').innerHTML = 'Not a valid Zulip Server.';
+					$el.main.innerHTML = 'Connect';
+					displayError('Not a valid Zulip server');
 				}
 			});
 		}
 	}
+
+	event('#url').on('input', () => {
+		el('#error').classList.remove('show');
+	});
+
+	event('section').on('animationend', function () {
+		this.classList.remove('shake');
+	});
 };