add: live browser notifications
This commit is contained in:
trisua
parent
58d206eb81
commit
98d6f21e6e
18 changed files with 291 additions and 15 deletions
|
|
@ -44,6 +44,7 @@ where
|
|||
| (content_type == "image/jpeg")
|
||||
| (content_type == "image/png")
|
||||
| (content_type == "image/webp")
|
||||
| (content_type == "image/gif")
|
||||
{
|
||||
Bytes::from_request(req, state)
|
||||
.await
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ macro_rules! check_user_blocked_or_private {
|
|||
.get_userblock_by_initiator_receiver($other_user.id, ua.id)
|
||||
.await
|
||||
.is_ok()
|
||||
&& !ua.permissions.check(FinePermission::MANAGE_USERS)
|
||||
{
|
||||
let lang = get_lang!($jar, $data.0);
|
||||
let mut context = initial_context(&$data.0.0, lang, &$user).await;
|
||||
|
|
|
|||
|
|
@ -51,9 +51,12 @@
|
|||
class="button {% if selected == 'requests' %}active{% endif %}"
|
||||
title="Requests"
|
||||
>
|
||||
{{ icon "inbox" }} {% if user.request_count > 0 %}
|
||||
<span class="notification tr">{{ user.request_count }}</span>
|
||||
{% endif %}
|
||||
{{ icon "inbox" }}
|
||||
<span
|
||||
class="notification tr {% if user.request_count <= 0 %}hidden{% endif %}"
|
||||
id="requests_span"
|
||||
>{{ user.request_count }}</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<a
|
||||
|
|
@ -61,11 +64,12 @@
|
|||
class="button {% if selected == 'notifications' %}active{% endif %}"
|
||||
title="Notifications"
|
||||
>
|
||||
{% if user.notification_count > 0 %} {{ icon "bell-dot" }}
|
||||
<span class="notification tr"
|
||||
{{ icon "bell" }}
|
||||
<span
|
||||
class="notification tr {% if user.notification_count <= 0 %}hidden{% endif %}"
|
||||
id="notifications_span"
|
||||
>{{ user.notification_count }}</span
|
||||
>
|
||||
{% else %} {{ icon "bell" }} {% endif %}
|
||||
</a>
|
||||
|
||||
<div class="dropdown">
|
||||
|
|
|
|||
|
|
@ -107,6 +107,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-nest desktop" ui_ident="notifications">
|
||||
<div class="card small">
|
||||
<b>Notifications</b>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-2">
|
||||
<button id="notifications_button"></button>
|
||||
<span class="fade">Notifications require you to keep {{ config.name }} open in your browser for real-time updates. This setting does not sync across browsers.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
trigger("me::notifications_button", [document.getElementById("notifications_button")]);
|
||||
}, 150)
|
||||
</script>
|
||||
|
||||
<div class="card-nest" ui_ident="change_password">
|
||||
<div class="card small">
|
||||
<b>{{ text "settings:label.change_password" }}</b>
|
||||
|
|
@ -880,6 +897,7 @@
|
|||
|
||||
ui.refresh_container(account_settings, [
|
||||
"home_timeline",
|
||||
"notifications",
|
||||
"change_password",
|
||||
"change_username",
|
||||
"two_factor_authentication",
|
||||
|
|
|
|||
|
|
@ -118,6 +118,10 @@ macros -%}
|
|||
document.getElementById("tokens"),
|
||||
]);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
trigger("me::notifications_stream");
|
||||
}, 250);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
(() => {
|
||||
const self = reg_ns("me");
|
||||
const self = reg_ns("me", ["streams"]);
|
||||
|
||||
self.LOGIN_ACCOUNT_TOKENS = JSON.parse(
|
||||
window.localStorage.getItem("atto:login_account_tokens") || "{}",
|
||||
|
|
@ -235,6 +235,120 @@
|
|||
});
|
||||
});
|
||||
|
||||
self.define("notifications_stream", ({ _, streams }) => {
|
||||
const element = document.getElementById("notifications_span");
|
||||
|
||||
streams.subscribe("notifs");
|
||||
streams.event("notifs", "message", (data) => {
|
||||
if (data === "Ping") {
|
||||
return;
|
||||
}
|
||||
|
||||
const json = JSON.parse(data);
|
||||
if (!json.method.Packet) {
|
||||
console.warn("notifications stream cannot read this message");
|
||||
return;
|
||||
}
|
||||
|
||||
const inner_data = JSON.parse(json.data);
|
||||
if (json.method.Packet.Crud === "Create") {
|
||||
const current = Number.parseInt(element.innerText || "0");
|
||||
|
||||
if (current <= 0) {
|
||||
element.classList.remove("hidden");
|
||||
}
|
||||
|
||||
element.innerText = current + 1;
|
||||
|
||||
// check if we're already connected
|
||||
const connected =
|
||||
window.sessionStorage.getItem("atto:connected/notifs") ===
|
||||
"true";
|
||||
|
||||
if (connected) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.sessionStorage.setItem("atto:connected/notifs", "true");
|
||||
|
||||
// send notification
|
||||
const enabled =
|
||||
window.localStorage.getItem("atto:notifs_enabled") ===
|
||||
"true";
|
||||
|
||||
if (Notification.permission === "granted" && enabled) {
|
||||
// try to pull notification user
|
||||
const matches = /\/api\/v1\/auth\/user\/find\/(\d*)/.exec(
|
||||
inner_data.content,
|
||||
);
|
||||
|
||||
// ...
|
||||
new Notification(inner_data.title, {
|
||||
body: inner_data.content,
|
||||
icon: matches[1]
|
||||
? `/api/v1/auth/user/${matches[1]}/avatar?selector_type=id`
|
||||
: "/public/favicon.svg",
|
||||
lang: "en-US",
|
||||
});
|
||||
|
||||
console.info("notification created");
|
||||
}
|
||||
} else if (json.method.Packet.Crud === "Delete") {
|
||||
const current = Number.parseInt(element.innerText || "0");
|
||||
|
||||
if (current - 1 <= 0) {
|
||||
element.classList.add("hidden");
|
||||
}
|
||||
|
||||
element.innerText = current - 1;
|
||||
} else {
|
||||
console.warn("correct packet type but with wrong data");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
self.define("notifications_button", (_, element) => {
|
||||
if (Notification.permission === "granted") {
|
||||
let enabled =
|
||||
window.localStorage.getItem("atto:notifs_enabled") === "true";
|
||||
|
||||
function text() {
|
||||
if (!enabled) {
|
||||
element.innerText = "Enable notifications";
|
||||
} else {
|
||||
element.innerText = "Disable notifications";
|
||||
}
|
||||
}
|
||||
|
||||
element.addEventListener("click", () => {
|
||||
enabled = !enabled;
|
||||
window.localStorage.setItem("atto:notifs_enabled", enabled);
|
||||
|
||||
text();
|
||||
});
|
||||
|
||||
text();
|
||||
} else if (Notification.permission !== "denied") {
|
||||
element.innerText = "Enable notifications";
|
||||
element.addEventListener("click", () => {
|
||||
Notification.requestPermission().then((permission) => {
|
||||
if (permission === "granted") {
|
||||
window.localStorage.setItem(
|
||||
"atto:notifs_enabled",
|
||||
"true",
|
||||
);
|
||||
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(
|
||||
"Permission denied! You must allow this permission for browser notifications.",
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// token switcher
|
||||
self.define(
|
||||
"set_login_account_tokens",
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@
|
|||
}
|
||||
|
||||
socket.events[event] = handler;
|
||||
socket.socket.addEventListener(event, handler);
|
||||
});
|
||||
|
||||
self.define("send_packet", async ({ $ }, stream, method, data) => {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ pub mod images;
|
|||
pub mod ipbans;
|
||||
pub mod profile;
|
||||
pub mod social;
|
||||
pub mod subscriptions;
|
||||
pub mod user_warnings;
|
||||
|
||||
use super::{LoginProps, RegisterProps};
|
||||
|
|
|
|||
58
crates/app/src/routes/api/v1/auth/subscriptions.rs
Normal file
58
crates/app/src/routes/api/v1/auth/subscriptions.rs
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
use axum::{extract::Path, response::IntoResponse, Extension, Json};
|
||||
use axum_extra::extract::CookieJar;
|
||||
use tetratto_core::model::{ApiReturn, Error};
|
||||
use crate::{get_user_from_token, State};
|
||||
|
||||
pub async fn update_last_message_request(
|
||||
jar: CookieJar,
|
||||
Extension(data): Extension<State>,
|
||||
Json((channel_id, message_id)): Json<(usize, usize)>,
|
||||
) -> impl IntoResponse {
|
||||
let data = &(data.read().await).0;
|
||||
let mut user = match get_user_from_token!(jar, data) {
|
||||
Some(ua) => ua,
|
||||
None => return Json(Error::NotAllowed.into()),
|
||||
};
|
||||
|
||||
user.subscriptions.insert(channel_id, message_id);
|
||||
|
||||
if let Err(e) = data
|
||||
.update_user_subscriptions(user.id, user.subscriptions)
|
||||
.await
|
||||
{
|
||||
return Json(e.into());
|
||||
}
|
||||
|
||||
Json(ApiReturn {
|
||||
ok: true,
|
||||
message: "Subscription connection".to_string(),
|
||||
payload: (),
|
||||
})
|
||||
}
|
||||
|
||||
pub async fn delete_request(
|
||||
jar: CookieJar,
|
||||
Extension(data): Extension<State>,
|
||||
Path(channel): Path<usize>,
|
||||
) -> impl IntoResponse {
|
||||
let data = &(data.read().await).0;
|
||||
let mut user = match get_user_from_token!(jar, data) {
|
||||
Some(ua) => ua,
|
||||
None => return Json(Error::NotAllowed.into()),
|
||||
};
|
||||
|
||||
user.subscriptions.remove(&channel);
|
||||
|
||||
if let Err(e) = data
|
||||
.update_user_subscriptions(user.id, user.subscriptions)
|
||||
.await
|
||||
{
|
||||
return Json(e.into());
|
||||
}
|
||||
|
||||
Json(ApiReturn {
|
||||
ok: true,
|
||||
message: "Subscription removed".to_string(),
|
||||
payload: (),
|
||||
})
|
||||
}
|
||||
|
|
@ -303,6 +303,15 @@ pub fn routes() -> Router {
|
|||
)
|
||||
.route("/messages", post(channels::messages::create_request))
|
||||
.route("/messages/{id}", delete(channels::messages::delete_request))
|
||||
// subscriptions
|
||||
.route(
|
||||
"/auth/user/me/subscriptions/{channel_id}/{message_id}",
|
||||
post(auth::subscriptions::update_last_message_request),
|
||||
)
|
||||
.route(
|
||||
"/auth/user/me/subscriptions/{channel_id}",
|
||||
delete(auth::subscriptions::delete_request),
|
||||
)
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ pub async fn stream_request(
|
|||
Query(props): Query<PaginatedQuery>,
|
||||
) -> impl IntoResponse {
|
||||
let data = data.read().await;
|
||||
let user = match get_user_from_token!(jar, data.0) {
|
||||
let mut user = match get_user_from_token!(jar, data.0) {
|
||||
Some(ua) => ua,
|
||||
None => {
|
||||
return Err(Html(
|
||||
|
|
@ -168,6 +168,21 @@ pub async fn stream_request(
|
|||
Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
|
||||
};
|
||||
|
||||
if props.page == 0 {
|
||||
if let Some(ref last_message) = messages.get(messages.len() - 1) {
|
||||
user.subscriptions.insert(channel, last_message.0.id);
|
||||
|
||||
// maybe make update_user_subscriptions take a reference to avoid cloning
|
||||
if let Err(e) = data
|
||||
.0
|
||||
.update_user_subscriptions(user.id, user.subscriptions.clone())
|
||||
.await
|
||||
{
|
||||
return Err(Html(render_error(e, &jar, &data, &Some(user)).await));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let membership = match data
|
||||
.0
|
||||
.get_membership_by_owner_community(user.id, community)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue