supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1057 from thelounge/1055-handlebars-index

Browse Source 
Change index.html to be rendered using handlebars
This commit is contained in:
Pavel Djundik 2017-04-22 11:26:13 +03:00 committed by GitHub
commit 761dfbb33c
3 changed files with 61 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
client/index.html
View File

@ -9,7 +9,7 @@
<link rel="preload" as="script" href="js/bundle.js"> <link rel="preload" as="script" href="js/bundle.js">
<link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="<%= theme %>"> <link id="theme" rel="stylesheet" href="{{ theme }}">
<style id="user-specified-css"></style> <style id="user-specified-css"></style>
<title>The Lounge</title> <title>The Lounge</title>
@ -25,7 +25,7 @@
<meta name="theme-color" content="#455164"> <meta name="theme-color" content="#455164">
</head> </head>
<body class="signed-out <%= public ? "public" : "" %>"> <body class="signed-out {{#if public}}public{{/if}}">
<div id="wrap"> <div id="wrap">
<div id="viewport"> <div id="viewport">
@ -122,12 +122,17 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h1 class="title"> <h1 class="title">
<%= public ? "The Lounge - " : "" %> {{#if public}}The Lounge - {{/if}}
Connect Connect
<%= !displayNetwork && lockNetwork ? "to " + defaults.name : "" %> {{#unless displayNetwork}}
{{#if lockNetwork}}
to {{defaults.name}}
{{/if}}
{{/unless}}
</h1> </h1>
</div> </div>
<div <%= typeof(displayNetwork) !== "undefined" && !displayNetwork ? 'style="display: none;"' : ''%>> {{#unless displayNetwork}}
<div>
<div class="col-sm-12"> <div class="col-sm-12">
<h2>Network settings</h2> <h2>Network settings</h2>
</div> </div>
@ -135,17 +140,17 @@
<label for="connect:name">Name</label> <label for="connect:name">Name</label>
</div> </div>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="input" id="connect:name" name="name" value="<%= defaults.name %>"> <input class="input" id="connect:name" name="name" value="{{defaults.name}}">
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<label for="connect:host">Server</label> <label for="connect:host">Server</label>
</div> </div>
<div class="col-sm-6 col-xs-8"> <div class="col-sm-6 col-xs-8">
<input class="input" id="connect:host" name="host" value="<%= defaults.host %>" aria-label="Server address" <%= typeof(lockNetwork) !== "undefined" && lockNetwork ? "disabled" : "" %>> <input class="input" id="connect:host" name="host" value="{{defaults.host}}" aria-label="Server address" {{#if lockNetwork}}disabled{{/if}}>
</div> </div>
<div class="col-sm-3 col-xs-4"> <div class="col-sm-3 col-xs-4">
<div class="port"> <div class="port">
<input class="input" type="number" min="1" max="65535" name="port" value="<%= defaults.port %>" aria-label="Server port" <%= typeof(lockNetwork) !== "undefined" && lockNetwork ? "disabled" : "" %>> <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> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -153,16 +158,17 @@
<label for="connect:password">Password</label> <label for="connect:password">Password</label>
</div> </div>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="input" id="connect:password" type="password" name="password" value="<%= defaults.password %>"> <input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
</div> </div>
<div class="col-sm-9 col-sm-offset-3"> <div class="col-sm-9 col-sm-offset-3">
<label class="tls"> <label class="tls">
<input type="checkbox" name="tls" <%= defaults.tls ? "checked" : "" %> <%= typeof(lockNetwork) !== "undefined" && lockNetwork ? "disabled" : "" %>> <input type="checkbox" name="tls" {{#if defaults.tls}}checked{{/if}} {{#if lockNetwork}}disabled{{/if}}>
Enable TLS/SSL Enable TLS/SSL
</label> </label>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
{{/unless}}
<div class="col-sm-12"> <div class="col-sm-12">
<h2>User preferences</h2> <h2>User preferences</h2>
</div> </div>
@ -170,27 +176,27 @@
<label for="connect:nick">Nick</label> <label for="connect:nick">Nick</label>
</div> </div>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="input nick" id="connect:nick" name="nick" value="<%= defaults.nick %>"> <input class="input nick" id="connect:nick" name="nick" value="{{defaults.nick}}">
</div> </div>
<% if (!useHexIp) { %> {{#unless useHexIp}}
<div class="col-sm-3"> <div class="col-sm-3">
<label for="connect:username">Username</label> <label for="connect:username">Username</label>
</div> </div>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="input username" id="connect:username" name="username" value="<%= defaults.username %>"> <input class="input username" id="connect:username" name="username" value="{{defaults.username}}">
</div> </div>
<% } %> {{/unless}}
<div class="col-sm-3"> <div class="col-sm-3">
<label for="connect:realname">Real name</label> <label for="connect:realname">Real name</label>
</div> </div>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="input" id="connect:realname" name="realname" value="<%= defaults.realname %>"> <input class="input" id="connect:realname" name="realname" value="{{defaults.realname}}">
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<label for="connect:channels">Channels</label> <label for="connect:channels">Channels</label>
</div> </div>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="input" id="connect:channels" name="join" value="<%= defaults.join %>"> <input class="input" id="connect:channels" name="join" value="{{defaults.join}}">
</div> </div>
<div class="col-sm-9 col-sm-offset-3"> <div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn">Connect</button> <button type="submit" class="btn">Connect</button>
@ -261,14 +267,14 @@
<div class="col-sm-12"> <div class="col-sm-12">
<label for="theme-select" class="sr-only">Theme</label> <label for="theme-select" class="sr-only">Theme</label>
<select id="theme-select" name="theme" class="input"> <select id="theme-select" name="theme" class="input">
<% themes.forEach(function(themeName) { %> {{#each themes}}
<option value="<%= themeName %>"> <option value="{{filename}}">
<%= themeName.charAt(0).toUpperCase() + themeName.slice(1) %> {{name}}
</option> </option>
<% }) %> {{/each}}
</select> </select>
</div> </div>
<% if (typeof prefetch === "undefined" || prefetch !== false) { %> {{#unless prefetch}}
<div class="col-sm-12"> <div class="col-sm-12">
<h2>Links and URLs</h2> <h2>Links and URLs</h2>
</div> </div>
@ -284,7 +290,7 @@
Auto-expand links Auto-expand links
</label> </label>
</div> </div>
<% } %> {{/unless}}
<div class="col-sm-12"> <div class="col-sm-12">
<h2>Notifications</h2> <h2>Notifications</h2>
</div> </div>
@ -328,7 +334,8 @@
</label> </label>
</div> </div>
<% if (!public && !ldap.enable) { %> {{#unless public}}
{{#unless ldap.enable}}
<div id="change-password"> <div id="change-password">
<form action="" method="post"> <form action="" method="post">
<div class="col-sm-12"> <div class="col-sm-12">
@ -352,7 +359,8 @@
</div> </div>
</form> </form>
</div> </div>
<% } %> {{/unless}}
{{/unless}}
<div class="col-sm-12"> <div class="col-sm-12">
<h2>Custom Stylesheet</h2> <h2>Custom Stylesheet</h2>
</div> </div>
@ -809,13 +817,13 @@
<h2>About The Lounge</h2> <h2>About The Lounge</h2>
<p class="about"> <p class="about">
<% if (gitCommit) { %> {{#if gitCommit}}
The Lounge is running from source The Lounge is running from source
(<a href="https://github.com/thelounge/lounge/tree/<%= gitCommit %>" target="_blank" rel="noopener"><code><%= gitCommit %></code></a>).<br> (<a href="https://github.com/thelounge/lounge/tree/{{ gitCommit }}" target="_blank" rel="noopener"><code>{{ gitCommit }}</code></a>).<br>
<% } else { %> {{else}}
The Lounge is in version <strong><%= version %></strong> The Lounge is in version <strong>{{version}}</strong>
(<a href="https://github.com/thelounge/lounge/releases/tag/v<%= version %>" target="_blank" rel="noopener">See release notes</a>).<br> (<a href="https://github.com/thelounge/lounge/releases/tag/v{{ version }}" target="_blank" rel="noopener">See release notes</a>).<br>
<% } %> {{/if}}
<a href="https://thelounge.github.io/" target="_blank" rel="noopener">Website</a><br> <a href="https://thelounge.github.io/" target="_blank" rel="noopener">Website</a><br>
<a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener">Documentation</a><br> <a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener">Documentation</a><br>

1
package.json
View File

@ -46,6 +46,7 @@
"commander": "2.9.0", "commander": "2.9.0",
"event-stream": "3.3.4", "event-stream": "3.3.4",
"express": "4.15.2", "express": "4.15.2",
"express-handlebars": "3.0.0",
"fs-extra": "2.1.2", "fs-extra": "2.1.2",
"irc-framework": "2.6.1", "irc-framework": "2.6.1",
"ldapjs": "1.0.1", "ldapjs": "1.0.1",

44
src/server.js
View File

@ -5,7 +5,9 @@ var pkg = require("../package.json");
var Client = require("./client"); var Client = require("./client");
var ClientManager = require("./clientManager"); var ClientManager = require("./clientManager");
var express = require("express"); var express = require("express");
var expressHandlebars = require("express-handlebars");
var fs = require("fs"); var fs = require("fs");
var path = require("path");
var io = require("socket.io"); var io = require("socket.io");
var dns = require("dns"); var dns = require("dns");
var Helper = require("./helper"); var Helper = require("./helper");
@ -29,7 +31,10 @@ module.exports = function() {
var app = express() var app = express()
.use(allRequests) .use(allRequests)
.use(index) .use(index)
.use(express.static("client")); .use(express.static("client"))
.engine("html", expressHandlebars({extname: ".html"}))
.set("view engine", "html")
.set("views", path.join(__dirname, "..", "client"));
var config = Helper.config; var config = Helper.config;
var server = null; var server = null;
@ -125,28 +130,23 @@ function index(req, res, next) {
return next(); return next();
} }
return fs.readFile("client/index.html", "utf-8", function(err, file) { var data = _.merge(
if (err) { pkg,
throw err; Helper.config
} );
data.gitCommit = Helper.getGitCommit();
var data = _.merge( data.themes = fs.readdirSync("client/themes/").filter(function(themeFile) {
pkg, return themeFile.endsWith(".css");
Helper.config }).map(function(css) {
); const filename = css.slice(0, -4);
data.gitCommit = Helper.getGitCommit(); return {
data.themes = fs.readdirSync("client/themes/").filter(function(themeFile) { name: filename.charAt(0).toUpperCase() + filename.slice(1),
return themeFile.endsWith(".css"); filename: filename
}).map(function(css) { };
return css.slice(0, -4);
});
var template = _.template(file);
res.setHeader("Content-Security-Policy", "default-src *; connect-src 'self' ws: wss:; style-src * 'unsafe-inline'; script-src 'self'; child-src 'self'; object-src 'none'; form-action 'none';");
res.setHeader("Referrer-Policy", "no-referrer");
res.setHeader("Content-Type", "text/html");
res.writeHead(200);
res.end(template(data));
}); });
res.setHeader("Content-Security-Policy", "default-src *; connect-src 'self' ws: wss:; style-src * 'unsafe-inline'; script-src 'self'; child-src 'self'; object-src 'none'; form-action 'none';");
res.setHeader("Referrer-Policy", "no-referrer");
res.render("index", data);
} }
function init(socket, client) { function init(socket, client) {