feat(web): add copy button

web/Cargo.toml

@@ -21,7 +21,7 @@ leptos_router = { version = "0.8", features = ["nightly"] }
 strum.workspace = true
 tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
 wasm-bindgen = { version = "=0.2.104", optional = true }
-web-sys = "0.3"
+web-sys = { version = "0.3", features = ["Navigator", "Window", "Clipboard"] }
 
 [features]
 hydrate = ["leptos/hydrate", "dep:console_error_panic_hook", "dep:wasm-bindgen"]

web/src/components/cipher_form.rs

@@ -1,6 +1,6 @@
 use cipher_factory::prelude::*;
 use leptos::prelude::*;
-use std::str::FromStr;
+use std::{str::FromStr, time::Duration};
 use strum::IntoEnumIterator;
 
 #[component]
@@ -13,12 +13,12 @@ pub fn CipherForm(algorithm: Algorithm) -> impl IntoView {
 
     let (output, set_output) = signal(String::new());
     let (error_msg, set_error_msg) = signal(String::new());
+
     let (copy_feedback, set_copy_feedback) = signal(false);
 
     let handle_submit = move || {
         set_error_msg(String::new());
         set_output(String::new());
-        set_copy_feedback(false);
 
         let key = key_input.get();
         let text = text_input.get();
@@ -35,6 +35,13 @@ pub fn CipherForm(algorithm: Algorithm) -> impl IntoView {
         }
     };
 
+    let copy_to_clipboard = move |content: String| {
+        let clipboard = window().navigator().clipboard();
+        let _ = clipboard.write_text(&content);
+        set_copy_feedback(true);
+        set_timeout(move || set_copy_feedback(false), Duration::from_secs(2));
+    };
+
     view! {
         <div class="cipher-card">
             <div class="card-header">
@@ -129,8 +136,16 @@ pub fn CipherForm(algorithm: Algorithm) -> impl IntoView {
                     <div class="result-box">
                         <div class="result-toolbar">
                             <strong>"Output ("{output_fmt.get().to_string()}")"</strong>
-                            <code>{output.get()}</code>
+                            <button
+                                class="btn-copy"
+                                on:click=move |_| copy_to_clipboard(output.get())
+                            >
+                                {move || {
+                                    if copy_feedback.get() { "✔️ Copied" } else { "📋 Copy" }
+                                }}
+                            </button>
                         </div>
+                        <code>{output.get()}</code>
                     </div>
                 }
                     .into_any()