Add static components, change error design

src/capsules/forgot_password_form.rs

@@ -4,6 +4,8 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::sub_components::error_block::ErrorBlock;
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -114,19 +116,8 @@ fn forgot_password_form_capsule<G: Html>(
                     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"}
 
-                        (match state.error.get().as_ref() != "" {
+                        // Add component for handling error messages
-                            true => { view!{cx,
+                        ErrorBlock(error = state.error.clone())
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
 
                         div {
                             label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}

src/capsules/login_form.rs

@@ -4,6 +4,8 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::sub_components::error_block::ErrorBlock;
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -150,19 +152,8 @@ fn login_form_capsule<G: Html>(
                     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"}
 
-                        (match state.error.get().as_ref() != "" {
+                        // Add component for handling error messages
-                            true => { view!{cx,
+                        ErrorBlock(error = state.error.clone())
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
 
                         div {
                             label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}

src/capsules/register_form.rs

@@ -4,6 +4,8 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::sub_components::error_block::ErrorBlock;
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -125,20 +127,8 @@ fn register_form_capsule<G: Html>(
                     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
-                        (match state.error.get().as_ref() != "" {
+                        ErrorBlock(error = state.error.clone())
-                            true => { view!{cx,
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
 
                         div {
                             label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}

src/components/mod.rs

@@ -1,2 +1,4 @@
 mod header;
 pub mod layout;
+pub mod static_components;
+pub mod sub_components;

src/components/static_components/close_button_path.rs

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+pub mod close_button_path;

src/components/sub_components/error_block.rs

@@ -0,0 +1,38 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+use web_sys::Event;
+
+use crate::components::static_components::close_button_path::CloseButtonPath;
+
+#[component(inline_props)]
+pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal<String>) -> View<G> {
+    let error = create_ref(cx, error);
+    let is_empty = create_selector(cx, || error.get().is_empty());
+
+    let close_block = move |_event: Event| {
+        #[cfg(client)]
+        {
+            spawn_local_scoped(cx, async move { error.set(String::new()) });
+        }
+    };
+
+    view! { cx,
+        (match !(*is_empty.get()) {
+            true => { view!{cx,
+
+                div (class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role="alert") {
+                    span (class="block sm:inline"){
+                        p {(*error.get())}
+                    }
+                    span (class="absolute top-0 bottom-0 right-0 px-4 py-3"){
+                        svg (on:click = close_block, class="fill-current h-6 w-6 text-red-500", role="button", viewBox="0 0 20 20") {
+                            title {"Close"}
+                            CloseButtonPath {}
+                        }
+                    }
+                }
+            }},
+            false => {view!{cx,}},
+        })
+    }
+}

src/components/sub_components/mod.rs

@@ -0,0 +1 @@
+pub mod error_block;