feat(web): create CipherForm component

web/Cargo.toml

@@ -8,14 +8,20 @@ edition.workspace = true
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-leptos = { version = "0.8.0", features = ["nightly"] }
-leptos_router = { version = "0.8.0", features = ["nightly"] }
-axum = { version = "0.8.0", optional = true }
+aes.workspace = true
+axum = { version = "0.8", optional = true }
+cipher-core.workspace = true
+cipher-factory.workspace = true
 console_error_panic_hook = { version = "0.1", optional = true }
-leptos_axum = { version = "0.8.0", optional = true }
-leptos_meta = { version = "0.8.0" }
+des.workspace = true
+leptos = { version = "0.8", features = ["nightly"] }
+leptos_axum = { version = "0.8", optional = true }
+leptos_meta = { version = "0.8" }
+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"
 
 [features]
 hydrate = ["leptos/hydrate", "dep:console_error_panic_hook", "dep:wasm-bindgen"]

web/src/app.rs

@@ -1,10 +1,11 @@
-use crate::pages::{des::DesPage, home::Home};
+use crate::pages::{aes::AesPage, des::DesPage, home::Home};
 use leptos::prelude::*;
 use leptos_meta::{MetaTags, Stylesheet, Title, provide_meta_context};
 use leptos_router::{
     StaticSegment,
     components::{A, Route, Router, Routes},
 };
+use std::fmt::Display;
 
 #[must_use]
 pub fn shell(options: LeptosOptions) -> impl IntoView {
@@ -25,22 +26,52 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
     }
 }
 
