forked from alemi/upub
chore(web): restructured project a little
less messy i think
This commit is contained in:
parent
be6d9bf28b
commit
4d7f99dfaa
17 changed files with 710 additions and 656 deletions
100
web/src/auth.rs
100
web/src/auth.rs
|
@ -1,6 +1,5 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
use crate::URL_BASE;
|
||||
|
||||
pub trait AuthToken {
|
||||
fn present(&self) -> bool;
|
||||
|
@ -16,103 +15,6 @@ pub struct Auth {
|
|||
pub userid: Signal<Option<String>>,
|
||||
}
|
||||
|
||||
|
||||
#[component]
|
||||
pub fn LoginBox(
|
||||
token_tx: WriteSignal<Option<String>>,
|
||||
userid_tx: WriteSignal<Option<String>>,
|
||||
home_tl: Timeline,
|
||||
server_tl: Timeline,
|
||||
) -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let username_ref: NodeRef<html::Input> = create_node_ref();
|
||||
let password_ref: NodeRef<html::Input> = create_node_ref();
|
||||
view! {
|
||||
<div>
|
||||
<div class="w-100" class:hidden=move || !auth.present() >
|
||||
"hi "<a href={move || Uri::web(FetchKind::User, &auth.username() )} >{move || auth.username() }</a>
|
||||
<input style="float:right" type="submit" value="logout" on:click=move |_| {
|
||||
token_tx.set(None);
|
||||
home_tl.reset(format!("{URL_BASE}/outbox/page"));
|
||||
server_tl.reset(format!("{URL_BASE}/inbox/page"));
|
||||
spawn_local(async move {
|
||||
if let Err(e) = server_tl.more(auth).await {
|
||||
logging::error!("failed refreshing server timeline: {e}");
|
||||
}
|
||||
});
|
||||
} />
|
||||
</div>
|
||||
<div class:hidden=move || auth.present() >
|
||||
<form on:submit=move|ev| {
|
||||
ev.prevent_default();
|
||||
logging::log!("logging in...");
|
||||
let email = username_ref.get().map(|x| x.value()).unwrap_or("".into());
|
||||
let password = password_ref.get().map(|x| x.value()).unwrap_or("".into());
|
||||
spawn_local(async move {
|
||||
let Ok(res) = reqwest::Client::new()
|
||||
.post(format!("{URL_BASE}/auth"))
|
||||
.json(&LoginForm { email, password })
|
||||
.send()
|
||||
.await
|
||||
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
|
||||
let Ok(auth_response) = res
|
||||
.json::<AuthResponse>()
|
||||
.await
|
||||
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
|
||||
logging::log!("logged in until {}", auth_response.expires);
|
||||
// update our username and token cookies
|
||||
let username = auth_response.user.split('/').last().unwrap_or_default().to_string();
|
||||
userid_tx.set(Some(auth_response.user));
|
||||
token_tx.set(Some(auth_response.token));
|
||||
// reset home feed and point it to our user's inbox
|
||||
home_tl.reset(format!("{URL_BASE}/users/{}/inbox/page", username));
|
||||
spawn_local(async move {
|
||||
if let Err(e) = home_tl.more(auth).await {
|
||||
tracing::error!("failed refreshing home timeline: {e}");
|
||||
}
|
||||
});
|
||||
// reset server feed: there may be more content now that we're authed
|
||||
server_tl.reset(format!("{URL_BASE}/inbox/page"));
|
||||
spawn_local(async move {
|
||||
if let Err(e) = server_tl.more(auth).await {
|
||||
tracing::error!("failed refreshing server timeline: {e}");
|
||||
}
|
||||
});
|
||||
});
|
||||
} >
|
||||
<table class="w-100 align">
|
||||
<tr>
|
||||
<td colspan="2"><input class="w-100" type="text" node_ref=username_ref placeholder="username" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><input class="w-100" type="password" node_ref=password_ref placeholder="password" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-50"><input class="w-100" type="submit" value="login" /></td>
|
||||
<td class="w-50"><a href="/web/register"><input class="w-100" type="button" value="register" /></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#[derive(Debug, serde::Serialize)]
|
||||
struct LoginForm {
|
||||
email: String,
|
||||
password: String,
|
||||
}
|
||||
|
||||
|
||||
#[derive(Debug, Clone, serde::Deserialize)]
|
||||
struct AuthResponse {
|
||||
token: String,
|
||||
user: String,
|
||||
expires: chrono::DateTime<chrono::Utc>,
|
||||
}
|
||||
|
||||
impl AuthToken for Auth {
|
||||
fn token(&self) -> String {
|
||||
self.token.get().unwrap_or_default()
|
||||
|
|
98
web/src/components/login.rs
Normal file
98
web/src/components/login.rs
Normal file
|
@ -0,0 +1,98 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn LoginBox(
|
||||
token_tx: WriteSignal<Option<String>>,
|
||||
userid_tx: WriteSignal<Option<String>>,
|
||||
home_tl: Timeline,
|
||||
server_tl: Timeline,
|
||||
) -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let username_ref: NodeRef<html::Input> = create_node_ref();
|
||||
let password_ref: NodeRef<html::Input> = create_node_ref();
|
||||
view! {
|
||||
<div>
|
||||
<div class="w-100" class:hidden=move || !auth.present() >
|
||||
"hi "<a href={move || Uri::web(FetchKind::User, &auth.username() )} >{move || auth.username() }</a>
|
||||
<input style="float:right" type="submit" value="logout" on:click=move |_| {
|
||||
token_tx.set(None);
|
||||
home_tl.reset(format!("{URL_BASE}/outbox/page"));
|
||||
server_tl.reset(format!("{URL_BASE}/inbox/page"));
|
||||
spawn_local(async move {
|
||||
if let Err(e) = server_tl.more(auth).await {
|
||||
logging::error!("failed refreshing server timeline: {e}");
|
||||
}
|
||||
});
|
||||
} />
|
||||
</div>
|
||||
<div class:hidden=move || auth.present() >
|
||||
<form on:submit=move|ev| {
|
||||
ev.prevent_default();
|
||||
logging::log!("logging in...");
|
||||
let email = username_ref.get().map(|x| x.value()).unwrap_or("".into());
|
||||
let password = password_ref.get().map(|x| x.value()).unwrap_or("".into());
|
||||
spawn_local(async move {
|
||||
let Ok(res) = reqwest::Client::new()
|
||||
.post(format!("{URL_BASE}/auth"))
|
||||
.json(&LoginForm { email, password })
|
||||
.send()
|
||||
.await
|
||||
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
|
||||
let Ok(auth_response) = res
|
||||
.json::<AuthResponse>()
|
||||
.await
|
||||
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
|
||||
logging::log!("logged in until {}", auth_response.expires);
|
||||
// update our username and token cookies
|
||||
let username = auth_response.user.split('/').last().unwrap_or_default().to_string();
|
||||
userid_tx.set(Some(auth_response.user));
|
||||
token_tx.set(Some(auth_response.token));
|
||||
// reset home feed and point it to our user's inbox
|
||||
home_tl.reset(format!("{URL_BASE}/users/{}/inbox/page", username));
|
||||
spawn_local(async move {
|
||||
if let Err(e) = home_tl.more(auth).await {
|
||||
tracing::error!("failed refreshing home timeline: {e}");
|
||||
}
|
||||
});
|
||||
// reset server feed: there may be more content now that we're authed
|
||||
server_tl.reset(format!("{URL_BASE}/inbox/page"));
|
||||
spawn_local(async move {
|
||||
if let Err(e) = server_tl.more(auth).await {
|
||||
tracing::error!("failed refreshing server timeline: {e}");
|
||||
}
|
||||
});
|
||||
});
|
||||
} >
|
||||
<table class="w-100 align">
|
||||
<tr>
|
||||
<td colspan="2"><input class="w-100" type="text" node_ref=username_ref placeholder="username" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><input class="w-100" type="password" node_ref=password_ref placeholder="password" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-50"><input class="w-100" type="submit" value="login" /></td>
|
||||
<td class="w-50"><a href="/web/register"><input class="w-100" type="button" value="register" /></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#[derive(Debug, serde::Serialize)]
|
||||
struct LoginForm {
|
||||
email: String,
|
||||
password: String,
|
||||
}
|
||||
|
||||
|
||||
#[derive(Debug, Clone, serde::Deserialize)]
|
||||
struct AuthResponse {
|
||||
token: String,
|
||||
user: String,
|
||||
expires: chrono::DateTime<chrono::Utc>,
|
||||
}
|
|
@ -1,12 +1,21 @@
|
|||
mod login;
|
||||
pub use login::*;
|
||||
|
||||
mod activity;
|
||||
pub use activity::*;
|
||||
|
||||
mod navigation;
|
||||
pub use navigation::*;
|
||||
|
||||
mod object;
|
||||
pub use object::*;
|
||||
|
||||
mod user;
|
||||
pub use user::*;
|
||||
|
||||
mod post;
|
||||
pub use post::*;
|
||||
|
||||
mod timeline;
|
||||
pub use timeline::*;
|
||||
|
||||
|
|
48
web/src/components/navigation.rs
Normal file
48
web/src/components/navigation.rs
Normal file
|
@ -0,0 +1,48 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Breadcrumb(
|
||||
#[prop(optional)]
|
||||
back: bool,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="tl-header w-100 center" >
|
||||
{if back { Some(view! {
|
||||
<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
|
||||
})} else { None }}
|
||||
<b>{crate::NAME}</b>" :: "{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Navigator() -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let (query, set_query) = create_signal("".to_string());
|
||||
view! {
|
||||
<form action={move|| format!("/web/search?q={}", query.get())}>
|
||||
<table class="align">
|
||||
<tr>
|
||||
<td class="w-100">
|
||||
<input type="text" placeholder="search" class="w-100" on:input=move |ev| {
|
||||
set_query.set(event_target_value(&ev))
|
||||
} />
|
||||
</td>
|
||||
<td>
|
||||
<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<table class="align w-100">
|
||||
<tr><td colspan="2"><a href="/web/home"><input class="w-100" type="submit" class:hidden=move || !auth.present() value="home timeline" /></a></td></tr>
|
||||
<tr><td colspan="2"><a href="/web/server"><input class="w-100" type="submit" value="server timeline" /></a></td></tr>
|
||||
<tr>
|
||||
<td class="w-50"><a href="/web/about"><input class="w-100" type="submit" value="about" /></a></td>
|
||||
<td class="w-50"><a href="/web/config"><input class="w-100" type="submit" value="config" /></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
}
|
||||
}
|
|
@ -3,36 +3,6 @@ use apb::{ActivityMut, Base, BaseMut, Object, ObjectMut};
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Navigator() -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let (query, set_query) = create_signal("".to_string());
|
||||
view! {
|
||||
<form action={move|| format!("/web/search?q={}", query.get())}>
|
||||
<table class="align">
|
||||
<tr>
|
||||
<td class="w-100">
|
||||
<input type="text" placeholder="search" class="w-100" on:input=move |ev| {
|
||||
set_query.set(event_target_value(&ev))
|
||||
} />
|
||||
</td>
|
||||
<td>
|
||||
<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<table class="align w-100">
|
||||
<tr><td colspan="2"><a href="/web/home"><input class="w-100" type="submit" class:hidden=move || !auth.present() value="home timeline" /></a></td></tr>
|
||||
<tr><td colspan="2"><a href="/web/server"><input class="w-100" type="submit" value="server timeline" /></a></td></tr>
|
||||
<tr>
|
||||
<td class="w-50"><a href="/web/about"><input class="w-100" type="submit" value="about" /></a></td>
|
||||
<td class="w-50"><a href="/web/config"><input class="w-100" type="submit" value="config" /></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Copy, Default)]
|
||||
pub struct ReplyControls {
|
||||
pub context: RwSignal<Option<String>>,
|
||||
|
@ -306,22 +276,6 @@ fn get_checked(node: NodeRef<html::Input>) -> bool {
|
|||
.unwrap_or_default()
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Breadcrumb(
|
||||
#[prop(optional)]
|
||||
back: bool,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="tl-header w-100 center" >
|
||||
{if back { Some(view! {
|
||||
<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
|
||||
})} else { None }}
|
||||
<b>{crate::NAME}</b>" :: "{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn SelectOption(is: &'static str, value: ReadSignal<String>) -> impl IntoView {
|
||||
view! {
|
|
@ -1,12 +1,12 @@
|
|||
mod app;
|
||||
mod auth;
|
||||
mod app;
|
||||
mod components;
|
||||
mod page;
|
||||
mod control;
|
||||
mod config;
|
||||
|
||||
pub use app::App;
|
||||
pub use config::Config;
|
||||
pub use auth::Auth;
|
||||
|
||||
pub mod prelude;
|
||||
|
||||
|
@ -17,7 +17,6 @@ pub const DEFAULT_AVATAR_URL: &str = "https://cdn.alemi.dev/social/gradient.png"
|
|||
pub const NAME: &str = "μ";
|
||||
|
||||
use std::sync::Arc;
|
||||
use auth::Auth;
|
||||
|
||||
|
||||
|
||||
|
|
506
web/src/page.rs
506
web/src/page.rs
|
@ -1,506 +0,0 @@
|
|||
use std::sync::Arc;
|
||||
|
||||
use apb::{ActivityMut, Actor, Base, Object, ObjectMut};
|
||||
|
||||
use leptos::*;
|
||||
use leptos_router::*;
|
||||
use crate::{prelude::*, Config, DEFAULT_AVATAR_URL};
|
||||
|
||||
#[component]
|
||||
pub fn AboutPage() -> impl IntoView {
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb>about</Breadcrumb>
|
||||
<div class="mt-s mb-s" >
|
||||
<p><code>μpub</code>" is a micro social network powered by "<a href="">ActivityPub</a></p>
|
||||
<p><i>"the "<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>" is an ensemble of social networks, which, while independently hosted, can communicate with each other"</i></p>
|
||||
<p>content is aggregated in timelines, logged out users can only access the global server timeline</p>
|
||||
<hr />
|
||||
<p>"while somewhat usable, "<code>μpub</code>" is under active development and still lacks some mainstream features (such as hashtags or lists)"</p>
|
||||
<p>"if you would like to contribute to "<code>μpub</code>"'s development, get in touch and check "<a href="https://github.com/alemidev/upub" target="_blank">github</a>" or "<a href="https://moonlit.technology/alemi/upub.git" target="_blank">forgejo</a></p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn RegisterPage() -> impl IntoView {
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb>register</Breadcrumb>
|
||||
<form>
|
||||
<table class="align ma-3">
|
||||
<tr>
|
||||
<td>username</td>
|
||||
<td><input type="email" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>password</td>
|
||||
<td><input type="password" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><hr /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display name</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>summary</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>avatar url</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>banner url</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><hr /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><input class="w-100" type="submit" value="register" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ConfigPage(setter: WriteSignal<Config>) -> impl IntoView {
|
||||
let config = use_context::<Signal<Config>>().expect("missing config context");
|
||||
|
||||
macro_rules! get_cfg {
|
||||
(filter $field:ident) => {
|
||||
move || config.get().filters.$field
|
||||
};
|
||||
($field:ident) => {
|
||||
move || config.get().$field
|
||||
};
|
||||
}
|
||||
|
||||
macro_rules! set_cfg {
|
||||
($field:ident) => {
|
||||
move |ev| {
|
||||
let mut mock = config.get();
|
||||
mock.$field = event_target_checked(&ev);
|
||||
setter.set(mock);
|
||||
}
|
||||
};
|
||||
(filter $field:ident) => {
|
||||
move |ev| {
|
||||
let mut mock = config.get();
|
||||
mock.filters.$field = event_target_checked(&ev);
|
||||
setter.set(mock);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb>config</Breadcrumb>
|
||||
<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
|
||||
<p>
|
||||
<span title="embedded video attachments will loop like gifs if this option is enabled">
|
||||
<input type="checkbox" class="mr-1"
|
||||
prop:checked=get_cfg!(loop_videos)
|
||||
on:input=set_cfg!(loop_videos)
|
||||
/> loop videos
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span title="any post with a summary is considered to have a content warning, and collapsed by default if this option is enabled">
|
||||
<input type="checkbox" class="mr-1"
|
||||
prop:checked=get_cfg!(collapse_content_warnings)
|
||||
on:input=set_cfg!(collapse_content_warnings)
|
||||
/> collapse content warnings
|
||||
</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p><code title="unchecked elements won't show in timelines">filters</code></p>
|
||||
<ul>
|
||||
<li><span title="like activities"><input type="checkbox" prop:checked=get_cfg!(filter likes) on:input=set_cfg!(filter likes) />" likes"</span></li>
|
||||
<li><span title="create activities with object"><input type="checkbox" prop:checked=get_cfg!(filter creates) on:input=set_cfg!(filter creates)/>" creates"</span></li>
|
||||
<li><span title="announce activities with object"><input type="checkbox" prop:checked=get_cfg!(filter announces) on:input=set_cfg!(filter announces) />" announces"</span></li>
|
||||
<li><span title="follow, accept and reject activities"><input type="checkbox" prop:checked=get_cfg!(filter follows) on:input=set_cfg!(filter follows) />" follows"</span></li>
|
||||
<li><span title="objects without a related activity to display"><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) />" orphans"</span></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
fn send_follow_request(target: String) {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
spawn_local(async move {
|
||||
let payload = serde_json::Value::Object(serde_json::Map::default())
|
||||
.set_activity_type(Some(apb::ActivityType::Follow))
|
||||
.set_object(apb::Node::link(target.clone()))
|
||||
.set_to(apb::Node::links(vec![target]));
|
||||
if let Err(e) = Http::post(&auth.outbox(), &payload, auth).await {
|
||||
tracing::error!("failed sending follow request: {e}");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn UserPage(tl: Timeline) -> impl IntoView {
|
||||
let params = use_params_map();
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let id = params.get()
|
||||
.get("id")
|
||||
.cloned()
|
||||
.unwrap_or_default();
|
||||
let mut uid = id
|
||||
.replace("/web/objects/", "")
|
||||
.replacen('+', "https://", 1)
|
||||
.replace('@', "/");
|
||||
if !uid.starts_with("http") {
|
||||
uid = format!("{URL_BASE}/web/objects/{uid}");
|
||||
}
|
||||
let actor = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |id| {
|
||||
async move {
|
||||
match CACHE.get(&Uri::full(FetchKind::User, &id)) {
|
||||
Some(x) => Some(x.clone()),
|
||||
None => {
|
||||
let user : serde_json::Value = Http::fetch(&Uri::api(FetchKind::User, &id, true), auth).await.ok()?;
|
||||
let user = Arc::new(user);
|
||||
CACHE.put(Uri::full(FetchKind::User, &id), user.clone());
|
||||
Some(user)
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=true >
|
||||
users::view
|
||||
<a
|
||||
class="clean ml-1" href="#"
|
||||
class:hidden=move || tl.is_empty()
|
||||
on:click=move |_| {
|
||||
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
|
||||
spawn_local(async move {
|
||||
if let Err(e) = tl.more(auth).await {
|
||||
tracing::error!("error fetching more items for timeline: {e}");
|
||||
}
|
||||
})
|
||||
}><span class="emoji">
|
||||
"\u{1f5d8}"
|
||||
</span></a>
|
||||
</Breadcrumb>
|
||||
<div>
|
||||
{move || {
|
||||
let uid = uid.clone();
|
||||
match actor.get() {
|
||||
None => view! { <p class="center">loading...</p> }.into_view(),
|
||||
Some(None) => {
|
||||
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
|
||||
},
|
||||
Some(Some(object)) => {
|
||||
let uid = object.id().unwrap_or_default().to_string();
|
||||
let avatar_url = object.icon().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
|
||||
let background_url = object.image().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
|
||||
let display_name = object.name().unwrap_or_default().to_string();
|
||||
let username = object.preferred_username().unwrap_or_default().to_string();
|
||||
let summary = object.summary().unwrap_or_default().to_string();
|
||||
let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
|
||||
let actor_type = object.actor_type().unwrap_or(apb::ActorType::Person);
|
||||
let actor_type_tag = if actor_type == apb::ActorType::Person { None } else {
|
||||
Some(view! { <sup class="ml-s"><small>"["{actor_type.as_ref().to_lowercase()}"]"</small></sup> } )
|
||||
};
|
||||
let created = object.published();
|
||||
let following = object.following_count().unwrap_or(0);
|
||||
let followers = object.followers_count().unwrap_or(0);
|
||||
let statuses = object.statuses_count().unwrap_or(0);
|
||||
let tl_url = format!("{}/outbox/page", Uri::api(FetchKind::User, &id.clone(), false));
|
||||
if !tl.next.get().starts_with(&tl_url) {
|
||||
tl.reset(tl_url);
|
||||
}
|
||||
let following_me = object.following_me().unwrap_or(false);
|
||||
let followed_by_me = object.followed_by_me().unwrap_or(false);
|
||||
let _uid = uid.clone();
|
||||
|
||||
view! {
|
||||
<div class="ml-3 mr-3">
|
||||
<div
|
||||
class="banner"
|
||||
style={format!("background: center / cover url({background_url});")}
|
||||
>
|
||||
<div style="height: 10em"></div> // TODO bad way to have it fixed height ewwww
|
||||
</div>
|
||||
<div class="overlap">
|
||||
<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
|
||||
<tr>
|
||||
<td rowspan=4 style="width: 8em">
|
||||
<img class="avatar-circle avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
|
||||
</td>
|
||||
<td rowspan=2 class="bottom">
|
||||
<b class="big">{display_name}</b>{actor_type_tag}
|
||||
</td>
|
||||
<td rowspan=2 class="bottom rev" title="statuses">{statuses}" "<span class="emoji">"\u{1f582}"</span></td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
<tr>
|
||||
<td class="top">
|
||||
<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small>
|
||||
</td>
|
||||
<td class="rev" title="following">{following}" "<span class="emoji">"👥"</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<DateTime t=created />
|
||||
</td>
|
||||
<td class="rev" title="followers">{followers}" "<span class="emoji">"📢"</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
|
||||
{if followed_by_me {
|
||||
view! { <code class="color">following</code> }.into_view()
|
||||
} else {
|
||||
view! { <input type="submit" value="follow" on:click=move |_| send_follow_request(_uid.clone()) /> }.into_view()
|
||||
}}
|
||||
{if following_me {
|
||||
Some(view! { <code class="ml-1 color">follows you</code> })
|
||||
} else {
|
||||
None
|
||||
}}
|
||||
</div>
|
||||
<p class="ml-2 mt-1 center" inner_html={mdhtml::safe_html(&summary)}></p>
|
||||
</div>
|
||||
</div>
|
||||
<TimelineFeed tl=tl />
|
||||
}.into_view()
|
||||
},
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ObjectPage(tl: Timeline) -> impl IntoView {
|
||||
let params = use_params_map();
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let mut uid = params.get().get("id")
|
||||
.cloned()
|
||||
.unwrap_or_default()
|
||||
.replace("/web/objects/", "")
|
||||
.replacen('+', "https://", 1)
|
||||
.replace('@', "/");
|
||||
if !uid.starts_with("http") {
|
||||
uid = format!("{URL_BASE}/web/objects/{uid}");
|
||||
}
|
||||
let object = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |oid| {
|
||||
async move {
|
||||
match CACHE.get(&Uri::full(FetchKind::Object, &oid)) {
|
||||
Some(x) => Some(x.clone()),
|
||||
None => {
|
||||
let obj = Http::fetch::<serde_json::Value>(&Uri::api(FetchKind::Object, &oid, true), auth).await.ok()?;
|
||||
let obj = Arc::new(obj);
|
||||
if let Some(author) = obj.attributed_to().id() {
|
||||
if let Ok(user) = Http::fetch::<serde_json::Value>(
|
||||
&Uri::api(FetchKind::User, &author, true), auth
|
||||
).await {
|
||||
CACHE.put(Uri::full(FetchKind::User, &author), Arc::new(user));
|
||||
}
|
||||
}
|
||||
CACHE.put(Uri::full(FetchKind::Object, &oid), obj.clone());
|
||||
Some(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=true >
|
||||
objects::view
|
||||
<a
|
||||
class="clean ml-1" href="#"
|
||||
class:hidden=move || tl.is_empty()
|
||||
on:click=move |_| {
|
||||
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
|
||||
spawn_local(async move {
|
||||
if let Err(e) = tl.more(auth).await {
|
||||
tracing::error!("error fetching more items for timeline: {e}");
|
||||
}
|
||||
})
|
||||
}><span class="emoji">
|
||||
"\u{1f5d8}"
|
||||
</span></a>
|
||||
</Breadcrumb>
|
||||
<div class="ma-2" >
|
||||
{move || match object.get() {
|
||||
None => view! { <p class="center"> loading ... </p> }.into_view(),
|
||||
Some(None) => {
|
||||
let uid = uid.clone();
|
||||
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
|
||||
},
|
||||
Some(Some(o)) => {
|
||||
let object = o.clone();
|
||||
let tl_url = format!("{}/page", Uri::api(FetchKind::Context, &o.context().id().unwrap_or_default(), false));
|
||||
if !tl.next.get().starts_with(&tl_url) {
|
||||
tl.reset(tl_url);
|
||||
}
|
||||
view!{
|
||||
<Object object=object />
|
||||
<div class="ml-1 mr-1 mt-2">
|
||||
<TimelineReplies tl=tl root=o.id().unwrap_or_default().to_string() />
|
||||
</div>
|
||||
}.into_view()
|
||||
},
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=false>
|
||||
{name}
|
||||
<a class="clean ml-1" href="#" on:click=move |_| {
|
||||
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
|
||||
spawn_local(async move {
|
||||
if let Err(e) = tl.more(auth).await {
|
||||
tracing::error!("error fetching more items for timeline: {e}");
|
||||
}
|
||||
})
|
||||
}><span class="emoji">
|
||||
"\u{1f5d8}"
|
||||
</span></a>
|
||||
</Breadcrumb>
|
||||
<div class="mt-s mb-s" >
|
||||
<TimelineFeed tl=tl />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn DebugPage() -> impl IntoView {
|
||||
let (object, set_object) = create_signal(Arc::new(serde_json::Value::String(
|
||||
"use this view to fetch remote AP objects and inspect their content".into())
|
||||
));
|
||||
let cached_ref: NodeRef<html::Input> = create_node_ref();
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let (query, set_query) = create_signal("".to_string());
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=true>config :: devtools</Breadcrumb>
|
||||
<div class="mt-1" >
|
||||
<form on:submit=move|ev| {
|
||||
ev.prevent_default();
|
||||
let cached = cached_ref.get().map(|x| x.checked()).unwrap_or_default();
|
||||
let fetch_url = query.get();
|
||||
if cached {
|
||||
match CACHE.get(&fetch_url) {
|
||||
Some(x) => set_object.set(x),
|
||||
None => set_object.set(Arc::new(serde_json::Value::String("not in cache!".into()))),
|
||||
}
|
||||
} else {
|
||||
let url = format!("{URL_BASE}/dbg?id={fetch_url}");
|
||||
spawn_local(async move { set_object.set(Arc::new(debug_fetch(&url, auth).await)) });
|
||||
}
|
||||
} >
|
||||
<table class="align w-100" >
|
||||
<tr>
|
||||
<td>
|
||||
<small><a
|
||||
href={move|| Uri::web(FetchKind::Object, &query.get())}
|
||||
>obj</a>
|
||||
" "
|
||||
<a
|
||||
href={move|| Uri::web(FetchKind::User, &query.get())}
|
||||
>usr</a></small>
|
||||
</td>
|
||||
<td class="w-100"><input class="w-100" type="text" on:input=move|ev| set_query.set(event_target_value(&ev)) placeholder="AP id" /></td>
|
||||
<td><input type="submit" class="w-100" value="fetch" /></td>
|
||||
<td><input type="checkbox" title="cached" value="cached" node_ref=cached_ref /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<pre class="ma-1" >
|
||||
{move || serde_json::to_string_pretty(object.get().as_ref()).unwrap_or("unserializable".to_string())}
|
||||
</pre>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn SearchPage() -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
|
||||
let user = create_local_resource(
|
||||
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
|
||||
move |q| {
|
||||
let user_fetch = Uri::api(FetchKind::User, &q, true);
|
||||
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&user_fetch, auth).await.ok()?)) }
|
||||
}
|
||||
);
|
||||
|
||||
let object = create_local_resource(
|
||||
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
|
||||
move |q| {
|
||||
let object_fetch = Uri::api(FetchKind::Object, &q, true);
|
||||
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&object_fetch, auth).await.ok()?)) }
|
||||
}
|
||||
);
|
||||
|
||||
view! {
|
||||
<Breadcrumb>search</Breadcrumb>
|
||||
<blockquote class="mt-3 mb-3">
|
||||
<details open>
|
||||
<summary class="mb-2">
|
||||
<code class="cw center color ml-s w-100">users</code>
|
||||
</summary>
|
||||
<div class="pb-1">
|
||||
{move || match user.get() {
|
||||
None => view! { <p class="center"><small>searching...</small></p> },
|
||||
Some(None) => view! { <p class="center"><code>N/A</code></p> },
|
||||
Some(Some(u)) => view! { <p><ActorBanner object=u /></p> },
|
||||
}}
|
||||
</div>
|
||||
</details>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="mt-3 mb-3">
|
||||
<details open>
|
||||
<summary class="mb-2">
|
||||
<code class="cw center color ml-s w-100">objects</code>
|
||||
</summary>
|
||||
<div class="pb-1">
|
||||
{move || match object.get() {
|
||||
None => view! { <p class="center"><small>searching...</small></p> },
|
||||
Some(None) => view!{ <p class="center"><code>N/A</code></p> },
|
||||
Some(Some(o)) => view! { <p><Object object=o /></p> },
|
||||
}}
|
||||
</div>
|
||||
</details>
|
||||
</blockquote>
|
||||
}
|
||||
}
|
||||
|
||||
// this is a rather weird way to fetch but i want to see the bare error text if it fails!
|
||||
async fn debug_fetch(url: &str, token: Auth) -> serde_json::Value {
|
||||
match Http::request::<()>(reqwest::Method::GET, url, None, token).await {
|
||||
Err(e) => serde_json::Value::String(format!("[!] failed sending request: {e}")),
|
||||
Ok(res) => match res.text().await {
|
||||
Err(e) => serde_json::Value::String(format!("[!] invalid response body: {e}")),
|
||||
Ok(x) => match serde_json::from_str(&x) {
|
||||
Err(_) => serde_json::Value::String(x),
|
||||
Ok(v) => v,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
19
web/src/page/about.rs
Normal file
19
web/src/page/about.rs
Normal file
|
@ -0,0 +1,19 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn AboutPage() -> impl IntoView {
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb>about</Breadcrumb>
|
||||
<div class="mt-s mb-s" >
|
||||
<p><code>μpub</code>" is a micro social network powered by "<a href="">ActivityPub</a></p>
|
||||
<p><i>"the "<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>" is an ensemble of social networks, which, while independently hosted, can communicate with each other"</i></p>
|
||||
<p>content is aggregated in timelines, logged out users can only access the global server timeline</p>
|
||||
<hr />
|
||||
<p>"while somewhat usable, "<code>μpub</code>" is under active development and still lacks some mainstream features (such as hashtags or lists)"</p>
|
||||
<p>"if you would like to contribute to "<code>μpub</code>"'s development, get in touch and check "<a href="https://github.com/alemidev/upub" target="_blank">github</a>" or "<a href="https://moonlit.technology/alemi/upub.git" target="_blank">forgejo</a></p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
67
web/src/page/config.rs
Normal file
67
web/src/page/config.rs
Normal file
|
@ -0,0 +1,67 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
|
||||
let config = use_context::<Signal<crate::Config>>().expect("missing config context");
|
||||
|
||||
macro_rules! get_cfg {
|
||||
(filter $field:ident) => {
|
||||
move || config.get().filters.$field
|
||||
};
|
||||
($field:ident) => {
|
||||
move || config.get().$field
|
||||
};
|
||||
}
|
||||
|
||||
macro_rules! set_cfg {
|
||||
($field:ident) => {
|
||||
move |ev| {
|
||||
let mut mock = config.get();
|
||||
mock.$field = event_target_checked(&ev);
|
||||
setter.set(mock);
|
||||
}
|
||||
};
|
||||
(filter $field:ident) => {
|
||||
move |ev| {
|
||||
let mut mock = config.get();
|
||||
mock.filters.$field = event_target_checked(&ev);
|
||||
setter.set(mock);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb>config</Breadcrumb>
|
||||
<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
|
||||
<p>
|
||||
<span title="embedded video attachments will loop like gifs if this option is enabled">
|
||||
<input type="checkbox" class="mr-1"
|
||||
prop:checked=get_cfg!(loop_videos)
|
||||
on:input=set_cfg!(loop_videos)
|
||||
/> loop videos
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span title="any post with a summary is considered to have a content warning, and collapsed by default if this option is enabled">
|
||||
<input type="checkbox" class="mr-1"
|
||||
prop:checked=get_cfg!(collapse_content_warnings)
|
||||
on:input=set_cfg!(collapse_content_warnings)
|
||||
/> collapse content warnings
|
||||
</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p><code title="unchecked elements won't show in timelines">filters</code></p>
|
||||
<ul>
|
||||
<li><span title="like activities"><input type="checkbox" prop:checked=get_cfg!(filter likes) on:input=set_cfg!(filter likes) />" likes"</span></li>
|
||||
<li><span title="create activities with object"><input type="checkbox" prop:checked=get_cfg!(filter creates) on:input=set_cfg!(filter creates)/>" creates"</span></li>
|
||||
<li><span title="announce activities with object"><input type="checkbox" prop:checked=get_cfg!(filter announces) on:input=set_cfg!(filter announces) />" announces"</span></li>
|
||||
<li><span title="follow, accept and reject activities"><input type="checkbox" prop:checked=get_cfg!(filter follows) on:input=set_cfg!(filter follows) />" follows"</span></li>
|
||||
<li><span title="objects without a related activity to display"><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) />" orphans"</span></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
|
||||
</div>
|
||||
}
|
||||
}
|
69
web/src/page/debug.rs
Normal file
69
web/src/page/debug.rs
Normal file
|
@ -0,0 +1,69 @@
|
|||
use std::sync::Arc;
|
||||
|
||||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn DebugPage() -> impl IntoView {
|
||||
let (object, set_object) = create_signal(Arc::new(serde_json::Value::String(
|
||||
"use this view to fetch remote AP objects and inspect their content".into())
|
||||
));
|
||||
let cached_ref: NodeRef<html::Input> = create_node_ref();
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let (query, set_query) = create_signal("".to_string());
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=true>config :: devtools</Breadcrumb>
|
||||
<div class="mt-1" >
|
||||
<form on:submit=move|ev| {
|
||||
ev.prevent_default();
|
||||
let cached = cached_ref.get().map(|x| x.checked()).unwrap_or_default();
|
||||
let fetch_url = query.get();
|
||||
if cached {
|
||||
match CACHE.get(&fetch_url) {
|
||||
Some(x) => set_object.set(x),
|
||||
None => set_object.set(Arc::new(serde_json::Value::String("not in cache!".into()))),
|
||||
}
|
||||
} else {
|
||||
let url = format!("{URL_BASE}/dbg?id={fetch_url}");
|
||||
spawn_local(async move { set_object.set(Arc::new(debug_fetch(&url, auth).await)) });
|
||||
}
|
||||
} >
|
||||
<table class="align w-100" >
|
||||
<tr>
|
||||
<td>
|
||||
<small><a
|
||||
href={move|| Uri::web(FetchKind::Object, &query.get())}
|
||||
>obj</a>
|
||||
" "
|
||||
<a
|
||||
href={move|| Uri::web(FetchKind::User, &query.get())}
|
||||
>usr</a></small>
|
||||
</td>
|
||||
<td class="w-100"><input class="w-100" type="text" on:input=move|ev| set_query.set(event_target_value(&ev)) placeholder="AP id" /></td>
|
||||
<td><input type="submit" class="w-100" value="fetch" /></td>
|
||||
<td><input type="checkbox" title="cached" value="cached" node_ref=cached_ref /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<pre class="ma-1" >
|
||||
{move || serde_json::to_string_pretty(object.get().as_ref()).unwrap_or("unserializable".to_string())}
|
||||
</pre>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
// this is a rather weird way to fetch but i want to see the bare error text if it fails!
|
||||
async fn debug_fetch(url: &str, token: Auth) -> serde_json::Value {
|
||||
match Http::request::<()>(reqwest::Method::GET, url, None, token).await {
|
||||
Err(e) => serde_json::Value::String(format!("[!] failed sending request: {e}")),
|
||||
Ok(res) => match res.text().await {
|
||||
Err(e) => serde_json::Value::String(format!("[!] invalid response body: {e}")),
|
||||
Ok(x) => match serde_json::from_str(&x) {
|
||||
Err(_) => serde_json::Value::String(x),
|
||||
Ok(v) => v,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
23
web/src/page/mod.rs
Normal file
23
web/src/page/mod.rs
Normal file
|
@ -0,0 +1,23 @@
|
|||
mod about;
|
||||
pub use about::AboutPage;
|
||||
|
||||
mod config;
|
||||
pub use config::ConfigPage;
|
||||
|
||||
mod debug;
|
||||
pub use debug::DebugPage;
|
||||
|
||||
mod object;
|
||||
pub use object::ObjectPage;
|
||||
|
||||
mod register;
|
||||
pub use register::RegisterPage;
|
||||
|
||||
mod search;
|
||||
pub use search::SearchPage;
|
||||
|
||||
mod timeline;
|
||||
pub use timeline::TimelinePage;
|
||||
|
||||
mod user;
|
||||
pub use user::UserPage;
|
84
web/src/page/object.rs
Normal file
84
web/src/page/object.rs
Normal file
|
@ -0,0 +1,84 @@
|
|||
use std::sync::Arc;
|
||||
|
||||
use leptos::*;
|
||||
use leptos_router::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
use apb::{Base, Object};
|
||||
|
||||
#[component]
|
||||
pub fn ObjectPage(tl: Timeline) -> impl IntoView {
|
||||
let params = use_params_map();
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let mut uid = params.get().get("id")
|
||||
.cloned()
|
||||
.unwrap_or_default()
|
||||
.replace("/web/objects/", "")
|
||||
.replacen('+', "https://", 1)
|
||||
.replace('@', "/");
|
||||
if !uid.starts_with("http") {
|
||||
uid = format!("{URL_BASE}/web/objects/{uid}");
|
||||
}
|
||||
let object = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |oid| {
|
||||
async move {
|
||||
match CACHE.get(&Uri::full(FetchKind::Object, &oid)) {
|
||||
Some(x) => Some(x.clone()),
|
||||
None => {
|
||||
let obj = Http::fetch::<serde_json::Value>(&Uri::api(FetchKind::Object, &oid, true), auth).await.ok()?;
|
||||
let obj = Arc::new(obj);
|
||||
if let Some(author) = obj.attributed_to().id() {
|
||||
if let Ok(user) = Http::fetch::<serde_json::Value>(
|
||||
&Uri::api(FetchKind::User, &author, true), auth
|
||||
).await {
|
||||
CACHE.put(Uri::full(FetchKind::User, &author), Arc::new(user));
|
||||
}
|
||||
}
|
||||
CACHE.put(Uri::full(FetchKind::Object, &oid), obj.clone());
|
||||
Some(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=true >
|
||||
objects::view
|
||||
<a
|
||||
class="clean ml-1" href="#"
|
||||
class:hidden=move || tl.is_empty()
|
||||
on:click=move |_| {
|
||||
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
|
||||
spawn_local(async move {
|
||||
if let Err(e) = tl.more(auth).await {
|
||||
tracing::error!("error fetching more items for timeline: {e}");
|
||||
}
|
||||
})
|
||||
}><span class="emoji">
|
||||
"\u{1f5d8}"
|
||||
</span></a>
|
||||
</Breadcrumb>
|
||||
<div class="ma-2" >
|
||||
{move || match object.get() {
|
||||
None => view! { <p class="center"> loading ... </p> }.into_view(),
|
||||
Some(None) => {
|
||||
let uid = uid.clone();
|
||||
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
|
||||
},
|
||||
Some(Some(o)) => {
|
||||
let object = o.clone();
|
||||
let tl_url = format!("{}/page", Uri::api(FetchKind::Context, &o.context().id().unwrap_or_default(), false));
|
||||
if !tl.next.get().starts_with(&tl_url) {
|
||||
tl.reset(tl_url);
|
||||
}
|
||||
view!{
|
||||
<Object object=object />
|
||||
<div class="ml-1 mr-1 mt-2">
|
||||
<TimelineReplies tl=tl root=o.id().unwrap_or_default().to_string() />
|
||||
</div>
|
||||
}.into_view()
|
||||
},
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
48
web/src/page/register.rs
Normal file
48
web/src/page/register.rs
Normal file
|
@ -0,0 +1,48 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn RegisterPage() -> impl IntoView {
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb>register</Breadcrumb>
|
||||
<form>
|
||||
<table class="align ma-3">
|
||||
<tr>
|
||||
<td>username</td>
|
||||
<td><input type="email" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>password</td>
|
||||
<td><input type="password" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><hr /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display name</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>summary</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>avatar url</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>banner url</td>
|
||||
<td><input type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><hr /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><input class="w-100" type="submit" value="register" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
}
|
59
web/src/page/search.rs
Normal file
59
web/src/page/search.rs
Normal file
|
@ -0,0 +1,59 @@
|
|||
use std::sync::Arc;
|
||||
|
||||
use leptos::*;
|
||||
use leptos_router::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn SearchPage() -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
|
||||
let user = create_local_resource(
|
||||
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
|
||||
move |q| {
|
||||
let user_fetch = Uri::api(FetchKind::User, &q, true);
|
||||
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&user_fetch, auth).await.ok()?)) }
|
||||
}
|
||||
);
|
||||
|
||||
let object = create_local_resource(
|
||||
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
|
||||
move |q| {
|
||||
let object_fetch = Uri::api(FetchKind::Object, &q, true);
|
||||
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&object_fetch, auth).await.ok()?)) }
|
||||
}
|
||||
);
|
||||
|
||||
view! {
|
||||
<Breadcrumb>search</Breadcrumb>
|
||||
<blockquote class="mt-3 mb-3">
|
||||
<details open>
|
||||
<summary class="mb-2">
|
||||
<code class="cw center color ml-s w-100">users</code>
|
||||
</summary>
|
||||
<div class="pb-1">
|
||||
{move || match user.get() {
|
||||
None => view! { <p class="center"><small>searching...</small></p> },
|
||||
Some(None) => view! { <p class="center"><code>N/A</code></p> },
|
||||
Some(Some(u)) => view! { <p><ActorBanner object=u /></p> },
|
||||
}}
|
||||
</div>
|
||||
</details>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="mt-3 mb-3">
|
||||
<details open>
|
||||
<summary class="mb-2">
|
||||
<code class="cw center color ml-s w-100">objects</code>
|
||||
</summary>
|
||||
<div class="pb-1">
|
||||
{move || match object.get() {
|
||||
None => view! { <p class="center"><small>searching...</small></p> },
|
||||
Some(None) => view!{ <p class="center"><code>N/A</code></p> },
|
||||
Some(Some(o)) => view! { <p><Object object=o /></p> },
|
||||
}}
|
||||
</div>
|
||||
</details>
|
||||
</blockquote>
|
||||
}
|
||||
}
|
27
web/src/page/timeline.rs
Normal file
27
web/src/page/timeline.rs
Normal file
|
@ -0,0 +1,27 @@
|
|||
use leptos::*;
|
||||
use crate::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=false>
|
||||
{name}
|
||||
<a class="clean ml-1" href="#" on:click=move |_| {
|
||||
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
|
||||
spawn_local(async move {
|
||||
if let Err(e) = tl.more(auth).await {
|
||||
tracing::error!("error fetching more items for timeline: {e}");
|
||||
}
|
||||
})
|
||||
}><span class="emoji">
|
||||
"\u{1f5d8}"
|
||||
</span></a>
|
||||
</Breadcrumb>
|
||||
<div class="mt-s mb-s" >
|
||||
<TimelineFeed tl=tl />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
156
web/src/page/user.rs
Normal file
156
web/src/page/user.rs
Normal file
|
@ -0,0 +1,156 @@
|
|||
use std::sync::Arc;
|
||||
|
||||
use leptos::*;
|
||||
use leptos_router::*;
|
||||
use crate::{prelude::*, DEFAULT_AVATAR_URL};
|
||||
|
||||
use apb::{Base, Actor, ActivityMut, Object, ObjectMut};
|
||||
|
||||
fn send_follow_request(target: String) {
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
spawn_local(async move {
|
||||
let payload = serde_json::Value::Object(serde_json::Map::default())
|
||||
.set_activity_type(Some(apb::ActivityType::Follow))
|
||||
.set_object(apb::Node::link(target.clone()))
|
||||
.set_to(apb::Node::links(vec![target]));
|
||||
if let Err(e) = Http::post(&auth.outbox(), &payload, auth).await {
|
||||
tracing::error!("failed sending follow request: {e}");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn UserPage(tl: Timeline) -> impl IntoView {
|
||||
let params = use_params_map();
|
||||
let auth = use_context::<Auth>().expect("missing auth context");
|
||||
let id = params.get()
|
||||
.get("id")
|
||||
.cloned()
|
||||
.unwrap_or_default();
|
||||
let mut uid = id
|
||||
.replace("/web/objects/", "")
|
||||
.replacen('+', "https://", 1)
|
||||
.replace('@', "/");
|
||||
if !uid.starts_with("http") {
|
||||
uid = format!("{URL_BASE}/web/objects/{uid}");
|
||||
}
|
||||
let actor = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |id| {
|
||||
async move {
|
||||
match CACHE.get(&Uri::full(FetchKind::User, &id)) {
|
||||
Some(x) => Some(x.clone()),
|
||||
None => {
|
||||
let user : serde_json::Value = Http::fetch(&Uri::api(FetchKind::User, &id, true), auth).await.ok()?;
|
||||
let user = Arc::new(user);
|
||||
CACHE.put(Uri::full(FetchKind::User, &id), user.clone());
|
||||
Some(user)
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
view! {
|
||||
<div>
|
||||
<Breadcrumb back=true >
|
||||
users::view
|
||||
<a
|
||||
class="clean ml-1" href="#"
|
||||
class:hidden=move || tl.is_empty()
|
||||
on:click=move |_| {
|
||||
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
|
||||
spawn_local(async move {
|
||||
if let Err(e) = tl.more(auth).await {
|
||||
tracing::error!("error fetching more items for timeline: {e}");
|
||||
}
|
||||
})
|
||||
}><span class="emoji">
|
||||
"\u{1f5d8}"
|
||||
</span></a>
|
||||
</Breadcrumb>
|
||||
<div>
|
||||
{move || {
|
||||
let uid = uid.clone();
|
||||
match actor.get() {
|
||||
None => view! { <p class="center">loading...</p> }.into_view(),
|
||||
Some(None) => {
|
||||
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
|
||||
},
|
||||
Some(Some(object)) => {
|
||||
let uid = object.id().unwrap_or_default().to_string();
|
||||
let avatar_url = object.icon().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
|
||||
let background_url = object.image().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
|
||||
let display_name = object.name().unwrap_or_default().to_string();
|
||||
let username = object.preferred_username().unwrap_or_default().to_string();
|
||||
let summary = object.summary().unwrap_or_default().to_string();
|
||||
let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
|
||||
let actor_type = object.actor_type().unwrap_or(apb::ActorType::Person);
|
||||
let actor_type_tag = if actor_type == apb::ActorType::Person { None } else {
|
||||
Some(view! { <sup class="ml-s"><small>"["{actor_type.as_ref().to_lowercase()}"]"</small></sup> } )
|
||||
};
|
||||
let created = object.published();
|
||||
let following = object.following_count().unwrap_or(0);
|
||||
let followers = object.followers_count().unwrap_or(0);
|
||||
let statuses = object.statuses_count().unwrap_or(0);
|
||||
let tl_url = format!("{}/outbox/page", Uri::api(FetchKind::User, &id.clone(), false));
|
||||
if !tl.next.get().starts_with(&tl_url) {
|
||||
tl.reset(tl_url);
|
||||
}
|
||||
let following_me = object.following_me().unwrap_or(false);
|
||||
let followed_by_me = object.followed_by_me().unwrap_or(false);
|
||||
let _uid = uid.clone();
|
||||
|
||||
view! {
|
||||
<div class="ml-3 mr-3">
|
||||
<div
|
||||
class="banner"
|
||||
style={format!("background: center / cover url({background_url});")}
|
||||
>
|
||||
<div style="height: 10em"></div> // TODO bad way to have it fixed height ewwww
|
||||
</div>
|
||||
<div class="overlap">
|
||||
<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
|
||||
<tr>
|
||||
<td rowspan=4 style="width: 8em">
|
||||
<img class="avatar-circle avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
|
||||
</td>
|
||||
<td rowspan=2 class="bottom">
|
||||
<b class="big">{display_name}</b>{actor_type_tag}
|
||||
</td>
|
||||
<td rowspan=2 class="bottom rev" title="statuses">{statuses}" "<span class="emoji">"\u{1f582}"</span></td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
<tr>
|
||||
<td class="top">
|
||||
<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small>
|
||||
</td>
|
||||
<td class="rev" title="following">{following}" "<span class="emoji">"👥"</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<DateTime t=created />
|
||||
</td>
|
||||
<td class="rev" title="followers">{followers}" "<span class="emoji">"📢"</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
|
||||
{if followed_by_me {
|
||||
view! { <code class="color">following</code> }.into_view()
|
||||
} else {
|
||||
view! { <input type="submit" value="follow" on:click=move |_| send_follow_request(_uid.clone()) /> }.into_view()
|
||||
}}
|
||||
{if following_me {
|
||||
Some(view! { <code class="ml-1 color">follows you</code> })
|
||||
} else {
|
||||
None
|
||||
}}
|
||||
</div>
|
||||
<p class="ml-2 mt-1 center" inner_html={mdhtml::safe_html(&summary)}></p>
|
||||
</div>
|
||||
</div>
|
||||
<TimelineFeed tl=tl />
|
||||
}.into_view()
|
||||
},
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
|
@ -3,7 +3,5 @@ pub use crate::{
|
|||
CACHE, URL_BASE,
|
||||
auth::{Auth, AuthToken},
|
||||
page::*,
|
||||
control::*,
|
||||
components::*,
|
||||
auth::LoginBox,
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue