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 AES-CBC page with file encryption support

Browse Source
This commit is contained in:
Kristofers Solo 2025-12-31 05:39:45 +02:00
parent c208ce2e81
commit 651651780f
Signed by: kristoferssolo
GPG Key ID: 8687F2D3EEE6F0ED
6 changed files with 317 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/Cargo.toml
View File

@ -26,7 +26,9 @@ web-sys = { version = "0.3", features = [
"Blob",
"Clipboard",
"Crypto",
"DataTransfer",
"Document",
"DragEvent",
"Element",
"Event",
"EventTarget",

32
web/src/components/cipher_form_cbc.rs
View File

@ -105,7 +105,8 @@ pub fn CipherFormCbc() -> impl IntoView {
OutputFormat::Text => {
String::from_utf8(plaintext).unwrap_or_else(|_| {
set_error_msg(
"Output contains invalid UTF-8. Try Hex format.".to_string(),
"Output contains invalid UTF-8. Try Hex format."
.to_string(),
);
String::new()
})
@ -242,8 +243,7 @@ fn parse_hex_string(s: &str) -> Result<Vec<u8>, String> {
(0..s.len())
.step_by(2)
.map(|i| {
u8::from_str_radix(&s[i..i + 2], 16)
.map_err(|_| format!("Invalid hex at position {i}"))
u8::from_str_radix(&s[i..i + 2], 16).map_err(|_| format!("Invalid hex at position {i}"))
})
.collect()
}
@ -275,16 +275,28 @@ fn download_bytes(bytes: &[u8], filename: &str) {
let array = Array::new();
array.push(&uint8_array.buffer());
let blob = Blob::new_with_u8_array_sequence(&array).unwrap();
let url = Url::create_object_url_with_blob(&blob).unwrap();
let Some(blob) = Blob::new_with_u8_array_sequence(&array).ok() else {
return;
};
let Some(url) = Url::create_object_url_with_blob(&blob).ok() else {
return;
};
let document = web_sys::window().unwrap().document().unwrap();
let a = document.create_element("a").unwrap();
a.set_attribute("href", &url).unwrap();
a.set_attribute("download", filename).unwrap();
let Some(window) = web_sys::window() else {
return;
};
let Some(document) = window.document() else {
return;
};
let Some(a) = document.create_element("a").ok() else {
return;
};
let _ = a.set_attribute("href", &url);
let _ = a.set_attribute("download", filename);
let a: web_sys::HtmlElement = a.unchecked_into();
a.click();
Url::revoke_object_url(&url).unwrap();
let _ = Url::revoke_object_url(&url);
}

257
web/src/components/file_input.rs
View File

@ -1,7 +1,7 @@
use js_sys::{ArrayBuffer, Uint8Array};
use leptos::prelude::*;
use wasm_bindgen::{prelude::*, JsCast};
use web_sys::{Event, File, FileList, FileReader, HtmlInputElement};
use wasm_bindgen::{JsCast, prelude::*};
use web_sys::{DragEvent, Event, File, FileReader, HtmlInputElement};
#[derive(Clone, Debug, PartialEq, Eq)]
pub enum InputMode {
@ -9,30 +9,17 @@ pub enum InputMode {
File,
}
#[component]
pub fn FileTextInput(
input_mode: ReadSignal<InputMode>,
set_input_mode: WriteSignal<InputMode>,
text_content: ReadSignal<String>,
set_text_content: WriteSignal<String>,
file_data: ReadSignal<Option<Vec<u8>>>,
set_file_data: WriteSignal<Option<Vec<u8>>>,
file_name: ReadSignal<Option<String>>,
fn read_file(
file: File,
set_file_name: WriteSignal<Option<String>>,
is_decrypt_mode: Memo<bool>,
) -> AnyView {
let handle_file_change = move |ev: Event| {
let target = ev.target().unwrap();
let input: HtmlInputElement = target.unchecked_into();
if let Some(files) = input.files() {
let files: FileList = files;
if let Some(file) = files.get(0) {
let file: File = file;
set_file_data: WriteSignal<Option<Vec<u8>>>,
) {
let name = file.name();
set_file_name(Some(name));
let reader = FileReader::new().unwrap();
let Some(reader) = FileReader::new().ok() else {
return;
};
let reader_clone = reader.clone();
let onload = Closure::wrap(Box::new(move |_: web_sys::ProgressEvent| {
@ -40,8 +27,7 @@ pub fn FileTextInput(
&& let Some(array_buffer) = result.dyn_ref::<ArrayBuffer>()
{
let uint8_array = Uint8Array::new(array_buffer);
let data: Vec<u8> = uint8_array.to_vec();
set_file_data(Some(data));
set_file_data(Some(uint8_array.to_vec()));
}
}) as Box<dyn FnMut(_)>);
@ -50,40 +36,49 @@ pub fn FileTextInput(
let _ = reader.read_as_array_buffer(&file);
}
}
};
let handle_text_change = move |ev: Event| {
let target = ev.target().unwrap();
let textarea: web_sys::HtmlTextAreaElement = target.unchecked_into();
set_text_content(textarea.value());
};
#[component]
fn InputModeToggle(
input_mode: ReadSignal<InputMode>,
set_input_mode: WriteSignal<InputMode>,
) -> impl IntoView {
view! {
<div class="form-group">
<div class="label-header">
<label>{move || if is_decrypt_mode.get() { "Ciphertext Input" } else { "Plaintext Input" }}</label>
<div class="input-mode-toggle">
<button
type="button"
class=move || if input_mode.get() == InputMode::Text { "mode-btn active" } else { "mode-btn" }
class=move || {
if input_mode.get() == InputMode::Text { "mode-btn active" } else { "mode-btn" }
}
on:click=move |_| set_input_mode(InputMode::Text)
>
"Text"
</button>
<button
type="button"
class=move || if input_mode.get() == InputMode::File { "mode-btn active" } else { "mode-btn" }
class=move || {
if input_mode.get() == InputMode::File { "mode-btn active" } else { "mode-btn" }
}
on:click=move |_| set_input_mode(InputMode::File)
>
"File"
</button>
</div>
</div>
}
}
#[component]
fn TextAreaInput(
text_content: ReadSignal<String>,
set_text_content: WriteSignal<String>,
is_decrypt_mode: Memo<bool>,
) -> impl IntoView {
let handle_text_change = move |ev: Event| {
if let Some(target) = ev.target() {
let textarea: web_sys::HtmlTextAreaElement = target.unchecked_into();
set_text_content(textarea.value());
}
};
{move || {
match input_mode.get() {
InputMode::Text => {
view! {
<div class="textarea-wrapper">
<textarea
@ -100,52 +95,190 @@ pub fn FileTextInput(
spellcheck="false"
></textarea>
<div class="char-count">
{move || {
let len = text_content.get().len();
format!("{} characters", len)
}}
{move || format!("{} characters", text_content.get().len())}
</div>
</div>
}.into_any()
}
InputMode::File => {
}
#[component]
fn FileDropZone(
file_data: ReadSignal<Option<Vec<u8>>>,
set_file_data: WriteSignal<Option<Vec<u8>>>,
file_name: ReadSignal<Option<String>>,
set_file_name: WriteSignal<Option<String>>,
) -> impl IntoView {
let (is_dragging, set_is_dragging) = signal(false);
let handle_file_change = move |ev: Event| {
if let Some(target) = ev.target() {
let input: HtmlInputElement = target.unchecked_into();
if let Some(files) = input.files()
&& let Some(file) = files.get(0)
{
read_file(file, set_file_name, set_file_data);
}
}
};
let handle_drag_over = move |ev: DragEvent| {
ev.prevent_default();
set_is_dragging(true);
};
let handle_drag_enter = move |ev: DragEvent| {
ev.prevent_default();
set_is_dragging(true);
};
let handle_drag_leave = move |ev: DragEvent| {
ev.prevent_default();
set_is_dragging(false);
};
let handle_drop = move |ev: DragEvent| {
ev.prevent_default();
set_is_dragging(false);
if let Some(data_transfer) = ev.data_transfer()
&& let Some(files) = data_transfer.files()
&& let Some(file) = files.get(0)
{
read_file(file, set_file_name, set_file_data);
}
};
view! {
<div class="file-upload-area">
<div
class="file-upload-area"
on:dragover=handle_drag_over
on:dragenter=handle_drag_enter
on:dragleave=handle_drag_leave
on:drop=handle_drop
>
<input
type="file"
id="file-input"
on:change=handle_file_change
class="file-input-hidden"
/>
<label for="file-input" class="file-upload-label">
<label
for="file-input"
class=move || {
if is_dragging.get() {
"file-upload-label dragging"
} else {
"file-upload-label"
}
}
>
{move || {
match file_name.get() {
Some(name) => view! {
file_name
.get()
.map_or_else(
|| view! { <FilePlaceholder /> }.into_any(),
|name| {
view! {
<FileSelected
name=name
file_data=file_data
set_file_name=set_file_name
set_file_data=set_file_data
/>
}
.into_any()
},
)
}}
</label>
</div>
}
}
#[component]
fn FileSelected(
name: String,
file_data: ReadSignal<Option<Vec<u8>>>,
set_file_name: WriteSignal<Option<String>>,
set_file_data: WriteSignal<Option<Vec<u8>>>,
) -> impl IntoView {
let clear_file = move |ev: web_sys::MouseEvent| {
ev.prevent_default();
ev.stop_propagation();
set_file_name(None);
set_file_data(None);
};
view! {
<div class="file-selected">
<span class="file-icon">"[FILE]"</span>
<span class="file-name">{name}</span>
<span class="file-size">
{move || {
file_data.get().map(|d| format!("({} bytes)", d.len())).unwrap_or_default()
}}
{move || file_data.get().map_or(String::new(), |d| format!("({} bytes)", d.len()))}
</span>
<button type="button" class="btn-clear-file" on:click=clear_file title="Remove file">
"X"
</button>
</div>
}.into_any(),
None => view! {
}
}
#[component]
fn FilePlaceholder() -> impl IntoView {
view! {
<div class="file-placeholder">
<span class="upload-icon">"[+]"</span>
<span>"Click to select a file or drag and drop"</span>
</div>
}.into_any(),
}
}
#[component]
pub fn FileTextInput(
input_mode: ReadSignal<InputMode>,
set_input_mode: WriteSignal<InputMode>,
text_content: ReadSignal<String>,
set_text_content: WriteSignal<String>,
file_data: ReadSignal<Option<Vec<u8>>>,
set_file_data: WriteSignal<Option<Vec<u8>>>,
file_name: ReadSignal<Option<String>>,
set_file_name: WriteSignal<Option<String>>,
is_decrypt_mode: Memo<bool>,
) -> impl IntoView {
view! {
<div class="form-group">
<div class="label-header">
<label>
{move || {
if is_decrypt_mode.get() { "Ciphertext Input" } else { "Plaintext Input" }
}}
</label>
<InputModeToggle input_mode=input_mode set_input_mode=set_input_mode />
</div>
}.into_any()
}
}
}}
</div>
{move || match input_mode.get() {
InputMode::Text => {
view! {
<TextAreaInput
text_content=text_content
set_text_content=set_text_content
is_decrypt_mode=is_decrypt_mode
/>
}
.into_any()
}
InputMode::File => {
view! {
<FileDropZone
file_data=file_data
set_file_data=set_file_data
file_name=file_name
set_file_name=set_file_name
/>
}
.into_any()
}
}}
</div>
}
}

9
web/src/components/iv_input.rs
View File

@ -12,7 +12,9 @@ fn generate_random_bytes(len: usize) -> Option<Vec<u8>> {
let window = web_sys::window()?;
let crypto = window.crypto().ok()?;
let array = Uint8Array::new_with_length(len as u32);
crypto.get_random_values_with_array_buffer_view(&array).ok()?;
crypto
.get_random_values_with_array_buffer_view(&array)
.ok()?;
Some(array.to_vec())
}
@ -21,10 +23,7 @@ fn bytes_to_hex(bytes: &[u8]) -> String {
}
#[component]
pub fn IvInput(
iv_input: ReadSignal<String>,
set_iv_input: WriteSignal<String>,
) -> AnyView {
pub fn IvInput(iv_input: ReadSignal<String>, set_iv_input: WriteSignal<String>) -> AnyView {
let handle_hex_input = move |ev| {
let val = event_target_value(&ev);
let cleaned = clean_hex_input(val);

4
web/src/components/key_input.rs
View File

@ -5,7 +5,9 @@ fn generate_random_bytes(len: usize) -> Option<Vec<u8>> {
let window = web_sys::window()?;
let crypto = window.crypto().ok()?;
let array = Uint8Array::new_with_length(len as u32);
crypto.get_random_values_with_array_buffer_view(&array).ok()?;
crypto
.get_random_values_with_array_buffer_view(&array)
.ok()?;
Some(array.to_vec())
}

35
web/style/main.scss
View File

@ -775,6 +775,12 @@ main {
border-color: var(--primary);
background: var(--bg-highlight);
}
&.dragging {
border-color: var(--accent);
background: var(--bg-highlight);
box-shadow: 0 0 0 3px var(--focus-ring);
}
}
.file-placeholder {
@ -795,6 +801,10 @@ main {
flex-direction: column;
align-items: center;
gap: 4px;
position: relative;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
.file-icon {
font-size: 1.5rem;
@ -812,10 +822,33 @@ main {
font-size: 0.85rem;
color: var(--text-muted);
}
.btn-clear-file {
position: absolute;
right: 8px;
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--error);
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
&:hover {
background: var(--error);
color: var(--bg-body);
border-color: var(--error);
}
}
}
}
// Result actions
.result-actions {
display: flex;
gap: 8px;