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

Merge pull request #1851 from creesch/settingSync

Browse Source 
Optional syncing of client settings.
This commit is contained in:
Pavel Djundik 2018-03-09 12:37:17 +02:00 committed by GitHub
commit b2eb11b5ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 366 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/css/style.css
View File

@ -223,6 +223,7 @@ kbd {
#chat .title::before,
#footer .icon,
#chat .count::before,
#settings .extra-experimental,
#settings .extra-help,
#settings #play::before,
#form #submit::before,
@ -413,6 +414,10 @@ kbd {
line-height: 50px;
}
#settings .extra-experimental::before {
content: "\f0c3"; /* https://fontawesome.com/icons/flask?style=solid */
}
#settings .extra-help::before {
content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
}
@ -1626,6 +1631,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin-top: 30px;
}
#settings .sync-warning-base {
display: none;
}
#settings .opt {
display: block;
padding: 5px 0 5px 1px;
@ -1635,15 +1644,21 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin-right: 6px;
}
#settings .extra-experimental {
color: #84ce88;
}
#settings .extra-help,
#settings #play {
color: #7f8c8d;
}
#settings .extra-experimental,
#settings .extra-help {
cursor: help;
}
#settings .extra-experimental,
#settings h2 .extra-help {
font-size: 0.8em;
}

11
client/js/autocompletion.js
View File

