From e376874afad28cd5a91831c661d376f69ab043a5 Mon Sep 17 00:00:00 2001 From: Matthew Kaminski Date: Mon, 26 Aug 2024 19:44:52 -0400 Subject: [PATCH] Clean up login form, add files for others --- src/capsules/forgot_password_form.rs | 0 src/capsules/login_form.rs | 24 +++++++++++---------- src/capsules/mod.rs | 2 ++ src/capsules/register_form.rs | 0 src/components/header.rs | 3 --- src/global_state.rs | 31 +++++++++++++++++++++++++++- 6 files changed, 45 insertions(+), 15 deletions(-) create mode 100644 src/capsules/forgot_password_form.rs create mode 100644 src/capsules/register_form.rs diff --git a/src/capsules/forgot_password_form.rs b/src/capsules/forgot_password_form.rs new file mode 100644 index 0000000..e69de29 diff --git a/src/capsules/login_form.rs b/src/capsules/login_form.rs index 58c6d72..ba91059 100644 --- a/src/capsules/login_form.rs +++ b/src/capsules/login_form.rs @@ -35,9 +35,6 @@ struct LoginFormState { #[derive(Clone)] pub struct LoginFormProps { pub remember_me: bool, - pub endpoint: String, - pub lost_password_url: Option, - pub forgot_password_url: Option, } #[auto_scope] @@ -121,14 +118,19 @@ fn login_form_capsule( input (bind:value = state.password, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){} } div (class="flex justify-between"){ - div (class="flex items-start"){ - div (class="flex items-center h-5"){ - input (bind:checked = state.remember_me, type = "checkbox", class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600") {} - } - div (class="text-sm ml-3"){ - label (class="font-medium text-gray-900 dark:text-gray-300"){"Remember me"} - } - } + (match props.remember_me { + true => { view!{ cx, + div (class="flex items-start"){ + div (class="flex items-center h-5"){ + input (bind:checked = state.remember_me, type = "checkbox", class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600") {} + } + } + div (class="text-sm ml-3"){ + label (class="font-medium text-gray-900 dark:text-gray-300"){"Remember me"} + } + }}, + false => view!{cx, }, + }) a (class="text-sm text-blue-700 hover:underline dark:text-blue-500"){"Lost Password?"} } button (on:click = handle_log_in, class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"){"Log in"} diff --git a/src/capsules/mod.rs b/src/capsules/mod.rs index 1f54584..d85fc52 100644 --- a/src/capsules/mod.rs +++ b/src/capsules/mod.rs @@ -1 +1,3 @@ +pub mod forgot_password_form; pub mod login_form; +pub mod register_form; diff --git a/src/capsules/register_form.rs b/src/capsules/register_form.rs new file mode 100644 index 0000000..e69de29 diff --git a/src/components/header.rs b/src/components/header.rs index 149840b..eef573b 100644 --- a/src/components/header.rs +++ b/src/components/header.rs @@ -97,9 +97,6 @@ pub fn Header<'a, G: Html>(cx: Scope<'a>, HeaderProps { game, title }: HeaderPro (LOGIN_FORM.widget(cx, "", LoginFormProps{ remember_me: true, - endpoint: "".to_owned(), - lost_password_url: Some("".to_owned()), - forgot_password_url: Some("".to_owned()), } )) } diff --git a/src/global_state.rs b/src/global_state.rs index 2fe2a33..c466e36 100644 --- a/src/global_state.rs +++ b/src/global_state.rs @@ -41,6 +41,14 @@ impl AuthDataRx { let value = serde_json::to_string(&auth_info).unwrap(); storage.set_item("auth", &value).unwrap(); } + // Save into session storage always + let storage: web_sys::Storage = web_sys::window() + .unwrap() + .session_storage() + .unwrap() + .unwrap(); + let value = serde_json::to_string(&auth_info).unwrap(); + storage.set_item("auth", &value).unwrap(); // Save token to session storage self.username.set(Some(auth_info.username.clone())); @@ -55,6 +63,12 @@ impl AuthDataRx { let storage: web_sys::Storage = web_sys::window().unwrap().local_storage().unwrap().unwrap(); storage.remove_item("auth").unwrap(); + let storage: web_sys::Storage = web_sys::window() + .unwrap() + .session_storage() + .unwrap() + .unwrap(); + storage.remove_item("auth").unwrap(); // Update state self.auth_info.set(None); self.username.set(None); @@ -108,7 +122,22 @@ impl AuthDataRx { self.handle_log_in(auth_info); } None => { - self.state.set(LoginState::NotAuthenticated); + // Try session storage + let storage: web_sys::Storage = web_sys::window() + .unwrap() + .session_storage() + .unwrap() + .unwrap(); + let saved_auth = storage.get("auth").unwrap(); + match saved_auth { + Some(auth_info) => { + let auth_info = serde_json::from_str(&auth_info).unwrap(); + self.handle_log_in(auth_info); + } + None => { + self.state.set(LoginState::NotAuthenticated); + } + } } } }