kristoferssolo/cipher-workshop
1
0
Fork 0
mirror of https://github.com/kristoferssolo/cipher-workshop.git synced 2025-12-31 13:52:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(web): add prefix hints

Browse Source
This commit is contained in:
Kristofers Solo 2025-12-30 14:46:26 +02:00
parent 63271c50f8
commit 02ab1d119c
Signed by: kristoferssolo
GPG Key ID: 8687F2D3EEE6F0ED
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,11 +190,13 @@ fn clean_hex_input(input: String) -> String {
fn KeyInput(set_key_input: WriteSignal<String>) -> impl IntoView {
view! {
<div class="form-group">
<label>"Secret Key"</label>
<div class="lable-header">
<label>"Secret Key"</label>
<span class="input-hint">"Prefix: 0x (Hex), 0b (Bin), or nothing (Text)"</span>
</div>
<input
type="text"
prop:key_input
placeholder="Enter key..."
placeholder="Enter key (e.g., 0x1A2B...)"
on:input=move |ev| set_key_input(event_target_value(&ev))
/>
</div>
@ -219,22 +221,19 @@ fn TextInput(
view! {
<div class="form-group">
<label>
{move || {
match mode.get() {
OperationMode::Encrypt => "Plaintext Input",
OperationMode::Decrypt => "Ciphertext (Hex) Input",
}
}}
</label>
{move || {
match mode.get() {
OperationMode::Encrypt => {
view! {
<div class="lable-header">
<label>"Plaintext Input"</label>
<span class="input-hint">
"Prefix: 0x (Hex), 0b (Bin), or nothing (Text)"
</span>
</div>
<div class="input-wrapper standard-input">
<input
type="text"
prop:value=move || text_input.get()
placeholder="Enter text..."
on:input=handle_text_input
spellcheck="false"
@ -245,6 +244,9 @@ fn TextInput(
}
OperationMode::Decrypt => {
view! {
<div class="lable-header">
<label>"Ciphertext Input"</label>
</div>
<div class="input-wrapper hex-input">
<span class="prefix">"0x"</span>
<input

20
web/style/main.scss
View File

@ -651,3 +651,23 @@ main {
}
}
}
.label-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
label {
margin-bottom: 0;
}
}
.input-hint {
font-size: 0.75rem;
color: var(--text-muted);
opacity: 0.7;
font-family: "Inter", "Segoe UI", sans-serif;
text-transform: none;
letter-spacing: normal;
}