Move some settings to Vue
This commit is contained in:
Pavel Djundik
parent
09e12affe8
commit
71f54f6a5d
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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>");
|
||||
|
||||
@ -25,6 +25,9 @@ const vueApp = new Vue({
|
||||
isFileUploadEnabled: false,
|
||||
isNotified: false,
|
||||
networks: [],
|
||||
pushNotificationState: "unsupported",
|
||||
desktopNotificationState: "unsupported",
|
||||
serverConfiguration: {},
|
||||
settings: {
|
||||
syncSettings: false,
|
||||
advanced: false,
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user