You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.8 KiB
94 lines
3.8 KiB
use lazy_static::lazy_static;
|
|
use perseus::prelude::*;
|
|
use sycamore::{prelude::*, rt::Event};
|
|
|
|
use crate::global_state::AppStateRx;
|
|
|
|
lazy_static! {
|
|
pub static ref USER_ICON: Capsule<PerseusNodeType, ()> = get_capsule();
|
|
}
|
|
|
|
fn user_icon<G: Html>(cx: Scope, _props: ()) -> View<G> {
|
|
let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
|
|
|
|
let api = global_state.api.get();
|
|
let api_scope_ref = create_ref(cx, api);
|
|
|
|
#[cfg(client)]
|
|
spawn_local_scoped(cx, async move {
|
|
// Since logged in is set to false by default (on the first page load) we have to check
|
|
if *global_state.logged_in.get() {
|
|
return;
|
|
}
|
|
let status = api_scope_ref.is_authenticated().await.unwrap().status();
|
|
if status == 200 {
|
|
global_state.logged_in.set(true);
|
|
} else {
|
|
global_state.logged_in.set(false);
|
|
}
|
|
});
|
|
|
|
#[cfg(client)]
|
|
let logout = move |e: Event| {
|
|
wasm_cookies::delete("token");
|
|
global_state.logged_in.set(false);
|
|
};
|
|
|
|
#[cfg(engine)]
|
|
let logout = move |_| {};
|
|
|
|
view! { cx,
|
|
(if *global_state.logged_in.get() {
|
|
view! { cx,
|
|
div(on:click=|_| navigate("/profile"), class="mx-1 hover:cursor-pointer", title="Login") {
|
|
// user profile icon
|
|
svg(xmlns="http://www.w3.org/2000/svg", fill="none", viewBox="0 0 24 24", stroke-width="1.5", stroke="currentColor", class="w-6 h-6") {
|
|
path(stroke-linecap="round", stroke-linejoin="round", d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z") {}
|
|
}
|
|
}
|
|
|
|
div(on:click=logout, class="mx-1 hover:cursor-pointer", title="Login") {
|
|
// logout icon
|
|
svg(xmlns="http://www.w3.org/2000/svg", width="24", height="24", viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", class="feather feather-log-out") {
|
|
path(d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"){}
|
|
polyline(points="16 17 21 12 16 7") {}
|
|
line(x1="21", y1="12", x2="9", y2="12") {}
|
|
}
|
|
}
|
|
|
|
}
|
|
} else {
|
|
view! { cx,
|
|
div(on:click=|_| navigate("/login"), class="mx-1 hover:cursor-pointer", title="Login") {
|
|
// login icon
|
|
svg(xmlns="http://www.w3.org/2000/svg", width="24", height="24", viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", class="feather feather-log-in") {
|
|
path(d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4") {}
|
|
polyline(points="10 17 15 12 10 7") {}
|
|
line(x1="15", y1="12", x2="3", y2="12"){}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
fn fallback<G: Html>(cx: Scope, _props: ()) -> View<G> {
|
|
view! { cx,
|
|
div(on:click=|_| navigate("/login"), class="mx-1 hover:cursor-pointer", title="Login") {
|
|
// login icon
|
|
svg(xmlns="http://www.w3.org/2000/svg", width="24", height="24", viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", class="feather feather-log-in") {
|
|
path(d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4") {}
|
|
polyline(points="10 17 15 12 10 7") {}
|
|
line(x1="15", y1="12", x2="3", y2="12"){}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
pub fn get_capsule<G: Html>() -> Capsule<G, ()> {
|
|
Capsule::build(Template::build("dark_mode_btn"))
|
|
.fallback(fallback)
|
|
.view(user_icon)
|
|
.build()
|
|
}
|