Viewing ticket by ID

This is now possible by going to /tickets/{id}

backend/src/cookie/validation.rs

@@ -12,7 +12,11 @@ use axum_extra::extract::CookieJar;
 use jsonwebtoken::DecodingKey;
 use serde_json::json;
 
-use crate::{AppState, cookie::jwt::decode_token, models::LoginModel};
+use crate::{
+    AppState,
+    cookie::jwt::decode_token,
+    models::{LoginScheme, User},
+};
 
 pub async fn validate_token(
     cookies: CookieJar,
@@ -59,7 +63,7 @@ pub async fn validate_token(
         (StatusCode::UNAUTHORIZED, Json(error))
     })?;
 
-    let user = sqlx::query_as::<_, LoginModel>(r#"SELECT * FROM users WHERE id = $1"#)
+    let user = sqlx::query_as::<_, User>(r#"SELECT * FROM users WHERE id = $1"#)
         .bind(uuid)
         .fetch_optional(&data.db)
         .await

backend/src/env.rs

@@ -2,18 +2,18 @@
 pub struct Env {
     pub db_url: String,
     pub token_secret: String,
-    pub origin: String
+    pub origin: String,
 }
 
 impl Env {
     pub fn load() -> Env {
         let db_url = std::env::var("DATABASE_URL").expect("DATABASE_URL must be set");
         let token_secret = std::env::var("TOKEN_SECRET").expect("TOKEN_SECRET must be set");
-        let origin = std::env::var("ORIGIN").expect("ORIGIN must be set")
+        let origin = std::env::var("ORIGIN").expect("ORIGIN must be set");
         Env {
             db_url,
             token_secret,
-            origin
+            origin,
         }
     }
 }

frontend/Cargo.lock

@@ -2,6 +2,21 @@
 # It is not intended for manual editing.
 version = 4
 
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "autocfg"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+
 [[package]]
 name = "bincode"
 version = "1.3.3"
@@ -23,12 +38,36 @@ version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
 
+[[package]]
+name = "cc"
+version = "1.2.61"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d16d90359e986641506914ba71350897565610e87ce0ad9e6f28569db3dd5c6d"
+dependencies = [
+ "find-msvc-tools",
+ "shlex",
+]
+
 [[package]]
 name = "cfg-if"
 version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
 
+[[package]]
+name = "chrono"
+version = "0.4.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c673075a2e0e5f4a1dde27ce9dee1ea4558c7ffe648f576438a20ca1d2acc4b0"
+dependencies = [
+ "iana-time-zone",
+ "js-sys",
+ "num-traits",
+ "serde",
+ "wasm-bindgen",
+ "windows-link",
+]
+
 [[package]]
 name = "console_error_panic_hook"
 version = "0.1.7"
@@ -39,12 +78,24 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "core-foundation-sys"
+version = "0.8.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
+
 [[package]]
 name = "equivalent"
 version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
 
+[[package]]
+name = "find-msvc-tools"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -64,12 +115,16 @@ dependencies = [
 name = "frontend"
 version = "0.1.0"
 dependencies = [
+ "chrono",
+ "gloo 0.12.0",
  "gloo-net 0.7.0",
  "serde",
+ "serde_json",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
  "yew",
+ "yew-router",
 ]
 
 [[package]]
@@ -167,17 +222,36 @@ version = "0.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d15282ece24eaf4bd338d73ef580c6714c8615155c4190c781290ee3fa0fd372"
 dependencies = [
- "gloo-console",
+ "gloo-console 0.3.0",
- "gloo-dialogs",
+ "gloo-dialogs 0.2.0",
- "gloo-events",
+ "gloo-events 0.2.0",
- "gloo-file",
+ "gloo-file 0.3.0",
- "gloo-history",
+ "gloo-history 0.2.2",
  "gloo-net 0.5.0",
- "gloo-render",
+ "gloo-render 0.2.0",
- "gloo-storage",
+ "gloo-storage 0.3.0",
- "gloo-timers",
+ "gloo-timers 0.3.0",
  "gloo-utils 0.2.0",
- "gloo-worker",
+ "gloo-worker 0.5.0",
+]
+
+[[package]]
+name = "gloo"
+version = "0.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc13cc21c3835347855fd83900414d94716adc1e332f09f7fba56f21be127214"
+dependencies = [
+ "gloo-console 0.4.0",
+ "gloo-dialogs 0.3.0",
+ "gloo-events 0.3.0",
+ "gloo-file 0.4.0",
+ "gloo-history 0.3.0",
+ "gloo-net 0.7.0",
+ "gloo-render 0.3.0",
+ "gloo-storage 0.4.0",
+ "gloo-timers 0.4.0",
+ "gloo-utils 0.3.0",
+ "gloo-worker 0.6.0",
 ]
 
 [[package]]
@@ -193,6 +267,19 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-console"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f1d5cec0b97edb53f21221f799c659cef3764ad5a00eca52950eb9b902028ba"
+dependencies = [
+ "gloo-utils 0.3.0",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-dialogs"
 version = "0.2.0"
@@ -203,6 +290,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-dialogs"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "45618929b7022bb49903b958b5b7af1d4fb58fbd99712926d91641fe582f3d55"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-events"
 version = "0.2.0"
@@ -213,13 +310,36 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-events"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8c6a94fa8cd88bea0babf8a27fe9abbcdece831fd1c3c84dd5c231fab4685ec7"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-file"
 version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
 dependencies = [
- "gloo-events",
+ "futures-channel",
+ "gloo-events 0.2.0",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "544a15ff6a3d5976bebc97380c8471ae14283bc71f4bb198d6c8cae64f411ab7"
+dependencies = [
+ "gloo-events 0.3.0",
  "js-sys",
  "wasm-bindgen",
  "web-sys",
@@ -232,7 +352,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "903f432be5ba34427eac5e16048ef65604a82061fe93789f2212afc73d8617d6"
 dependencies = [
  "getrandom",
- "gloo-events",
+ "gloo-events 0.2.0",
  "gloo-utils 0.2.0",
  "serde",
  "serde-wasm-bindgen",
@@ -242,6 +362,23 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-history"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f07f3d446931414cc92f4a1b6e631dfa233db2f96c887d5f72beeecd1b5db39c"
+dependencies = [
+ "getrandom",
+ "gloo-events 0.3.0",
+ "gloo-utils 0.3.0",
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_urlencoded",
+ "thiserror 2.0.18",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-net"
 version = "0.5.0"
@@ -294,6 +431,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-render"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f609333b9e38e43e74224410d6616e3ad773ed6fe14f53cd8a006d1bb25e108"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-storage"
 version = "0.3.0"
@@ -309,11 +456,38 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-storage"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e82ce7d41c6d821640a43726f6ff33c924795cc151b62e5a84d0c988c151c980"
+dependencies = [
+ "gloo-utils 0.3.0",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.18",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-timers"
 version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo-timers"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "482ce8a491a501da4cd806bd190275363d674f2845005c6ddbd5d3e1dd54495d"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -354,7 +528,7 @@ dependencies = [
  "bincode",
  "futures",
  "gloo-utils 0.2.0",
- "gloo-worker-macros",
+ "gloo-worker-macros 0.1.0",
  "js-sys",
  "pinned",
  "serde",
@@ -364,13 +538,44 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-worker"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "142478655c5d764e5168d3019510ea0c0885687a72ba74e90548bd74ae160a41"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros 0.2.0",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror 2.0.18",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-worker-macros"
 version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "956caa58d4857bc9941749d55e4bd3000032d8212762586fa5705632967140e7"
 dependencies = [
- "proc-macro-crate",
+ "proc-macro-crate 1.3.1",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "gloo-worker-macros"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3bf5ede96b06406bd74351a026f708ae196b7dc262077aee56e6ad7223e7466"
+dependencies = [
+ "proc-macro-crate 3.3.0",
  "proc-macro2",
  "quote",
  "syn 2.0.117",
@@ -409,6 +614,30 @@ dependencies = [
  "itoa",
 ]
 
+[[package]]
+name = "iana-time-zone"
+version = "0.1.65"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e31bc9ad994ba00e440a8aa5c9ef0ec67d5cb5e5cb0cc7f8b744a35b389cc470"
+dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "log",
+ "wasm-bindgen",
+ "windows-core",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "implicit-clone"
 version = "0.6.0"
@@ -463,12 +692,27 @@ version = "0.2.186"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68ab91017fe16c622486840e4c83c9a37afeff978bd239b5293d61ece587de66"
 
+[[package]]
+name = "log"
+version = "0.4.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
+
 [[package]]
 name = "memchr"
 version = "2.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
 
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "num_cpus"
 version = "1.17.0"
@@ -545,7 +789,16 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
 dependencies = [
  "once_cell",
- "toml_edit",
+ "toml_edit 0.19.15",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "edce586971a4dfaa28950c6f18ed55e0406c1ab88bbce2c6f6293a7aaba73d35"
+dependencies = [
+ "toml_edit 0.22.27",
 ]
 
 [[package]]
@@ -590,6 +843,12 @@ dependencies = [
  "proc-macro2",
 ]
 
+[[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -668,6 +927,12 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
 [[package]]
 name = "slab"
 version = "0.4.12"
@@ -774,7 +1039,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ba44a1b36f42a95bd21b5e4acc1468547f75a73e7cf619312408d1f74c7fb687"
 dependencies = [
  "futures",
- "gloo",
+ "gloo 0.11.0",
  "num_cpus",
  "once_cell",
  "pin-project",
@@ -798,7 +1063,18 @@ checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
 dependencies = [
  "indexmap",
  "toml_datetime",
- "winnow",
+ "winnow 0.5.40",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.22.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41fe8c660ae4257887cf66394862d21dbca4a6ddd26f04a3560410406a2f819a"
+dependencies = [
+ "indexmap",
+ "toml_datetime",
+ "winnow 0.7.15",
 ]
 
 [[package]]
@@ -838,6 +1114,12 @@ version = "1.0.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"
 
+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
 [[package]]
 name = "version_check"
 version = "0.9.5"
@@ -915,6 +1197,65 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "windows-core"
+version = "0.62.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8e83a14d34d0623b51dce9581199302a221863196a1dde71a7663a4c2be9deb"
+dependencies = [
+ "windows-implement",
+ "windows-interface",
+ "windows-link",
+ "windows-result",
+ "windows-strings",
+]
+
+[[package]]
+name = "windows-implement"
+version = "0.60.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "windows-interface"
+version = "0.59.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "windows-link"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
+
+[[package]]
+name = "windows-result"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7781fa89eaf60850ac3d2da7af8e5242a5ea78d1a11c49bf2910bb5a73853eb5"
+dependencies = [
+ "windows-link",
+]
+
+[[package]]
+name = "windows-strings"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7837d08f69c77cf6b07689544538e017c1bfcf57e34b4c0ff58e6c2cd3b37091"
+dependencies = [
+ "windows-link",
+]
+
 [[package]]
 name = "winnow"
 version = "0.5.40"
@@ -924,6 +1265,15 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "winnow"
+version = "0.7.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df79d97927682d2fd8adb29682d1140b343be4ac0f08fd68b7765d9c059d3945"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "yew"
 version = "0.23.0"
@@ -932,7 +1282,7 @@ checksum = "2c154fadfa97eabdd3f3b79345ceeb9c05ee8f13f76d3d881d17fba618bf558d"
 dependencies = [
  "console_error_panic_hook",
  "futures",
- "gloo",
+ "gloo 0.11.0",
  "implicit-clone",
  "indexmap",
  "js-sys",
@@ -963,6 +1313,36 @@ dependencies = [
  "syn 2.0.117",
 ]
 
+[[package]]
+name = "yew-router"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "870bd2a1aa6d608c0c789c122654e25f4927bb6bfe344cc0da3b630ac3c73260"
+dependencies = [
+ "gloo 0.11.0",
+ "js-sys",
+ "route-recognizer",
+ "serde",
+ "serde_urlencoded",
+ "tracing",
+ "urlencoding",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8399f1d134ab8e69abc7cded19f114621d520bd9c79c5a0f34091bf664d7325b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "zmij"
 version = "1.0.21"

frontend/Cargo.toml

@@ -15,5 +15,12 @@ yew = { version = "0.23", features = ["csr"] }
 serde = { version = "1.0.228", features = ["derive"] }
 wasm-bindgen = "0.2.118"
 wasm-bindgen-futures = "0.4.68"
-web-sys = { version = "0.3.95", features = ["Window", "Document", "Request", "Response", "Headers"] }
+web-sys = { version = "0.3.95", features = [
+  "Window","Document","Request","Response","Headers",
+  "SubmitEvent","InputEvent","HtmlInputElement","Event"
+] }
 gloo-net = "0.7.0"
+yew-router = "0.20.0"
+serde_json = "1.0.149"
+gloo = "0.12.0"
+chrono = { version = "0.4.44", features = ["serde"] }

frontend/src/lib.rs

@@ -1,20 +1,35 @@
+mod pages;
+use crate::pages::*;
 use yew::prelude::*;
+use yew_router::prelude::*;
 
-#[function_component]
+#[derive(Clone, PartialEq, Routable)]
-pub fn App() -> Html {
+enum Route {
-    let counter = use_state(|| 0);
+    #[at("/")]
-    let onclick = {
+    Home,
-        let counter = counter.clone();
+    #[at("/ticket")]
-        move |_| {
+    Ticket,
-            let value = *counter + 1;
+    #[at("/tickets/:id")]
-            counter.set(value);
+    TicketById { id: i32 },
-        }
+    #[not_found]
-    };
+    #[at("/404")]
+    NotFound,
+}
 
+fn switch(route: Route) -> Html {
+    match route {
+        Route::Home => html! { <basic_pages::Home/>},
+        Route::NotFound => html! { <basic_pages::NotFound/> },
+        Route::Ticket => html! { <ticket::SubmitTicket/> },
+        Route::TicketById { id } => html! { <ticket::ShowTicketByID id={id}/> },
+    }
+}
+
+#[component(App)]
+pub fn app() -> Html {
     html! {
-        <div>
+        <BrowserRouter>
-            <button {onclick}>{ "+1" }</button>
+            <Switch<Route> render={switch} />
-            <p>{ *counter }</p>
+        </BrowserRouter>
-        </div>
     }
 }

frontend/src/pages/basic_pages.rs

@@ -0,0 +1,30 @@
+use yew::prelude::*;
+
+#[component(Home)]
+pub fn home_component() -> Html {
+    let counter = use_state(|| 0);
+    let onclick = {
+        let counter = counter.clone();
+        move |_| {
+            let value = *counter + 1;
+            counter.set(value);
+        }
+    };
+
+    html! {
+        <div>
+            <button {onclick}>{ "+1" }</button>
+            <p>{ *counter }</p>
+        </div>
+    }
+}
+
+#[component(NotFound)]
+pub fn not_found_component() -> Html {
+    let message = "404 Not found";
+    html! {
+        <div>
+            <h1>{&message}</h1>
+        </div>
+    }
+}

frontend/src/pages/mod.rs

@@ -0,0 +1,2 @@
+pub mod basic_pages;
+pub mod ticket;

frontend/src/pages/ticket.rs

@@ -0,0 +1,213 @@
+use gloo_net::http::Request;
+use serde::{Deserialize, Serialize};
+use serde_json::json;
+use wasm_bindgen_futures::spawn_local;
+use yew::prelude::*;
+
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
+pub struct TicketCreateScheme {
+    pub category: String,
+    pub betreff: String,
+    pub description: String,
+    pub room: i16,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
+pub struct Ticket {
+    pub id: i32,
+    pub category: String,
+    pub betreff: String,
+    pub description: String,
+    pub room: i16,
+    pub status: String,
+    pub date: chrono::NaiveDateTime,
+    pub user_id: i16,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct TicketProps {
+    pub id: i32,
+}
+
+#[derive(Deserialize, Debug)]
+pub struct ApiError {
+    message: String,
+    status: String,
+}
+
+#[component(SubmitTicket)]
+pub fn submit_ticket_component() -> Html {
+    let category = use_state(|| "".to_string());
+    let betreff = use_state(|| "".to_string());
+    let description = use_state(|| "".to_string());
+    let room = use_state(|| 0i16);
+    let status = use_state(|| None::<String>);
+
+    let onsubmit = {
+        let category = category.clone();
+        let betreff = betreff.clone();
+        let description = description.clone();
+        let room = room.clone();
+        let status = status.clone();
+
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            let category = (*category).clone();
+            let betreff = (*betreff).clone();
+            let description = (*description).clone();
+            let room = *room;
+            let status = status.clone();
+
+            spawn_local(async move {
+                let payload = TicketCreateScheme {
+                    category,
+                    betreff,
+                    description,
+                    room,
+                };
+
+                let request = Request::post("http://localhost:8001/api/tickets/create")
+                    .json(&payload)
+                    .expect("Failed to build request");
+
+                match request.send().await {
+                    Ok(response) if response.status() == 200 => status.set(Some("Success".into())),
+                    Ok(response) => status.set(Some(format!("Error: {}", response.status()))),
+                    Err(err) => status.set(Some(format!("Network error: {}", err))),
+                }
+            });
+        })
+    };
+
+    let category_change = {
+        let category = category.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            category.set(input.value());
+        })
+    };
+
+    let betreff_change = {
+        let betreff = betreff.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            betreff.set(input.value());
+        })
+    };
+
+    let description_change = {
+        let description = description.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            description.set(input.value());
+        })
+    };
+
+    let room_change = {
+        let room = room.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            room.set(input.value().parse().unwrap_or(0));
+        })
+    };
+
+    html! {
+        <form {onsubmit}>
+            <label>{ "Betreff:" }
+                <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
+            </label>
+            <br/>
+            <label>{ "Beschreibung:" }
+                <input type="text" value={(*description).clone()} oninput={description_change}/>
+            </label>
+            <br/>
+            <label>{ "Kategorie:" }
+                <input type="text" value={(*category).clone()} oninput={category_change}/>
+            </label>
+            <br/>
+            <label>{ "Raum:" }
+                <input type="number" value={room.to_string()} oninput={room_change}/>
+            </label>
+            <br/>
+            <button type="submit">{ "Send" }</button>
+
+            {
+                if let Some(s) = &*status {
+                    html!{ <p>{ s }</p> }
+                } else {
+                    html!{}
+                }
+            }
+
+        </form>
+    }
+}
+
+#[component(ShowTicketByID)]
+pub fn show_ticket_by_id_component(props: &TicketProps) -> Html {
+    let ticket = use_state(|| None::<Ticket>);
+    let error = use_state(|| None::<String>);
+    let loading = use_state(|| false);
+    let id = props.id;
+
+    {
+        let ticket = ticket.clone();
+        let error = error.clone();
+        let loading = loading.clone();
+
+        use_effect_with(id, move |id_ref| {
+            loading.set(true);
+            let ticket = ticket.clone();
+            let error = error.clone();
+            let id = *id_ref;
+            spawn_local(async move {
+                let url = format!("http://localhost:8001/api/tickets/{}", id);
+                match Request::get(&url).send().await {
+                    Ok(response) => {
+                        let status = response.status();
+                        if status == 200 {
+                            match response.json::<Ticket>().await {
+                                Ok(t) => ticket.set(Some(t)),
+                                Err(err) => error.set(Some(format!("Parse error: {}", err))),
+                            }
+                        } else {
+                            match response.json::<ApiError>().await {
+                                Ok(ae) => error.set(Some(ae.message)),
+                                Err(_) => {
+                                    if let Ok(text) = response.text().await {
+                                        error.set(Some(text));
+                                    } else {
+                                        error.set(Some(format!("Server error: {}", status)));
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                }
+                loading.set(false);
+            });
+            || ()
+        });
+    }
+
+    if *loading {
+        html! {<p>{ "Loading" }</p>}
+    } else if let Some(e) = &*error {
+        html! { <p>{ format!("Error: {}", e) }</p> }
+    } else if let Some(t) = &*ticket {
+        html! {
+            <div>
+                <h1>{ format!("Ticket #{}", t.id) }</h1>
+                <p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
+                <p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
+                <p><strong>{ "Beschreibung: " }</strong>{ &t.description }</p>
+                <p><strong>{ "Raum: " }</strong>{ t.room }</p>
+                <p><strong>{ "Datum: " }</strong>{ &t.date }</p>
+                <p><strong>{ "Status: "}</strong>{ &t.status }</p>
+            </div>
+        }
+    } else {
+        html! { <p>{ "No ticket found." }</p> }
+    }
+}