Changed login to be daisyui

src/capsules/login_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)] {
@@ -81,19 +83,6 @@ fn login_form_capsule<G: Html>(
         }
     };
 
-    let handle_register = move |_event: Event| {
-        #[cfg(client)]
-        {
-            spawn_local_scoped(cx, async move {
-                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-                global_state.modals_open.register.set(OpenState::Open);
-                // Close modal
-                state.reset();
-                global_state.modals_open.login.set(OpenState::Closed);
-            });
-        }
-    };
-
     let handle_log_in = move |_event: Event| {
         #[cfg(client)]
         {
@@ -141,49 +130,44 @@ fn login_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"){"Sign in"}
-                        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"){"Sign in"}
 
                 // 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")
-                        }
+
-                        div (class="flex justify-between"){
+                // Remember me button and forget password button
+                div (class="flex justify-between items-center mt-1"){
+                    // Remember me button
                     (match props.remember_me {
                         true => { view!{ cx,
-                                    div (class="flex items-start"){
+                            div (class = "flex items-start  form-control") {
-                                        div (class="flex items-center h-5"){
+                                label (class = "label cursor-pointer") {
-                                            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") {}
+                                    span (class = "label-text mr-4") { "Remember me" }
-                                        }
+                                    input (bind:checked = state.remember_me, type = "checkbox", class = "checkbox")
-                                        div (class="text-sm ml-3"){
-                                            label (class="font-medium text-gray-900 dark:text-gray-300"){"Remember me"}
                                 }
                             }
                         }},
                         false => view!{cx, },
                     })
-                            button (on:click = handle_forgot_password, class="text-sm text-blue-700 hover:underline dark:text-blue-500"){"Lost Password?"}
+                    // Forget password button
+                    button (on:click = handle_forgot_password, class="flex  link link-primary"){"Lost Password?"}
                 }
+
+                // Log in button
+                div (class = "flex justify-center") {
                     button (on:click = handle_log_in, class="btn"){"Log in"}
-                        div (class="text-sm font-medium text-gray-500 dark:text-gray-300"){
-                            button (on:click = handle_register, class="text-blue-700 hover:underline dark:text-blue-500"){"Create account"}
-                        }
-                    }
                 }
             }
         }

src/components/static_components/close_button.rs

@@ -0,0 +1,28 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn CloseButtonSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns = "http://www.w3.org/2000/svg",
+            class = "h-6 w-6 stroke-primary",
+            fill = "none",
+            viewBox = "0 0 24 24",
+        ) {
+            path (
+               stroke-linecap = "round",
+               stroke-linejoin = "round",
+               stroke-width = "2",
+               d = "M6 18L18 6M6 6l12 12"
+            ){}
+        }
+    }
+}
+
+#[component]
+pub fn CloseButtonPath<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        path (d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"){}
+    }
+}

src/components/static_components/close_button_path.rs

@@ -1,9 +0,0 @@
-use perseus::prelude::*;
-use sycamore::prelude::*;
-
-#[component]
-pub fn CloseButtonPath<G: Html>(cx: Scope) -> View<G> {
-    view! { cx,
-        path (d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"){}
-    }
-}

src/components/static_components/mod.rs

@@ -1 +1 @@
-pub mod close_button_path;
+pub mod close_button;

src/components/sub_components/error_block.rs

@@ -2,7 +2,7 @@ use perseus::prelude::*;
 use sycamore::prelude::*;
 use web_sys::Event;
 
-use crate::components::static_components::close_button_path::CloseButtonPath;
+use crate::components::static_components::close_button::CloseButtonPath;
 
 #[component(inline_props)]
 pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal<String>) -> View<G> {