From 31d0feeef8993f006cc6d7c583c395d3639ceea8 Mon Sep 17 00:00:00 2001 From: Dilawar Singh Date: Fri, 21 Mar 2025 03:12:36 +0530 Subject: [PATCH 1/4] Seek help --- leptos/app.css | 11 ++++-- leptos/index.html | 2 -- .../src/{app.module.scss => _app.module.scss} | 5 +++ leptos/src/app.rs | 17 ++++++---- leptos/src/components/home.rs | 26 +++++++------- leptos/src/components/login.rs | 34 +++++++++++++++++++ leptos/src/components/mod.rs | 1 + leptos/src/css.rs | 3 ++ leptos/src/main.rs | 1 + 9 files changed, 74 insertions(+), 26 deletions(-) rename leptos/src/{app.module.scss => _app.module.scss} (83%) create mode 100644 leptos/src/components/login.rs create mode 100644 leptos/src/css.rs diff --git a/leptos/app.css b/leptos/app.css index f5b6371..ebe4e26 100644 --- a/leptos/app.css +++ b/leptos/app.css @@ -1,5 +1,5 @@ // This file is generated from ./src/app.module.scss -.header-bb66a2d { +.header-372e0a1 { } body { @@ -12,11 +12,16 @@ main { margin: 1ex; } -.nav-bb66a2d { +.nav-372e0a1 { display: flex; flex-direction: row; } -.nav-bb66a2d a { +.nav-372e0a1 a { margin: 1ex; } + +.login-372e0a1 { + max-width: 30em; + margin: auto; +} diff --git a/leptos/index.html b/leptos/index.html index d570613..da5515c 100644 --- a/leptos/index.html +++ b/leptos/index.html @@ -4,14 +4,12 @@ - diff --git a/leptos/src/app.module.scss b/leptos/src/_app.module.scss similarity index 83% rename from leptos/src/app.module.scss rename to leptos/src/_app.module.scss index 455fcf0..e598079 100644 --- a/leptos/src/app.module.scss +++ b/leptos/src/_app.module.scss @@ -20,3 +20,8 @@ main { .nav a { margin: 1ex; } + +.login { + max-width: 30em; + margin: auto; +} diff --git a/leptos/src/app.rs b/leptos/src/app.rs index e5dd3f3..b708e52 100644 --- a/leptos/src/app.rs +++ b/leptos/src/app.rs @@ -1,14 +1,16 @@ -use leptos::prelude::*; use leptos_router::components::{Route, Router, Routes}; use leptos_router::path; use leptos_use::storage::use_local_storage; use codee::string::JsonSerdeCodec; + +use leptos::prelude::*; use thaw::*; +use crate::components::login; use crate::components::home; use crate::storage::AppState; +use crate::css::styles; -stylance::import_crate_style!( #[allow(dead_code)] app_style, "src/app.module.scss"); #[component] pub fn App() -> impl IntoView { @@ -20,15 +22,16 @@ pub fn App() -> impl IntoView { view! { -

"Leptos App"

- +

"Rusty App"

+
+
diff --git a/leptos/src/components/home.rs b/leptos/src/components/home.rs index b1f05b2..9aaf854 100644 --- a/leptos/src/components/home.rs +++ b/leptos/src/components/home.rs @@ -1,23 +1,21 @@ use leptos::prelude::*; -use leptos::logging::log; -use thaw::*; + +use crate::components::login::{AlreadyLoggedIn, Login}; #[component] pub fn Home() -> impl IntoView { - let email = RwSignal::new(String::from("")); - let password = RwSignal::new(String::from("")); - - let login_clicked = move |_| { - log!("Login button is clicked"); - log!("Email={} and password={}", email.get(), password.get()); - }; + let is_logged_in = RwSignal::new(false); view! { - - - - - +

"Login"

