Move some settings to Vue

This commit is contained in:
Pavel Djundik 2019-02-20 11:10:18 +02:00
parent 09e12affe8
commit 71f54f6a5d
7 changed files with 115 additions and 134 deletions

View File

@ -19,44 +19,42 @@
<NetworkList :networks="networks" :active-channel="activeChannel" />
</div>
<footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
><button
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Sign in"><button
class="icon sign-in"
data-target="#sign-in"
data-target="SignIn"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false"
/></span>
aria-selected="false" /></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network"
><button
aria-label="Connect to network"><button
class="icon connect"
data-target="#connect"
data-target="Connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false"
/></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
><button
aria-selected="false" /></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Settings"><button
class="icon settings"
data-target="#settings"
data-target="Settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false"
/></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
><button
aria-selected="false" /></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Help"><button
class="icon help"
data-target="#help"
data-target="Help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false"
/></span>
aria-selected="false" /></span>
</footer>
</aside>
<div id="sidebar-overlay" />
@ -78,6 +76,7 @@ const throttle = require("lodash/throttle");
import NetworkList from "./NetworkList.vue";
import Chat from "./Chat.vue";
import SignIn from "./Windows/SignIn.vue";
import Settings from "./Windows/Settings.vue";
export default {
name: "App",
@ -85,6 +84,7 @@ export default {
NetworkList,
Chat,
SignIn,
Settings,
},
props: {
activeWindow: String,

View File

@ -40,8 +40,8 @@
class="btn">Open irc:// URLs with The Lounge</button>
</div>
{{#unless public}}
<div
v-if="!this.$root.serverConfiguration.public"
class="col-sm-12"
data-advanced>
<h2>
@ -64,13 +64,13 @@
<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 class="opt force-sync-button">
<button
id="forceSync"
type="button"
class="btn">Force sync settings</button>
class="btn"
@click="onForceSyncClick">Force sync settings</button>
<p>This will override any settings already synced to the server.</p>
</div>
</div>
{{/unless}}
<div class="col-sm-12">
<h2>Messages</h2>
</div>
@ -169,59 +169,62 @@
id="theme-select"
name="theme"
class="input">
{{#each themes}}
<option value="{{name}}">
{{ displayName }}
<option
v-for="theme in this.$root.serverConfiguration.themes"
:key="theme.name">
{{ theme.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="media">
Auto-expand media
</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
id="pushNotifications"
type="button"
class="btn"
disabled
data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
<div
id="pushNotificationsHttps"
class="error">
<strong>Warning</strong>:
Push notifications are only supported over HTTPS connections.
<template v-if="this.$root.serverConfiguration.prefetch">
<div class="col-sm-12">
<h2>Link previews</h2>
</div>
<div
id="pushNotificationsUnsupported"
class="error">
<strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span>
<div class="col-sm-6">
<label class="opt">
<input
type="checkbox"
name="media">
Auto-expand media
</label>
</div>
</div>
{{/unless}}
<div class="col-sm-6">
<label class="opt">
<input
type="checkbox"
name="links">
Auto-expand websites
</label>
</div>
</template>
<template v-if="!this.$root.serverConfiguration.public">
<div class="col-sm-12">
<h2>Push Notifications</h2>
</div>
<div class="col-sm-12">
<button
id="pushNotifications"
type="button"
class="btn"
disabled
data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
<div
v-if="this.$root.pushNotificationState === 'nohttps'"
class="error">
<strong>Warning</strong>:
Push notifications are only supported over HTTPS connections.
</div>
<div
v-if="this.$root.pushNotificationState === 'unsupported'"
class="error">
<strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span>
</div>
</div>
</template>
<div class="col-sm-12">
<h2>Browser Notifications</h2>
</div>
@ -233,12 +236,13 @@
name="desktopNotifications">
Enable browser notifications<br>
<div
id="warnUnsupportedDesktopNotifications"
v-if="this.$root.desktopNotificationState === 'unsupported'"
class="error">
<strong>Warning</strong>:
Notifications are not supported by your browser.
</div>
<div
v-if="this.$root.desktopNotificationState === 'blocked'"
id="warnBlockedDesktopNotifications"
class="error">
<strong>Warning</strong>:
@ -287,9 +291,9 @@
</label>
</div>
{{#unless public}}
{{#unless ldapEnabled}}
<div id="change-password">
<div
v-if="!this.$root.serverConfiguration.public && !this.$root.serverConfiguration.ldapEnabled"
id="change-password">
<form
action=""
method="post"
@ -307,7 +311,6 @@
name="old_password"
class="input"
placeholder="Enter current password">
{{> ../reveal-password}}
</div>
<div class="col-sm-12 password-container">
<label
@ -319,7 +322,6 @@
name="new_password"
class="input"
placeholder="Enter desired new password">
{{> ../reveal-password}}
</div>
<div class="col-sm-12 password-container">
<label
@ -331,7 +333,6 @@
name="verify_password"
class="input"
placeholder="Repeat new password">
{{> ../reveal-password}}
</div>
<div class="col-sm-12 feedback" />
<div class="col-sm-12">
@ -341,8 +342,7 @@
</div>
</form>
</div>
{{/unless}}
{{/unless}}
<div
class="col-sm-12"
data-advanced>
@ -356,14 +356,16 @@
class="sr-only">Custom stylesheet. You can override any style with CSS here.</label>
<textarea
id="user-specified-css-input"
v-model="$root.settings.userStyles"
class="input"
name="userStyles"
placeholder="/* You can override any style with CSS here */" />
</div>
</div>
{{#unless public}}
<div class="session-list">
<div
v-if="!this.$root.serverConfiguration.public"
class="session-list">
<h2>Sessions</h2>
<h3>Current session</h3>
@ -372,7 +374,6 @@
<h3>Other sessions</h3>
<div id="session-list" />
</div>
{{/unless}}
</div>
</div>
@ -410,6 +411,10 @@ export default {
socket.emit("auth", values);
},
onForceSyncClick() {
const options = require("../../js/options");
options.syncAllSettings(true);
},
},
};
</script>

View File

@ -141,22 +141,18 @@ window.vueMounted = () => {
if ($(window).outerWidth() <= utils.mobileViewportPixels) {
slideoutMenu.toggle(false);
}
} else {
vueApp.activeChannel = null;
vueApp.activeWindow = target;
}
const lastActive = $("#windows > .active");
lastActive.removeClass("active");
const chan = $(target)
.addClass("active")
.trigger("show");
utils.synchronizeNotifiedState();
if (self.hasClass("chan")) {
vueApp.$nextTick(() => $("#chat-container").addClass("active"));
}
/* TODO: move to ChatInput.vue
const chanChat = chan.find(".chat");
if (chanChat.length > 0 && channel.type !== "special") {
@ -165,6 +161,7 @@ window.vueMounted = () => {
// See https://github.com/thelounge/thelounge/issues/2257
$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
}
*/
if (channel && channel.channel.usersOutdated) {
channel.channel.usersOutdated = false;

View File

@ -6,7 +6,6 @@ const socket = require("./socket");
const {vueApp} = require("./vue");
require("../js/autocompletion");
const $windows = $("#windows");
const $settings = $("#settings");
const $theme = $("#theme");
const $userStyles = $("#user-specified-css");
@ -18,8 +17,6 @@ const noCSSparamReg = /[?&]nocss/;
let $syncWarningOverride;
let $syncWarningBase;
let $forceSyncButton;
let $warningUnsupported;
let $warningBlocked;
// Default settings
const settings = vueApp.settings;
@ -85,10 +82,10 @@ module.exports = {
// When notifications are not supported, this is never called (because
// checkbox state can not be changed).
function updateDesktopNotificationStatus() {
if (Notification.permission === "denied") {
$warningBlocked.show();
if (Notification.permission === "granted") {
vueApp.desktopNotificationState = "granted";
} else {
$warningBlocked.hide();
vueApp.desktopNotificationState = "blocked";
}
}
@ -114,10 +111,10 @@ function applySetting(name, value) {
} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
$userStyles.html(value);
} else if (name === "desktopNotifications") {
if ("Notification" in window && value && Notification.permission !== "granted") {
updateDesktopNotificationStatus();
if (("Notification" in window) && value && Notification.permission !== "granted") {
Notification.requestPermission(updateDesktopNotificationStatus);
} else if (!value) {
$warningBlocked.hide();
}
} else if (name === "advanced") {
$("#settings [data-advanced]").toggle(settings[name]);
@ -180,9 +177,7 @@ function syncAllSettings(force = false) {
// 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") {
if (name === "highlights") {
$settings.find(`input[name=${name}]`).val(value);
} else if (name === "nickPostfix") {
$settings.find(`input[name=${name}]`).val(value);
@ -205,14 +200,10 @@ function processSetting(name, value, save) {
}
function initialize() {
$warningBlocked = $settings.find("#warnBlockedDesktopNotifications");
$warningUnsupported = $settings.find("#warnUnsupportedDesktopNotifications");
$syncWarningOverride = $settings.find(".sync-warning-override");
$syncWarningBase = $settings.find(".sync-warning-base");
$forceSyncButton = $settings.find(".force-sync-button");
$warningBlocked.hide();
module.exports.initialized = true;
// Settings have now entirely updated, apply settings to the client.
@ -222,11 +213,10 @@ function initialize() {
// If browser does not support notifications
// display proper message in settings.
if ("Notification" in window) {
$warningUnsupported.hide();
$windows.on("show", "#settings", updateDesktopNotificationStatus);
if (("Notification" in window)) {
updateDesktopNotificationStatus();
} else {
$warningUnsupported.show();
vueApp.desktopNotificationState = "unsupported";
}
$settings.on("change", "input, select, textarea", function(e) {
@ -249,10 +239,6 @@ function initialize() {
}
});
$settings.find("#forceSync").on("click", () => {
syncAllSettings(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.

View File

@ -6,7 +6,6 @@ const templates = require("../../views");
const options = require("../options");
const webpush = require("../webpush");
const connect = $("#connect");
const utils = require("../utils");
const upload = require("../upload");
const {vueApp} = require("../vue");
@ -33,9 +32,7 @@ socket.on("configuration", function(data) {
return;
}
$("#settings").html(templates.windows.settings(data));
$("#help").html(templates.windows.help(data));
$("#changelog").html(templates.windows.changelog());
vueApp.serverConfiguration = data;
$("#settings").on("show", () => {
$("#session-list").html("<p>Loading…</p>");

View File

@ -25,6 +25,9 @@ const vueApp = new Vue({
isFileUploadEnabled: false,
isNotified: false,
networks: [],
pushNotificationState: "unsupported",
desktopNotificationState: "unsupported",
serverConfiguration: {},
settings: {
syncSettings: false,
advanced: false,

View File

@ -3,6 +3,7 @@
const $ = require("jquery");
const storage = require("./localStorage");
const socket = require("./socket");
const {vueApp} = require("./vue");
let pushNotificationsButton;
let clientSubscribed = null;
@ -43,11 +44,10 @@ module.exports.initialize = () => {
pushNotificationsButton = $("#pushNotifications");
if (!isAllowedServiceWorkersHost()) {
vueApp.pushNotificationState = "nohttps";
return;
}
$("#pushNotificationsHttps").hide();
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("service-worker.js")
@ -59,9 +59,7 @@ module.exports.initialize = () => {
}
return registration.pushManager.getSubscription().then((subscription) => {
$("#pushNotificationsUnsupported").hide();
pushNotificationsButton.prop("disabled", false).on("click", onPushButton);
vueApp.pushNotificationState = "supported";
clientSubscribed = !!subscription;
@ -69,10 +67,9 @@ module.exports.initialize = () => {
alternatePushButton();
}
});
})
.catch((err) => {
$("#pushNotificationsUnsupported span").text(err);
});
}).catch(() => {
vueApp.pushNotificationState = "unsupported";
});
}
};
@ -126,11 +123,7 @@ function onPushButton() {
})
)
.catch((err) => {
$("#pushNotificationsUnsupported")
.find("span")
.text(`An error has occurred: ${err}`)
.end()
.show();
vueApp.pushNotificationState = "unsupported";
});
return false;