Issue-289: add toast for clipboard copy button

Cargo.toml

@@ -150,6 +150,8 @@ tracing-web = { version = "0.1.3" }
 url = "2.5.0"
 uuid = "1.8.0"
 walkdir = "2.4.0"
+wasm-bindgen-futures = "0.4.43"
+wasm-bindgen-test = "0.3.37"
 which = "6.0.0"
 zip = "2.1.3"
 

opendut-lea/Cargo.toml

@@ -32,12 +32,13 @@ tracing-subscriber = { workspace = true, features = ["ansi"] }
 tracing-web = { workspace = true }
 url = { workspace = true }
 uuid = { workspace = true }
+wasm-bindgen-futures = { workspace = true }
 
 [build-dependencies]
 shadow-rs = { workspace = true }
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.37"
+wasm-bindgen-test = { workspace = true }
 
 [lints]
 workspace = true

opendut-lea/src/downloads/cleo_card.rs

@@ -3,6 +3,7 @@ use crate::app::{use_app_globals, ExpectGlobals};
 use opendut_auth::public::OptionalAuthData;
 use opendut_types::proto::util::VersionInfo;
 use crate::components::{ButtonColor, ButtonStateSignalProvider, SimpleButton};
+use crate::util::clipboard::copy_with_feedback;
 
 #[component]
 pub fn CleoCard(
@@ -94,10 +95,7 @@ pub fn CleoCard(
                                                     <button
                                                         class="button is-light"
                                                         title="Copy to clipboard"
-                                                        on:click=move |_| {
-                                                            let clipboard = window().navigator().clipboard();
-                                                            let _ = clipboard.write_text(&clipboard_text);
-                                                          }
+                                                        on:click=move |_| { copy_with_feedback().dispatch(clipboard_text.clone()) }
                                                     >
                                                         <span class="icon">
                                                             <i class="fa-regular fa-copy"></i>

opendut-lea/src/peers/configurator/mod.rs

@@ -258,7 +258,7 @@ pub fn PeerConfigurator() -> impl IntoView {
             let amount_clusters = cluster_view_list.len();
 
             if amount_clusters > 0 {
-                let comma_separated_cluster_views = util::view_helper::join_with_comma_spans(cluster_view_list.clone());
+                let comma_separated_cluster_views = util::view::join_with_comma_spans(cluster_view_list.clone());
                 view! {
                     <div class="mb-3">"Configured in " {amount_clusters} " clusters: " {comma_separated_cluster_views}</div>
                 }

opendut-lea/src/peers/configurator/tabs/setup/mod.rs

@@ -1,4 +1,4 @@
-use leptos::{component, create_local_resource, IntoView, ReadSignal, RwSignal, SignalGet, SignalSet, use_context, view, WriteSignal, window};
+use leptos::{component, create_local_resource, IntoView, ReadSignal, RwSignal, SignalGet, SignalSet, use_context, view, WriteSignal};
 use opendut_auth::public::OptionalAuthData;
 
 use opendut_types::peer::PeerId;
@@ -7,6 +7,7 @@ use crate::app::{ExpectGlobals, use_app_globals};
 use crate::components::{ButtonColor, SimpleButton};
 use crate::components::ButtonStateSignalProvider;
 use crate::peers::configurator::types::UserPeerConfiguration;
+use crate::util::clipboard::{copy_with_feedback};
 
 #[component]
 pub fn SetupTab(peer_configuration: ReadSignal<UserPeerConfiguration>) -> impl IntoView {
@@ -53,10 +54,7 @@ pub fn SetupTab(peer_configuration: ReadSignal<UserPeerConfiguration>) -> impl I
                                         <button
                                             class="button is-light"
                                             title="Copy to clipboard"
-                                            on:click=move |_| {
-                                                let clipboard = window().navigator().clipboard();
-                                                let _ = clipboard.write_text(&clipboard_text);
-                                              }
+                                            on:click=move |_| { copy_with_feedback().dispatch(clipboard_text.clone()) }
                                         >
                                             <span class="icon">
                                                 <i class="fa-regular fa-copy"></i>

opendut-lea/src/peers/overview.rs

@@ -184,7 +184,7 @@ fn Row(
                 }.into_view()
             }).collect();
 
-        util::view_helper::join_with_comma_spans(cluster_view_list)
+        util::view::join_with_comma_spans(cluster_view_list)
     });
 
     view! {

opendut-lea/src/util/clipboard.rs

@@ -0,0 +1,29 @@
+use leptos::{create_action, window, Action};
+use crate::components::{use_toaster, Toast};
+
+pub fn copy_with_feedback() -> Action<String, ()> {
+    create_action(move |clipboard_text: &String| {
+        let toaster = use_toaster();
+        let test = clipboard_text.clone();
+        async move {
+            let clipboard = window().navigator().clipboard();
+            let clipboard_promise = clipboard.write_text(&test);
+            match wasm_bindgen_futures::JsFuture::from(clipboard_promise).await {
+                Ok(_) => {
+                    toaster.toast(
+                        Toast::builder()
+                            .simple("Successfully copied Setup-String.")
+                            .success(),
+                    );
+                }
+                Err(_) => {
+                    toaster.toast(
+                        Toast::builder()
+                            .simple("Error while copying Setup-String.")
+                            .error(),
+                    );
+                }
+            };
+        }
+    })
+}

opendut-lea/src/util/mod.rs

@@ -5,6 +5,7 @@ pub mod url;
 mod ior;
 mod tick;
 pub mod net;
-pub mod view_helper;
+pub mod view;
+pub mod clipboard;
 
 pub const NON_BREAKING_SPACE: &str = "\u{a0}";

opendut-lea/src/util/view_helper.rs → opendut-lea/src/util/view.rs

@@ -16,4 +16,4 @@ pub fn join_with_comma_spans(elements: Vec<View>) -> Vec<View> {
         }
     }
     elements_with_separator
-}
+}