Skip to content

Commit

Permalink
Issue-289: add copy to clipboard button for setup strings
Browse files Browse the repository at this point in the history
  • Loading branch information
@voelkera
voelkera committed Aug 28, 2024
1 parent cf9bb2a commit d887a49
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 40 deletions.
44 changes: 33 additions & 11 deletions opendut-lea/src/downloads/cleo_card.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,26 +82,48 @@ pub fn CleoCard(
</div>
<div class="mt-5">
<div class="field">
<label class="label">Setup-String</label>
{
move || match setup_string.get() {
Some(Some(setup_string)) => {
let clipboard_text = setup_string.clone();
view! {
<div class="control is-flex is-justify-content-center">
<textarea class="textarea" rows="20" placeholder="" prop:value=setup_string readonly></textarea>
<div>
<div class="columns mb-0 is-align-items-center">
<div class="column"><label class="label">Setup-String</label></div>
<div class="column is-narrow">
<button
class="button is-small"
title="Copy to clipboard"
on:click=move |_| {
let clipboard = window().navigator().clipboard();
let _ = clipboard.write_text(&clipboard_text);
}
>
<span class="icon">
<i class="fa-regular fa-copy"></i>
</span>
</button>
</div>
</div>
<div class="control is-flex is-justify-content-center">
<textarea class="textarea" rows="20" placeholder="" prop:value=setup_string readonly></textarea>
</div>
</div>
}
}
_ => {
view! {
<div class="control is-flex is-flex-direction-column">
<div class="is-flex is-justify-content-center">
<SimpleButton
text="Generate"
color=ButtonColor::Info
state=button_state
on_action=move || trigger_cleo_setup_generation.set(true)
/>
<div>
<label class="label">Setup-String</label>
<div class="control is-flex is-flex-direction-column">
<div class="is-flex is-justify-content-center">
<SimpleButton
text="Generate"
color=ButtonColor::Info
state=button_state
on_action=move || trigger_cleo_setup_generation.set(true)
/>
</div>
</div>
</div>
}
Expand Down
80 changes: 51 additions & 29 deletions opendut-lea/src/peers/configurator/tabs/setup/mod.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
use leptos::{component, create_local_resource, IntoView, ReadSignal, RwSignal, SignalGet, SignalSet, use_context, view, WriteSignal};
use leptos::{component, create_local_resource, IntoView, ReadSignal, RwSignal, SignalGet, SignalSet, use_context, view, WriteSignal, window};
use opendut_auth::public::OptionalAuthData;

use opendut_types::peer::PeerId;
Expand Down Expand Up @@ -41,44 +41,66 @@ pub fn SetupTab(peer_configuration: ReadSignal<UserPeerConfiguration>) -> impl I

view! {
<div class="field">
<label class="label">Setup-String</label>
{
move || match setup_string.get() {
Some(Some(setup_string)) => {
view! {
{
move || match setup_string.get() {
Some(Some(setup_string)) => {
let clipboard_text = setup_string.clone();
view! {
<div>
<div class="columns mb-0 is-align-items-center">
<div class="column"><label class="label">Setup-String</label></div>
<div class="column is-narrow">
<button
class="button is-small"
title="Copy to clipboard"
on:click=move |_| {
let clipboard = window().navigator().clipboard();
let _ = clipboard.write_text(&clipboard_text);
}
>
<span class="icon">
<i class="fa-regular fa-copy"></i>
</span>
</button>
</div>
</div>
<div class="control is-flex is-justify-content-center">
<textarea class="textarea" placeholder="" prop:value=setup_string readonly></textarea>
</div>
}
</div>
}
_ => {
view! {
<div class="control is-flex is-flex-direction-column">
<div class="notification is-warning">
<div class="columns is-mobile is-vcentered">
<div class="column is-narrow">
<i class="fa-solid fa-triangle-exclamation fa-2xl"></i>
</div>
<div class="column">
<p>"After generating a new Setup-String, the peer will "<b>"not be usable in clusters"</b>" until you re-run the setup with the newly generated Setup-String!"</p>
</div>
}
_ => {
view! {
<div>
<label class="label">Setup-String</label>
<div class="control is-flex is-flex-direction-column">
<div class="notification is-warning">
<div class="columns is-mobile is-vcentered">
<div class="column is-narrow">
<i class="fa-solid fa-triangle-exclamation fa-2xl"></i>
</div>
<div class="column">
<p>"After generating a new Setup-String, the peer will "<b>"not be usable in clusters"</b>" until you re-run the setup with the newly generated Setup-String!"</p>
</div>
</div>
<div class="is-flex is-justify-content-center">
<SimpleButton
text="Generate"
color=ButtonColor::Info
state=button_state
on_action=move || trigger_generation.set(Some(peer_configuration.get().id))
/>
</div>
</div>
}
<div class="is-flex is-justify-content-center">
<SimpleButton
text="Generate"
color=ButtonColor::Info
state=button_state
on_action=move || trigger_generation.set(Some(peer_configuration.get().id))
/>
</div>
</div>
</div>
}
}
}
<br/>
<p>"Setup-Strings may only be used to set up one host. For setting up multiple hosts, you should create a peer for each host."</p>
}
<br/>
<p>"Setup-Strings may only be used to set up one host. For setting up multiple hosts, you should create a peer for each host."</p>
</div>
}
}

0 comments on commit d887a49

Please sign in to comment.