From 55d1625ab2fa6451c7da7fbfb8a75180c0f376c2 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sat, 4 Nov 2017 19:19:12 +0200
Subject: [PATCH] Split connect and settings into templates

---
 client/index.html                 | 287 +-----------------------------
 client/views/index.js             |   2 +
 client/views/windows/connect.tpl  |  88 +++++++++
 client/views/windows/settings.tpl | 193 ++++++++++++++++++++
 4 files changed, 285 insertions(+), 285 deletions(-)
 create mode 100644 client/views/windows/connect.tpl
 create mode 100644 client/views/windows/settings.tpl

diff --git a/client/index.html b/client/index.html
index 1c4006cf..2c6b7b78 100644
--- a/client/index.html
+++ b/client/index.html
@@ -80,291 +80,8 @@
 					</form>
 				</div>
 				<div id="sign-in" class="window"></div>
-				<div id="connect" class="window">
-					<div class="header">
-						<button class="lt" aria-label="Toggle channel list"></button>
-					</div>
-					<form class="container" method="post" action="">
-						<div class="row">
-							<div class="col-sm-12">
-								<h1 class="title">
-									{{#if public}}The Lounge - {{/if}}
-									Connect
-									{{#unless displayNetwork}}
-										{{#if lockNetwork}}
-										to {{defaults.name}}
-										{{/if}}
-									{{/unless}}
-								</h1>
-							</div>
-							{{#if displayNetwork}}
-							<div>
-								<div class="col-sm-12">
-									<h2>Network settings</h2>
-								</div>
-								<div class="col-sm-3">
-									<label for="connect:name">Name</label>
-								</div>
-								<div class="col-sm-9">
-									<input class="input" id="connect:name" name="name" value="{{defaults.name}}">
-								</div>
-								<div class="col-sm-3">
-									<label for="connect:host">Server</label>
-								</div>
-								<div class="col-sm-6 col-xs-8">
-									<input class="input" id="connect:host" name="host" value="{{defaults.host}}" aria-label="Server address" {{#if lockNetwork}}disabled{{/if}}>
-								</div>
-								<div class="col-sm-3 col-xs-4">
-									<div class="port">
-										<input class="input" type="number" min="1" max="65535" name="port" value="{{defaults.port}}" aria-label="Server port" {{#if lockNetwork}}disabled{{/if}}>
-									</div>
-								</div>
-								<div class="clearfix"></div>
-								<div class="col-sm-3">
-									<label for="connect:password">Password</label>
-								</div>
-								<div class="col-sm-9">
-									<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
-								</div>
-								<div class="col-sm-9 col-sm-offset-3">
-									<label class="tls">
-										<input type="checkbox" name="tls" {{#if defaults.tls}}checked{{/if}} {{#if lockNetwork}}disabled{{/if}}>
-										Enable TLS/SSL
-									</label>
-								</div>
-								<div class="clearfix"></div>
-							</div>
-							{{/if}}
-							<div class="col-sm-12">
-								<h2>User preferences</h2>
-							</div>
-							<div class="col-sm-3">
-								<label for="connect:nick">Nick</label>
-							</div>
-							<div class="col-sm-9">
-								<input class="input nick" id="connect:nick" name="nick" value="{{defaults.nick}}">
-							</div>
-							{{#unless useHexIp}}
-							<div class="col-sm-3">
-								<label for="connect:username">Username</label>
-							</div>
-							<div class="col-sm-9">
-								<input class="input username" id="connect:username" name="username" value="{{defaults.username}}">
-							</div>
-							{{/unless}}
-							<div class="col-sm-3">
-								<label for="connect:realname">Real name</label>
-							</div>
-							<div class="col-sm-9">
-								<input class="input" id="connect:realname" name="realname" value="{{defaults.realname}}">
-							</div>
-							<div class="col-sm-3">
-								<label for="connect:channels">Channels</label>
-							</div>
-							<div class="col-sm-9">
-								<input class="input" id="connect:channels" name="join" value="{{defaults.join}}">
-							</div>
-							<div class="col-sm-9 col-sm-offset-3">
-								<button type="submit" class="btn">Connect</button>
-							</div>
-						</div>
-					</form>
-				</div>
-				<div id="settings" class="window" data-type="settings">
-					<div class="header">
-						<button class="lt" aria-label="Toggle channel list"></button>
-					</div>
-					<div class="container">
-						<h1 class="title">Settings</h1>
-
-						<div class="row">
-							<div class="col-sm-12">
-								<h2>Messages</h2>
-							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="motd">
-									Show <abbr title="Message Of The Day">MOTD</abbr>
-								</label>
-							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="showSeconds">
-									Show seconds in timestamp
-								</label>
-							</div>
-							<div class="col-sm-12">
-								<h2>
-									Status messages
-									<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes">
-										<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"></button>
-									</span>
-								</h2>
-							</div>
-							<div class="col-sm-12">
-								<label class="opt">
-									<input type="radio" name="statusMessages" value="shown">
-									Show all status messages individually
-								</label>
-								<label class="opt">
-									<input type="radio" name="statusMessages" value="condensed">
-									Condense status messages together
-								</label>
-								<label class="opt">
-									<input type="radio" name="statusMessages" value="hidden">
-									Hide all status messages
-								</label>
-							</div>
-							<div class="col-sm-12">
-								<h2>Visual Aids</h2>
-							</div>
-							<div class="col-sm-12">
-								<label class="opt">
-									<input type="checkbox" name="coloredNicks">
-									Enable colored nicknames
-								</label>
-								<label class="opt">
-									<input type="checkbox" name="autocomplete">
-									Enable autocomplete
-								</label>
-							</div>
-							<div class="col-sm-12">
-								<h2>Theme</h2>
-							</div>
-							<div class="col-sm-12">
-								<label for="theme-select" class="sr-only">Theme</label>
-								<select id="theme-select" name="theme" class="input">
-									{{#each themes}}
-										<option value="{{name}}">
-											{{displayName}}
-										</option>
-									{{/each}}
-								</select>
-							</div>
-							{{#if prefetch}}
-							<div class="col-sm-12">
-								<h2>Link previews</h2>
-							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="thumbnails">
-									Auto-expand images
-								</label>
-							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="links">
-									Auto-expand websites
-								</label>
-							</div>
-							{{/if}}
-							{{#unless public}}
-							<div class="col-sm-12">
-								<h2>Push Notifications</h2>
-							</div>
-							<div class="col-sm-12">
-								<button type="button" class="btn" id="pushNotifications" disabled data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
-								<div class="error" id="pushNotificationsHttps">
-									<strong>Warning</strong>:
-									Push notifications are only supported over HTTPS connections.
-								</div>
-								<div class="error" id="pushNotificationsUnsupported">
-									<strong>Warning</strong>:
-									<span>Push notifications are not supported by your browser.</span>
-								</div>
-							</div>
-							{{/unless}}
-							<div class="col-sm-12">
-								<h2>Browser Notifications</h2>
-							</div>
-							<div class="col-sm-12">
-								<label class="opt">
-								<input id="desktopNotifications" type="checkbox" name="desktopNotifications">
-								Enable browser notifications<br>
-								<div class="error" id="warnUnsupportedDesktopNotifications">
-									<strong>Warning</strong>:
-									Notifications are not supported by your browser.
-								</div>
-								<div class="error" id="warnBlockedDesktopNotifications">
-									<strong>Warning</strong>:
-									Notifications are blocked by your browser.
-								</div>
-								</label>
-							</div>
-							<div class="col-sm-12">
-								<label class="opt">
-								<input type="checkbox" name="notification">
-								Enable notification sound
-								</label>
-							</div>
-							<div class="col-sm-12">
-								<div class="opt">
-									<button id="play">Play sound</button>
-								</div>
-							</div>
-
-							<div class="col-sm-12">
-								<label class="opt">
-									<input type="checkbox" name="notifyAllMessages">
-									Enable notification for all messages
-								</label>
-							</div>
-
-							<div class="col-sm-12">
-								<label class="opt">
-									<label for="highlights" class="sr-only">Custom highlights (comma-separated keywords)</label>
-									<input type="text" id="highlights" name="highlights" class="input" placeholder="Custom highlights (comma-separated keywords)">
-								</label>
-							</div>
-
-							{{#unless public}}
-								{{#unless ldap.enable}}
-							<div id="change-password">
-								<form action="" method="post">
-									<div class="col-sm-12">
-										<h2>Change password</h2>
-									</div>
-									<div class="col-sm-12">
-										<label for="old_password_input" class="sr-only">Enter current password</label>
-										<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
-									</div>
-									<div class="col-sm-12">
-										<label for="new_password_input" class="sr-only">Enter desired new password</label>
-										<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
-									</div>
-									<div class="col-sm-12">
-										<label for="verify_password_input" class="sr-only">Repeat new password</label>
-										<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
-									</div>
-									<div class="col-sm-12 feedback"></div>
-									<div class="col-sm-12">
-										<button type="submit" class="btn">Change password</button>
-									</div>
-								</form>
-							</div>
-								{{/unless}}
-							{{/unless}}
-							<div class="col-sm-12">
-								<h2>Custom Stylesheet</h2>
-							</div>
-							<div class="col-sm-12">
-								<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="/* You can override any style with CSS here */"></textarea>
-							</div>
-						</div>
-
-						{{#unless public}}
-							<div class="session-list">
-								<h2>Sessions</h2>
-
-								<h3>Current session</h3>
-								<div id="session-current"></div>
-
-								<h3>Other sessions</h3>
-								<div id="session-list"></div>
-							</div>
-						{{/unless}}
-					</div>
-				</div>
+				<div id="connect" class="window"></div>
+				<div id="settings" class="window" data-type="settings"></div>
 
 				<div id="help" class="window">
 					<div class="header">
diff --git a/client/views/index.js b/client/views/index.js
index a459ded1..55a8266e 100644
--- a/client/views/index.js
+++ b/client/views/index.js
@@ -22,6 +22,8 @@ module.exports = {
 
 	windows: {
 		sign_in: require("./windows/sign_in.tpl"),
+		settings: require("./windows/settings.tpl"),
+		connect: require("./windows/connect.tpl"),
 	},
 
 	chan: require("./chan.tpl"),
diff --git a/client/views/windows/connect.tpl b/client/views/windows/connect.tpl
new file mode 100644
index 00000000..b52244d8
--- /dev/null
+++ b/client/views/windows/connect.tpl
@@ -0,0 +1,88 @@
+<div class="header">
+	<button class="lt" aria-label="Toggle channel list"></button>
+</div>
+<form class="container" method="post" action="">
+	<div class="row">
+		<div class="col-sm-12">
+			<h1 class="title">
+				{{#if public}}The Lounge - {{/if}}
+				Connect
+				{{#unless displayNetwork}}
+					{{#if lockNetwork}}
+					to {{defaults.name}}
+					{{/if}}
+				{{/unless}}
+			</h1>
+		</div>
+		{{#if displayNetwork}}
+		<div>
+			<div class="col-sm-12">
+				<h2>Network settings</h2>
+			</div>
+			<div class="col-sm-3">
+				<label for="connect:name">Name</label>
+			</div>
+			<div class="col-sm-9">
+				<input class="input" id="connect:name" name="name" value="{{defaults.name}}">
+			</div>
+			<div class="col-sm-3">
+				<label for="connect:host">Server</label>
+			</div>
+			<div class="col-sm-6 col-xs-8">
+				<input class="input" id="connect:host" name="host" value="{{defaults.host}}" aria-label="Server address" {{#if lockNetwork}}disabled{{/if}}>
+			</div>
+			<div class="col-sm-3 col-xs-4">
+				<div class="port">
+					<input class="input" type="number" min="1" max="65535" name="port" value="{{defaults.port}}" aria-label="Server port" {{#if lockNetwork}}disabled{{/if}}>
+				</div>
+			</div>
+			<div class="clearfix"></div>
+			<div class="col-sm-3">
+				<label for="connect:password">Password</label>
+			</div>
+			<div class="col-sm-9">
+				<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
+			</div>
+			<div class="col-sm-9 col-sm-offset-3">
+				<label class="tls">
+					<input type="checkbox" name="tls" {{#if defaults.tls}}checked{{/if}} {{#if lockNetwork}}disabled{{/if}}>
+					Enable TLS/SSL
+				</label>
+			</div>
+			<div class="clearfix"></div>
+		</div>
+		{{/if}}
+		<div class="col-sm-12">
+			<h2>User preferences</h2>
+		</div>
+		<div class="col-sm-3">
+			<label for="connect:nick">Nick</label>
+		</div>
+		<div class="col-sm-9">
+			<input class="input nick" id="connect:nick" name="nick" value="{{defaults.nick}}">
+		</div>
+		{{#unless useHexIp}}
+		<div class="col-sm-3">
+			<label for="connect:username">Username</label>
+		</div>
+		<div class="col-sm-9">
+			<input class="input username" id="connect:username" name="username" value="{{defaults.username}}">
+		</div>
+		{{/unless}}
+		<div class="col-sm-3">
+			<label for="connect:realname">Real name</label>
+		</div>
+		<div class="col-sm-9">
+			<input class="input" id="connect:realname" name="realname" value="{{defaults.realname}}">
+		</div>
+		<div class="col-sm-3">
+			<label for="connect:channels">Channels</label>
+		</div>
+		<div class="col-sm-9">
+			<input class="input" id="connect:channels" name="join" value="{{defaults.join}}">
+		</div>
+		<div class="col-sm-9 col-sm-offset-3">
+			<button type="submit" class="btn">Connect</button>
+		</div>
+	</div>
+</form>
diff --git a/client/views/windows/settings.tpl b/client/views/windows/settings.tpl
new file mode 100644
index 00000000..ec314752
--- /dev/null
+++ b/client/views/windows/settings.tpl
@@ -0,0 +1,193 @@
+<div class="header">
+	<button class="lt" aria-label="Toggle channel list"></button>
+</div>
+<div class="container">
+	<h1 class="title">Settings</h1>
+
+	<div class="row">
+		<div class="col-sm-12">
+			<h2>Messages</h2>
+		</div>
+		<div class="col-sm-6">
+			<label class="opt">
+				<input type="checkbox" name="motd">
+				Show <abbr title="Message Of The Day">MOTD</abbr>
+			</label>
+		</div>
+		<div class="col-sm-6">
+			<label class="opt">
+				<input type="checkbox" name="showSeconds">
+				Show seconds in timestamp
+			</label>
+		</div>
+		<div class="col-sm-12">
+			<h2>
+				Status messages
+				<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes">
+					<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"></button>
+				</span>
+			</h2>
+		</div>
+		<div class="col-sm-12">
+			<label class="opt">
+				<input type="radio" name="statusMessages" value="shown">
+				Show all status messages individually
+			</label>
+			<label class="opt">
+				<input type="radio" name="statusMessages" value="condensed">
+				Condense status messages together
+			</label>
+			<label class="opt">
+				<input type="radio" name="statusMessages" value="hidden">
+				Hide all status messages
+			</label>
+		</div>
+		<div class="col-sm-12">
+			<h2>Visual Aids</h2>
+		</div>
+		<div class="col-sm-12">
+			<label class="opt">
+				<input type="checkbox" name="coloredNicks">
+				Enable colored nicknames
+			</label>
+			<label class="opt">
+				<input type="checkbox" name="autocomplete">
+				Enable autocomplete
+			</label>
+		</div>
+		<div class="col-sm-12">
+			<h2>Theme</h2>
+		</div>
+		<div class="col-sm-12">
+			<label for="theme-select" class="sr-only">Theme</label>
+			<select id="theme-select" name="theme" class="input">
+				{{#each themes}}
+					<option value="{{name}}">
+						{{displayName}}
+					</option>
+				{{/each}}
+			</select>
+		</div>
+		{{#if prefetch}}
+		<div class="col-sm-12">
+			<h2>Link previews</h2>
+		</div>
+		<div class="col-sm-6">
+			<label class="opt">
+				<input type="checkbox" name="thumbnails">
+				Auto-expand images
+			</label>
+		</div>
+		<div class="col-sm-6">
+			<label class="opt">
+				<input type="checkbox" name="links">
+				Auto-expand websites
+			</label>
+		</div>
+		{{/if}}
+		{{#unless public}}
+		<div class="col-sm-12">
+			<h2>Push Notifications</h2>
+		</div>
+		<div class="col-sm-12">
+			<button type="button" class="btn" id="pushNotifications" disabled data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
+			<div class="error" id="pushNotificationsHttps">
+				<strong>Warning</strong>:
+				Push notifications are only supported over HTTPS connections.
+			</div>
+			<div class="error" id="pushNotificationsUnsupported">
+				<strong>Warning</strong>:
+				<span>Push notifications are not supported by your browser.</span>
+			</div>
+		</div>
+		{{/unless}}
+		<div class="col-sm-12">
+			<h2>Browser Notifications</h2>
+		</div>
+		<div class="col-sm-12">
+			<label class="opt">
+			<input id="desktopNotifications" type="checkbox" name="desktopNotifications">
+			Enable browser notifications<br>
+			<div class="error" id="warnUnsupportedDesktopNotifications">
+				<strong>Warning</strong>:
+				Notifications are not supported by your browser.
+			</div>
+			<div class="error" id="warnBlockedDesktopNotifications">
+				<strong>Warning</strong>:
+				Notifications are blocked by your browser.
+			</div>
+			</label>
+		</div>
+		<div class="col-sm-12">
+			<label class="opt">
+			<input type="checkbox" name="notification">
+			Enable notification sound
+			</label>
+		</div>
+		<div class="col-sm-12">
+			<div class="opt">
+				<button id="play">Play sound</button>
+			</div>
+		</div>
+
+		<div class="col-sm-12">
+			<label class="opt">
+				<input type="checkbox" name="notifyAllMessages">
+				Enable notification for all messages
+			</label>
+		</div>
+
+		<div class="col-sm-12">
+			<label class="opt">
+				<label for="highlights" class="sr-only">Custom highlights (comma-separated keywords)</label>
+				<input type="text" id="highlights" name="highlights" class="input" placeholder="Custom highlights (comma-separated keywords)">
+			</label>
+		</div>
+
+		{{#unless public}}
+			{{#unless ldap.enable}}
+		<div id="change-password">
+			<form action="" method="post">
+				<div class="col-sm-12">
+					<h2>Change password</h2>
+				</div>
+				<div class="col-sm-12">
+					<label for="old_password_input" class="sr-only">Enter current password</label>
+					<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
+				</div>
+				<div class="col-sm-12">
+					<label for="new_password_input" class="sr-only">Enter desired new password</label>
+					<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
+				</div>
+				<div class="col-sm-12">
+					<label for="verify_password_input" class="sr-only">Repeat new password</label>
+					<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
+				</div>
+				<div class="col-sm-12 feedback"></div>
+				<div class="col-sm-12">
+					<button type="submit" class="btn">Change password</button>
+				</div>
+			</form>
+		</div>
+			{{/unless}}
+		{{/unless}}
+		<div class="col-sm-12">
+			<h2>Custom Stylesheet</h2>
+		</div>
+		<div class="col-sm-12">
+			<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="/* You can override any style with CSS here */"></textarea>
+		</div>
+	</div>
+
+	{{#unless public}}
+		<div class="session-list">
+			<h2>Sessions</h2>
+
+			<h3>Current session</h3>
+			<div id="session-current"></div>
+
+			<h3>Other sessions</h3>
+			<div id="session-list"></div>
+		</div>
+	{{/unless}}
+</div>