+ {move || match is_logged_in.get() { + true => view! { + + }.into_view(), + _ => view! { + + }.into_view(), + }} } } diff --git a/leptos/src/components/login.rs b/leptos/src/components/login.rs new file mode 100644 index 0000000..eb39211 --- /dev/null +++ b/leptos/src/components/login.rs @@ -0,0 +1,34 @@ +use leptos::logging::log; + +use leptos::prelude::*; +use thaw::*; + +use crate::css::styles; + +#[component] +pub fn Login() -> impl IntoView { + let email = RwSignal::new(String::from("")); + let password = RwSignal::new(String::from("")); + + let login_clicked = move |_| { + log!("Login button is clicked"); + log!("Email={} and password={}", email.get(), password.get()); + }; + + view! { + + + + + + } +} + +#[component] +pub fn AlreadyLoggedIn() -> impl IntoView { + view! { + + "Already logged in!" + + } +} diff --git a/leptos/src/components/mod.rs b/leptos/src/components/mod.rs index 429edc7..57b1827 100644 --- a/leptos/src/components/mod.rs +++ b/leptos/src/components/mod.rs @@ -1 +1,2 @@ pub(crate) mod home; +pub(crate) mod login; diff --git a/leptos/src/css.rs b/leptos/src/css.rs new file mode 100644 index 0000000..7758a01 --- /dev/null +++ b/leptos/src/css.rs @@ -0,0 +1,3 @@ +//! css module. + +stylance::import_crate_style!( #[allow(dead_code)] pub styles, "src/_app.module.scss"); diff --git a/leptos/src/main.rs b/leptos/src/main.rs index 7e8df0d..2a3295a 100644 --- a/leptos/src/main.rs +++ b/leptos/src/main.rs @@ -4,6 +4,7 @@ use tracing_subscriber_wasm::MakeConsoleWriter; mod app; mod storage; mod components; +mod css; fn main() { fmt() From 470821bca1c50e4302e21fc4c408e8c77e0077f0 Mon Sep 17 00:00:00 2001 From: Dilawar Singh Date: Fri, 21 Mar 2025 03:24:36 +0530 Subject: [PATCH 2/4] Fix the compilation error The thread is https://users.rust-lang.org/t/leptos-project-distinct-uses-of-impl-trait-result-in-different-opaque-types/127265/1 --- leptos/src/components/home.rs | 12 +++--------- leptos/src/components/login.rs | 6 +----- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/leptos/src/components/home.rs b/leptos/src/components/home.rs index 9aaf854..b6ed86c 100644 --- a/leptos/src/components/home.rs +++ b/leptos/src/components/home.rs @@ -8,14 +8,8 @@ pub fn Home() -> impl IntoView { let is_logged_in = RwSignal::new(false); view! { -

"Login"

