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

Cleanup webpush code

Browse Source
This commit is contained in:
Pavel Djundik 2019-11-12 22:03:59 +02:00
parent 17365d9967
commit 7584f47c7d
9 changed files with 75 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/components/Sidebar.vue
View File

@ -16,17 +16,6 @@
<NetworkList /> <NetworkList />
</div> </div>
<footer id="footer"> <footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
><router-link
to="/sign-in"
tag="button"
active-class="active"
:class="['icon', 'sign-in']"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
:aria-selected="$route.name === 'SignIn'"
/></span>
<span <span
class="tooltipped tooltipped-n tooltipped-no-touch" class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network" aria-label="Connect to network"

8
client/components/Windows/Settings.vue
View File

@ -450,6 +450,7 @@
<script> <script>
import socket from "../../js/socket"; import socket from "../../js/socket";
import webpush from "../../js/webpush";
import RevealPassword from "../RevealPassword.vue"; import RevealPassword from "../RevealPassword.vue";
import Session from "../Session.vue"; import Session from "../Session.vue";
import SidebarToggle from "../SidebarToggle.vue"; import SidebarToggle from "../SidebarToggle.vue";
@ -481,10 +482,6 @@ export default {
if (window.navigator.registerProtocolHandler) { if (window.navigator.registerProtocolHandler) {
this.canRegisterProtocol = true; this.canRegisterProtocol = true;
} }
// TODO: Rework push notification code to avoid reinitializing it here
const webpush = require("../../js/webpush");
webpush.initialize();
}, },
methods: { methods: {
onChange(event) { onChange(event) {
@ -551,8 +548,7 @@ export default {
pop.play(); pop.play();
}, },
onPushButtonClick() { onPushButtonClick() {
const webpush = require("../../js/webpush"); // TODO: do this in a smarter way webpush.togglePushSubscription();
webpush.onPushButton();
}, },
}, },
}; };

21
client/css/style.css
View File

@ -324,7 +324,6 @@ kbd {
#sidebar .chan.special::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ } #sidebar .chan.special::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
#footer .sign-in::before { content: "\f023"; /* http://fontawesome.io/icon/lock/ */ }
#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ } #footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ } #footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
#footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ } #footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
@ -854,26 +853,6 @@ background on hover (unless active) */
border-radius: 5px; border-radius: 5px;
} }
.signed-out #footer .sign-in {
display: inline-block;
}
.signed-out #footer .connect {
display: none;
}
.public #footer .sign-in {
display: none;
}
#footer .sign-in {
display: none;
}
.signed-out #sidebar {
display: none; /* Hide the sidebar when user is signed out */
}
#windows li, #windows li,
#windows p, #windows p,
#windows label, #windows label,

2
client/index.html.tpl
View File

@ -47,7 +47,7 @@
<meta name="theme-color" content="<%- themeColor %>"> <meta name="theme-color" content="<%- themeColor %>">
</head> </head>
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>"> <body class="<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="loading"> <div id="loading">
<div class="window"> <div class="window">
<div id="loading-status-container"> <div id="loading-status-container">

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

@ -2,7 +2,6 @@
const $ = require("jquery"); const $ = require("jquery");
const socket = require("../socket"); const socket = require("../socket");
const webpush = require("../webpush");
const upload = require("../upload"); const upload = require("../upload");
const store = require("../store").default; const store = require("../store").default;
const router = require("../router"); const router = require("../router");
@ -33,7 +32,6 @@ socket.once("configuration", function(data) {
upload.initialize(); upload.initialize();
} }
webpush.initialize();
router.initialize(); router.initialize();
// If localStorage contains a theme that does not exist on this server, switch // If localStorage contains a theme that does not exist on this server, switch

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

