wip

Author: functora

rust/cryptonote/Cargo.lock

@@ -24,6 +24,7 @@ web-sys = { version = "0.3", features = [
   "Clipboard",
 ] }
 derive_more = { version = "2.1.0", features = ["display"] }
+urlencoding = "2.1.3"
 
 [features]
 default = ["web"]

rust/cryptonote/Cargo.toml

@@ -45,6 +45,8 @@ pub struct Translations {
     pub your_note_title: &'static str,
     pub error_title: &'static str,
     pub loading: &'static str,
+    pub create_new_note: &'static str,
+    pub edit_note: &'static str,
     pub password_required: &'static str,
     pub no_note_in_url: &'static str,
     pub invalid_utf8: &'static str,
@@ -80,6 +82,8 @@ pub fn get_translations(lang: Language) -> Translations {
             your_note_title: "Your Note",
             error_title: "Error",
             loading: "Loading note...",
+            create_new_note: "Create a new note",
+            edit_note: "Edit Note",
             password_required: "Password is required for encryption",
             no_note_in_url: "No note found in URL",
             invalid_utf8: "Decrypted data is not valid UTF-8",
@@ -112,6 +116,8 @@ pub fn get_translations(lang: Language) -> Translations {
             your_note_title: "Tu Nota",
             error_title: "Error",
             loading: "Cargando nota...",
+            create_new_note: "Crear una nueva nota",
+            edit_note: "Editar Nota",
             password_required: "Se requiere contraseña para el cifrado",
             no_note_in_url: "No se encontró nota en la URL",
             invalid_utf8: "Los datos descifrados no son UTF-8 válidos",
@@ -144,6 +150,8 @@ pub fn get_translations(lang: Language) -> Translations {
             your_note_title: "Ваша Заметка",
             error_title: "Ошибка",
             loading: "Загрузка заметки...",
+            create_new_note: "Создать новую заметку",
+            edit_note: "Редактировать Заметку",
             password_required: "Для шифрования требуется пароль",
             no_note_in_url: "Заметка не найдена в URL",
             invalid_utf8: "Расшифрованные данные не являются допустимым UTF-8",

rust/cryptonote/src/i18n.rs

@@ -1,8 +1,5 @@
-// The dioxus prelude contains a ton of common items used in dioxus apps. It's a good idea to import wherever you
-// need dioxus
 use dioxus::prelude::*;
-
-use views::{Home, Navbar, View};
+use views::{Home, Navbar, Share, View};
 
 mod components;
 mod crypto;
@@ -19,39 +16,44 @@ enum Route {
         Home {},
         #[route("/view")]
         View {},
+        #[route("/share")]
+        Share {},
 }
 
-// We can import assets in dioxus with the `asset!` macro. This macro takes a path to an asset relative to the crate root.
-// The macro returns an `Asset` type that will display as the path to the asset in the browser or a local path in desktop bundles.
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 
 fn main() {
-    // The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature
-    // you have enabled
     dioxus::launch(App);
 }
 
-/// App is the main component of our app. Components are the building blocks of dioxus apps. Each component is a function
-/// that takes some props and returns an Element. In this case, App takes no props because it is the root of our app.
-///
-/// Components should be annotated with `#[component]` to support props, better error messages, and autocomplete
+#[derive(Clone, Debug)]
+pub struct AppContext {
+    pub content: Option<String>,
+    pub password: String,
+    pub cipher: Option<crypto::CipherType>,
+    pub share_url: Option<String>,
+    pub qr_code: Option<String>,
+}
+
 #[component]
 fn App() -> Element {
     let language =
         use_signal(|| i18n::detect_browser_language());
 
+    let app_context = use_signal(|| AppContext {
+        content: None,
+        password: String::new(),
+        cipher: None,
+        share_url: None,
+        qr_code: None,
+    });
+
     use_context_provider(|| language);
+    use_context_provider(|| app_context);
 
-    // The `rsx!` macro lets us define HTML inside of rust. It expands to an Element with all of our HTML inside.
-    // The `rsx!` macro lets us define HTML inside of rust. It expands to an Element with all of our HTML inside.
     rsx! {
-        // In addition to element and text (which we will see later), rsx can contain other components. In this case,
-        // we are using the `document::Link` component to add a link to our favicon and main CSS file into the head of our app.
         document::Link { rel: "icon", href: FAVICON }
         document::Link { rel: "stylesheet", href: asset!("/assets/bare.min.css") }
-
-        // The router component renders the route enum we defined above. It will handle synchronization of the URL and render
-        // the layouts and components for the active route.
         Router::<Route> {}
     }
 }

rust/cryptonote/src/main.rs

@@ -4,36 +4,49 @@ use crate::encoding::{
 };
 use crate::i18n::{Language, get_translations};
 use dioxus::prelude::*;
+use dioxus_router::prelude::navigator;
 
 #[component]
 pub fn Home() -> Element {
     let language = use_context::<Signal<Language>>();
     let t = get_translations(language());
+    let nav = navigator();
+    let mut app_context =
+        use_context::<Signal<crate::AppContext>>();
 
     let mut note_text = use_signal(|| String::new());
     let mut encryption =
         use_signal(|| Option::<CipherType>::None);
     let mut password = use_signal(|| String::new());
-    let mut generated_url =
-        use_signal(|| Option::<String>::None);
-    let mut qr_code_svg =
-        use_signal(|| Option::<String>::None);
     let mut error_message =
         use_signal(|| Option::<String>::None);
 
+    use_effect(move || {
+        let ctx = app_context.read();
+        if let Some(content) = &ctx.content {
+            note_text.set(content.clone());
+        }
+        if !ctx.password.is_empty() {
+            password.set(ctx.password.clone());
+        }
+        if let Some(cipher) = ctx.cipher {
+            encryption.set(Some(cipher));
+        }
+    });
+
     let generate_note = move |_| {
         let t = get_translations(language());
         error_message.set(None);
-        generated_url.set(None);
-        qr_code_svg.set(None);
 
         let note_content = note_text.read().clone();
         let enc_option = encryption.read().clone();
+        let pwd = password.read().clone();
 
         let note_data = match enc_option {
-            None => NoteData::PlainText(note_content),
+            None => {
+                NoteData::PlainText(note_content.clone())
+            }
             Some(cipher) => {
-                let pwd = password.read().clone();
                 if pwd.is_empty() {
                     error_message.set(Some(
                         t.password_required.to_string(),
@@ -57,28 +70,33 @@ pub fn Home() -> Element {
             }
         };
 
-        let base_url = web_sys::window()
-            .and_then(|w| w.location().href().ok())
-            .unwrap_or_else(|| {
-                "http://localhost:8080".to_string()
-            })
-            .split('#')
-            .next()
-            .unwrap_or("http://localhost:8080")
-            .to_string()
-            + "view";
-
-        match build_url(&base_url, &note_data) {
-            Ok(url) => {
-                match generate_qr_code(&url) {
-                    Ok(svg) => qr_code_svg.set(Some(svg)),
+        if let Some(window) = web_sys::window() {
+            if let Ok(origin) = window.location().origin() {
+                let view_url = format!("{}/view", origin);
+                match build_url(&view_url, &note_data) {
+                    Ok(url) => match generate_qr_code(&url)
+                    {
+                        Ok(qr) => {
+                            app_context.set(
+                                crate::AppContext {
+                                    content: Some(
+                                        note_content,
+                                    ),
+                                    password: pwd,
+                                    cipher: enc_option,
+                                    share_url: Some(url),
+                                    qr_code: Some(qr),
+                                },
+                            );
+
+                            nav.push("/share");
+                        }
+                        Err(e) => error_message
+                            .set(Some(e.localized(&t))),
+                    },
                     Err(e) => error_message
                         .set(Some(e.localized(&t))),
                 }
-                generated_url.set(Some(url));
-            }
-            Err(e) => {
-                error_message.set(Some(e.localized(&t)))
             }
         }
     };
@@ -158,33 +176,5 @@ pub fn Home() -> Element {
                 }
             }
         }
-
-
-        if let Some(url) = generated_url() {
-            section {
-                h2 { "{t.share_title}" }
-                div {
-                    input {
-                        r#type: "text",
-                        readonly: true,
-                        value: "{url}",
-                        onclick: move |_| {
-                            if let Some(window) = web_sys::window() {
-                                let clipboard = window.navigator().clipboard();
-                                let _ = clipboard.write_text(&url);
-                            }
-                        },
-                    }
-                    p { "{t.click_to_copy}" }
-                }
-
-                if let Some(svg) = qr_code_svg() {
-                    figure {
-                        h3 { "{t.qr_code}" }
-                        div { dangerous_inner_html: "{svg}" }
-                    }
-                }
-            }
-        }
     }
 }

rust/cryptonote/src/views/home.rs

@@ -1,17 +1,9 @@
-//! The views module contains the components for all Layouts and Routes for our app. Each layout and route in our [`Route`]
-//! enum will render one of these components.
-//!
-//!
-//! The [`Home`] and [`Blog`] components will be rendered when the current route is [`Route::Home`] or [`Route::Blog`] respectively.
-//!
-//!
-//! The [`Navbar`] component will be rendered on all pages of our app since every page is under the layout. The layout defines
-//! a common wrapper around all child routes.
-
 mod home;
 mod navbar;
+mod share;
 mod view;
 
 pub use home::Home;
 pub use navbar::Navbar;
+pub use share::Share;
 pub use view::View;

rust/cryptonote/src/views/mod.rs

@@ -1,18 +1,35 @@
 use crate::Route;
-use crate::i18n::{Language, get_translations};
+use crate::i18n::Language;
 use dioxus::prelude::*;
+use dioxus_router::prelude::navigator;
 
 #[component]
 pub fn Navbar() -> Element {
     let mut language = use_context::<Signal<Language>>();
-    let _t = get_translations(language());
+    let mut app_context =
+        use_context::<Signal<crate::AppContext>>();
+    let nav = navigator();
 
     rsx! {
         nav {
             label {
                 input { r#type: "checkbox" }
                 header {
-                    Link { to: Route::Home {}, "🔐 Cryptonote" }
+                    a {
+                        href: "#",
+                        onclick: move |_| {
+                            app_context
+                                .set(crate::AppContext {
+                                    content: None,
+                                    password: String::new(),
+                                    cipher: None,
+                                    share_url: None,
+                                    qr_code: None,
+                                });
+                            nav.push("/");
+                        },
+                        "🔐 Cryptonote"
+                    }
                 }
                 ul {
                     li { class: if language() == Language::English { "selected" },