- {move || match is_logged_in.get() { - true => view! { - - }.into_view(), - _ => view! { - - }.into_view(), - }} + }> + + } } diff --git a/leptos/src/components/login.rs b/leptos/src/components/login.rs index eb39211..e0da5b1 100644 --- a/leptos/src/components/login.rs +++ b/leptos/src/components/login.rs @@ -26,9 +26,5 @@ pub fn Login() -> impl IntoView { #[component] pub fn AlreadyLoggedIn() -> impl IntoView { - view! { - - "Already logged in!" - - } + view! {
} } From 11fd0d5e75cddc5338390728eda08d39d1891e50 Mon Sep 17 00:00:00 2001 From: Dilawar Singh Date: Fri, 21 Mar 2025 04:20:05 +0530 Subject: [PATCH 3/4] Storing username and password in a store --- leptos/src/app.rs | 7 +------ leptos/src/components/login.rs | 17 ++++++++++++++--- leptos/src/storage.rs | 9 ++++++++- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/leptos/src/app.rs b/leptos/src/app.rs index b708e52..8fa2cce 100644 --- a/leptos/src/app.rs +++ b/leptos/src/app.rs @@ -1,23 +1,18 @@ use leptos_router::components::{Route, Router, Routes}; use leptos_router::path; -use leptos_use::storage::use_local_storage; -use codee::string::JsonSerdeCodec; + use leptos::prelude::*; use thaw::*; use crate::components::login; use crate::components::home; -use crate::storage::AppState; use crate::css::styles; #[component] pub fn App() -> impl IntoView { - let (storage_email, _set_storage_email) = signal("email".to_string()); - let (_state, _set_state, _reset) = use_local_storage::(storage_email); - let theme = RwSignal::new(Theme::light()); view! { diff --git a/leptos/src/components/login.rs b/leptos/src/components/login.rs index e0da5b1..dbbd92a 100644 --- a/leptos/src/components/login.rs +++ b/leptos/src/components/login.rs @@ -1,18 +1,29 @@ use leptos::logging::log; +use codee::string::JsonSerdeCodec; use leptos::prelude::*; +use leptos_use::storage::use_local_storage; use thaw::*; use crate::css::styles; +use crate::storage::LoginState; #[component] pub fn Login() -> impl IntoView { - let email = RwSignal::new(String::from("")); - let password = RwSignal::new(String::from("")); + let (storage_key, _) = signal(LoginState::KEY.to_string()); + let (state, set_state, _) = use_local_storage::(storage_key); + + let email_init = state.get().email; + let api_key_init = state.get().api_key; + + let email = RwSignal::new(email_init); + let password = RwSignal::new(api_key_init); let login_clicked = move |_| { log!("Login button is clicked"); - log!("Email={} and password={}", email.get(), password.get()); + set_state.update(|s| s.email = email.get()); + set_state.update(|s| s.api_key = password.get()); + set_state.update(|s| s.logged_in = true); }; view! { diff --git a/leptos/src/storage.rs b/leptos/src/storage.rs index 2e7d273..2b28bcc 100644 --- a/leptos/src/storage.rs +++ b/leptos/src/storage.rs @@ -1,6 +1,13 @@ //! Storage #[derive(serde::Serialize, serde::Deserialize, Clone, PartialEq, Default)] -pub struct AppState { +pub struct LoginState { pub email: String, + pub api_key: String, + pub logged_in: bool, +} + +impl LoginState { + // Key to use in local storage + pub const KEY: &'static str = "login-state"; } From a0d1eb014df5658e645326d670fec856c0d85fc0 Mon Sep 17 00:00:00 2001 From: Dilawar Singh Date: Fri, 21 Mar 2025 14:16:42 +0530 Subject: [PATCH 4/4] make fix and make check --- leptos/Cargo.toml | 3 ++- leptos/Makefile | 6 +++++ leptos/src/app.rs | 20 +++++++-------- leptos/src/components/home.rs | 8 ++++-- leptos/src/components/login.rs | 46 +++++++++++++++++++++------------- leptos/src/main.rs | 3 ++- leptos/src/storage.rs | 27 ++++++++++++++------ rustfmt.toml | 12 +++++++++ 8 files changed, 85 insertions(+), 40 deletions(-) create mode 100644 rustfmt.toml diff --git a/leptos/Cargo.toml b/leptos/Cargo.toml index 347311c..0630cab 100644 --- a/leptos/Cargo.toml +++ b/leptos/Cargo.toml @@ -6,10 +6,11 @@ edition = "2024" [dependencies] codee = { version = "0.3.0", features = ["json_serde"] } console_error_panic_hook = "0.1.7" -leptos = { version = "0.7.7", features = ["csr", "nightly"] } +leptos = { version = "0.7.7", features = ["csr", "nightly", "tracing"] } leptos-use = { version = "0.15.7", features = ["storage", "docs" ] } leptos_meta = "0.7.7" leptos_router = { version = "0.7.7", features = ["tracing"] } +reactive_stores = "0.1.8" serde = { workspace = true, features = ["derive"] } stylance = "0.5.5" thaw = { version = "0.4.4", features = ["csr", "nightly"] } diff --git a/leptos/Makefile b/leptos/Makefile index 17586e3..4fedb96 100644 --- a/leptos/Makefile +++ b/leptos/Makefile @@ -5,5 +5,11 @@ fmt: # cargo +nightly fmt leptosfmt src +check: + cargo clippy --no-deps -- -Dwarnings + +fix: fmt + cargo clippy --fix --allow-dirty + css: stylance . --output-file app.css diff --git a/leptos/src/app.rs b/leptos/src/app.rs index 8fa2cce..0246c53 100644 --- a/leptos/src/app.rs +++ b/leptos/src/app.rs @@ -1,33 +1,31 @@ +use leptos::prelude::*; use leptos_router::components::{Route, Router, Routes}; use leptos_router::path; - - -use leptos::prelude::*; +use reactive_stores::Store; use thaw::*; -use crate::components::login; -use crate::components::home; -use crate::css::styles; - +use crate::components::{home, login}; +use crate::storage::GlobalState; #[component] pub fn App() -> impl IntoView { - let theme = RwSignal::new(Theme::light()); + provide_context(Store::new(GlobalState::default())); + view! {

"Rusty App"

-