kristoferssolo/cipher-workshop
1
0
Fork 0
mirror of https://github.com/kristoferssolo/cipher-workshop.git synced 2025-12-20 11:04:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(web): add copy button

Browse Source
This commit is contained in:
Kristofers Solo 2025-11-26 04:33:58 +02:00
parent aa4bd9ecec
commit 8431a9b876
Signed by: kristoferssolo
GPG Key ID: 8687F2D3EEE6F0ED
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/Cargo.toml
View File

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

21
web/src/components/cipher_form.rs
View File

@ -1,6 +1,6 @@
use cipher_factory::prelude::*; use cipher_factory::prelude::*;
use leptos::prelude::*; use leptos::prelude::*;
use std::str::FromStr; use std::{str::FromStr, time::Duration};
use strum::IntoEnumIterator; use strum::IntoEnumIterator;
#[component] #[component]
@ -13,12 +13,12 @@ pub fn CipherForm(algorithm: Algorithm) -> impl IntoView {
let (output, set_output) = signal(String::new()); let (output, set_output) = signal(String::new());
let (error_msg, set_error_msg) = signal(String::new()); let (error_msg, set_error_msg) = signal(String::new());
let (copy_feedback, set_copy_feedback) = signal(false); let (copy_feedback, set_copy_feedback) = signal(false);
let handle_submit = move || { let handle_submit = move || {
set_error_msg(String::new()); set_error_msg(String::new());
set_output(String::new()); set_output(String::new());
set_copy_feedback(false);
let key = key_input.get(); let key = key_input.get();
let text = text_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! { view! {
<div class="cipher-card"> <div class="cipher-card">
<div class="card-header"> <div class="card-header">
@ -129,8 +136,16 @@ pub fn CipherForm(algorithm: Algorithm) -> impl IntoView {
<div class="result-box"> <div class="result-box">
<div class="result-toolbar"> <div class="result-toolbar">
<strong>"Output ("{output_fmt.get().to_string()}")"</strong> <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> </div>
<code>{output.get()}</code>
</div> </div>
} }
.into_any() .into_any()