+#[derive(Clone, Copy, PartialEq)]
+enum Theme {
+    Light,
+    Dark,
+}
+
+impl Theme {
+    const fn inverse(self) -> Self {
+        match self {
+            Self::Light => Self::Dark,
+            Self::Dark => Self::Light,
+        }
+    }
+}
+
+impl Display for Theme {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let s = match self {
+            Self::Light => "☀️ Light",
+            Self::Dark => "🌙 Dark",
+        };
+        f.write_str(s)
+    }
+}
+
 #[component]
 // Provides context that manages stylesheets, titles, meta tags, etc.
 pub fn App() -> impl IntoView {
     provide_meta_context();
 
-    let (is_light, set_is_light) = signal(false);
+    let (theme, set_theme) = signal(Theme::Dark);
 
     let toggle_theme = move |_| {
-        set_is_light.update(|light| *light = !*light);
+        set_theme.update(|t| *t = t.inverse());
 
         if let Some(body) = document().body() {
             let class_list = body.class_list();
-            if is_light.get() {
-                let _ = class_list.add_1("light-theme");
-            } else {
-                let _ = class_list.remove_1("light-theme");
+            match theme.get() {
+                Theme::Light => {
+                    let _ = class_list.remove_1("dark-theme");
+                    let _ = class_list.add_1("light-theme");
+                }
+                Theme::Dark => {
+                    let _ = class_list.remove_1("light-theme");
+                    let _ = class_list.add_1("dark-theme");
+                }
             }
         }
     };
@@ -69,14 +100,14 @@ pub fn App() -> impl IntoView {
                         </li>
                     </ul>
                     <button class="theme-toggle" on:click=toggle_theme>
-                        {move || if is_light.get() { "🌙 Dark" } else { "☀️ Light" }}
+                        {move || theme.get().to_string()}
                     </button>
                 </nav>
                 <main>
                     <Routes fallback=|| "Page not found.".into_view()>
                         <Route path=StaticSegment("/") view=Home />
                         <Route path=StaticSegment("/des") view=DesPage />
-                        <Route path=StaticSegment("/aes") view=Home />
+                        <Route path=StaticSegment("/aes") view=AesPage />
                     </Routes>
                 </main>
             </div>

web/src/components/cipher_form.rs

@@ -1,62 +1,93 @@
+use cipher_factory::prelude::*;
 use leptos::prelude::*;
-type LogicFn = Box<dyn Fn(bool, String, String) -> (String, String)>;
+use std::str::FromStr;
+use strum::IntoEnumIterator;
 
 #[component]
-pub fn CipherForm(title: &'static str, logic: LogicFn) -> impl IntoView {
-    let (mode, set_mode) = signal("Encrypt".to_string());
+pub fn CipherForm(algorithm: Algorithm) -> impl IntoView {
+    let (mode, set_mode) = signal(OperationMode::Encrypt);
+    let (output_fmt, set_output_fmt) = signal(OutputFormat::Hex);
+
     let (key_input, set_key_input) = signal(String::new());
     let (text_input, set_text_input) = signal(String::new());
+
     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 |_| {
+    let handle_submit = move || {
         set_error_msg(String::new());
         set_output(String::new());
+        set_copy_feedback(false);
 
-        let is_encrypt = mode.get() == "Encrypt";
         let key = key_input.get();
         let text = text_input.get();
 
         if key.is_empty() || text.is_empty() {
-            set_error_msg("Please enter both key and text/hex.".to_string());
+            set_error_msg("Please enter both key and input text.".to_string());
             return;
         }
 
-        let (res_out, res_err) = logic(is_encrypt, key, text);
-
-        if !res_err.is_empty() {
-            set_error_msg(res_err);
-            return;
+        let context = CipherContext::new(algorithm, mode.get(), key, text, output_fmt.get());
+        match context.process() {
+            Ok(out) => set_output(out),
+            Err(e) => set_error_msg(e.to_string()),
         }
-        set_output(res_out);
     };
 
     view! {
         <div class="cipher-card">
-            <h2>{title} " Encryption"</h2>
+            <div class="card-header">
+                <h2>{algorithm.to_string()}</h2>
+            </div>
+
             <div class="form-group">
-                <label>"Operation Mdoe"</label>
-                <div class="radio-group">
-                    <label>
-                        <input
-                            type="radio"
-                            name="mode"
-                            value="Encrypt"
-                            checked=move || mode.get() == "Encrypt"
-                            on:change=move |ev| set_mode(event_target_value(&ev))
+                <label>"Configuration"</label>
+                <div class="controls-row">
+                    <div class="radio-group">
+                        <RadioButton
+                            value=OperationMode::Encrypt
+                            current=mode
+                            set_current=set_mode
                         />
-                        "Encrypt"
-                    </label>
-                    <label>
-                        <input
-                            type="radio"
-                            name="mode"
-                            value="Decrypt"
-                            checked=move || mode.get() == "Decrypt"
-                            on:change=move |ev| set_mode(event_target_value(&ev))
+                        <RadioButton
+                            value=OperationMode::Decrypt
+                            current=mode
+                            set_current=set_mode
                         />
-                        "Decrypt"
-                    </label>
+                    </div>
+                    {move || {
+                        if mode.get() != OperationMode::Decrypt {
+                            return view! { <span></span> }.into_any();
+                        }
+                        view! {
+                            <div class="format-controls-box">
+                                <div class="format-controls">
+                                    <label>"Output format:"</label>
+                                    <select
+                                        on:change=move |ev| {
+                                            let val = event_target_value(&ev);
+                                            let fmt = OutputFormat::from_str(&val).unwrap_or_default();
+                                            set_output_fmt(fmt);
+                                            if !output.get().is_empty() {
+                                                handle_submit();
+                                            }
+                                        }
+                                        prop:value=move || output_fmt.get().to_string()
+                                    >
+                                        {OutputFormat::iter()
+                                            .map(|fmt| {
+                                                view! {
+                                                    <option value=fmt.to_string()>{fmt.to_string()}</option>
+                                                }
+                                            })
+                                            .collect_view()}
+                                    </select>
+                                </div>
+                            </div>
+                        }
+                            .into_any()
+                    }}
                 </div>
             </div>
             <div class="form-group">
@@ -71,10 +102,9 @@ pub fn CipherForm(title: &'static str, logic: LogicFn) -> impl IntoView {
             <div class="form-group">
                 <label>
                     {move || {
-                        if mode.get() == "Encrypt" {
-                            "Plaintext Input"
-                        } else {
-                            "Ciphertext (Hex) Input"
+                        match mode.get() {
+                            OperationMode::Encrypt => "Plaintext Input",
+                            OperationMode::Decrypt => "Ciphertext (Hex) Input",
                         }
                     }}
                 </label>
@@ -86,31 +116,55 @@ pub fn CipherForm(title: &'static str, logic: LogicFn) -> impl IntoView {
                 />
             </div>
 
-            <button class="btn-primary" on:click=handle_submit>
-                {move || format!("Run {title} {}", mode.get())}
+            <button class="btn-primary" on:click=move |_| handle_submit()>
+                {move || format!("{} using {algorithm}", mode.get())}
             </button>
 
-            {move || {
-                if error_msg.get().is_empty() {
-                    view! { <span></span> }.into_any()
-                } else {
-                    view! { <div class="error-box">{error_msg.get()}</div> }.into_any()
-                }
-            }}
-
+            // Output Section
             {move || {
                 if output.get().is_empty() {
-                    view! { <span></span> }.into_any()
-                } else {
-                    view! {
-                        <div class="result-box">
-                            <strong>"Output:"</strong>
+                    return view! { <span></span> }.into_any();
+                }
+                view! {
+                    <div class="result-box">
+                        <div class="result-toolbar">
+                            <strong>"Output ("{output_fmt.get().to_string()}")"</strong>
                             <code>{output.get()}</code>
                         </div>
-                    }
-                        .into_any()
+                    </div>
                 }
+                    .into_any()
+            }}
+
+            // Error Section
+            {move || {
+                if error_msg.get().is_empty() {
+                    return view! { <span></span> }.into_any();
+                }
+                view! { <div class="error-box">{error_msg.get()}</div> }.into_any()
             }}
         </div>
     }
 }
+
+#[component]
+fn RadioButton(
+    value: OperationMode,
+    current: ReadSignal<OperationMode>,
+    set_current: WriteSignal<OperationMode>,
+) -> impl IntoView {
+    view! {
+        <div class="radio-button">
+            <label>
+                <input
+                    type="radio"
+                    name="crypto-mode"
+                    value=value.to_string()
+                    prop:checked=move || current.get() == value
+                    on:change=move |_| set_current.set(value)
+                />
+                {value.to_string()}
+            </label>
+        </div>
+    }
+}

web/src/pages/aes.rs

@@ -0,0 +1,8 @@
+use crate::components::cipher_form::CipherForm;
+use cipher_factory::Algorithm;
+use leptos::prelude::*;
+
+#[component]
+pub fn AesPage() -> impl IntoView {
+    view! { <CipherForm algorithm=Algorithm::Aes /> }
+}

web/src/pages/des.rs

@@ -1,13 +1,8 @@
 use crate::components::cipher_form::CipherForm;
+use cipher_factory::Algorithm;
 use leptos::prelude::*;
 
 #[component]
 pub fn DesPage() -> impl IntoView {
-    let des_logic = Box::new(
-        |encrypt: bool, key_str: String, text_str: String| -> (String, String) {
-            (String::new(), String::new())
-        },
-    );
-
-    view! { <CipherForm title="DES" logic=des_logic /> }
+    view! { <CipherForm algorithm=Algorithm::Des /> }
 }

web/src/pages/mod.rs

@@ -1,2 +1,3 @@
+pub mod aes;
 pub mod des;
 pub mod home;

web/style/main.scss

@@ -26,6 +26,8 @@ $l-iris: #907aa9;
 $l-hl-low: #f4ede8;
 $l-hl-high: #cecacd;
 
+$control-height: 46px;
+
 :root,
 body.dark-theme {
   // Default to Dark Mode
@@ -135,13 +137,116 @@ main {
   border-radius: 12px;
   padding: 2rem;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card-header {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 1rem;
+  margin-bottom: 1.5rem;
 
   h2 {
-    margin-top: 0;
+    margin: 0;
+    border: none;
+    padding: none;
     color: var(--secondary);
-    border-bottom: 1px solid var(--border);
-    padding-bottom: 15px;
-    margin-bottom: 25px;
+    font-size: 1.5rem;
+  }
+}
+
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  min-height: $control-height;
+}
+
+.radio-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  background: var(--bg-input);
+  border-radius: 8px;
+  width: fit-content;
+
+  height: $control-height;
+  padding: 0 16px;
+  box-sizing: border-box;
+
+  .radio-button {
+    label {
+      margin: 0;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-main);
+      text-transform: none;
+      height: 100%;
+    }
+
+    input[type="radio"] {
+      accent-color: var(--primary);
+      margin: 0;
+    }
+  }
+}
+
+.format-controls-box {
+  display: flex;
+  font-size: 0.9rem;
+  background: var(--bg-input);
+  border-radius: 8px;
+
+  height: $control-height;
+  padding: 0 12px;
+  box-sizing: border-box;
+
+  animation: fadeIn 0.2s ease-in-out;
+
+  .format-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    label {
+      margin: 0;
+      color: var(--text-muted);
+      font-weight: normal;
+      white-space: nowrap;
+    }
+
+    select {
+      height: 32px;
+      padding: 0 12px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background-color: var(--bg-input);
+      color: var(--text-main);
+      cursor: pointer;
+      font-size: 0.9rem;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+        border-color: var(--primary);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
   }
 }
 
@@ -183,29 +288,6 @@ main {
   }
 }
 
-.radio-group {
-  display: flex;
-  gap: 20px;
-  background: var(--bg-input);
-  padding: 10px;
-  border-radius: 8px;
-  width: fit-content;
-
-  label {
-    margin: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--text-main);
-    text-transform: none;
-  }
-
-  input[type="radio"] {
-    accent-color: var(--primary);
-  }
-}
-
 .btn-primary {
   background-color: var(--primary);
   color: var(--bg-body);
@@ -232,25 +314,66 @@ main {
   border-radius: 6px;
 }
 
+.error-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid var(--border);
+
+  strong {
+    background: transparent;
+    padding: 0;
+    color: var(--text-muted);
+  }
+}
+
 .result-box {
   margin-top: 1.5rem;
   background: var(--bg-highlight);
   border-radius: 8px;
+  border: 1px solid var(--border);
   overflow: hidden;
 
-  strong {
-    display: block;
-    padding: 8px 12px;
-    background: rgba(0, 0, 0, 0.1);
-    color: var(--text-muted);
-    font-size: 0.85rem;
-  }
-
   code {
     display: block;
     padding: 15px;
     word-break: break-all;
     font-family: "Consolas", "Monaco", monospace;
     color: var(--accent);
+    background: transparent;
+  }
+}
+
+.result-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid var(--border);
+
+  strong {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+  }
+}
+
+.btn-copy {
+  background: transparent;
+  border: none;
+  color: var(--primary);
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
   }
 }