@ -10,16 +10,16 @@ const constants = require("./constants");
const input = $("#input");
let textcomplete;
let enabled = false;
module.exports = {
enable: enableAutocomplete,
disable: () => {
if (enabled) {
input.off("input.tabcomplete");
Mousetrap(input.get(0)).off("tab", "keydown");
if (textcomplete) {
textcomplete.destroy();
textcomplete = null;
enabled = false;
}
},
};
@ -63,7 +63,7 @@ const nicksStrategy = {
},
replace([, original], position = 1) {
// If no postfix specified, return autocompleted nick as-is
if (!options.nickPostfix) {
if (!options.settings.nickPostfix) {
return original;
}
@ -73,7 +73,7 @@ const nicksStrategy = {
}
// If nick is first in the input, append specified postfix
return original + options.nickPostfix;
return original + options.settings.nickPostfix;
},
index: 1,
};
@ -169,6 +169,7 @@ const backgroundColorStrategy = {
};
function enableAutocomplete() {
enabled = true;
let tabCount = 0;
let lastMatch = "";
let currentMatches = [];

2
client/js/libs/handlebars/tz.js
View File

@ -5,6 +5,6 @@ const constants = require("../../constants");
module.exports = function(time) {
const options = require("../../options");
const format = options.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
const format = options.settings.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
return moment(time).format(format);
};

339
client/js/options.js
View File

@ -2,15 +2,28 @@
const $ = require("jquery");
const escapeRegExp = require("lodash/escapeRegExp");
const userStyles = $("#user-specified-css");
const storage = require("./localStorage");
const tz = require("./libs/handlebars/tz");
const socket = require("./socket");
const windows = $("#windows");
const chat = $("#chat");
const $windows = $("#windows");
const $chat = $("#chat");
const $settings = $("#settings");
const $theme = $("#theme");
const $userStyles = $("#user-specified-css");
// Default options
const options = {
const noCSSparamReg = /[?&]nocss/;
// Not yet available at this point but used in various functionaly.
// Will be assigned when `initialize` is called.
let $syncWarningOverride;
let $syncWarningBase;
let $warningUnsupported;
let $warningBlocked;
// Default settings
const settings = {
syncSettings: false,
autocomplete: true,
nickPostfix: "",
coloredNicks: true,
@ -24,129 +37,99 @@ const options = {
statusMessages: "condensed",
theme: $("#theme").data("server-theme"),
media: true,
userStyles: userStyles.text(),
userStyles: "",
};
let userOptions = JSON.parse(storage.get("settings")) || {};
for (const key in options) {
if (userOptions[key] !== undefined) {
options[key] = userOptions[key];
const noSync = ["syncSettings"];
// alwaysSync is reserved for things like "highlights".
// TODO: figure out how to deal with legacy clients that have different settings.
const alwaysSync = [];
// Process usersettings from localstorage.
let userSettings = JSON.parse(storage.get("settings")) || {};
for (const key in settings) {
if (userSettings[key] !== undefined) {
settings[key] = userSettings[key];
}
}
// Apply custom CSS on page load
if (typeof userOptions.userStyles === "string" && !/[?&]nocss/.test(window.location.search)) {
userStyles.html(userOptions.userStyles);
// Apply custom CSS and themes on page load
// Done here and not on init because on slower devices and connections
// it can take up to several seconds before init is called.
if (typeof userSettings.userStyles === "string" && !noCSSparamReg.test(window.location.search)) {
$userStyles.html(userSettings.userStyles);
}
userOptions = null;
if (typeof userSettings.theme === "string") {
$theme.prop("href", `themes/${userSettings.theme}.css`);
}
module.exports = options;
userSettings = null;
module.exports = {
alwaysSync: alwaysSync,
noSync: noSync,
initialized: false,
highlightsRE: null,
settings: settings,
shouldOpenMessagePreview,
noServerSettings,
processSetting,
initialize,
};
// Due to cyclical dependency, have to require it after exports
const autocompletion = require("./autocompletion");
module.exports.shouldOpenMessagePreview = function(type) {
return type === "link" ? options.links : options.media;
};
module.exports.initialize = () => {
module.exports.initialize = null;
const settings = $("#settings");
for (const i in options) {
if (i === "userStyles") {
settings.find("#user-specified-css-input").val(options[i]);
} else if (i === "highlights") {
settings.find("input[name=" + i + "]").val(options[i]);
} else if (i === "nickPostfix") {
settings.find("input[name=" + i + "]").val(options[i]);
} else if (i === "statusMessages") {
settings.find(`input[name=${i}][value=${options[i]}]`)
.prop("checked", true);
} else if (i === "theme") {
$("#theme").prop("href", "themes/" + options[i] + ".css");
settings.find("select[name=" + i + "]").val(options[i]);
} else if (options[i]) {
settings.find("input[name=" + i + "]").prop("checked", true);
}
function shouldOpenMessagePreview(type) {
return type === "link" ? settings.links : settings.media;
}
const desktopNotificationsCheckbox = $("#desktopNotifications");
const warningUnsupported = $("#warnUnsupportedDesktopNotifications");
const warningBlocked = $("#warnBlockedDesktopNotifications").hide();
// Updates the checkbox and warning in settings when the Settings page is
// opened or when the checkbox state is changed.
// Updates the checkbox and warning in settings.
// When notifications are not supported, this is never called (because
// checkbox state can not be changed).
const updateDesktopNotificationStatus = function() {
function updateDesktopNotificationStatus() {
if (Notification.permission === "denied") {
desktopNotificationsCheckbox.prop("disabled", true);
desktopNotificationsCheckbox.prop("checked", false);
warningBlocked.show();
$warningBlocked.show();
} else {
if (Notification.permission === "default" && desktopNotificationsCheckbox.prop("checked")) {
desktopNotificationsCheckbox.prop("checked", false);
$warningBlocked.hide();
}
}
desktopNotificationsCheckbox.prop("disabled", false);
warningBlocked.hide();
}
};
// If browser does not support notifications, override existing settings and
// display proper message in settings.
if (("Notification" in window)) {
warningUnsupported.hide();
windows.on("show", "#settings", updateDesktopNotificationStatus);
} else {
options.desktopNotifications = false;
desktopNotificationsCheckbox.prop("disabled", true);
desktopNotificationsCheckbox.prop("checked", false);
}
settings.on("change", "input, select, textarea", function() {
const self = $(this);
const type = self.prop("type");
const name = self.prop("name");
if (type === "password") {
return;
} else if (type === "radio") {
if (self.prop("checked")) {
options[name] = self.val();
}
} else if (type === "checkbox") {
options[name] = self.prop("checked");
} else {
options[name] = self.val();
}
storage.set("settings", JSON.stringify(options));
if (name === "motd") {
chat.toggleClass("hide-" + name, !self.prop("checked"));
function applySetting(name, value) {
if (name === "syncSettings" && value) {
$syncWarningOverride.hide();
} else if (name === "motd") {
$chat.toggleClass("hide-" + name, !value);
} else if (name === "statusMessages") {
chat.toggleClass("hide-status-messages", options[name] === "hidden");
chat.toggleClass("condensed-status-messages", options[name] === "condensed");
$chat.toggleClass("hide-status-messages", value === "hidden");
$chat.toggleClass("condensed-status-messages", value === "condensed");
} else if (name === "coloredNicks") {
chat.toggleClass("colored-nicks", self.prop("checked"));
$chat.toggleClass("colored-nicks", value);
} else if (name === "theme") {
$("#theme").prop("href", "themes/" + options[name] + ".css");
} else if (name === "userStyles") {
userStyles.html(options[name]);
$theme.prop("href", `themes/${value}.css`);
} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
$userStyles.html(value);
} else if (name === "highlights") {
options.highlights = options[name].split(",").map(function(h) {
let highlights;
if (typeof value === "string") {
highlights = value.split(",").map(function(h) {
return h.trim();
}).filter(function(h) {
});
} else {
highlights = value;
}
highlights = highlights.filter(function(h) {
// Ensure we don't have empty string in the list of highlights
// otherwise, users get notifications for everything
return h !== "";
});
// Construct regex with wordboundary for every highlight item
const highlightsTokens = options.highlights.map(function(h) {
const highlightsTokens = highlights.map(function(h) {
return escapeRegExp(h);
});
@ -155,24 +138,166 @@ module.exports.initialize = () => {
} else {
module.exports.highlightsRE = null;
}
} else if (name === "nickPostfix") {
options.nickPostfix = options[name];
} else if (name === "showSeconds") {
chat.find(".msg > .time").each(function() {
$chat.find(".msg > .time").each(function() {
$(this).text(tz($(this).parent().data("time")));
});
chat.toggleClass("show-seconds", self.prop("checked"));
$chat.toggleClass("show-seconds", value);
} else if (name === "autocomplete") {
if (self.prop("checked")) {
if (value) {
autocompletion.enable();
} else {
autocompletion.disable();
}
} else if (name === "desktopNotifications") {
if ($(this).prop("checked") && Notification.permission !== "granted") {
if (value && Notification.permission !== "granted") {
Notification.requestPermission(updateDesktopNotificationStatus);
} else if (!value) {
$warningBlocked.hide();
}
}
}).find("input")
.trigger("change");
};
}
function settingSetEmit(name, value) {
socket.emit("setting:set", {
name: name,
value: value,
});
}
// When sync is `true` the setting will also be send to the backend for syncing.
function updateSetting(name, value, sync) {
let storeValue = value;
// First convert highlights if input is a string.
// Otherwise we are comparing the wrong types.
if (name === "highlights" && typeof value === "string") {
storeValue = value.split(",").map(function(h) {
return h.trim();
}).filter(function(h) {
// Ensure we don't have empty string in the list of highlights
// otherwise, users get notifications for everything
return h !== "";
});
}
const currentOption = settings[name];
// Only update and process when the setting is actually changed.
if (currentOption !== storeValue) {
settings[name] = storeValue;
storage.set("settings", JSON.stringify(settings));
applySetting(name, value);
// Sync is checked, request settings from server.
if (name === "syncSettings" && value) {
socket.emit("setting:get");
$syncWarningOverride.hide();
$syncWarningBase.hide();
} else if (name === "syncSettings") {
$syncWarningOverride.show();
}
if (settings.syncSettings && !noSync.includes(name) && sync) {
settingSetEmit(name, value);
} else if (alwaysSync.includes(name) && sync) {
settingSetEmit(name, value);
}
}
}
function noServerSettings() {
// Sync is enabled but the server has no settings so we sync all settings from this client.
if (settings.syncSettings) {
for (const name in settings) {
if (!noSync.includes(name)) {
settingSetEmit(name, settings[name]);
} else if (alwaysSync.includes(name)) {
settingSetEmit(name, settings[name]);
}
}
$syncWarningOverride.hide();
$syncWarningBase.hide();
} else {
$syncWarningOverride.hide();
$syncWarningBase.show();
}
}
// If `save` is set to true it will pass the setting to `updateSetting()` processSetting
function processSetting(name, value, save) {
if (name === "userStyles") {
$settings.find("#user-specified-css-input").val(value);
} else if (name === "highlights") {
$settings.find(`input[name=${name}]`).val(value);
} else if (name === "nickPostfix") {
$settings.find(`input[name=${name}]`).val(value);
} else if (name === "statusMessages") {
$settings.find(`input[name=${name}][value=${value}]`)
.prop("checked", true);
} else if (name === "theme") {
$settings.find("#theme-select").val(value);
} else if (typeof value === "boolean") {
$settings.find(`input[name=${name}]`).prop("checked", value);
}
// No need to also call processSetting when `save` is true.
// updateSetting does take care of that.
if (save) {
// Sync is false as applySetting is never called as the result of a user changing the setting.
updateSetting(name, value, false);
} else {
applySetting(name, value);
}
}
function initialize() {
$warningBlocked = $settings.find("#warnBlockedDesktopNotifications");
$warningUnsupported = $settings.find("#warnUnsupportedDesktopNotifications");
$syncWarningOverride = $settings.find(".sync-warning-override");
$syncWarningBase = $settings.find(".sync-warning-base");
$warningBlocked.hide();
module.exports.initialized = true;
// Settings have now entirely updated, apply settings to the client.
for (const name in settings) {
processSetting(name, settings[name], false);
}
// If browser does not support notifications
// display proper message in settings.
if (("Notification" in window)) {
$warningUnsupported.hide();
$windows.on("show", "#settings", updateDesktopNotificationStatus);
} else {
$warningUnsupported.show();
}
$settings.on("change", "input, select, textarea", function(e) {
// We only want to trigger on human triggerd changes.
if (e.originalEvent) {
const $self = $(this);
const type = $self.prop("type");
const name = $self.prop("name");
if (type === "radio") {
if ($self.prop("checked")) {
updateSetting(name, $self.val(), true);
}
} else if (type === "checkbox") {
updateSetting(name, $self.prop("checked"), true);
settings[name] = $self.prop("checked");
} else if (type !== "password") {
updateSetting(name, $self.val(), true);
}
}
});
// Local init is done, let's sync
// We always ask for synced settings even if it is disabled.
// Settings can be mandatory to sync and it is used to determine sync base state.
socket.emit("settings:get");
}

2
client/js/socket-events/configuration.js
View File

@ -7,7 +7,7 @@ const options = require("../options");
const webpush = require("../webpush");
socket.on("configuration", function(data) {
if (!options.initialize) {
if (options.initialized) {
return;
}

1
client/js/socket-events/index.js
View File

@ -20,3 +20,4 @@ require("./sign_out");
require("./sessions_list");
require("./configuration");
require("./changelog");
require("./setting");

6
client/js/socket-events/msg.js
View File

@ -125,9 +125,9 @@ function notifyMessage(targetId, channel, msg) {
const button = sidebar.find(".chan[data-id='" + targetId + "']");
if (msg.highlight || (options.notifyAllMessages && msg.type === "message")) {
if (msg.highlight || (options.settings.notifyAllMessages && msg.type === "message")) {
if (!document.hasFocus() || !channel.hasClass("active")) {
if (options.notification) {
if (options.settings.notification) {
try {
pop.play();
} catch (exception) {
@ -137,7 +137,7 @@ function notifyMessage(targetId, channel, msg) {
utils.toggleNotificationMarkers(true);
if (options.desktopNotifications && Notification.permission === "granted") {
if (options.settings.desktopNotifications && ("Notification" in window) && Notification.permission === "granted") {
let title;
let body;

28
client/js/socket-events/setting.js Normal file
View File

@ -0,0 +1,28 @@
"use strict";
const socket = require("../socket");
const options = require("../options");
function evaluateSetting(name, value) {
if (options.settings.syncSettings && options.settings[name] !== value && !options.noSync.includes(name)) {
options.processSetting(name, value, true);
} else if (options.alwaysSync.includes(name)) {
options.processSetting(name, value, true);
}
}
socket.on("setting:new", function(data) {
const name = data.name;
const value = data.value;
evaluateSetting(name, value);
});
socket.on("setting:all", function(settings) {
if (Object.keys(settings).length === 0) {
options.noServerSettings();
} else {
for (const name in settings) {
evaluateSetting(name, settings[name]);
}
}
});

4
client/js/sorting.js
View File

@ -30,7 +30,7 @@ module.exports = function() {
}
);
options.ignoreSortSync = true;
options.settings.ignoreSortSync = true;
},
});
sidebar.find(".network").sortable({
@ -58,7 +58,7 @@ module.exports = function() {
}
);
options.ignoreSortSync = true;
options.settings.ignoreSortSync = true;
},
});
};

16
client/views/windows/settings.tpl
View File

@ -5,6 +5,22 @@
<h1 class="title">Settings</h1>
<div class="row">
{{#unless public}}
<div class="col-sm-12">
<h2>
Settings synchronisation
<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Note: This is an experimental feature and may change in future releases.">
<button class="extra-experimental" aria-label="Note: This is an experimental feature and may change in future releases."></button>
</span>
</h2>
<label class="opt">
<input type="checkbox" name="syncSettings">
Synchronize settings with other clients.
</label>
<p class="sync-warning-override"><strong>Warning</strong> Checking this box will override the settings of this client with those stored on the server.</p>
<p class="sync-warning-base"><strong>Warning</strong> No settings have been synced before. Enabling this will sync all settings of this client as the base for other clients.</p>
</div>
{{/unless}}
<div class="col-sm-12">
<h2>Messages</h2>
</div>

1
src/clientManager.js
View File

@ -116,6 +116,7 @@ ClientManager.prototype.addUser = function(name, password, enableLog) {
awayMessage: "",
networks: [],
sessions: {},
clientSettings: {},
};
try {

38
src/server.js
View File

@ -445,6 +445,44 @@ function initializeClient(socket, client, token, lastMessage) {
socket.on("sessions:get", sendSessionList);
if (!Helper.config.public) {
socket.on("setting:set", (newSetting) => {
if (!newSetting || typeof newSetting !== "object") {
return;
}
// Older user configs will not have the clientSettings property.
if (!client.config.hasOwnProperty("clientSettings")) {
client.config.clientSettings = {};
}
// We do not need to do write operations and emit events if nothing changed.
if (client.config.clientSettings[newSetting.name] !== newSetting.value) {
client.config.clientSettings[newSetting.name] = newSetting.value;
// Pass the setting to all clients.
client.emit("setting:new", {
name: newSetting.name,
value: newSetting.value,
});
client.manager.updateUser(client.name, {
clientSettings: client.config.clientSettings,
});
}
});
socket.on("setting:get", () => {
if (!client.config.hasOwnProperty("clientSettings")) {
socket.emit("setting:all", {});
return;
}
const clientSettings = client.config.clientSettings;
socket.emit("setting:all", clientSettings);
});
}
socket.on("sign-out", (tokenToSignOut) => {
// If no token provided, sign same client out
if (!tokenToSignOut) {