Added Auth Context

implement login client code (todo: server login)
Added aboa icon

AobaClient/src/components/basic/button.rs

@@ -19,6 +19,7 @@ pub fn Button(props: ButtonProps) -> Element {
 	rsx! {
 		button {
 			onclick: move |event| {
+				event.prevent_default();
 				if let Some(h) = props.onclick {
 					h.call(event);
 				}

AobaClient/src/components/basic/input.rs

@@ -3,11 +3,12 @@ use dioxus::prelude::*;
 #[derive(PartialEq, Clone, Props)]
 pub struct InputProps {
 	pub r#type: Option<String>,
-	pub value: Option<String>,
+	pub value: Option<Signal<String>>,
 	pub label: Option<String>,
 	pub placeholder: Option<String>,
 	pub name: String,
 	pub oninput: Option<EventHandler<FormEvent>>,
+	pub required: Option<bool>,
 }
 
 #[component]
@@ -21,7 +22,8 @@ pub fn Input(props: InputProps) -> Element {
 				type : props.r#type.unwrap_or("text".into()),
 				value: props.value,
 				name: props.name,
-				placeholder:ph
+				placeholder:ph,
+				required: props.required
 			}
 		}
 	}

AobaClient/src/components/media_grid.rs

@@ -3,6 +3,7 @@ use tonic::{IntoRequest, Request};
 
 use crate::{
 	components::MediaItem,
+	contexts::AuthContext,
 	rpc::{aoba::PageFilter, get_rpc_client},
 };
 
@@ -34,11 +35,17 @@ impl Into<PageFilter> for MediaGridProps {
 
 #[component]
 pub fn MediaGrid(props: MediaGridProps) -> Element {
-	let media_result = use_resource(use_reactive!(|(props,)| async move {
+	let jwt = use_context::<AuthContext>().jwt;
+	let media_result = use_resource(use_reactive!(|(props, jwt)| async move {
 		let mut client = get_rpc_client();
 		let mut req = Request::new(props.into());
+		let token = if jwt.cloned().is_some() {
+			jwt.unwrap()
+		} else {
+			"".into()
+		};
 		req.metadata_mut()
-			.insert("authorization", "Bearer <toto: get token>".parse().unwrap());
+			.insert("authorization", format!("Bearer {token}").parse().unwrap());
 		let result = client.list_media(req).await;
 		return result.expect("Failed to load media").into_inner();
 	}));

AobaClient/src/components/navbar.rs

@@ -3,6 +3,7 @@ use dioxus::prelude::*;
 use crate::Route;
 
 const NAV_CSS: Asset = asset!("/assets/style/nav.scss");
+const NAV_ICON: Asset = asset!("/assets/favicon.ico");
 
 #[component]
 pub fn Navbar() -> Element {
@@ -30,7 +31,10 @@ pub fn MainNaviagation() -> Element {
 #[component]
 pub fn Branding() -> Element {
 	rsx! {
-		div { class: "branding" }
+		div { class: "branding",
+			"Aoba"
+			img {src: NAV_ICON}
+		}
 	}
 }
 

AobaClient/src/components/search.rs

@@ -1,15 +1,15 @@
 use dioxus::prelude::*;
 
 #[component]
-pub fn Search(query: Option<String>, oninput: EventHandler<FormEvent>) -> Element {
+pub fn Search(query: Signal<String>) -> Element {
 	rsx! {
 		div{
 			class: "searchBar",
 			input {
 				type: "search",
 				placeholder: "Search Files",
-				value: query.unwrap_or("".into()),
-				oninput: move |event| oninput.call(event)
+				value: query,
+				oninput: move |event| query.set(event.value())
 			}
 		}
 	}