Updated remaining modals to daisyui

Made username carry over between modals too

src/capsules/forgot_password_form.rs

@@ -4,14 +4,18 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
-use crate::components::sub_components::error_block::ErrorBlock;
+use crate::{
+    components::{
+        static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+    },
+    global_state::AppStateRx,
+};
 
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
             state_enums::{ OpenState},
             templates::get_api_path,
-            global_state::{AppStateRx},
             endpoints::FORGOT_PASSWORD,
             models::{
                 auth::ForgotPasswordRequest,
@@ -54,6 +58,13 @@ fn forgot_password_form_capsule<G: Html>(
     state: &ForgotPasswordFormStateRx,
     _props: ForgotPasswordFormProps,
 ) -> View<G> {
+    // If there's a tentative username, set it
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    if let Some(username) = (*global_state.auth.username.get()).clone() {
+        state.username.set(username);
+        global_state.auth.username.set(None);
+    }
+
     let close_modal = move |_event: Event| {
         #[cfg(client)]
         {
@@ -105,31 +116,26 @@ fn forgot_password_form_capsule<G: Html>(
     };
 
     view! { cx,
-        div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){
+        dialog (class="modal-open modal modal-bottom sm:modal-middle animate-none") {
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
+            div (class="modal-box"){
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
+                // Header row - title and close button
-                    div (class="flex justify-end p-2"){
+                h3 (class="text-lg font-bold mb-4 text-center"){"Forgot Password"}
-                        button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
-                            "Close"
-                        }
-                    }
-                    div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
-                        h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Forgot Password"}
 
                 // Add component for handling error messages
                 ErrorBlock(error = state.error.clone())
 
-                        div {
+                // Username field
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
+                div (class = "label") { span (class = "label-text") { "Username" } }
-                            input (bind:value = state.username, 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") {}
+                input (bind:value = state.username, class = "input input-bordered w-full")
-                        }
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Contact Info"}
-                            input (bind:value = state.how_to_reach, 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"){}
-                        }
 
-                        button (on:click = handle_submit, 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"){"Submit"}
+                // Password field
-                    }
+                div (class = "label") { span (class = "label-text") { "Contact Info" } }
+                input (bind:value = state.how_to_reach, class = "input input-bordered w-full")
+
+                // Submit button
+                div (class = "flex justify-center") {
+                    button (on:click = handle_submit, class="btn"){"Submit"}
                 }
             }
         }

src/capsules/login_form.rs

@@ -4,15 +4,17 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
-use crate::components::{
+use crate::{
+    components::{
         static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+    },
+    global_state::AppStateRx,
 };
 
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
             endpoints::LOGIN,
-            global_state::{AppStateRx},
             models::auth::{LoginInfo, LoginResponse, WebAuthInfo},
             models::generic::GenericResponse,
             state_enums::{OpenState},
@@ -56,6 +58,13 @@ fn login_form_capsule<G: Html>(
     state: &LoginFormStateRx,
     props: LoginFormProps,
 ) -> View<G> {
+    // If there's a tentative username, set it
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    if let Some(username) = (*global_state.auth.username.get()).clone() {
+        state.username.set(username);
+        global_state.auth.username.set(None);
+    }
+
     let close_modal = move |_event: Event| {
         #[cfg(client)]
         {
@@ -72,10 +81,19 @@ fn login_form_capsule<G: Html>(
         {
             spawn_local_scoped(cx, async move {
                 let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+                // Update tentative username
+                global_state
+                    .auth
+                    .username
+                    .set(Some((*state.username.get()).clone()));
+
+                // Open new modal
                 global_state
                     .modals_open
                     .forgot_password
                     .set(OpenState::Open);
+
                 // Close modal
                 state.reset();
                 global_state.modals_open.login.set(OpenState::Closed);

src/capsules/register_form.rs

@@ -4,7 +4,9 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
-use crate::components::sub_components::error_block::ErrorBlock;
+use crate::components::{
+    static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+};
 
 cfg_if::cfg_if! {
     if #[cfg(client)] {
@@ -104,9 +106,14 @@ fn register_form_capsule<G: Html>(
                     return;
                 }
 
+                // Update tentative username
+                global_state
+                    .auth
+                    .username
+                    .set(Some((*state.username.get()).clone()));
+
                 // Open login modal
                 global_state.modals_open.login.set(OpenState::Open);
-                state.reset();
 
                 // Close modal
                 state.reset();
@@ -116,57 +123,48 @@ fn register_form_capsule<G: Html>(
     };
 
     view! { cx,
-        div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){
+        dialog (class="modal-open modal modal-bottom sm:modal-middle"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
+            div (class="modal-box") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
+                // Header row - title and close button
-                    div (class="flex justify-end p-2"){
+                h3 (class="text-lg font-bold mb-4 text-center"){"Register"}
-                        button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
-                            "Close"
-                        }
-                    }
-                    div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
-                        h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Register"}
 
                 // Add component for handling error messages
                 ErrorBlock(error = state.error.clone())
 
-                        div {
+                // Username field
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
+                div (class = "label") { span (class = "label-text") { "Username" } }
-                            input (bind:value = state.username, 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") {}
+                input (bind:value = state.username, class = "input input-bordered w-full")
-                        }
+
-                        div {
+                // Password field
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Password"}
+                div (class = "label") { span (class = "label-text") { "Password" } }
-                            input (bind:value = state.password, type = "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"){}
+                input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
-                        }
+
                 (match props.registration_code {
                     true => { view! {cx,
-                                div {
+                        div (class = "label") { span (class = "label-text") { "Registration Code" } }
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Registration code"}
+                        input (bind:value = state.registration_code, class = "input input-bordered w-full")
-                                    input (bind:value = state.registration_code, 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"){}
-                                }
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.nickname {
                     true => { view! {cx,
-                                div {
+                        div (class = "label") { span (class = "label-text") { "Nickname (Optional)" } }
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Nickname (optional)"}
+                        input (bind:value = state.nickname, class = "input input-bordered w-full")
-                                    input (bind:value = state.nickname, 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"){}
-                                }
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.email {
                     true => { view! {cx,
-                                div {
+                        div (class = "label") { span (class = "label-text") { "Email (Optional)" } }
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Email (optional)"}
+                        input (bind:value = state.email, class = "input input-bordered w-full")
-                                    input (bind:value = state.email, 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"){}
-                                }
                     }},
                     false => {view!{cx,}},
                 })
-                        button (on:click = handle_register, 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"){"Register"}
+
-                    }
+                // Register button
+                div (class = "flex justify-center") {
+                    button (on:click = handle_register, class="btn"){"Register"}
                 }
             }
         }