Initial work for form validation

app/index.html

@@ -7,6 +7,7 @@
   <title>Hello World!</title>
 
   <link data-trunk rel="scss" href="index.scss" />
+  <link data-trunk rel="inline" href="script.js" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">

app/script.js

@@ -1,4 +1,3 @@
-function do_link(href) {
+function setLocation(href) {
     window.location = href;
-    window.location.reload();
 }

app/src/lib.rs

@@ -3,6 +3,25 @@ use sycamore::prelude::*;
 use sycamore_router::{
     HistoryIntegration, Route, Router, RouterProps, StaticRouter, StaticRouterProps,
 };
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = console)]
+    fn log(s: &str);
+}
+
+macro_rules! wasm_import {
+    ($($tt:tt)*) => {
+        #[wasm_bindgen]
+        extern "C" {
+            #[wasm_bindgen]
+            pub fn $($tt)*;
+        }
+    }
+}
+
+wasm_import!(setLocation(href: &str));
 
 #[derive(PartialEq, Eq, Debug, Default, Clone, Serialize, Deserialize)]
 pub struct Issue {
@@ -14,12 +33,22 @@ pub struct Issue {
     pub timestamp: u64,
 }
 
+#[derive(PartialEq, Eq, Debug, Default, Clone, Serialize, Deserialize)]
+pub struct PartialIssue {
+    pub repo: String,
+    pub author: String,
+    pub title: String,
+    pub desc: String,
+}
+
 #[derive(Route, Clone)]
 pub enum AppRoutes {
     #[to("/")]
     Index,
     #[to("/issue/<index>")]
     IssueDetail(i64),
+    #[to("/add_issue")]
+    IssueCreate,
     #[not_found]
     NotFound,
 }
@@ -30,12 +59,18 @@ fn switch<G: Html>(route: ReadSignal<AppRoutes>) -> View<G> {
             (match route.get().as_ref() {
                 AppRoutes::Index => view! {
                     h1(class="text-align-center") { "Bugspray" }
+                    a(href="/add_issue") { "+ New Issue" }
                     HomeScreen()
                 },
                 AppRoutes::IssueDetail(index) => view! {
                     h1(class="text-align-center") { "Bugspray" }
+                    a(href="/add_issue") { "+ New Issue" }
                     IssueDetail(*index)
                 },
+                AppRoutes::IssueCreate => view! {
+                    h1(class="text-align-center") { "Bugspray" }
+                    IssueCreate()
+                },
                 _ => view! {
                     h1(class="text-align-center") { "Bugspray" }
                     "404 Not Found"
@@ -80,6 +115,85 @@ pub fn home_screen() -> View<G> {
     }
 }
 
+#[component(IssueCreate<G>)]
+pub fn issue_create() -> View<G> {
+    let repo = Signal::new(String::new());
+    let author = Signal::new(String::new());
+    let title = Signal::new(String::new());
+    let desc = Signal::new(String::new());
+
+    let error = Signal::new(String::new());
+
+    let on_click = cloned!((repo, author, title, desc) => move |_| {
+        let repo = (*repo.get()).clone();
+        let author = (*author.get()).clone();
+        let title = (*title.get()).clone();
+        let desc = (*desc.get()).clone();
+
+        let error = String::new();
+
+        if repo == "" {
+
+        }
+
+        let issue = PartialIssue {
+            repo,
+            author,
+            title,
+            desc
+        };
+
+        let sered = serde_json::to_string(&issue).unwrap();
+
+        wasm_bindgen_futures::spawn_local(async move {
+            let resp = reqwasm::http::Request::post("/api/add_issue")
+                .body(sered)
+                .header("Content-Type", "application/json")
+                .send()
+                .await
+                .unwrap()
+                .text()
+                .await
+                .unwrap();
+
+            let formatted = format!("/issue/{resp}");
+            setLocation(&formatted);
+        });
+    });
+
+    view! {
+        div(class="card") {
+            a(href="/") { button { "<<<" } }
+            label { "repo:"
+                // TODO: Fetch a list of repos from gitea or something
+                input(placeholder="karx/bugspray", bind:value=repo)
+            }
+            label {
+                "Your username:"
+                input(placeholder="coolguy123", bind:value=author)
+            }
+            label {
+                "Title:"
+                input(bind:value=title)
+            }
+            label {
+                "Description:"
+                textarea(bind:value=desc)
+            }
+            (if *error.clone().get() == "" {
+                view! {}
+            } else {
+                view! {
+                    p(style="color: red") { "Invalid form input. Make sure none of the inputs are empty." }
+                }
+            })
+            div(style="justify-content: right") {
+                button(on:click=on_click) { "Submit" }
+            }
+        }
+    }
+}
+
 #[component(IssueDetail<G>)]
 pub fn issue_detail(index: i64) -> View<G> {
     let issue: Signal<Issue> = Signal::new(Issue::default());