@ -1,7 +1,6 @@
"use strict"; "use strict";
const socket = require("../socket"); const socket = require("../socket");
const webpush = require("../webpush");
const storage = require("../localStorage"); const storage = require("../localStorage");
const {router, switchToChannel, navigate} = require("../router"); const {router, switchToChannel, navigate} = require("../router");
const store = require("../store").default; const store = require("../store").default;
@ -18,11 +17,6 @@ socket.on("init", function(data) {
if (!store.state.appLoaded) { if (!store.state.appLoaded) {
store.commit("appLoaded"); store.commit("appLoaded");
// TODO: Try to move webpush key to configuration event
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
document.body.classList.remove("signed-out");
if (window.g_TheLoungeRemoveLoading) { if (window.g_TheLoungeRemoveLoading) {
window.g_TheLoungeRemoveLoading(); window.g_TheLoungeRemoveLoading();
} }

120
client/js/webpush.js
View File

@ -1,13 +1,9 @@
"use strict"; "use strict";
const storage = require("./localStorage");
const socket = require("./socket"); const socket = require("./socket");
const store = require("./store").default; const store = require("./store").default;
const {switchToChannel} = require("./router"); const {switchToChannel} = require("./router");
let clientSubscribed = null;
let applicationServerKey;
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
navigator.serviceWorker.addEventListener("message", (event) => { navigator.serviceWorker.addEventListener("message", (event) => {
if (event.data && event.data.type === "open") { if (event.data && event.data.type === "open") {
@ -23,55 +19,50 @@ if ("serviceWorker" in navigator) {
module.exports.hasServiceWorker = false; module.exports.hasServiceWorker = false;
module.exports.configurePushNotifications = (subscribedOnServer, key) => { socket.once("push:issubscribed", function(hasSubscriptionOnServer) {
applicationServerKey = key;
// If client has push registration but the server knows nothing about it,
// this subscription is broken and client has to register again
if (clientSubscribed === true && subscribedOnServer === false) {
store.commit("pushNotificationState", "loading");
navigator.serviceWorker.ready
.then((registration) => registration.pushManager.getSubscription())
.then((subscription) => subscription && subscription.unsubscribe())
.then((successful) => {
store.commit("pushNotificationState", successful ? "supported" : "unsupported");
});
}
};
module.exports.initialize = () => {
if (!isAllowedServiceWorkersHost()) { if (!isAllowedServiceWorkersHost()) {
store.commit("pushNotificationState", "nohttps"); store.commit("pushNotificationState", "nohttps");
return; return;
} }
if ("serviceWorker" in navigator) { if (!("serviceWorker" in navigator)) {
navigator.serviceWorker return;
.register("service-worker.js") }
.then((registration) => {
module.exports.hasServiceWorker = true;
if (!registration.pushManager) { navigator.serviceWorker
return; .register("service-worker.js")
} .then((registration) => {
module.exports.hasServiceWorker = true;
return registration.pushManager.getSubscription().then((subscription) => { if (!registration.pushManager) {
clientSubscribed = !!subscription; return;
}
return registration.pushManager.getSubscription().then((subscription) => {
// If client has push registration but the server knows nothing about it,
// this subscription is broken and client has to register again
if (subscription && hasSubscriptionOnServer === false) {
subscription.unsubscribe().then((successful) => {
store.commit(
"pushNotificationState",
successful ? "supported" : "unsupported"
);
});
} else {
store.commit( store.commit(
"pushNotificationState", "pushNotificationState",
clientSubscribed ? "subscribed" : "supported" subscription ? "subscribed" : "supported"
); );
}); }
})
.catch(() => {
store.commit("pushNotificationState", "unsupported");
}); });
} })
}; .catch((err) => {
store.commit("pushNotificationState", "unsupported");
console.error(err); // eslint-disable-line no-console
});
});
module.exports.onPushButton = () => { module.exports.togglePushSubscription = () => {
store.commit("pushNotificationState", "loading"); store.commit("pushNotificationState", "loading");
navigator.serviceWorker.ready navigator.serviceWorker.ready
@ -80,62 +71,31 @@ module.exports.onPushButton = () => {
if (existingSubscription) { if (existingSubscription) {
socket.emit("push:unregister"); socket.emit("push:unregister");
return existingSubscription.unsubscribe().then(() => { return existingSubscription.unsubscribe().then((successful) => {
store.commit("pushNotificationState", "supported"); store.commit(
"pushNotificationState",
successful ? "supported" : "unsupported"
);
}); });
} }
return registration.pushManager return registration.pushManager
.subscribe({ .subscribe({
applicationServerKey: urlBase64ToUint8Array(applicationServerKey), applicationServerKey: store.state.serverConfiguration.applicationServerKey,
userVisibleOnly: true, userVisibleOnly: true,
}) })
.then((subscription) => { .then((subscription) => {
const rawKey = subscription.getKey ? subscription.getKey("p256dh") : ""; socket.emit("push:register", subscription.toJSON());
const key = rawKey
? window.btoa(String.fromCharCode(...new Uint8Array(rawKey)))
: "";
const rawAuthSecret = subscription.getKey
? subscription.getKey("auth")
: "";
const authSecret = rawAuthSecret
? window.btoa(String.fromCharCode(...new Uint8Array(rawAuthSecret)))
: "";
socket.emit("push:register", {
token: storage.get("token"),
endpoint: subscription.endpoint,
keys: {
p256dh: key,
auth: authSecret,
},
});
store.commit("pushNotificationState", "subscribed"); store.commit("pushNotificationState", "subscribed");
}); });
}) })
) )
.catch(() => { .catch((err) => {
store.commit("pushNotificationState", "unsupported"); store.commit("pushNotificationState", "unsupported");
console.error(err); // eslint-disable-line no-console
}); });
return false;
}; };
function urlBase64ToUint8Array(base64String) {
const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
function isAllowedServiceWorkersHost() { function isAllowedServiceWorkersHost() {
return ( return (
location.protocol === "https:" || location.protocol === "https:" ||

8
src/server.js
View File

@ -645,8 +645,6 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
const sendInitEvent = (tokenToSend) => { const sendInitEvent = (tokenToSend) => {
socket.emit("init", { socket.emit("init", {
applicationServerKey: manager.webPush.vapidKeys.publicKey,
pushSubscription: client.config.sessions[token],
active: openChannel, active: openChannel,
networks: client.networks.map((network) => networks: client.networks.map((network) =>
network.getFilteredClone(openChannel, lastMessage) network.getFilteredClone(openChannel, lastMessage)
@ -695,6 +693,7 @@ function getClientConfiguration() {
]); ]);
} }
config.applicationServerKey = manager.webPush.vapidKeys.publicKey;
config.version = pkg.version; config.version = pkg.version;
config.gitCommit = Helper.getGitCommit(); config.gitCommit = Helper.getGitCommit();
config.themes = themes.getAll(); config.themes = themes.getAll();
@ -740,6 +739,11 @@ function performAuthentication(data) {
// and the client listens to this event only once // and the client listens to this event only once
if (!data.hasConfig) { if (!data.hasConfig) {
socket.emit("configuration", getClientConfiguration()); socket.emit("configuration", getClientConfiguration());
socket.emit(
"push:issubscribed",
token && client.config.sessions[token].pushSubscription ? true : false
);
} }
client.config.browser = { client.config.browser = {

32
test/server.js
View File

@ -101,18 +101,38 @@ describe("Server", function() {
}); });
}); });
it("should emit configuration message", (done) => {
client.on("configuration", (data) => {
// Private key defined in vapid.json is "01020304050607080910111213141516" for this public key.
expect(data.applicationServerKey).to.equal(
"BM0eTDpvDnH7ewlHuXWcPTE1NjlJ06XWIS1cQeBTZmsg4EDx5sOpY7kdX1pniTo8RakL3UdfFuIbC8_zog_BWIM"
);
expect(data.public).to.equal(true);
expect(data.defaultTheme).to.equal("default");
expect(data.themes).to.be.an("array");
expect(data.lockNetwork).to.equal(false);
expect(data.displayNetwork).to.equal(true);
expect(data.useHexIp).to.equal(false);
done();
});
});
it("should emit push subscription state message", (done) => {
client.on("push:issubscribed", (data) => {
expect(data).to.be.false;
done();
});
});
it("should emit init message", (done) => { it("should emit init message", (done) => {
client.on("init", (data) => { client.on("init", (data) => {
expect(data.active).to.equal(-1); expect(data.active).to.equal(-1);
expect(data.networks).to.be.an("array"); expect(data.networks).to.be.an("array");
expect(data.networks).to.be.empty; expect(data.networks).to.be.empty;
expect(data.token).to.be.null; expect(data.token).to.be.null;
expect(data.pushSubscription).to.be.undefined;
// Private key defined in vapid.json is "01020304050607080910111213141516" for this public key.
expect(data.applicationServerKey).to.equal(
"BM0eTDpvDnH7ewlHuXWcPTE1NjlJ06XWIS1cQeBTZmsg4EDx5sOpY7kdX1pniTo8RakL3UdfFuIbC8_zog_BWIM"
);
done(); done();
}); });