schn33fuchs/ticketsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Compare commits

base: schn33fuchs/ticketsystem:a04c3cd8e2c59f8063258dc2ce0bb43695c3ecae
Branches Tags
schn33fuchs/ticketsystem:main schn33fuchs/ticketsystem:Silas schn33fuchs/ticketsystem:styles-nino schn33fuchs/ticketsystem:ticket_background schn33fuchs/ticketsystem:Fun-times
schn33fuchs/ticketsystem:Docs schn33fuchs/ticketsystem:Release
..
compare: schn33fuchs/ticketsystem:Fun-times
Branches Tags
schn33fuchs/ticketsystem:main schn33fuchs/ticketsystem:Silas schn33fuchs/ticketsystem:styles-nino schn33fuchs/ticketsystem:ticket_background schn33fuchs/ticketsystem:Fun-times
schn33fuchs/ticketsystem:Docs schn33fuchs/ticketsystem:Release
19 Commits
a04c3cd8e2 .. Fun-times
Author SHA1 Message Date
schn33fuchs 46ac5a7817 Docs update 2026-05-18 20:18:51 +02:00
schn33fuchs 3cca849bd2 Documentation update 
dequote and the count components are still missing
 2026-05-18 12:48:22 +02:00
schn33fuchs 9757e7c279 Some improvements 2026-05-16 19:49:08 +02:00
schn33fuchs 59e2240e78 Trunk 2026-05-16 19:39:04 +02:00
schn33fuchs 1d7ff6655c Fix 
Weekday bars now at the bottom of everything
 2026-05-16 19:38:38 +02:00
schn33fuchs b218b58729 favicon 2026-05-16 14:45:33 +02:00
schn33fuchs bea8ef4cd9 Styles 
Its more beautifull now
 2026-05-13 23:00:46 +02:00
schn33fuchs a23fe9be7c Simple Fix Popup 
There is a popup that tells the user simple ways to fix things and also
increments a counter if it worked
 2026-05-13 22:57:43 +02:00
schn33fuchs f8a89d820b Fun times 2026-05-13 22:03:32 +02:00
schn33fuchs af8efedf39 Styles better 2026-05-13 22:01:58 +02:00
schn33fuchs 5098ec8b99 Home networks 2026-05-13 22:01:48 +02:00
schn33fuchs dc7c87613a Funny counter 2026-05-13 22:01:39 +02:00
schn33fuchs 2c5458743c .gitignore 2026-05-13 16:59:10 +02:00
schn33fuchs cf24d6156c Small Fix 
Removed unneccesary things from archive
 2026-05-12 15:47:35 +02:00
schn33fuchs de2199e1c3 After merge fix 
Forgor a &&
 2026-05-11 21:23:08 +02:00
schn33fuchs 5199300856 Merge branch 'main' into styles-nino 2026-05-11 21:06:26 +02:00
schn33fuchs 289f83df3b Old logout look 
It's better
 2026-05-11 20:48:04 +02:00
schn33fuchs 928ca1de11 Improvements 
More styling
 2026-05-11 19:53:30 +02:00
schn33fuchs 10de47b911 Styling 
Copied Ninos styles with copilot
 2026-05-11 13:15:03 +02:00
59 changed files with 1770 additions and 2772 deletions
Expand all files Collapse all files
.dockerignore
-13
View File
@@ -1,13 +0,0 @@
target/
backend/target/
frontend/target/
frontend/dist/
frontend/node_modules/
dist/
.git/
.idea/
.env
.antigravitycli/
*.pdb
**/*.rs.bk
info ding video.mp4
.gitignore
-4
View File
@@ -26,7 +26,3 @@ frontend/node_modules/
# Added by cargo
/target
.antigravitycli/
.sqlx/
backend/.sqlx/
dist/
Cargo.lock
Generated
+6 -465
View File
@@ -2,12 +2,6 @@
# It is not intended for manual editing.
version = 4
[[package]]
name = "adler2"
version = "2.0.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
[[package]]
name = "allocator-api2"
version = "0.2.21"
@@ -29,12 +23,6 @@ version = "1.0.102"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
[[package]]
name = "anymap2"
version = "0.13.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
[[package]]
name = "argon2"
version = "0.5.3"
@@ -156,9 +144,7 @@ dependencies = [
"axum-extra",
"chrono",
"dotenv",
"hex",
"jsonwebtoken",
"rand",
"serde",
"serde_json",
"sqlx",
@@ -222,36 +208,18 @@ dependencies = [
"generic-array",
]
[[package]]
name = "boolinator"
version = "2.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
[[package]]
name = "bumpalo"
version = "3.20.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5d20789868f4b01b2f2caec9f5c4e0213b41e3e5702a50157d699ae31ced2fcb"
[[package]]
name = "bytemuck"
version = "1.25.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d6aedf8ae72766347502cf3cb4f41cf5e9cc37d28bee90f1fdaaae15f9cf9424"
[[package]]
name = "byteorder"
version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
[[package]]
name = "byteorder-lite"
version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8f1fe948ff07f4bd06c30984e69f5b4899c516a3ef74f34df92a2df2ab535495"
[[package]]
name = "bytes"
version = "1.11.1"
@@ -374,15 +342,6 @@ version = "2.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "217698eaf96b4a3f0bc4f3662aaa55bdf913cd54d7204591faa790070c6d0853"
[[package]]
name = "crc32fast"
version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9481c1c90cbf2ac953f07c8d4a58aa3945c425b7185c9154d67a65e4230da511"
dependencies = [
"cfg-if",
]
[[package]]
name = "crossbeam-queue"
version = "0.3.12"
@@ -614,15 +573,6 @@ version = "2.4.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9f1f227452a390804cdb637b74a86990f2a7d7ba4b7d5693aac9b4dd6defd8d6"
[[package]]
name = "fdeflate"
version = "0.3.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1e6853b52649d4ac5c0bd02320cddc5ba956bdb407c4b75a2c6b75bf51500f8c"
dependencies = [
"simd-adler32",
]
[[package]]
name = "ff"
version = "0.13.1"
@@ -645,16 +595,6 @@ version = "0.1.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
[[package]]
name = "flate2"
version = "1.1.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "843fba2746e448b37e26a819579957415c8cef339bf08564fe8b7ddbd959573c"
dependencies = [
"crc32fast",
"miniz_oxide",
]
[[package]]
name = "flume"
version = "0.11.1"
@@ -706,21 +646,17 @@ dependencies = [
name = "frontend"
version = "0.1.0"
dependencies = [
"base64",
"chrono",
"chrono-tz",
"dotenv",
"gloo 0.12.0",
"gloo-net 0.7.0",
"gloo-storage 0.4.0",
"qrcode-generator",
"serde",
"serde_json",
"theme",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
"yew 0.23.0",
"yew",
"yew-router",
]
@@ -859,44 +795,6 @@ dependencies = [
"wasip3",
]
[[package]]
name = "gloo"
version = "0.8.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
dependencies = [
"gloo-console 0.2.3",
"gloo-dialogs 0.1.1",
"gloo-events 0.1.2",
"gloo-file 0.2.3",
"gloo-history 0.1.5",
"gloo-net 0.3.1",
"gloo-render 0.1.1",
"gloo-storage 0.2.2",
"gloo-timers 0.2.6",
"gloo-utils 0.1.7",
"gloo-worker 0.2.1",
]
[[package]]
name = "gloo"
version = "0.10.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cd35526c28cc55c1db77aed6296de58677dbab863b118483a27845631d870249"
dependencies = [
"gloo-console 0.3.0",
"gloo-dialogs 0.2.0",
"gloo-events 0.2.0",
"gloo-file 0.3.0",
"gloo-history 0.2.2",
"gloo-net 0.4.0",
"gloo-render 0.2.0",
"gloo-storage 0.3.0",
"gloo-timers 0.3.0",
"gloo-utils 0.2.0",
"gloo-worker 0.4.0",
]
[[package]]
name = "gloo"
version = "0.11.0"
@@ -935,19 +833,6 @@ dependencies = [
"gloo-worker 0.6.0",
]
[[package]]
name = "gloo-console"
version = "0.2.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
dependencies = [
"gloo-utils 0.1.7",
"js-sys",
"serde",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-console"
version = "0.3.0"
@@ -974,16 +859,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-dialogs"
version = "0.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
dependencies = [
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-dialogs"
version = "0.2.0"
@@ -1004,16 +879,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-events"
version = "0.1.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
dependencies = [
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-events"
version = "0.2.0"
@@ -1034,18 +899,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-file"
version = "0.2.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
dependencies = [
"gloo-events 0.1.2",
"js-sys",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-file"
version = "0.3.0"
@@ -1071,22 +924,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-history"
version = "0.1.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
dependencies = [
"gloo-events 0.1.2",
"gloo-utils 0.1.7",
"serde",
"serde-wasm-bindgen 0.5.0",
"serde_urlencoded",
"thiserror 1.0.69",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-history"
version = "0.2.2"
@@ -1097,7 +934,7 @@ dependencies = [
"gloo-events 0.2.0",
"gloo-utils 0.2.0",
"serde",
"serde-wasm-bindgen 0.6.5",
"serde-wasm-bindgen",
"serde_urlencoded",
"thiserror 1.0.69",
"wasm-bindgen",
@@ -1114,55 +951,13 @@ dependencies = [
"gloo-events 0.3.0",
"gloo-utils 0.3.0",
"serde",
"serde-wasm-bindgen 0.6.5",
"serde-wasm-bindgen",
"serde_urlencoded",
"thiserror 2.0.18",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-net"
version = "0.3.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a66b4e3c7d9ed8d315fd6b97c8b1f74a7c6ecbbc2320e65ae7ed38b7068cc620"
dependencies = [
"futures-channel",
"futures-core",
"futures-sink",
"gloo-utils 0.1.7",
"http 0.2.12",
"js-sys",
"pin-project",
"serde",
"serde_json",
"thiserror 1.0.69",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "gloo-net"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8ac9e8288ae2c632fa9f8657ac70bfe38a1530f345282d7ba66a1f70b72b7dc4"
dependencies = [
"futures-channel",
"futures-core",
"futures-sink",
"gloo-utils 0.2.0",
"http 0.2.12",
"js-sys",
"pin-project",
"serde",
"serde_json",
"thiserror 1.0.69",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "gloo-net"
version = "0.5.0"
@@ -1205,16 +1000,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-render"
version = "0.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
dependencies = [
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-render"
version = "0.2.0"
@@ -1235,21 +1020,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-storage"
version = "0.2.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5d6ab60bf5dbfd6f0ed1f7843da31b41010515c745735c970e821945ca91e480"
dependencies = [
"gloo-utils 0.1.7",
"js-sys",
"serde",
"serde_json",
"thiserror 1.0.69",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-storage"
version = "0.3.0"
@@ -1280,16 +1050,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-timers"
version = "0.2.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
dependencies = [
"js-sys",
"wasm-bindgen",
]
[[package]]
name = "gloo-timers"
version = "0.3.0"
@@ -1312,19 +1072,6 @@ dependencies = [
"wasm-bindgen",
]
[[package]]
name = "gloo-utils"
version = "0.1.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "037fcb07216cb3a30f7292bd0176b050b7b9a052ba830ef7d5d65f6dc64ba58e"
dependencies = [
"js-sys",
"serde",
"serde_json",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "gloo-utils"
version = "0.2.0"
@@ -1351,42 +1098,6 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-worker"
version = "0.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
dependencies = [
"anymap2",
"bincode",
"gloo-console 0.2.3",
"gloo-utils 0.1.7",
"js-sys",
"serde",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "gloo-worker"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "76495d3dd87de51da268fa3a593da118ab43eb7f8809e17eb38d3319b424e400"
dependencies = [
"bincode",
"futures",
"gloo-utils 0.2.0",
"gloo-worker-macros 0.1.0",
"js-sys",
"pinned",
"serde",
"thiserror 1.0.69",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "gloo-worker"
version = "0.5.0"
@@ -1555,12 +1266,6 @@ dependencies = [
"windows-sys 0.61.2",
]
[[package]]
name = "html-escape"
version = "0.2.14"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "46c1ff2d1cbf39efe5af0900ced8a069b5e61557a17544eb0c4a50239937389e"
[[package]]
name = "http"
version = "0.2.12"
@@ -1785,29 +1490,6 @@ dependencies = [
"icu_properties",
]
[[package]]
name = "image"
version = "0.25.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "85ab80394333c02fe689eaf900ab500fbd0c2213da414687ebf995a65d5a6104"
dependencies = [
"bytemuck",
"byteorder-lite",
"moxcms",
"num-traits",
"png",
]
[[package]]
name = "implicit-clone"
version = "0.4.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f8a9aa791c7b5a71b636b7a68207fdebf171ddfc593d9c8506ec4cbc527b6a84"
dependencies = [
"implicit-clone-derive",
"indexmap",
]
[[package]]
name = "implicit-clone"
version = "0.6.0"
@@ -1985,16 +1667,6 @@ version = "0.3.17"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
[[package]]
name = "miniz_oxide"
version = "0.8.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
dependencies = [
"adler2",
"simd-adler32",
]
[[package]]
name = "mio"
version = "1.2.0"
@@ -2006,16 +1678,6 @@ dependencies = [
"windows-sys 0.61.2",
]
[[package]]
name = "moxcms"
version = "0.8.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "bb85c154ba489f01b25c0d36ae69a87e4a1c73a72631fc6c0eb6dde34a73e44b"
dependencies = [
"num-traits",
"pxfm",
]
[[package]]
name = "native-tls"
version = "0.2.18"
@@ -2332,19 +1994,6 @@ version = "0.2.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b4596b6d070b27117e987119b4dac604f3c58cfb0b191112e24771b2faeac1a6"
[[package]]
name = "png"
version = "0.18.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "60769b8b31b2a9f263dae2776c37b1b28ae246943cf719eb6946a1db05128a61"
dependencies = [
"bitflags",
"crc32fast",
"fdeflate",
"flate2",
"miniz_oxide",
]
[[package]]
name = "potential_utf"
version = "0.1.5"
@@ -2440,46 +2089,6 @@ dependencies = [
"unicode-ident",
]
[[package]]
name = "prokio"
version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "03b55e106e5791fa5a13abd13c85d6127312e8e09098059ca2bc9b03ca4cf488"
dependencies = [
"futures",
"gloo 0.8.1",
"num_cpus",
"once_cell",
"pin-project",
"pinned",
"tokio",
"tokio-stream",
"wasm-bindgen-futures",
]
[[package]]
name = "pxfm"
version = "0.1.30"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d55d956fa96f5ec02be2e13af0e20391a5aa83d6a074e3ad368959d0fab299ea"
[[package]]
name = "qrcode-generator"
version = "5.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "faf0051849b5465059b75f59d388c7318aad6554701b74ecf02afc2573b0306c"
dependencies = [
"html-escape",
"image",
"qrcodegen",
]
[[package]]
name = "qrcodegen"
version = "1.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4339fc7a1021c9c1621d87f5e3505f2805c8c105420ba2f2a4df86814590c142"
[[package]]
name = "quote"
version = "1.0.45"
@@ -2681,17 +2290,6 @@ dependencies = [
"serde_derive",
]
[[package]]
name = "serde-wasm-bindgen"
version = "0.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
dependencies = [
"js-sys",
"serde",
"wasm-bindgen",
]
[[package]]
name = "serde-wasm-bindgen"
version = "0.6.5"
@@ -2810,12 +2408,6 @@ dependencies = [
"rand_core",
]
[[package]]
name = "simd-adler32"
version = "0.3.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3a219298ac11a56ea9a6d2120044824d6f01aeb034955e7af7bc16858527deea"
[[package]]
name = "simple_asn1"
version = "0.6.4"
@@ -3145,17 +2737,6 @@ dependencies = [
"windows-sys 0.61.2",
]
[[package]]
name = "theme"
version = "0.0.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d5379f4c4eb851af44d4d818ba43fac8cff83e9b8e624aedc8a3346ca45065fe"
dependencies = [
"serde",
"web-sys",
"yew 0.21.0",
]
[[package]]
name = "thiserror"
version = "1.0.69"
@@ -3878,31 +3459,6 @@ version = "0.6.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1ffae5123b2d3fc086436f8834ae3ab053a283cfac8fe0a0b8eaae044768a4c4"
[[package]]
name = "yew"
version = "0.21.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac"
dependencies = [
"console_error_panic_hook",
"futures",
"gloo 0.10.0",
"implicit-clone 0.4.9",
"indexmap",
"js-sys",
"prokio",
"rustversion",
"serde",
"slab",
"thiserror 1.0.69",
"tokio",
"tracing",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
"yew-macro 0.21.0",
]
[[package]]
name = "yew"
version = "0.23.0"
@@ -3912,7 +3468,7 @@ dependencies = [
"console_error_panic_hook",
"futures",
"gloo 0.11.0",
"implicit-clone 0.6.0",
"implicit-clone",
"indexmap",
"js-sys",
"rustversion",
@@ -3925,22 +3481,7 @@ dependencies = [
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
"yew-macro 0.23.0",
]
[[package]]
name = "yew-macro"
version = "0.21.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "02fd8ca5166d69e59f796500a2ce432ff751edecbbb308ca59fd3fe4d0343de2"
dependencies = [
"boolinator",
"once_cell",
"prettyplease",
"proc-macro-error",
"proc-macro2",
"quote",
"syn 2.0.117",
"yew-macro",
]
[[package]]
@@ -3972,7 +3513,7 @@ dependencies = [
"urlencoding",
"wasm-bindgen",
"web-sys",
"yew 0.23.0",
"yew",
"yew-router-macro",
]
LICENSE.md
-21
View File
@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2026 Silas Raffauf
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
README.cargo.md
-63
View File
@@ -1,63 +0,0 @@
# Ticketsystem
A ticket system with backend and frontend components.
## Components
- **[Backend](../backend/index.html)** - The server-side API and business logic
- **[Frontend](../frontend/index.html)** - The client-side user interface
## Usage
### Prerequisite
#### IMPORTANT
Before compiling the programm you have to install the rust toolchain.
For a guide to do this, visit: <https://rust-lang.org/tools/install/>
A instance of a postgresql has to be accessible to the backend. Place the connection details in a .env file into the variable `DATABASE_URL`
To setup the tables you either can create them manually by following the sheme specified in `backend/migrations` or apply them with sqlx
To install sqlx run `cargo install sqlx` and then in the `backend` directory run `sqlx migrate run` to create the tables
### Environment
The .env file has to be in the root directory of the project or in the same directory as the executable
Keys:
`DATABASE_URL`: Specifying the url and connection details for the database
`TOKEN_SECRET`: The JWT token secret, can theoretically be anything but is more secure when generated with a tool, e.g: <https://jwtsecrets.com/>
`ORIGIN`: The origin of the frontend, used for CORS rules
`BACKEND_PORT`: The port which the backend should use to run on
### Backend
The backend can either be run via `cargo run --release` or `cargo build --release` using the correct target architecture, e.g. 'x86_64-unknown-linux-gnu',
the executable will be placed in the `target/release` directory and can then be run via any method
### Frontend
The HTML code for the frontend can be generated by using `trunk build`. The resulting files will end up in the `frontend/dist` directory and can be served over any webserver supporting wasm
#### NOTE
To install trunk run `cargo install trunk`
#### IMPORTANT
Requests from the frontend to /api/* have to be proxied to the Backend
Example with nginx and frontend running at localhost:8000 and backend at localhost:9000 :
```nginx
location /api/ {
proxy_pass http://localhost:9000/api;
}
```
## Usage of AI
Github Copilot CLI was used with the model Claude Haiku 4.5 to generate most of the documentation
Google Antigravity generated the Sequence Diagrams
### Prompt
Generate comments for cargo doc describing the indivilual components and create links to relevant structs, functions etc.
Generate a sequence diagramm in @[README.md] behind the class diagramms
### Output
The comments with `///` or `//!`
I've gone over it and modified it to my needs and opinions
The general structure sequence diagrams above. I've modified and fixed any errors and discrepancys
README.md
+2 -386
View File
@@ -4,389 +4,5 @@ A ticket system with backend and frontend components.
## Components
- **[Backend]** - The server-side API and business logic
- **[Frontend]** - The client-side user interface
## Usage
### Prerequisite
> [!IMPORTANT]
> Before compiling the programm you have to install the rust toolchain.
> For a guide to do this, visit: <https://rust-lang.org/tools/install/>
A instance of a postgresql has to be accessible to the backend. Place the connection details in a .env file into the variable `DATABASE_URL`
To setup the tables you either can create them manually by following the sheme specified in `backend/migrations` or apply them with sqlx
To install sqlx run `cargo install sqlx` and then in the `backend` directory run `sqlx migrate run` to create the tables
### Environment
The .env file has to be in the root directory of the project or in the same directory as the executable
Keys:
`DATABASE_URL`: Specifying the url and connection details for the database
`TOKEN_SECRET`: The JWT token secret, can theoretically be anything but is more secure when generated with a tool, e.g: <https://jwtsecrets.com/>
`ORIGIN`: The origin of the frontend, used for CORS rules
`BACKEND_PORT`: The port which the backend should use to run on
### Backend
The backend can either be run via `cargo run --release` or `cargo build --release` using the correct target architecture, e.g. 'x86_64-unknown-linux-gnu',
the executable will be placed in the `target/release` directory and can then be run via any method
Alternatively download the executable from the 'Releases' Page for your device
### Frontend
The HTML code for the frontend can be generated by using `trunk build`. The resulting files will end up in the `frontend/dist` directory and can be served over any webserver supporting WASM
Alternatively download the fontend files from the 'Releases' Page and serve them via any webserver supporting WASM
> [!NOTE]
> To install trunk run `cargo install trunk`
> [!IMPORTANT]
> Requests from the frontend to /api/* have to be proxied to the Backend
> Example with nginx and frontend running at localhost:8000 and backend at localhost:9000 :
> ```nginx
> location /api/ {
> proxy_pass http://localhost:9000/api;
> }
> ```
### Example
[![Watch the video]()](https://git.raffauf-clan.de/schn33fuchs/ticketsystem/raw/branch/main/info%20ding%20video.mp4)
## Diagrams
### Class Diagramm
#### Backend
```mermaid
classDiagram
class Error {
+status: &'static str
+message: String
}
class TicketResponse {
+id: i32
+category: String
+betreff: String
+description: String
+room: i16
+status: String
+date: chrono::DateTime~chrono::Utc~
+user_id: i16
+user_first_name: String
+user_last_name: String
}
class User {
+id: i16
+last_name: String
+first_name: String
+username: String
+is_admin: bool
+pwd: String
}
class TicketCreateScheme {
+category: String
+betreff: String
+description: String
+room: i16
}
class TicketUpdateScheme {
+status: String
}
class UserUpdateScheme {
+id: i16
+first_name: String
+last_name: String
+username: String
+make_admin: bool
+new_pwd: String
}
class UserCreateScheme {
+first_name: String
+last_name: String
+username: String
+is_admin: bool
+pwd: String
}
class LoginScheme {
+username: String
+pwd: String
}
class FilteredUser {
+id: i16
+first_name: String
+last_name: String
+username: String
+is_admin: bool
}
class Claims {
+sub: String
+issued: usize
+expires: usize
}
class AppState {
-db: PgPool
-env: Env
}
class Env {
+db_url: String
+token_secret: String
+origin: String
+backend_port: String
+load() Env
}
AppState --> Env
Env ..> Env
```
#### Frontend
```mermaid
classDiagram
class TicketCreateScheme {
+category: String
+betreff: String
+description: String
+room: i16
}
class TicketUpdateScheme {
+status: String
}
class Ticket {
+id: i32
+category: String
+betreff: String
+description: String
+room: i16
+status: String
+date: chrono::DateTime~chrono::Utc~
+user_id: i16
+user_first_name: String
+user_last_name: String
}
class TicketProps {
+id: i32
}
class ActiveUser {
+id: Option~i16~
+is_admin: bool
}
class ApiError {
-message: String
-_status: String
}
class SidebarExpandState {
+ticket_open: bool
+users_open: bool
}
class Default {
+default() Self
}
class SidebarState {
+expand: SidebarExpandState
+set_tickets_open: Callback~bool~
+toggle_tickets: Callback~()~
+set_users_open: Callback~bool~
+toggle_users: Callback~()~
+new(expand:SidebarExpandState, set_tickets_open:Callback~bool~, toggle_tickets:Callback~()~, set_users_open:Callback~bool~, toggle_users:Callback~()~) Self
}
class SidebarProps {
+children: Children
}
class TicketPartial {
-date: DateTime~Utc~
-room: i16
-user_id: i16
}
class UserPartial {
-id: i16
-first_name: String
-last_name: String
}
class RoomTotalsProps {
-tickets: Vec~TicketPartial~
}
class UserTotalProps {
-users: Vec~UserPartial~
-tickets: Vec~TicketPartial~
}
class AdminSetupScheme {
+first_name: String
+last_name: String
+username: String
+pwd: String
}
class UserCreateScheme {
+first_name: String
+last_name: String
+username: String
+is_admin: bool
+pwd: String
}
class LoginScheme {
+username: String
+pwd: String
}
class UserUpdateScheme {
+id: i16
+first_name: String
+last_name: String
+username: String
+make_admin: bool
+new_pwd: String
}
class FilteredUser {
+id: i16
+first_name: String
+last_name: String
+username: String
+is_admin: bool
}
class UserProps {
+id: i16
}
class ApiError {
-message: String
-_status: String
}
class AuthState {
+is_authenticated: Option~bool~
+is_admin: Option~bool~
}
class ProtectedRouteProps {
+children: Children
+admin_page: bool
}
class SidebarShellProps {
+children: Children
}
class SidebarComponentProps {
+is_open: bool
+on_close: Callback~()~
}
class AdminCheckWrapperProps {
+children: Children
}
SidebarState --> SidebarExpandState
RoomTotalsProps --> TicketPartial
UserTotalProps --> UserPartial
UserTotalProps --> TicketPartial
SidebarShellProps ..> SidebarComponentProps
```
### Sequence Diagrams
#### 1. System Initialization & Administrator Setup
```mermaid
sequenceDiagram
autonumber
actor Admin as Initial Administrator
participant FE as Frontend (Yew)
participant BE as Backend (Axum)
participant DB@{"type": "database", "alias": "Database"}
Note over Admin, DB: System Initialization Flow
FE->>BE: GET /api/check-admin
BE->>DB: SELECT COUNT(*) FROM users WHERE is_admin = true
DB-->>BE: 0 (No admin found)
BE-->>FE: HTTP 200 OK {"exists": false}
FE-->>Admin: Render Admin Setup Page
Admin->>FE: Input username, password, first/last name
FE->>BE: POST /api/setup-admin {username, pwd, ...}
Note over BE: Hash password using Argon2
BE->>DB: INSERT INTO users (username, pwd, is_admin, ...)
DB-->>BE: Success
BE-->>FE: HTTP 200 OK {"status": "success"}
FE-->>Admin: Redirect to Login Page
```
#### 2. User Authentication Flow (Login)
```mermaid
sequenceDiagram
autonumber
actor User
participant FE as Frontend (Yew)
participant BE as Backend (Axum)
participant DB as Database@{"type": "database"}
Note over User, DB: Authentication & Cookie Session Setup
User->>FE: Enter username & password
FE->>BE: POST /api/login {username, pwd}
BE->>DB: SELECT * FROM users WHERE username = $1
DB-->>BE: Return user record with password hash
Note over BE: Verify password using Argon2
alt Password Valid
Note over BE: Generate JWT token containing claims (sub: user_id)
Note over BE: Build HttpOnly, Secure, Lax cookie 'token'
BE-->>FE: HTTP 200 OK {"status": "success", "token": "...", "user": {...}}
Note over BE,FE: Header: Set-Cookie: token=...#59; Path=/#59; HttpOnly#59; SameSite=Lax
Note over FE: Save auth state to global context
FE-->>User: Redirect to Dashboard / Home
else Password Invalid
BE-->>FE: HTTP 400 Bad Request {"status": "error", "message": "Invalid password"}
FE-->>User: Display error message
end
```
#### 3. Ticket Lifecycle Flow
```mermaid
sequenceDiagram
autonumber
actor User as Authenticated User
actor Admin as Administrator
participant FE as Frontend (Yew)
participant BE as Backend (Axum)
participant DB as Database@{"type": "database"}
Note over User, DB: Ticket Creation Flow (Protected Route)
User->>FE: Fill out ticket form & submit
FE->>BE: POST /api/tickets/create {category, betreff, description, room} (Includes 'token' cookie)
Note over BE: validate_token middleware decodes & verifies JWT
BE->>DB: INSERT INTO tickets (category, description, betreff, room, user_id)
DB-->>BE: Success
BE-->>FE: HTTP 200 OK {"status": "success"}
FE-->>User: Clear form & display success notification
Note over Admin, DB: Ticket Review & Resolution (Admin Only Route)
Admin->>FE: View Ticket Board
FE->>BE: GET /api/tickets (Includes 'token' cookie)
Note over BE: validate_token middleware checks JWT
BE->>DB: SELECT tickets JOIN users ...
DB-->>BE: Return list of tickets
BE-->>FE: HTTP 200 OK [tickets]
FE-->>Admin: Render Ticket List
Admin->>FE: Click "Resolve" on ticket
FE->>BE: PATCH /api/tickets/{id} {"status": "Resolved"} (Includes 'token' cookie)
Note over BE: validate_admin middleware verifies token & checks is_admin = true
BE->>DB: UPDATE tickets SET status = $1 WHERE id = $2
DB-->>BE: Success
BE-->>FE: HTTP 200 OK {"status": "success"}
FE-->>Admin: Update ticket status in UI
Note over Admin, DB: Ticket Archiving Flow (Admin Only Route)
Admin->>FE: Open Archived Tickets page
FE->>BE: GET /api/tickets/archive (Includes 'token' cookie)
Note over BE: validate_admin middleware verifies token & admin role
BE->>DB: SELECT * FROM tickets WHERE status = 'Archived'
DB-->>BE: Return archived tickets
BE-->>FE: HTTP 200 OK [Archived Tickets]
FE-->>Admin: Render historical archive board
```
## Usage of AI
Github Copilot CLI was used with the model Claude Haiku 4.5 to generate most of the documentation
Google Antigravity generated the Sequence Diagrams
### Prompt
Generate comments for cargo doc describing the indivilual components and create links to relevant structs, functions etc.
Generate a sequence diagramm in @[README.md] behind the class diagramms
### Output
The comments with `///` or `//!`
I've gone over it and modified it to my needs and opinions
The general structure sequence diagrams above. I've modified and fixed any errors and discrepancys
- **[Backend](../backend/index.html)** - The server-side API and business logic
- **[Frontend](../frontend/index.html)** - The client-side user interface
backend/Cargo.toml
+1 -3
View File
@@ -8,7 +8,7 @@ axum = "0.8.9"
axum-extra = { version = "0.12.6", features = ["cookie", "typed-header", "form"] }
serde = { workspace = true }
serde_json = { workspace = true }
sqlx = { version = "0.8.6", features = ["postgres", "runtime-tokio", "tls-native-tls", "chrono", "migrate"] }
sqlx = { version = "0.8.6", features = ["postgres", "runtime-tokio", "tls-native-tls", "chrono"] }
tokio = { version = "1.52.1", features = ["rt-multi-thread", "macros"] }
dotenv = "0.15.0"
chrono = { workspace = true }
@@ -17,5 +17,3 @@ argon2 = "0.5.3"
time = "0.3.47"
tower = "0.5.3"
tower-http = { version = "0.6.8", features = ["cors"] }
rand = '0.8'
hex = '0.4'
backend/migrations/20260422094717_user_table.sql
+6
View File
@@ -6,3 +6,9 @@ CREATE TABLE users (
pwd TEXT,
is_admin BOOLEAN NOT NULL DEFAULT false
);
INSERT INTO users(last_name, first_name, username, pwd, is_admin) VALUES ('Raffauf', 'Silas', 'raffaufsil',
'$argon2id$v=19$m=19456,t=2,p=1$urV91vY49mehWQoShkm6pw$1AGLuMDuFnY1CKuQU9ed89s1u9kvuszQjX+eIXmCBKI', true);
INSERT INTO users(last_name, first_name, username, pwd, is_admin) VALUES ('Misun', 'Sam', 'misunsam',
'$argon2id$v=19$m=19456,t=2,p=1$AMmy1zMOQG8Wg1jE5BXhDg$xhYIZPAPPOEoKQMtzWll/uhG8YJQvcpHKQU2++L23o4', true);
backend/migrations/20260716135845_qr_token.down.sql
-1
View File
@@ -1 +0,0 @@
DROP TABLE qr_codes;
backend/migrations/20260716135845_qr_token.sql
-8
View File
@@ -1,8 +0,0 @@
CREATE TABLE qr_codes (
id INT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
user_id SMALLINT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
token_hash VARCHAR(255) NOT NULL UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE INDEX idx_qr_token_hash ON qr_codes(token_hash);
backend/src/cookie/jwt.rs
+7 -8
View File
@@ -6,8 +6,8 @@ use crate::models::Claims;
/// Error response for JWT token operations.
///
/// Returned when token encoding or decoding fails via `encode_token` or `decode_token`.
/// Used in error responses for invalid or expired [`Claims`] tokens.
/// Returned when token encoding or decoding fails. Used in error responses
/// for invalid or expired tokens.
///
/// # Fields
/// - `status`: HTTP status text (e.g., "error")
@@ -22,7 +22,7 @@ pub struct Error {
///
/// This function creates a new JWT with the provided user ID as the subject,
/// sets the issued-at and expiration times (60 minutes from now), and signs it
/// using the given encoding key. The resulting token is a serialized [`Claims`].
/// using the given encoding key.
///
/// # Arguments
/// - `header`: The JWT header, specifying the algorithm (e.g., HS256).
@@ -30,7 +30,7 @@ pub struct Error {
/// - `key`: The `EncodingKey` used to sign the JWT.
///
/// # Returns
/// A `String` representing the encoded JWT containing [`Claims`].
/// A `String` representing the encoded JWT.
///
/// # Panics
/// Panics if the token encoding fails for any reason (e.g., invalid key).
@@ -50,16 +50,15 @@ pub fn encode_token(header: &Header, id: String, key: &EncodingKey) -> String {
///
/// This function attempts to decode a JWT string, validate its signature and claims
/// using the provided decoding key. It specifically ignores expiration (`validate_exp`)
/// and "not before" (`validate_nbf`) claims during validation. Returns the extracted [`Claims`]
/// on success.
/// and "not before" (`validate_nbf`) claims during validation.
///
/// # Arguments
/// - `token`: The JWT string to decode.
/// - `key`: The `DecodingKey` used to verify the JWT's signature.
///
/// # Returns
/// - `Ok(Claims)`: If the token is successfully decoded and verified, returns the extracted [`Claims`].
/// - `Err((StatusCode, Json<Error>))`: If the token is invalid, expired, or cannot be decoded,
/// - `200 OK`: If the token is successfully decoded and verified, returns the extracted `Claims`.
/// - `401 UNAUTHORIZED`: If the token is invalid, expired, or cannot be decoded,
/// returns an `UNAUTHORIZED` status code along with a JSON error message.
pub fn decode_token(token: String, key: &DecodingKey) -> Result<Claims, (StatusCode, Json<Error>)> {
let mut validation = jsonwebtoken::Validation::new(jsonwebtoken::Algorithm::HS256);
backend/src/cookie/validation.rs
+14 -17
View File
@@ -17,23 +17,22 @@ use crate::{AppState, cookie::jwt::decode_token, handlers::auth::filter_user, mo
/// Axum middleware to validate a JWT token present in cookies or Authorization header.
///
/// This function extracts a JWT from the request (either from the `token` cookie or
/// the `Authorization: Bearer` header), decodes and validates it using [`decode_token`](`crate::cookie::jwt::decode_token`)).
/// If valid, it fetches the corresponding [`User`] from the database and inserts a
/// [`FilteredUser`](crate::models::FilteredUser)
/// (converted via [`filter_user`](`crate::handlers::auth::filter_user`)) into the request extensions for subsequent handlers to use.
/// the `Authorization: Bearer` header), decodes and validates it. If valid, it fetches
/// the corresponding user from the database and inserts a `FilteredUser` into the
/// request extensions for subsequent handlers to use.
///
/// If the token is missing, invalid, or the user is not found, it returns an
/// appropriate error response (401 Unauthorized).
///
/// # Arguments
/// - `cookies`: The `CookieJar` from the request, used to extract the `token` cookie.
/// - `State(data)`: Application state containing `AppState` for database access and `token_secret`.
/// - `mut request`: The incoming HTTP request, which will have user data injected into its extensions.
/// - `request`: The incoming HTTP request, which will have user data injected into its extensions.
/// - `next`: The next middleware or handler in the chain.
///
/// # Returns
/// - `Ok(impl IntoResponse)`: If validation succeeds, the request proceeds to the next handler.
/// - `Err((StatusCode, Json<serde_json::Value>))`: An error response if validation fails.
/// - `200 OK`: If validation succeeds, the request proceeds to the next handler.
/// - `401 UNAUTHORIZED`: If validating the user fails.
/// - `500 INTERNAL SERVER ERROR`: If the database query fails
pub async fn validate_token(
cookies: CookieJar,
State(data): State<Arc<AppState>>,
@@ -111,24 +110,22 @@ pub async fn validate_token(
/// Axum middleware to validate JWT token and ensure the authenticated user has admin privileges.
///
/// This middleware first performs all checks of [`validate_token`]: extracting, decoding,
/// and validating the JWT via [`decode_token`](`crate::cookie::jwt::decode_token`), and fetching the associated [`User`] from the database.
/// Additionally, it verifies that the fetched user has `is_admin` set to `true`. Returns a [`FilteredUser`](crate::models::FilteredUser)
/// (converted via [`filter_user`](`crate::handlers::auth::filter_user`)) in the request extensions if both authentication and admin status are valid.
/// This middleware first performs all checks of `validate_token`: extracting, decoding,
/// and validating the JWT, and fetching the associated user from the database.
/// Additionally, it verifies that the fetched user has `is_admin` set to `true`.
///
/// If the user is not authenticated or not an administrator, it returns an
/// appropriate error response (401 Unauthorized or 403 Forbidden).
///
/// # Arguments
/// - `cookies`: The `CookieJar` from the request.
/// - `State(data)`: Application state containing `AppState`.
/// - `mut request`: The incoming HTTP request, which will have admin user data injected.
/// - `request`: The incoming HTTP request, which will have admin user data injected.
/// - `next`: The next middleware or handler in the chain.
///
/// # Returns
/// - `Ok(impl IntoResponse)`: If validation and admin check succeed, the request proceeds.
/// - `Err((StatusCode, Json<serde_json::Value>))`: An error response if validation fails
/// or the user is not an admin.
/// - `200 OK`: If validation and admin check succeed, the request proceeds.
/// - `401 UNAUTHORIZED`: An error response if validation fails or the user is not an admin.
/// - `500 INTERNAL SERVER ERROR`: If the databse query fails
pub async fn validate_admin(
cookies: CookieJar,
State(data): State<Arc<AppState>>,
backend/src/env.rs
+5 -14
View File
@@ -1,13 +1,12 @@
/// Environment configuration for the application.
///
/// Loads required configuration from environment variables at startup.
/// All variables must be present or the application will panic during [`Env::load`].
/// Used by [`AppState`](crate::AppState) for configuring JWT signing and CORS.
/// All variables must be present or the application will panic.
///
/// # Fields
/// - `db_url`: PostgreSQL database connection URL
/// - `token_secret`: Secret key used to sign and verify [`Claims`](crate::models::Claims) in JWT tokens
/// - `origin`: Frontend origin URL for CORS policy configuration
/// - `db_url`: PostgreSQL database connection URL.
/// - `token_secret`: Secret key used to sign and verify JWT tokens.
/// - `origin`: Frontend origin URL for CORS policy.
///
/// # Required Environment Variables
/// - `DATABASE_URL`: PostgreSQL connection string (e.g., `postgresql://user:pass@localhost/dbname`)
@@ -26,20 +25,12 @@ pub struct Env {
impl Env {
/// Loads environment configuration from system environment variables.
///
/// Reads `DATABASE_URL`, `TOKEN_SECRET`, and `ORIGIN` from the environment and returns
/// a configured [`Env`] instance. Used during server initialization in the `main` function.
///
/// # Panics
/// If any required variable is missing (DATABASE_URL, TOKEN_SECRET, or ORIGIN).
/// Panics if any required variable is missing.
///
/// # Example
/// ```ignore
/// let env = Env::load();
/// // Environment must have DATABASE_URL, TOKEN_SECRET, and ORIGIN set
/// let app_state = AppState {
/// db: pool,
/// env,
/// };
/// ```
pub fn load() -> Env {
let db_url = std::env::var("DATABASE_URL").expect("DATABASE_URL must be set");
backend/src/handlers/auth.rs
+54 -74
View File
@@ -22,12 +22,11 @@ use crate::{
/// Registers a new user in the system.
///
/// Creates a new [`User`] account with the provided [`UserCreateScheme`] credentials.
/// The password is hashed using Argon2 before being stored. Only administrators can create new users.
/// Creates a new user account with the provided credentials. The password is hashed using Argon2
/// before being stored. Only administrators can create new users.
///
/// # Arguments
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `request`: [`UserCreateScheme`] containing user details including first/last name, username, admin flag, and password
/// - `request`: Json with [UserCreateScheme] as it's format
///
/// # Returns
/// - `200 OK` on successful user creation
@@ -35,7 +34,12 @@ use crate::{
/// - `500 Internal Server Error` if database insertion fails
///
/// # Password Hashing
/// Uses Argon2 with a cryptographically secure random salt.
/// Uses Argon2 with a cryptographically secure random salt:
/// ```ignore
/// let argon = Argon2::default();
/// let salt = SaltString::generate(&mut OsRng);
/// let hashed_pwd = argon.hash_password(password.as_bytes(), &salt)?;
/// ```
pub async fn create_user(
State(data): State<Arc<AppState>>,
Json(request): Json<UserCreateScheme>,
@@ -102,23 +106,27 @@ pub async fn create_user(
/// Authenticates a user and creates a JWT token for session management.
///
/// Verifies the provided username and password against stored credentials using Argon2 verification.
/// On successful authentication, generates and encodes a [`Claims`](crate::models::Claims) token via [`encode_token`](`crate::cookie::jwt::encode_token`) and sets it as an HTTP-only cookie.
/// On successful authentication, generates a JWT token and sets it as an HTTP-only cookie.
/// The token is valid for 1 hour.
///
/// # Arguments
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `request`: [`LoginScheme`] containing login credentials (username, password)
/// - `request`: Login credentials in Json format using the [LoginScheme]
///
/// # Returns
/// - `200 OK` with JSON containing token and filtered [`FilteredUser`] info
/// - `200 OK` with JSON containing token and [FilteredUser] info
/// - `400 Bad Request` if username not found or password invalid
/// - `500 Internal Server Error` if database query fails
///
/// # Security Features
/// - HTTP-only cookie prevents JavaScript access
/// - SameSite=Lax protects against CSRF attacks
/// - Password verification uses Argon2 with stored [`User`] hash
/// - JWT token includes user ID and expiration timestamp via [`Claims`](crate::models::Claims) encoded by [`encode_token`](`crate::cookie::jwt::encode_token`)
/// - Password verification uses Argon2:
/// ```ignore
/// let valid_pwd = Argon2::default()
/// .verify_password(&request.pwd.as_bytes(), &pwd_hash.unwrap())
/// .is_ok();
/// ```
/// - JWT token includes user ID and expiration timestamp
///
/// # Example Response
/// ```json
@@ -187,7 +195,7 @@ pub async fn login(
///
/// Sets the authentication cookie to expire immediately (max_age = -1 hour) which causes
/// the browser to discard it. This effectively logs the user out without requiring server-side
/// session invalidation. The cookie no longer contains a valid [`Claims`](crate::models::Claims) token.
/// session invalidation.
///
/// # Returns
/// Always returns `200 OK` with success message and an expired cookie header
@@ -219,11 +227,11 @@ pub async fn logout() -> Result<impl IntoResponse, (StatusCode, Json<serde_json:
/// Retrieves the currently authenticated user's information.
///
/// Uses the [`FilteredUser`] data embedded in the JWT token (via middleware).
/// Uses the user data embedded in the JWT token (via middleware).
/// Useful for frontends to display logged-in user info or verify authentication.
///
/// # Returns
/// - `200 OK` with [`FilteredUser`] data (excluding password)
/// - `200 OK` with the [FilteredUser] in Json format
/// - Automatically returns `401 Unauthorized` if not authenticated (middleware)
///
/// # Example Response
@@ -256,19 +264,18 @@ pub async fn get_current_user(
/// Deletes a user account from the system.
///
/// Only admins can delete users (enforced by middleware). The [`User`] account and all associated data is removed.
/// Only admins can delete users. The user account and all associated data is removed.
/// Note: Tickets created by deleted users will have NULL user_id references.
///
/// # Arguments
/// - `Path(id)`: [`User`] ID to delete, extracted from URL path
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `id`: User ID to delete
///
/// # Returns
/// - `204 No Content` on successful deletion
/// - `404 Not Found` if user doesn't exist
/// - `500 Internal Server Error` if database error occurs
pub async fn delete_user(
Path(id): Path<i16>,
Path(id): Path<i32>,
State(data): State<Arc<AppState>>,
) -> Result<impl IntoResponse, (StatusCode, Json<serde_json::Value>)> {
let query = sqlx::query(r#"DELETE FROM users WHERE id = $1"#)
@@ -295,14 +302,11 @@ pub async fn delete_user(
/// Retrieves all users in the system.
///
/// Only admins can call this endpoint (enforced by middleware). Returns all [`User`] records converted to [`FilteredUser`]
/// and sorted alphabetically by last name. Password hashes are not included in the response.
///
/// # Arguments
/// - `State(data)`: Application state containing [`AppState`] for database access
/// Only admins can call this endpoint. Returns all users sorted alphabetically by last name.
/// Password hashes are not included in the response.
///
/// # Returns
/// - `200 OK` with array of [`FilteredUser`] objects
/// - `200 OK` with array of [FilteredUser] objects
/// - `500 Internal Server Error` if database query fails
///
/// # Example Response
@@ -348,15 +352,11 @@ pub async fn get_users(
/// Retrieves a single user's details by their ID.
///
/// This endpoint allows fetching a specific [`User`]'s information. It returns a [`FilteredUser`]
/// object (converted via [`filter_user`]), ensuring sensitive data like password hashes are not exposed.
///
/// # Arguments
/// - `Path(id)`: The ID of the [`User`] to retrieve, extracted from the URL path.
/// - `State(data)`: Application state containing [`AppState`] for database access.
/// - `id`: The ID of the user to retrieve, extracted from the URL path.
///
/// # Returns
/// - `200 OK` with a [`FilteredUser`] JSON object if the user is found.
/// - `200 OK` with a [FilteredUser] JSON object if the user is found.
/// - `404 Not Found` if a user with the given ID does not exist.
/// - `500 Internal Server Error` if a database query error occurs.
///
@@ -392,30 +392,23 @@ pub async fn get_user_by_id(
/// Updates an existing user's information.
///
/// This endpoint allows administrators to modify a [`User`]'s `first_name`, `last_name`,
/// `username`, `is_admin` status, and optionally their password. If `new_pwd` in the
/// request body is an empty string, the user's password remains unchanged.
///
/// # Arguments
/// - `Path(id)`: The ID of the [`User`] to update, extracted from the URL path.
/// - `State(data)`: Application state containing [`AppState`] for database access.
/// - `Json(body)`: [`UserUpdateScheme`] containing the fields to update.
/// - `id`: The ID of the user to update, extracted from the URL path.
/// - `body`: [UserUpdateScheme] containing the fields to update.
///
/// # Returns
/// - `200 OK` with the [`FilteredUser`] object of the updated user (converted via [`filter_user`]).
/// - `200 OK` with the [FilteredUser] object of the updated user.
/// - `404 Not Found` if a user with the given ID does not exist.
/// - `500 Internal Server Error` if a database query or password hashing error occurs.
///
/// # Security Note
/// - Passwords are hashed using Argon2 before storage.
/// - This endpoint requires admin privileges (enforced by middleware via
/// [`validate_admin`](crate::cookie::validation::validate_admin)).
/// - This endpoint typically requires admin privileges (enforced by middleware).
pub async fn update_user(
Path(id): Path<i16>,
Path(id): Path<i32>,
State(data): State<Arc<AppState>>,
Json(body): Json<UserUpdateScheme>,
) -> Result<impl IntoResponse, (StatusCode, Json<serde_json::Value>)> {
let update_result = if !body.new_pwd.is_empty() {
let argon = Argon2::default();
let salt = SaltString::generate(&mut OsRng);
let hashed_pwd = match argon.hash_password(body.new_pwd.clone().as_bytes(), &salt) {
@@ -423,25 +416,15 @@ pub async fn update_user(
Err(e) => panic!("Error hashing {:}", e),
};
sqlx::query(r#"UPDATE users SET first_name = $1, last_name = $2, username = $3, pwd = $4, is_admin = $5 WHERE id = $6"#)
let update_result = sqlx::query(r#"UPDATE users SET first_name = $1, last_name = $2, username = $3, pwd = $4, is_admin = $5 WHERE id = $6"#)
.bind(body.first_name.to_owned())
.bind(body.last_name.to_owned())
.bind(body.username.to_owned())
.bind(hashed_pwd)
.bind(&hashed_pwd)
.bind(body.make_admin.to_owned())
.bind(id)
.execute(&data.db)
.await
} else {
sqlx::query(r#"UPDATE users SET first_name = $1, last_name = $2, username = $3, is_admin = $4 WHERE id = $5"#)
.bind(body.first_name.to_owned())
.bind(body.last_name.to_owned())
.bind(body.username.to_owned())
.bind(body.make_admin.to_owned())
.bind(id)
.execute(&data.db)
.await
}
.map_err(|e| {
(
StatusCode::INTERNAL_SERVER_ERROR,
@@ -478,14 +461,8 @@ pub async fn update_user(
/// Checks if any administrator user exists in the system.
///
/// This endpoint is used during initialization to determine if the setup page should be displayed.
/// It counts all [`User`] records with `is_admin = true` in the database.
///
/// # Arguments
/// - `State(data)`: Application state containing [`AppState`] for database access
///
/// # Returns
/// - `200 OK` with JSON: `{"has_admin": bool}` - Whether at least one admin exists
/// - `200 OK` On successful database query
/// - `500 Internal Server Error` if database query fails
///
/// # Example Response
@@ -512,24 +489,28 @@ pub async fn check_admin_exists(
/// Creates the initial administrator account for a fresh system.
///
/// This function handles the one-time setup of the first admin [`User`]. It checks that no admin exists
/// before allowing creation via database count. This endpoint is only functional when the system has no administrators.
/// This function handles the one-time setup of the first admin user. It checks that no admin exists
/// before allowing creation. This endpoint is only functional when the system has no administrators.
/// Once created, subsequent admin registrations must go through the normal `create_user` endpoint
/// with proper authorization.
///
/// # Arguments
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `request`: [`UserCreateScheme`] containing user creation details (first_name, last_name, username, password)
/// - `request`: [UserCreateScheme] as a Json value
///
/// # Returns
/// - `200 OK` with success message if admin account created
/// - `400 Bad Request` if:
/// - Admin already exists (checked via admin count)
/// - Admin already exists
/// - Username or password is empty
/// - `500 Internal Server Error` if database insertion fails
///
/// # Security Note
/// The password is hashed using Argon2 with a random salt before storage.
/// The password is hashed using Argon2 with a random salt before storage:
/// ```ignore
/// let argon = Argon2::default();
/// let salt = SaltString::generate(&mut OsRng);
/// let hashed_pwd = argon.hash_password(request.pwd.as_bytes(), &salt)?;
/// ```
pub async fn setup_initial_admin(
State(data): State<Arc<AppState>>,
Json(request): Json<UserCreateScheme>,
@@ -594,18 +575,17 @@ pub async fn setup_initial_admin(
}
}
/// Converts a [`User`] with sensitive data into a [`FilteredUser`] safe for API responses.
/// Converts a User with sensitive data into a FilteredUser safe for API responses.
///
/// This function removes password hashes and other sensitive information before
/// returning [`User`] data to clients. Always use this helper instead of directly
/// serializing [`User`] objects.
/// Used by all authentication endpoints to ensure passwords are never exposed.
/// returning user data to clients. Always use this helper instead of directly
/// serializing User objects.
///
/// # Arguments
/// - `user`: Reference to the internal [`User`] struct containing password hash
/// - `user`: Reference to the internal [User] struct containing password hash
///
/// # Returns
/// [`FilteredUser`] with only safe-to-share information:
/// [FilteredUser] with only safe-to-share information:
/// - `id`: User ID
/// - `first_name`, `last_name`: User name
/// - `username`: Login username
@@ -618,7 +598,7 @@ pub async fn setup_initial_admin(
/// # Example
/// ```ignore
/// let user = get_user_from_db(1).await?;
/// let safe_user = filter_user(&user); // Convert User to FilteredUser
/// let safe_user = filter_user(&user);
/// // safe_user can be safely serialized and sent to client
/// ```
pub fn filter_user(user: &User) -> FilteredUser {
backend/src/handlers/mod.rs
-1
View File
@@ -3,5 +3,4 @@
//! It serves as a central point for managing the logic that responds to various
//! HTTP requests, categorizing handlers by their domain (e.g., authentication, tickets).
pub mod auth;
pub mod qr;
pub mod ticket;
backend/src/handlers/qr.rs
-130
View File
@@ -1,130 +0,0 @@
use std::sync::Arc;
use argon2::{Argon2, PasswordHash, PasswordHasher, PasswordVerifier, password_hash::SaltString};
use axum::{
Json,
extract::{Query, State},
http::{StatusCode, header::SET_COOKIE},
response::{Html, IntoResponse, Response},
};
use jsonwebtoken::{EncodingKey, Header};
use rand::{RngCore, thread_rng};
use serde::{Deserialize, Serialize};
use sqlx::Row;
use crate::{AppState, cookie::jwt::encode_token};
#[derive(Serialize)]
pub struct QrCodeResponse {
pub raw_token: String,
}
#[derive(Serialize, Deserialize)]
pub struct AuthQuery {
pub token: String,
}
#[derive(Deserialize)]
pub struct GenerateQrRequest {
pub user_id: i16,
}
pub async fn generate_qr_token(
State(data): State<Arc<AppState>>,
Json(payload): Json<GenerateQrRequest>,
) -> Result<impl IntoResponse, StatusCode> {
let mut token_bytes = [0u8; 32];
thread_rng().fill_bytes(&mut token_bytes);
let raw_token = hex::encode(token_bytes);
let salt = SaltString::generate(&mut thread_rng());
let argon2 = Argon2::default();
let token_hash = argon2
.hash_password(raw_token.as_bytes(), &salt)
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
.to_string();
sqlx::query("INSERT INTO qr_codes (user_id, token_hash) VALUES ($1, $2)")
.bind(payload.user_id)
.bind(token_hash)
.execute(&data.db)
.await
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
Ok((StatusCode::CREATED, Json(QrCodeResponse { raw_token })))
}
pub async fn validate_qr_token(
State(data): State<Arc<AppState>>,
Query(params): Query<AuthQuery>,
) -> Response {
let active_tokens_res = sqlx::query("SELECT user_id, token_hash FROM qr_codes")
.fetch_all(&data.db)
.await;
let active_tokens = match active_tokens_res {
Ok(tokens) => tokens,
Err(_) => return StatusCode::INTERNAL_SERVER_ERROR.into_response(),
};
let mut authenticated_user_id: Option<i16> = None;
let argon2 = Argon2::default();
for record in active_tokens {
let user_id: i16 = record.get("user_id");
let token_hash: String = record.get("token_hash");
if let Ok(parsed_hash) = PasswordHash::new(&token_hash) {
if argon2
.verify_password(params.token.as_bytes(), &parsed_hash)
.is_ok()
{
authenticated_user_id = Some(user_id);
break;
}
}
}
if let Some(user_id) = authenticated_user_id {
let base_origin = data.env.origin.trim_end_matches('/');
let header = Header::default();
let id_str = user_id.to_string();
let secret_bytes = data.env.token_secret.as_bytes();
let encoding_key = EncodingKey::from_secret(secret_bytes);
let token = encode_token(&header, id_str, &encoding_key);
let cookie_value = format!(
"token={}; Path=/; HttpOnly; SameSite=Lax; Max-Age=3600",
token
);
let redirect_html = format!(
r#"<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url={}/" />
<script type="text/javascript">
window.location.href = "{}/"
</script>
<title>Redirecting...</title>
</head>
<body>
<p>Authenticated! Redirecting you to the dashboard...</p>
</body>
</html>"#,
base_origin, base_origin
);
let mut response = Html(redirect_html).into_response();
if let Ok(header_value) = axum::http::HeaderValue::from_str(&cookie_value) {
response.headers_mut().insert(SET_COOKIE, header_value);
}
response
} else {
StatusCode::UNAUTHORIZED.into_response()
}
}
backend/src/handlers/ticket.rs
+17 -27
View File
@@ -16,14 +16,12 @@ use crate::{
/// Creates a new support ticket.
///
/// Associates the ticket with the authenticated [`FilteredUser`] and sets the current timestamp.
/// Converts the [`TicketCreateScheme`] request into a database record.
/// Associates the ticket with the authenticated user and sets the current timestamp.
/// Tickets are automatically created with "open" status.
///
/// # Arguments
/// - `Extension(user)`: Authenticated [`FilteredUser`] (extracted from JWT token via middleware)
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `Json(body)`: [`TicketCreateScheme`] containing ticket details (category, subject, description, room)
/// - `user`: Authenticated user (extracted from JWT token)
/// - `body`: Json with the [TicketCreateScheme] as it's format
///
/// # Returns
/// - `200 OK` on successful creation
@@ -62,11 +60,10 @@ pub async fn create_ticket(
/// Deletes a ticket by ID.
///
/// Only admins can delete tickets (enforced by middleware). Removes the [`TicketResponse`] and associated data from the database.
/// Only admins can delete tickets. Marks the ticket as deleted or removes from database.
///
/// # Arguments
/// - `Path(id)`: Ticket ID to delete, extracted from URL path
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `id`: Ticket ID to delete
///
/// # Returns
/// - `204 No Content` on successful deletion
@@ -98,20 +95,16 @@ pub async fn delete_ticket(
Ok(StatusCode::NO_CONTENT)
}
/// Retrieves all non-archived tickets.
/// Retrieves all tickets.
///
/// Returns a list of all active [`TicketResponse`] objects with user information denormalized for easier rendering.
/// Tickets are ordered by creation date (newest first). Joins with [`User`](crate::models::User) table to include creator information.
///
/// # Arguments
/// - `State(data)`: Application state containing [`AppState`] for database access
/// Returns a list of all tickets with user information denormalized for easier rendering.
/// Tickets are ordered by creation date (newest first).
///
/// # Filtering
/// - Excludes tickets with status "Archived"
/// - Uses LEFT JOIN to include creator information from [`User`](crate::models::User)
/// - Uses LEFT JOIN to include creator information
///
/// # Returns
/// - `200 OK` with array of [`TicketResponse`] objects
/// - `200 OK` with array of [TicketResponse] objects
/// - `500 Internal Server Error` if database query fails
///
/// # Example Response
@@ -175,14 +168,12 @@ pub async fn get_tickets(
/// Retrieves a specific ticket by ID.
///
/// Includes full ticket details and denormalized user information (creator name).
/// Returns a [`TicketResponse`] with all metadata by joining with [`User`](crate::models::User) table.
///
/// # Arguments
/// - `Path(id)`: Ticket ID to retrieve, extracted from URL path
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `id`: Ticket ID to retrieve
///
/// # Returns
/// - `200 OK` with [`TicketResponse`] object
/// - `200 OK` with [TicketResponse] object
/// - `404 Not Found` if ticket doesn't exist
/// - `500 Internal Server Error` if database error occurs
///
@@ -250,16 +241,15 @@ pub async fn get_ticket_by_id(
/// Updates a ticket's status.
///
/// Only admins can update ticket status (enforced by middleware). Applies [`TicketUpdateScheme`] to modify the [`TicketResponse`].
/// This is typically used to transition tickets through their lifecycle (open → in_progress → resolved → archived).
/// Only admins can update ticket status. This is typically used to transition tickets
/// through their lifecycle (open → in_progress → resolved → archived).
///
/// # Arguments
/// - `Path(id)`: Ticket ID to update, extracted from URL path
/// - `State(data)`: Application state containing [`AppState`] for database access
/// - `Json(body)`: [`TicketUpdateScheme`] update payload containing new status
/// - `id`: Ticket ID to update
/// - `body`: Update payload as a Json array with [TicketUpdateScheme] as it's format
///
/// # Returns
/// - `200 OK` with updated [`TicketResponse`]
/// - `200 OK` with updated [TicketResponse]
/// - `500 Internal Server Error` if ticket not found or database error
///
/// # Typical Status Flow
backend/src/main.rs
+45 -26
View File
@@ -9,52 +9,79 @@ mod models;
/// Axum router configuration with all routes and middleware
mod router;
use std::sync::Arc;
use std::sync::{
Arc,
atomic::{AtomicI64, Ordering},
};
use axum::http::{
HeaderValue, Method,
use axum::{
Json,
http::{
HeaderValue, Method, StatusCode,
header::{ACCEPT, AUTHORIZATION, CONTENT_TYPE},
},
};
use dotenv::dotenv;
use router::create_router;
use serde::Serialize;
use sqlx::{PgPool, postgres::PgPoolOptions};
use tower_http::cors::CorsLayer;
use crate::env::Env;
/// A variable to count the problems fixed by a very easy solution
static EASY_FIX_COUNT: AtomicI64 = AtomicI64::new(0);
/// The Response struct for the [EASY_FIX_COUNT]
#[derive(Serialize)]
struct CounterResp {
value: i64,
}
/// Gets the [EASY_FIX_COUNT] value
///
/// # Returns
/// - `200 OK` with the value on success
async fn get_count() -> Json<CounterResp> {
let v = EASY_FIX_COUNT.load(Ordering::SeqCst);
Json(CounterResp { value: v })
}
/// Incremets the [EASY_FIX_COUNT] value by one
///
/// # Returns
/// - `200 OK` with the new value on success
async fn increment() -> Result<Json<CounterResp>, StatusCode> {
let new = EASY_FIX_COUNT.fetch_add(1, Ordering::SeqCst) + 1;
Ok(Json(CounterResp { value: new }))
}
/// Shared application state passed to all route handlers.
///
/// Contains the database connection pool and environment configuration.
/// This is wrapped in Arc for thread-safe sharing across async tasks and cloned into each route
/// via `with_state`.
/// This is wrapped in Arc for thread-safe sharing across async tasks.
///
/// # Fields
/// - `db`: PostgreSQL connection pool for database access (via `sqlx::PgPool`)
/// - `env`: [`Env`] configuration loaded from environment variables
/// - `db`: PostgreSQL connection pool for database access
/// - `env`: Configuration loaded from environment variables
pub struct AppState {
/// PostgreSQL connection pool for all database operations
pub db: PgPool,
/// Environment configuration with secrets and settings
pub env: Env,
db: PgPool,
env: Env,
}
/// Main application entry point.
///
/// Initializes the server by:
/// 1. Loading environment variables from `.env` file
/// 2. Establishing database connection pool to PostgreSQL
/// 2. Establishing database connection pool
/// 3. Configuring CORS policy for cross-origin requests
/// 4. Creating the router with [`create_router`] containing all endpoints
/// 5. Starting HTTP server on port 8001
/// 4. Starting HTTP server on port 8001
///
/// # Server Configuration
/// - Binds to `0.0.0.0:8001` (all network interfaces)
/// - Allows: GET, POST, PATCH, DELETE methods
/// - Allows credentials and custom headers
/// - CORS origin configured from [`Env`]
///
/// # State Setup
/// Creates shared [`AppState`] wrapped in `Arc` and passes to all routes
/// - CORS origin configured from environment
///
/// # Panics
/// - If environment loading fails
@@ -77,14 +104,6 @@ async fn main() {
}
};
// Run database migrations on container/application startup
println!("Running database migrations...");
if let Err(err) = sqlx::migrate!("./migrations").run(&pool).await {
println!("Failed to run database migrations: {:?}", err);
std::process::exit(1);
}
println!("Database migrations completed successfully");
// Configure CORS to allow requests from frontend
let cors = CorsLayer::new()
.allow_origin(env.origin.parse::<HeaderValue>().unwrap())
backend/src/models.rs
+11 -51
View File
@@ -3,7 +3,6 @@ use serde::{Deserialize, Serialize};
/// API response for a ticket with user information.
///
/// Returned by ticket endpoints. Includes denormalized user data for easier frontend rendering.
/// Created via [`TicketCreateScheme`].
///
/// # Fields
/// - `id`: Unique ticket identifier
@@ -13,7 +12,7 @@ use serde::{Deserialize, Serialize};
/// - `room`: Room number associated with the issue
/// - `status`: Current ticket status (e.g., "open", "in_progress", "resolved")
/// - `date`: When the ticket was created (UTC timestamp)
/// - `user_id`: ID of the user who created the ticket (references [`User`])
/// - `user_id`: ID of the user who created the ticket
/// - `user_first_name`, `user_last_name`: User's name (denormalized for convenience)
///
/// # Example
@@ -33,32 +32,22 @@ use serde::{Deserialize, Serialize};
/// ```
#[derive(Deserialize, Serialize, Debug, PartialEq)]
pub struct TicketResponse {
/// Unique ticket identifier
pub id: i32,
/// Ticket category/type (e.g., "maintenance", "support")
pub category: String,
/// Ticket subject line
pub betreff: String,
/// Detailed ticket description
pub description: String,
/// Room number associated with the issue
pub room: i16,
/// Current ticket status (e.g., "open", "in_progress", "resolved", "archived")
pub status: String,
/// When the ticket was created (UTC timestamp)
pub date: chrono::DateTime<chrono::Utc>,
/// ID of the user who created the ticket
pub user_id: i16,
/// First name of the ticket creator (denormalized from `User`)
pub user_first_name: String,
/// Last name of the ticket creator (denormalized from `User`)
pub user_last_name: String,
}
/// Complete user record from the database.
///
/// Contains all user information including the password hash.
/// This should NEVER be sent directly to clients - always use [`FilteredUser`] instead.
/// This should NEVER be sent directly to clients - always use `FilteredUser` instead.
///
/// # Fields
/// - `id`: Unique user identifier
@@ -69,27 +58,21 @@ pub struct TicketResponse {
///
/// # Security Note
/// The `pwd` field contains the password hash and should never be included in API responses.
/// Use [`filter_user()`](`crate::handlers::auth::filter_user`) to convert to [`FilteredUser`] for responses.
/// Use `filter_user()` to convert to `FilteredUser` for responses.
#[derive(Deserialize, Serialize, PartialEq, Debug, Clone, sqlx::FromRow)]
pub struct User {
/// Unique user identifier
pub id: i16,
/// User's last name
pub last_name: String,
/// User's first name
pub first_name: String,
/// Unique login username (must be unique in the database)
pub username: String,
/// Whether this user has administrator privileges
pub is_admin: bool,
/// Argon2 password hash (NEVER expose to clients)
pub pwd: String,
}
/// Payload for creating a new ticket.
///
/// Sent to `/api/tickets/create`. The backend automatically associates it with the
/// authenticated user and sets the creation timestamp. Converted to [`TicketResponse`] for the response.
/// authenticated user and sets the creation timestamp.
///
/// # Fields
/// - `category`: Ticket category/type
@@ -98,60 +81,49 @@ pub struct User {
/// - `room`: Room number where the issue is located
#[derive(Deserialize, Serialize, Debug)]
pub struct TicketCreateScheme {
/// Ticket category/type
pub category: String,
/// Subject line for the ticket
pub betreff: String,
/// Detailed problem description
pub description: String,
/// Room number where the issue is located
pub room: i16,
}
/// Payload for updating a ticket.
///
/// Sent to `PATCH /api/tickets/{id}`. Allows updating the ticket [`TicketResponse::status`].
/// Sent to `PATCH /api/tickets/{id}`. Currently only allows status updates.
/// Only admins can update tickets.
///
/// # Fields
/// - `status`: New ticket status (e.g., "open", "in_progress", "resolved")
#[derive(Deserialize, Serialize, Debug)]
pub struct TicketUpdateScheme {
/// New ticket status (e.g., "open", "in_progress", "resolved", "archived")
pub status: String,
}
/// Payload for updating user information.
///
/// Sent to `PATCH /api/users/{id}`. Allows updating profile and admin status.
/// Only admins can update [`User`] records. Empty password field means no password change.
/// Only admins can update users. Empty password field means no password change.
///
/// # Fields
/// - `id`: [`User`] ID to update
/// - `id`: User ID to update
/// - `first_name`, `last_name`: Updated user name
/// - `username`: Updated login username
/// - `make_admin`: New admin privilege status
/// - `new_pwd`: New password (empty string = keep existing password)
#[derive(Deserialize, Serialize, Debug)]
pub struct UserUpdateScheme {
/// User ID to update
pub id: i16,
/// Updated user first name
pub first_name: String,
/// Updated user last name
pub last_name: String,
/// Updated login username
pub username: String,
/// New admin privilege status
pub make_admin: bool,
/// New password (empty string = keep existing password)
pub new_pwd: String,
}
/// Payload for creating a new user account.
///
/// Used in both admin registration (`/api/register`) and initial setup (`/api/setup-admin`).
/// The password is hashed server-side before storage using Argon2. Converted to [`User`] for storage.
/// The password is hashed server-side before storage using Argon2.
///
/// # Fields
/// - `first_name`: User's first name
@@ -161,15 +133,10 @@ pub struct UserUpdateScheme {
/// - `pwd`: Plain text password (hashed on server)
#[derive(Deserialize, Serialize, Debug, sqlx::FromRow)]
pub struct UserCreateScheme {
/// User's first name
pub first_name: String,
/// User's last name
pub last_name: String,
/// Unique username for login
pub username: String,
/// Whether to grant admin privileges
pub is_admin: bool,
/// Plain text password (hashed on server before storage)
pub pwd: String,
}
@@ -182,38 +149,31 @@ pub struct UserCreateScheme {
/// The password is never stored in plain text - only the Argon2 hash is persisted.
#[derive(Deserialize, Serialize, Debug)]
pub struct LoginScheme {
/// Username for login
pub username: String,
/// Plain text password (verified against stored Argon2 hash)
pub pwd: String,
}
/// User information sent to clients, excluding password hashes.
///
/// This is the safe version of [`User`] data that gets returned in API responses.
/// This is the safe version of User data that gets returned in API responses.
/// It never includes the password hash or JWT claims. Always use this for responses
/// to prevent leaking sensitive data.
#[derive(Debug, Clone, Serialize)]
pub struct FilteredUser {
/// Unique user identifier
pub id: i16,
/// User's first name
pub first_name: String,
/// User's last name
pub last_name: String,
/// Login username
pub username: String,
/// Whether user has admin privileges
pub is_admin: bool,
}
/// JWT token claims embedded in the session token.
///
/// Contains user identification and token validity information.
/// Generated during login via `encode_token` and verified via `decode_token`.
/// Generated during login and verified by middleware on protected routes.
///
/// # Fields
/// - `sub`: Subject - the user ID as a string (references [`User`])
/// - `sub`: Subject - the user ID as a string
/// - `issued`: Unix timestamp when token was created
/// - `expires`: Unix timestamp when token expires (currently 1 hour from creation)
///
backend/src/router.rs
+22 -38
View File
@@ -1,61 +1,50 @@
use std::sync::Arc;
use axum::{
Router,
http::StatusCode,
middleware,
response::IntoResponse,
Router, middleware,
routing::{get, post},
};
use crate::{
AppState,
cookie::validation::{validate_admin, validate_token},
get_count,
handlers::{
auth::{
check_admin_exists, create_user, delete_user, get_current_user, get_user_by_id,
get_users, login, logout, setup_initial_admin, update_user,
},
qr::{generate_qr_token, validate_qr_token},
ticket::{create_ticket, delete_ticket, edit_ticket, get_ticket_by_id, get_tickets},
},
increment,
};
async fn debug_fallback_handler(uri: axum::http::Uri) -> impl IntoResponse {
println!(
"[BACKEND DEBUG] Axum Fallback triggered! Unmatched request path: {}",
uri
);
(StatusCode::NOT_FOUND, "Backend route not found")
}
/// Creates the complete router with all API endpoints.
///
/// The router is organized in layers for proper middleware application. Uses [`AppState`]
/// for shared application context across all routes.
/// The router is organized in layers for proper middleware application:
///
/// ## Route Layers (from most to least restricted):
///
/// ### Admin-Only Routes (requires admin privilege + valid token)
/// - `GET /api/tickets/{id}` - Get specific ticket details (via `get_ticket_by_id`)
/// - `DELETE /api/tickets/{id}` - Delete a ticket (via `delete_ticket`)
/// - `PATCH /api/tickets/{id}` - Update ticket status (via `edit_ticket`)
/// - `POST /api/register` - Create a new user (via `create_user`)
/// - `GET /api/users` - List all users (via `get_users`)
/// - `GET /api/users/{id}` - Get user details (via `get_user_by_id`)
/// - `DELETE /api/users/{id}` - Delete a user (via `delete_user`)
/// - `PATCH /api/users/{id}` - Update user details (via `update_user`)
/// - `GET /api/tickets/{id}` - Get specific ticket details
/// - `DELETE /api/tickets/{id}` - Delete a ticket
/// - `PATCH /api/tickets/{id}` - Update ticket status
/// - `POST /api/register` - Create a new user
/// - `GET /api/users` - List all users
/// - `GET /api/users/{id}` - Get user details
/// - `DELETE /api/users/{id}` - Delete a user
/// - `PATCH /api/users/{id}` - Update user details
///
/// ### Protected Routes (requires valid token)
/// - `GET /api/tickets` - List all tickets (via `get_tickets`)
/// - `POST /api/tickets/create` - Create a new ticket (via `create_ticket`)
/// - `GET /api/logout` - Logout user (via `logout`)
/// - `GET /api/users/current` - Get current authenticated user (via `get_current_user`)
/// - `GET /api/tickets` - List all tickets
/// - `POST /api/tickets/create` - Create a new ticket
/// - `GET /api/logout` - Logout user
/// - `GET /api/users/current` - Get current authenticated user
///
/// ### Public Routes (no authentication required)
/// - `POST /api/login` - User login (via `login`)
/// - `GET /api/check-admin` - Check if admin exists (via `check_admin_exists`)
/// - `POST /api/setup-admin` - Create initial admin account (via `setup_initial_admin`)
/// - `POST /api/login` - User login
/// - `GET /api/check-admin` - Check if admin exists (for setup detection)
/// - `POST /api/setup-admin` - Create initial admin account (only if no admin exists)
///
/// # Middleware Stack
/// - Admin routes have `validate_admin` middleware
@@ -75,7 +64,6 @@ pub fn create_router(state: Arc<AppState>) -> Router {
"/api/users/{id}",
get(get_user_by_id).delete(delete_user).patch(update_user),
)
.route("/api/generate_qr", post(generate_qr_token))
.layer(middleware::from_fn_with_state(
state.clone(),
validate_admin,
@@ -87,20 +75,16 @@ pub fn create_router(state: Arc<AppState>) -> Router {
.route("/api/tickets/create", post(create_ticket))
.route("/api/logout", get(logout))
.route("/api/users/current", get(get_current_user))
.route("/api/count", get(get_count).post(increment))
.layer(middleware::from_fn_with_state(
state.clone(),
validate_token,
));
let public_routes = Router::new()
Router::new()
.merge(protected_routes)
.route("/api/login", post(login))
.route("/api/check-admin", get(check_admin_exists))
.route("/api/setup-admin", post(setup_initial_admin))
.route("/api/qr_login", get(validate_qr_token));
Router::new()
.merge(protected_routes)
.merge(public_routes)
.fallback(debug_fallback_handler)
.with_state(state)
}
data/compose.yaml
+14
View File
@@ -0,0 +1,14 @@
services:
postgres:
image: postgres:latest
container_name: postgres_ticket
restart: unless-stopped
ports:
- 5432:5432
environment:
- POSTGRES_PASSWORD=tickets
volumes:
- pg_data:/var/lib/postregsql/pg_data
volumes:
pg_data:
docker/Dockerfile
-127
View File
@@ -1,127 +0,0 @@
# ============================================================
# Dockerfile — Full application (frontend + backend)
# ============================================================
# Multi-stage build:
# 1. chef – install cargo-chef for dependency caching
# 2. planner – generate recipe.json from the workspace
# 3. backend – build the backend binary (release)
# 4. frontend – build the frontend WASM bundle with Trunk
# 5. runtime – minimal image: backend binary + static frontend + nginx
# ============================================================
# --------------- Stage 1: Chef base ---------------
FROM rust:1-bookworm AS chef
RUN cargo install cargo-chef
WORKDIR /app
# --------------- Stage 2: Planner ---------------
FROM chef AS planner
COPY Cargo.toml Cargo.lock ./
COPY src/ src/
COPY backend/ backend/
COPY frontend/ frontend/
RUN cargo chef prepare --recipe-path recipe.json
# --------------- Stage 3: Backend builder ---------------
FROM chef AS backend-builder
COPY --from=planner /app/recipe.json recipe.json
RUN cargo chef cook --release --recipe-path recipe.json -p backend
COPY Cargo.toml Cargo.lock ./
COPY src/ src/
COPY backend/ backend/
COPY frontend/ frontend/
RUN cargo build --release -p backend
# --------------- Stage 4: Frontend builder ---------------
FROM chef AS frontend-builder
# Add the WASM target
RUN rustup target add wasm32-unknown-unknown
# Install Trunk (the WASM bundler used by the frontend) and sass (for SCSS)
RUN cargo install trunk
# Cache frontend dependencies
COPY --from=planner /app/recipe.json recipe.json
RUN cargo chef cook --release --target wasm32-unknown-unknown --recipe-path recipe.json -p frontend
# Copy full workspace source for the build
COPY Cargo.toml Cargo.lock ./
COPY src/ src/
COPY backend/ backend/
COPY frontend/ frontend/
# Build the frontend WASM bundle
# Trunk outputs to frontend/dist by default
WORKDIR /app/frontend
RUN trunk build --release
# --------------- Stage 5: Runtime ---------------
FROM debian:bookworm-slim AS runtime
# Install runtime dependencies:
# - ca-certificates & libssl3: TLS for PostgreSQL connections
# - nginx: serves the frontend static files and reverse-proxies /api to the backend
RUN apt-get update && \
apt-get install -y --no-install-recommends ca-certificates libssl3 nginx && \
rm -rf /var/lib/apt/lists/*
WORKDIR /app
# Copy the compiled backend binary
COPY --from=backend-builder /app/target/release/backend /app/backend
# Copy migrations
COPY backend/migrations/ /app/migrations/
# Copy the frontend static build output
COPY --from=frontend-builder /app/frontend/dist /var/www/html
# Nginx configuration: serve frontend + reverse-proxy /api to the backend
RUN cat > /etc/nginx/sites-available/default <<'EOF'
server {
listen 80;
server_name _;
root /var/www/html;
index index.html;
# Serve static frontend files, fall back to index.html for client-side routing
location / {
try_files $uri $uri/ /index.html;
}
# Reverse-proxy API requests to the Axum backend
location /api/ {
proxy_pass http://127.0.0.1:8001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
EOF
# Startup script: launch backend in the background, then nginx in the foreground
RUN cat > /app/start.sh <<'SCRIPT'
#!/bin/bash
set -e
# Start the backend API server in the background
/app/backend &
# Start nginx in the foreground (keeps the container alive)
nginx -g 'daemon off;'
SCRIPT
RUN chmod +x /app/start.sh
EXPOSE 80
# Environment variables should be provided at runtime:
# DATABASE_URL – PostgreSQL connection string
# TOKEN_SECRET – JWT signing key
# ORIGIN – Allowed CORS origin (should be the public URL of this container)
CMD ["/app/start.sh"]
docker/Dockerfile.backend
-66
View File
@@ -1,66 +0,0 @@
# ============================================================
# Dockerfile.backend — Backend only
# ============================================================
# Multi-stage build:
# 1. chef – install cargo-chef for dependency caching
# 2. planner – generate a recipe.json from the workspace
# 3. builder – build dependencies first (cached), then the backend binary
# 4. runtime – minimal image with just the compiled binary
# ============================================================
# --------------- Stage 1: Chef base ---------------
FROM rust:1-bookworm AS chef
RUN cargo install cargo-chef
WORKDIR /app
# --------------- Stage 2: Planner ---------------
FROM chef AS planner
# Copy the full workspace so cargo-chef can resolve all dependencies
COPY Cargo.toml Cargo.lock ./
COPY src/ src/
COPY backend/ backend/
COPY frontend/ frontend/
RUN cargo chef prepare --recipe-path recipe.json
# --------------- Stage 3: Builder ---------------
FROM chef AS builder
# Cache dependency compilation in its own layer
COPY --from=planner /app/recipe.json recipe.json
RUN cargo chef cook --release --recipe-path recipe.json -p backend
# Now copy the real source and build
COPY Cargo.toml Cargo.lock ./
COPY src/ src/
COPY backend/ backend/
COPY frontend/ frontend/
RUN cargo build --release -p backend
# --------------- Stage 4: Runtime ---------------
FROM debian:bookworm-slim AS runtime
# Install TLS root certificates and PostgreSQL client libs (needed by sqlx
# at runtime for TLS connections via native-tls)
RUN apt-get update && \
apt-get install -y --no-install-recommends ca-certificates libssl3 && \
rm -rf /var/lib/apt/lists/*
WORKDIR /app
# Copy the compiled binary
COPY --from=builder /app/target/release/backend /app/backend
# Copy migrations so they can be run at startup if needed
COPY backend/migrations/ /app/migrations/
EXPOSE 8001
# Environment variables should be provided at runtime via docker run --env
# or docker compose environment/env_file.
#
# Required:
# DATABASE_URL – PostgreSQL connection string
# TOKEN_SECRET – JWT signing key
# ORIGIN – Allowed CORS origin (frontend URL)
CMD ["/app/backend"]
docker/compose.yaml
-58
View File
@@ -1,58 +0,0 @@
services:
postgres:
image: postgres:latest
container_name: postgres_ticket
restart: unless-stopped
ports:
- 5432:5432
environment:
POSTGRES_PASSWORD: tickets
POSTGRES_DB: system_data
volumes:
- pg_data:/var/lib/postgresql
healthcheck:
test: ["CMD-SHELL", "pg_isready -U postgres"]
interval: 5s
timeout: 3s
retries: 5
# Full application (frontend + backend + nginx)
# Usage: docker compose --profile full up --build
app:
profiles: ["full"]
build:
context: ..
dockerfile: docker/Dockerfile
container_name: ticketsystem
restart: unless-stopped
ports:
- 8080:80
environment:
DATABASE_URL: postgres://postgres:tickets@postgres:5432/system_data
TOKEN_SECRET: 160257c8c5ff2298363529e963a5901d2efa6d6ae67d634487c4d2bbc41c533f
ORIGIN: http://localhost:8080
depends_on:
postgres:
condition: service_healthy
# Backend only (API server)
# Usage: docker compose --profile backend up --build
backend:
profiles: ["backend"]
build:
context: ..
dockerfile: docker/Dockerfile.backend
container_name: ticketsystem-backend
restart: unless-stopped
ports:
- 8001:8001
environment:
DATABASE_URL: postgres://postgres:tickets@postgres:5432/system_data
TOKEN_SECRET: 160257c8c5ff2298363529e963a5901d2efa6d6ae67d634487c4d2bbc41c533f
ORIGIN: http://localhost:8000
depends_on:
postgres:
condition: service_healthy
volumes:
pg_data:
frontend/Cargo.toml
-4
View File
@@ -26,7 +26,3 @@ gloo = "0.12.0"
chrono = { workspace = true }
chrono-tz = "0.10.4"
wasm-bindgen = "0.2.120"
theme = { version = "0.0.3", features = ["yew"] }
qrcode-generator = "5.0.0"
base64 = '0.22'
dotenv = '0.15.0'
frontend/Trunk.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[serve]
# The address to serve on LAN.
addresses = ["127.0.0.1"] #,"10.150.9.7"]
addresses = ["127.0.0.1"]#, "192.168.178.56"] #,"10.150.9.116"]
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
frontend/index.html
+1 -2
View File
@@ -5,9 +5,8 @@
<link data-trunk rel="rust" data-bin="bin" />
<link data-trunk rel="scss" href="src/styles/main.scss" />
<link data-trunk rel="icon" href="src/assets/favicon.ico" type="image/x-icon" />
<link data-trunk rel="copy-dir" href="src/assets" data-target-path="assets" />
<meta charset="utf-8" />
<title>Yew App</title>
<title>Ticket System CSG</title>
</head>
<body></body>
frontend/src/assets/csg.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

frontend/src/auth.rs
+7 -7
View File
@@ -33,14 +33,14 @@ pub struct ProtectedRouteProps {
/// A component that protects routes by enforcing authentication and optional administrator privileges.
///
/// This component uses the backend's validation middleware by fetching the current user's authentication
/// and admin status from the `/api/users/current` endpoint (which requires a valid JWT token).
/// Based on the [`AuthState`] and the `admin_page` property, it either renders its children or redirects the user.
/// This component fetches the current user's authentication and admin status from the
/// `/api/users/current` endpoint upon mounting. Based on the `AuthState` and the
/// `admin_page` property, it either renders its children or redirects the user.
///
/// # Behavior
/// - **Initial Load**: Displays "Loading..." while checking authentication status via the backend.
/// - **Initial Load**: Displays "Loading..." while checking authentication status.
/// - **Not Authenticated**: Redirects to the login page (`crate::Route::Login`).
/// - **Authenticated** (valid JWT token from backend):
/// - **Authenticated**:
/// - If `admin_page` is `true`:
/// - If the user is an administrator (`is_admin: Some(true)`), it renders `children`.
/// - If the user is not an administrator (`is_admin: Some(false)`), it redirects to
@@ -109,7 +109,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
AuthState {
is_authenticated: None,
..
} => html! { <div>{ "Wird geladen..." } </div> },
} => html! { <div>{ "Loading..." } </div> },
AuthState {
is_authenticated: Some(false),
..
@@ -126,7 +126,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
Some(false) => {
html! { <Redirect<crate::Route> to={crate::Route::PermissionDenied}/> }
}
None => html! { <div>{ "Überprüfe Berechtigungen..." }</div> },
None => html! { <div>{ "Checking permissions..." }</div> },
}
} else {
props.children.clone().into()
frontend/src/darkmode.rs
-78
View File
@@ -1,78 +0,0 @@
use yew::prelude::*;
/// A button component that toggles between light and dark theme modes.
///
/// Clicking this button switches the application's theme by modifying the `data-theme` attribute
/// on the document element. The theme preference is applied via CSS variables for consistent styling.
///
/// # Behavior
/// - Reads the current `data-theme` attribute value from the HTML element
/// - Sets `data-theme="dark"` if currently in light mode
/// - Clears the attribute (light mode) if currently in dark mode
/// - Re-renders to reflect the visual changes (typically toggled via CSS)
///
/// # Example Usage
/// ```ignore
/// html! {
/// <ThemeToggle />
/// }
/// ```
#[function_component]
pub fn ThemeToggle() -> Html {
let is_dark = use_state(|| {
if let Some(window) = web_sys::window() {
if let Some(document) = window.document() {
if let Some(html) = document.document_element() {
return html.get_attribute("data-theme").unwrap_or_default() == "dark";
}
}
}
false
});
let onclick = {
let is_dark = is_dark.clone();
Callback::from(move |_| {
if let Some(window) = web_sys::window() {
if let Some(document) = window.document() {
if let Some(html) = document.document_element() {
let current = html.get_attribute("data-theme").unwrap_or_default();
let new_theme = if current == "dark" { "" } else { "dark" };
let _ = html.set_attribute("data-theme", new_theme);
is_dark.set(new_theme == "dark");
}
}
}
})
};
let icon_html = if *is_dark {
// Sun SVG for dark mode
html! {
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon">
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
}
} else {
// Moon SVG for light mode
html! {
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon">
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
</svg>
}
};
html! {
<button {onclick} class="sidebar-button theme-toggle-btn">
{icon_html}
</button>
}
}
frontend/src/lib.rs
+29 -77
View File
@@ -1,5 +1,4 @@
mod auth;
mod darkmode;
mod pages;
use crate::auth::ProtectedRoute;
use crate::pages::*;
@@ -11,9 +10,7 @@ use yew_router::prelude::*;
/// Defines the application's various routes and their corresponding paths.
///
/// This enum is used by `yew-router` to map URLs to specific components,
/// enabling navigation within the single-page application. Each route is protected
/// by [`ProtectedRoute`] middleware where appropriate to enforce authentication and authorization.
/// See [`switch`] for the routing logic.
/// enabling navigation within the single-page application.
#[derive(Clone, PartialEq, Routable)]
enum Route {
/// The application's home page.
@@ -68,17 +65,10 @@ pub struct SidebarShellProps {
/// A shell component that provides a consistent layout with a sidebar and a main content area.
///
/// This component is designed to wrap page-specific content, ensuring that the sidebar
/// is always present for navigation. Integrates with [`crate::pages::sidebar::Sidebar`] for navigation.
///
/// # Mobile Support
/// On mobile displays, the sidebar is hidden by default and can be toggled:
/// - **Menu Toggle Button**: Renders a floating menu button to slide the sidebar open.
/// - **Dark Mode Toggle**: Floating button to change theme.
/// - **Overlay Backdrop**: Dims the screen when the sidebar is open. Clicking it closes the sidebar.
/// - **Auto-Close on Navigation**: Automatically closes the sidebar when navigating to a new route.
/// is always present for navigation.
///
/// # Components
/// - [`crate::pages::sidebar::Sidebar`]: The navigation sidebar component, accepting mobile open state.
/// - [`sidebar::Sidebar`]: The navigation sidebar component.
/// - Main content area: Renders the `children` passed to this component.
///
/// # Example
@@ -91,46 +81,9 @@ pub struct SidebarShellProps {
/// ```
#[component(SidebarShell)]
fn sidebar_shell(props: &SidebarShellProps) -> Html {
let route = use_route::<Route>();
let mobile_sidebar_open = use_state(|| false);
// Close mobile sidebar automatically on any route transition
{
let mobile_sidebar_open = mobile_sidebar_open.clone();
use_effect_with(route, move |_| {
mobile_sidebar_open.set(false);
|| ()
});
}
let on_open = {
let mobile_sidebar_open = mobile_sidebar_open.clone();
Callback::from(move |_: MouseEvent| mobile_sidebar_open.set(true))
};
let on_close = {
let mobile_sidebar_open = mobile_sidebar_open.clone();
Callback::from(move |_: ()| mobile_sidebar_open.set(false))
};
let on_close_click = {
let on_close = on_close.clone();
Callback::from(move |_: MouseEvent| on_close.emit(()))
};
html! {
<div class="layout">
<button class="mobile-menu-toggle" onclick={on_open}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" x2="20" y1="12" y2="12"/>
<line x1="4" x2="20" y1="6" y2="6"/>
<line x1="4" x2="20" y1="18" y2="18"/>
</svg>
</button>
<div class={if *mobile_sidebar_open { "sidebar-overlay open" } else { "sidebar-overlay" }} onclick={on_close_click}></div>
<sidebar::Sidebar is_open={*mobile_sidebar_open} on_close={on_close} />
<sidebar::Sidebar/>
<main class="content">
{ for props.children.iter() }
</main>
@@ -138,7 +91,7 @@ fn sidebar_shell(props: &SidebarShellProps) -> Html {
}
}
/// Props for the AdminCheckWrapper component.
/// Props for the [AdminCheckWrapper] component.
#[derive(Properties, PartialEq)]
pub struct AdminCheckWrapperProps {
pub children: Children,
@@ -148,11 +101,11 @@ pub struct AdminCheckWrapperProps {
///
/// This component is used to gate access to pages that should only be accessible before
/// system initialization (e.g., login page). It performs an asynchronous check to the
/// backend's `/api/check-admin` endpoint (via `crate::handlers::auth::check_admin_exists`) to determine system state.
/// `/api/check-admin` endpoint to determine system state.
///
/// # Behavior
/// - **Loading**: Displays "Loading..." while checking admin status from the backend
/// - **No Admin**: Automatically redirects to [`Route::Setup`] page for initialization
/// - **Loading**: Displays "Loading..." while checking admin status
/// - **No Admin**: Automatically redirects to `/setup` page to initialize
/// - **Admin Exists**: Renders the wrapped children (e.g., login page)
///
/// # Example Usage
@@ -162,9 +115,19 @@ pub struct AdminCheckWrapperProps {
/// </AdminCheckWrapper>
/// ```
///
/// # Backend Integration
/// The check queries the backend's `/api/check-admin` endpoint which returns `{"has_admin": bool}`.
/// This allows the frontend to determine if initial admin setup is required.
/// # Implementation Detail
/// The check happens in `use_effect_with` on component mount:
/// ```ignore
/// spawn_local(async move {
/// match Request::get("/api/check-admin").send().await {
/// Ok(resp) if resp.status() == 200 => {
/// let has_admin = data["has_admin"].as_bool().unwrap_or(false);
/// admin_exists.set(Some(has_admin));
/// }
/// _ => admin_exists.set(Some(false))
/// }
/// });
/// ```
#[component(AdminCheckWrapper)]
fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
let admin_exists = use_state(|| None::<bool>);
@@ -192,10 +155,10 @@ fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
}
match *admin_exists {
None => html! { <div>{ "Wird geladen..." }</div> },
None => html! { <div>{ "Loading..." }</div> },
Some(false) => {
navigator.push(&Route::Setup);
html! { <div>{ "Wird weitergeleitet zur Einrichtung..." }</div> }
html! { <div>{ "Redirecting to setup..." }</div> }
}
Some(true) => props.children.clone().into(),
}
@@ -203,24 +166,18 @@ fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
/// The main routing logic for the application.
///
/// This function takes a [`Route`] enum variant and returns the corresponding HTML
/// This function takes a [Route] enum variant and returns the corresponding HTML
/// content to be rendered. It acts as a central dispatcher for the application's
/// navigation and authentication flow.
/// navigation.
///
/// Most routes are wrapped in [`ProtectedRoute`] to enforce authentication
/// and authorization based on the `admin_page` flag, and in [`SidebarShell`] to maintain consistent layout.
/// Login and Setup routes use [`AdminCheckWrapper`] instead to handle pre-authentication states.
/// Many routes are wrapped in a [`ProtectedRoute`] to enforce authentication
/// and authorization, and in a [`SidebarShell`] to maintain consistent layout.
///
/// # Arguments
/// - `route`: The [`Route`] enum variant representing the current URL path.
///
/// # Returns
/// An `Html` component that should be rendered for the given route.
///
/// # Route Protection
/// - **Admin-required routes** (`admin_page={true}`): Require both authentication and admin privileges
/// - **Public routes** (`admin_page={false}`): Require only authentication
/// - **Pre-auth routes** (`AdminCheckWrapper`): Used before admin creation or login
fn switch(route: Route) -> Html {
match route {
Route::Home => html! {
@@ -303,20 +260,15 @@ fn switch(route: Route) -> Html {
///
/// This component sets up the application's routing using `yew-router`'s
/// `BrowserRouter` and `Switch` components. All other application content
/// is rendered based on the current [`Route`] matched by the `switch` function.
///
/// Uses [`switch`] as the routing dispatcher to handle all route-specific rendering,
/// which applies appropriate middleware like [`ProtectedRoute`] and [`AdminCheckWrapper`].
/// is rendered based on the current route.
///
/// # Structure
/// - `BrowserRouter`: Enables client-side routing.
/// - `Switch`: Renders components based on the matched [`Route`].
/// - `switch` function: Determines which component to render for each route.
/// - `Switch`: Renders components based on the matched [Route].
#[component(App)]
pub fn app() -> Html {
html! {
<BrowserRouter>
<basic_pages::Icon/>
<Switch<Route> render={switch} />
</BrowserRouter>
}
frontend/src/main.rs
-4
View File
@@ -1,9 +1,5 @@
use frontend::App;
/// Main entry point for the Yew frontend application.
///
/// Initializes the Yew framework and renders the root [`App`] component into the DOM.
/// This function is typically called automatically by the WebAssembly runtime.
fn main() {
yew::Renderer::<App>::new().render();
}
frontend/src/pages/basic_pages.rs
+23 -45
View File
@@ -3,29 +3,8 @@ use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;
use yew_router::prelude::*;
/// Removes surrounding double quotes from a string.
///
/// This macro takes an expression that evaluates to a string and returns a new `String`
/// with any leading or trailing double quotes removed. It's useful for cleaning up
/// string data that might be inadvertently wrapped in quotes, such as JSON string values.
///
/// # Arguments
///
/// * `$str`: An expression that can be converted into a string slice (`&str`).
///
/// # Examples
///
/// ```rust
/// use your_crate::dequote; // Assuming `dequote` is re-exported or in scope
///
/// let quoted_string = "\"hello world\"";
/// let dequoted_string = dequote!(quoted_string);
/// assert_eq!(dequoted_string, "hello world");
///
/// let already_clean = "no quotes";
/// let dequoted_clean = dequote!(already_clean);
/// assert_eq!(dequoted_clean, "no quotes");
/// ```
/// A macro for dequoting a Json value returned from the backend
#[macro_export]
macro_rules! dequote {
($str:expr) => {
$str.trim_matches('"').to_string()
@@ -79,11 +58,15 @@ pub fn home_component() -> Html {
}
html! {
<div class="rundbg home">
<div class="form-container home">
<div class="page-header">
<h1>{ "Welcome" }</h1>
</div>
<crate::utilities::TicketCount/>
<p class="login-status">{ "Sie sind angemeldet als: " }</p>
<p class="name">{ &*name }</p>
<div>
<p>{ "You are logged in as: " }</p>
<p class="text-muted">{ &*name }</p>
</div>
</div>
}
}
@@ -101,21 +84,20 @@ pub fn home_component() -> Html {
/// ```
#[component(NotFound)]
pub fn not_found_component() -> Html {
let message = "404 Nicht gefunden";
let message = "404 Not found";
html! {
<div>
<div class="form-container">
<div class="empty-state">
<h1>{&message}</h1>
<Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
<p>{ "The page you are looking for does not exist." }</p>
<Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
</div>
</div>
}
}
/// A component displayed when a user attempts to access a page for which they do not have sufficient permissions.
///
/// It informs the user about the access restriction and provides instructions to contact
/// a specific person ("Herr Winter") if they believe this is an error.
/// It also includes a link to return to the home page.
///
/// # Example
/// ```rust
/// html! {
@@ -125,17 +107,13 @@ pub fn not_found_component() -> Html {
#[component(PermissionDenied)]
pub fn denied_component() -> Html {
html! {
<div>
<h1>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</h1>
<h3>{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</h3>
<Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
<div class="form-container">
<div class="empty-state">
<h1>{ "Access Denied" }</h1>
<p>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</p>
<p class="text-muted">{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</p>
<Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
</div>
</div>
}
}
#[component(Icon)]
pub fn icon_component() -> Html {
html! {
<img src="/assets/csg.png" class="csg-icon" />
}
}
frontend/src/pages/mod.rs
-1
View File
@@ -6,7 +6,6 @@
//! By re-exporting them here, other parts of the application can import page
//! components more conveniently using `crate::pages::*`.
pub mod basic_pages;
pub mod qr;
pub mod setup;
pub mod sidebar;
pub mod ticket;
frontend/src/pages/qr.rs
-118
View File
@@ -1,118 +0,0 @@
use base64::{Engine, engine::general_purpose::STANDARD};
use gloo_net::http::Request;
use serde::{Deserialize, Serialize};
use yew::prelude::*;
#[derive(Deserialize, Clone)]
struct QrResponse {
raw_token: String,
}
#[derive(Properties, PartialEq)]
pub struct QrManagerProps {
pub user_id: i16,
}
#[derive(Serialize)]
pub struct QrPayload {
user_id: i16,
}
#[function_component(QrManager)]
pub fn qr_manager(props: &QrManagerProps) -> Html {
let qr_image_data = use_state(|| None::<String>);
let error_message = use_state(|| None::<String>);
let user_id = props.user_id;
let on_generate_click = {
let qr_image_data = qr_image_data.clone();
let error_message = error_message.clone();
Callback::from(move |_| {
let qr_image_data = qr_image_data.clone();
let error_message = error_message.clone();
wasm_bindgen_futures::spawn_local(async move {
let payload = QrPayload { user_id };
match Request::post("/api/generate_qr")
.json(&payload)
.unwrap()
.send()
.await
{
Ok(response) if response.ok() => {
if let Ok(data) = response.json::<QrResponse>().await {
// Point scanned link to the public login endpoint with the token
let target_url = format!(
"{}/api/qr_login?token={}",
std::env::var("ORIGIN")
.ok()
.unwrap_or("http://localhost:8000".to_string()),
data.raw_token
);
match qrcode_generator::to_png_to_vec(
target_url,
qrcode_generator::QrCodeEcc::Medium,
250,
) {
Ok(png_bytes) => {
let base64_png = format!(
"data:image/png;base64,{}",
STANDARD.encode(&png_bytes)
);
qr_image_data.set(Some(base64_png));
error_message.set(None);
}
Err(_) => {
error_message
.set(Some("Failed to render QR graphic.".to_string()));
}
}
}
}
_ => {
error_message.set(Some(
"Failed to generate token. Are you logged in as an admin?".to_string(),
));
}
}
});
})
};
html! {
<div style="text-align: center; padding: 15px; border: 1px dashed #ccc; border-radius: 6px;">
<h4>{"Permanent Login Access"}</h4>
<p style="font-size: 0.85em; color: #555;">
{ format!("Generate a permanent bypass login QR code for User #{}", user_id) }
</p>
<button
onclick={on_generate_click}
style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;"
>
{"Generate QR Code"}
</button>
{ if let Some(ref err) = *error_message {
html! { <p style="color: #dc3545; margin-top: 10px; font-size: 0.9em;">{err}</p> }
} else {
html! {}
}}
{ if let Some(ref qr_src) = *qr_image_data {
html! {
<div style="margin-top: 15px;">
<img src={qr_src.clone()} alt="Login QR Code" style="border: 1px solid #ddd; padding: 8px; background: white;" />
<p style="font-size: 0.8em; color: #dc3545; font-weight: bold; margin-top: 8px;">
{"Warn the user to keep this QR code secure!"}
</p>
</div>
}
} else {
html! {}
}}
</div>
}
}
frontend/src/pages/setup.rs
+23 -25
View File
@@ -20,7 +20,6 @@ pub struct AdminSetupScheme {
pub first_name: String,
pub last_name: String,
pub username: String,
pub is_admin: bool,
pub pwd: String,
}
@@ -30,7 +29,7 @@ pub struct AdminSetupScheme {
/// a form to create the first admin user. Key functionality:
///
/// - **Admin Check**: On mount, verifies if an admin already exists by calling `/api/check-admin`.
/// If an admin is found, the user is redirected to the login page ([`crate::Route::Login`]).
/// If an admin is found, the user is redirected to the login page (`crate::Route::Login`).
/// - **Form Fields**: Collects `first_name`, `last_name`, `username`, `password`, and `confirm_password`.
/// - **Form Validation**:
/// - Ensures password fields are not empty.
@@ -104,7 +103,7 @@ pub fn initial_admin_setup() -> Html {
}
if !*admin_check_done {
return html! { <div>{ "Wird überprüft..." }</div> };
return html! { <div>{ "Checking..." }</div> };
}
let onsubmit = {
@@ -122,17 +121,17 @@ pub fn initial_admin_setup() -> Html {
e.prevent_default();
if (*pwd).is_empty() || (*pwd_confirm).is_empty() {
error.set("Passwortfelder dürfen nicht leer sein".to_string());
error.set("Password fields cannot be empty".to_string());
return;
}
if *pwd != *pwd_confirm {
error.set("Passwörter stimmen nicht überein".to_string());
error.set("Passwords do not match".to_string());
return;
}
if (*username).is_empty() {
error.set("Benutzername darf nicht leer sein".to_string());
error.set("Username cannot be empty".to_string());
return;
}
@@ -155,7 +154,6 @@ pub fn initial_admin_setup() -> Html {
first_name: first_name_val,
last_name: last_name_val,
username: username_val,
is_admin: true,
pwd: pwd_val,
};
@@ -174,28 +172,28 @@ pub fn initial_admin_setup() -> Html {
navigator.push(&crate::Route::Login);
}
Ok(r) => {
let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
error.set(text);
let text = r.text().await.unwrap_or_else(|_| "unknown".into());
error.set(format!("HTTP {}: {}", r.status(), text));
}
Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
Err(err) => error.set(format!("Network error: {}", err)),
}
});
})
};
html! {
<div class="setup-container rundbg">
<div class="setup-container">
<div class="setup-box">
<h1>{ "Admin-Einrichtung" }</h1>
<p>{ "Erstellen Sie Ihr erstes Administratorkonto" }</p>
<h1>{ "Initial Admin Setup" }</h1>
<p>{ "Create your first administrator account" }</p>
<form {onsubmit} class="setup-form">
<div class="form-group">
<label for="first_name">{ "Vorname:" }
<label for="first_name">{ "First Name:" }
<input
id="first_name"
type="text"
placeholder="Vorname"
placeholder="First name"
value={(*first_name).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -206,11 +204,11 @@ pub fn initial_admin_setup() -> Html {
</div>
<div class="form-group">
<label for="last_name">{ "Nachname:" }
<label for="last_name">{ "Last Name:" }
<input
id="last_name"
type="text"
placeholder="Nachname"
placeholder="Last name"
value={(*last_name).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -221,11 +219,11 @@ pub fn initial_admin_setup() -> Html {
</div>
<div class="form-group">
<label for="username">{ "Benutzername:" }
<label for="username">{ "Username:" }
<input
id="username"
type="text"
placeholder="Benutzername"
placeholder="Username"
value={(*username).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -236,11 +234,11 @@ pub fn initial_admin_setup() -> Html {
</div>
<div class="form-group">
<label for="password">{ "Passwort:" }
<label for="password">{ "Password:" }
<input
id="password"
type="password"
placeholder="Passwort"
placeholder="Password"
value={(*pwd).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -251,11 +249,11 @@ pub fn initial_admin_setup() -> Html {
</div>
<div class="form-group">
<label for="pwd_confirm">{ "Passwort bestätigen:" }
<label for="pwd_confirm">{ "Confirm Password:" }
<input
id="pwd_confirm"
type="password"
placeholder="Passwort bestätigen"
placeholder="Confirm password"
value={(*pwd_confirm).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -266,7 +264,7 @@ pub fn initial_admin_setup() -> Html {
</div>
<button type="submit" disabled={*loading} class="submit-btn">
{ if *loading { "Wird erstellt..." } else { "Administratorkonto erstellen" } }
{ if *loading { "Creating..." } else { "Create Admin Account" } }
</button>
if !error.is_empty() {
@@ -274,7 +272,7 @@ pub fn initial_admin_setup() -> Html {
}
if *success {
<p class="success-message" style="color:green">{ "Administratorkonto erfolgreich erstellt! Wird weitergeleitet zum Login..." }</p>
<p class="success-message" style="color:green">{ "Admin account created successfully! Redirecting to login..." }</p>
}
</form>
</div>
frontend/src/pages/sidebar.rs
+25 -84
View File
@@ -7,11 +7,6 @@ use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;
use yew_router::prelude::*;
/// The key used to store and retrieve the sidebar's expansion state in `LocalStorage`.
///
/// This constant ensures consistency when accessing the stored state across different
/// parts of the application. The value associated with this key in `LocalStorage`
/// will be a serialized [`SidebarExpandState`] object.
const STORAGE_KEY: &str = "sidebar_state";
/// Represents the expansion state of collapsible menus within the sidebar.
@@ -133,7 +128,7 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
Callback::from(move |v: bool| {
state.set(SidebarExpandState {
ticket_open: v,
users_open: state.users_open,
users_open: (*state).users_open,
})
})
};
@@ -141,10 +136,10 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
let toggle_tickets = {
let state = state.clone();
Callback::from(move |_| {
let current = state.ticket_open;
let current = (*state).ticket_open;
state.set(SidebarExpandState {
ticket_open: !current,
users_open: state.users_open,
users_open: (*state).users_open,
});
})
};
@@ -153,7 +148,7 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
let state = state.clone();
Callback::from(move |v: bool| {
state.set(SidebarExpandState {
ticket_open: state.ticket_open,
ticket_open: (*state).ticket_open,
users_open: v,
})
})
@@ -162,9 +157,9 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
let toggle_users = {
let state = state.clone();
Callback::from(move |_| {
let current = state.users_open;
let current = (*state).users_open;
state.set(SidebarExpandState {
ticket_open: state.ticket_open,
ticket_open: (*state).ticket_open,
users_open: !current,
});
})
@@ -234,10 +229,10 @@ pub fn ticket_menu() -> Html {
html! {
<ul class="submenu" role="menu">
<li role="none">
<Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Ticket einreichen" }</span></Link<crate::Route>>
<Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Submit Ticket" }</span></Link<crate::Route>>
</li>
<li role="none">
<Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "Tickets anzeigen" }</span></Link<crate::Route>>
<Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "View Tickets" }</span></Link<crate::Route>>
</li>
</ul>
}
@@ -289,7 +284,7 @@ pub fn users_menu() -> Html {
onclick={on_toggle}
aria-expanded={open.to_string()}
>
{ "Benutzer" }
{ "Users" }
{ if open { " ▾" } else { " ▸" } }
</button>
@@ -298,10 +293,10 @@ pub fn users_menu() -> Html {
html! {
<ul class="submenu" role="menu">
<li role="none">
<Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Benutzer erstellen" }</span></Link<crate::Route>>
<Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Create User" }</span></Link<crate::Route>>
</li>
<li role="none">
<Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "Benutzer anzeigen" }</span></Link<crate::Route>>
<Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "View Users" }</span></Link<crate::Route>>
</li>
</ul>
}
@@ -319,11 +314,6 @@ pub fn users_menu() -> Html {
/// and administrative status. It fetches the current user's details via `/api/users/current`
/// to determine what menu items to display.
///
/// # Mobile Support
/// On small screens:
/// - Slides into view from the left when `props.is_open` is `true`.
/// - Renders a close button (`✕`) in the header that emits `props.on_close`.
///
/// # Structure
/// - Wraps its content in a [`SidebarStateProvider`] to allow nested menus to manage their state.
/// - Contains a navigation (`<nav>`) element with an unordered list (`<ul>`) of menu items.
@@ -342,22 +332,8 @@ pub fn users_menu() -> Html {
/// # Logout Functionality
/// The "Logout" button sends a GET request to `/api/logout`, clears the user's session,
/// and then redirects the user to the login page (`crate::Route::Login`).
/// Properties for the [`Sidebar`] component.
///
/// These properties enable managing and controlling the responsive mobile sidebar
/// layout and its visibility settings.
#[derive(Properties, PartialEq)]
pub struct SidebarComponentProps {
/// A boolean flag indicating whether the mobile sidebar is currently slid open (`true`) or hidden (`false`).
#[prop_or_default]
pub is_open: bool,
/// A callback emitted when the user requests to close/hide the mobile sidebar.
#[prop_or_default]
pub on_close: Callback<()>,
}
#[component(Sidebar)]
pub fn sidebar(props: &SidebarComponentProps) -> Html {
pub fn sidebar() -> Html {
let is_admin = use_state(|| None::<bool>);
let navigator = use_navigator().expect("Sidebar must be used within a Router");
@@ -398,84 +374,49 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
};
match *is_admin {
None => html! { <div class="sidebar-loading">{ "Wird geladen..." }</div> },
None => html! { <div class="sidebar-loading">{ "Loading..." }</div> },
// Non-admin: render a condensed user sidebar (no diagnostics, limited links)
Some(false) => {
let on_close = props.on_close.clone();
html! {
Some(false) => html! {
<SidebarStateProvider>
<nav class={if props.is_open { "sidebar user open" } else { "sidebar user" }}>
<nav class="sidebar user">
<ul>
<li class="sidebar-header">
<Link<crate::Route> to={crate::Route::Home} classes="home">
<svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</Link<crate::Route>>
<button class="sidebar-close" onclick={move |_| on_close.emit(())}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</li>
<Link<crate::Route> to={crate::Route::Home}>{ "󰟒" }</Link<crate::Route>>
<TicketMenu/>
<li class="logout-item">
<crate::darkmode::ThemeToggle/>
<button
class="sidebar-button"
class="logout-button"
onclick={on_logout.clone()}
>
{ "Abmelden" }
{ "Logout" }
</button>
</li>
</ul>
</nav>
</SidebarStateProvider>
}
}
},
// Admin: full sidebar wrapped in provider so submenu state persists
Some(true) => {
let on_close = props.on_close.clone();
html! {
Some(true) => html! {
<SidebarStateProvider>
<nav class={if props.is_open { "sidebar admin open" } else { "sidebar admin" }}>
<nav class="sidebar admin">
<ul>
<li class="sidebar-header">
<Link<crate::Route> to={crate::Route::Home} classes="home">
<svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</Link<crate::Route>>
<button class="sidebar-close" onclick={move |_| on_close.emit(())}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</li>
<Link<crate::Route> to={crate::Route::Home}>{ "󰟒" }</Link<crate::Route>>
<TicketMenu/>
<UsersMenu/>
<Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
<Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
<li class="logout-item">
<crate::darkmode::ThemeToggle/>
<button
class="sidebar-button"
class="logout-button"
onclick={on_logout.clone()}
>
{ "Abmelden" }
{ "Logout" }
</button>
</li>
</ul>
</nav>
</SidebarStateProvider>
},
}
}
}
}
frontend/src/pages/ticket.rs
+83 -56
View File
@@ -169,6 +169,31 @@ pub fn submit_ticket_component() -> Html {
let valid_rooms: HashSet<i16> = VALID_ROOMS.iter().copied().collect();
{
let message = "Bevor sie zum Support weitergeleitet werden prüfen sie ob:
- Ob das Problem durch Neustarten gelößt wird
- Ob sie die richtigen Anmeldedaten genutzt habem
- Alle notwendigen Kabel eingesteckt sind
Wenn es funktioniert hat klicken sie bitte \"Abbrechen\""
.to_string();
use_effect(move || {
if let Some(win) = web_sys::window() {
let _ = if win.confirm_with_message(&message).unwrap() {
} else {
spawn_local(async move {
let _ = Request::post("/api/count")
.credentials(web_sys::RequestCredentials::Include)
.send()
.await;
});
let _ = win.location().set_href("/");
};
}
|| ()
});
}
let onsubmit = {
let category = category.clone();
let betreff = betreff.clone();
@@ -180,7 +205,7 @@ pub fn submit_ticket_component() -> Html {
Callback::from(move |e: SubmitEvent| {
e.prevent_default();
if room.is_none() {
status.set(Some("Ungültiger Raum".into()));
status.set(Some("Invalid room".into()));
return;
}
let category = (*category).clone();
@@ -188,7 +213,7 @@ pub fn submit_ticket_component() -> Html {
let description = (*description).clone();
let room = room.unwrap();
if !valid_rooms.contains(&room) {
status.set(Some("Raum nicht erlaubt".into()));
status.set(Some("Room not allowed".into()));
return;
}
let status = status.clone();
@@ -208,12 +233,9 @@ pub fn submit_ticket_component() -> Html {
.expect("Failed to build request");
match request.send().await {
Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
Ok(response) => {
let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
status.set(Some(text));
},
Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
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))),
}
});
})
@@ -290,15 +312,17 @@ pub fn submit_ticket_component() -> Html {
let room_valid = (*room).is_some();
html! {
<form class="rundbg" {onsubmit}>
<div class="form-container">
<div class="page-header">
<h1>{ "Create Ticket" }</h1>
</div>
<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}/>
<textarea value={(*description).clone()} oninput={description_change}/>
</label>
<br/>
<label>{ "Kategorie:" }
<select value={(*category).clone()} onchange={category_change}>
<option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
@@ -309,33 +333,32 @@ pub fn submit_ticket_component() -> Html {
<option value="Sonstiges">{ "Sonstiges" }</option>
</select>
</label>
<br/>
<label>{ "Raum:" }
<input type="text" value={(*room_input).clone()} oninput={room_change}/>
</label>
{
if !room_valid {
html! {
<p class="warning" >{ "Ungültiger/nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
<p class="alert error">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K8, D1)" }</p>
}
} else {
html! {}
}
}
<br/>
<button type="submit">{ "Absenden" }</button>
<button type="submit">{ "Send" }</button>
<Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
<Link<crate::Route> to={crate::Route::AllTickets}>{ "View All Tickets" }</Link<crate::Route>>
{
if let Some(s) = &*status {
html!{ <p>{ s }</p> }
html!{ <p class="alert success">{ s }</p> }
} else {
html!{}
}
}
</form>
</div>
}
}
@@ -451,12 +474,9 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
.expect("Failed to construct request");
match request.send().await {
Ok(response) if response.status() == 200 => error.set(Some("Erfolg".into())),
Ok(response) => {
let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
error.set(Some(text));
},
Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
Ok(response) if response.status() == 200 => error.set(Some("Success".into())),
Ok(response) => error.set(Some(format!("Error: {}", response.status()))),
Err(err) => error.set(Some(format!("Network error: {}", err))),
}
});
})
@@ -494,13 +514,14 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
match request.send().await {
Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
ticket_state.set(None);
// remove local state or navigate away
ticket_state.set(None); // clears the shown item
}
Ok(resp) => {
let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
delete_error.set(Some(txt));
let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
}
Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
Err(err) => delete_error.set(Some(format!("Network error: {}", err))),
}
deleting.set(false);
});
@@ -508,12 +529,12 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
};
if *loading {
html! {<p>{ "Wird geladen" }</p>}
html! {<p>{ "Loading" }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p>{ format!("Error: {}", e) }</p> }
} else if let Some(t) = &*ticket {
html! {
<div class="rundbg">
<div>
<h1>{ format!("Ticket #{}", t.id) }</h1>
<p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
<p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
@@ -554,7 +575,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
</div>
}
} else {
html! { <p>{ "Kein Ticket gefunden." }</p> }
html! { <p>{ "No ticket found." }</p> }
}
}
@@ -664,12 +685,16 @@ pub fn all_tickets_component() -> Html {
}
if *loading {
html! {<p>{ "Wird geladen" }</p>}
html! {<p>{ "Loading" }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p>{ format!("Error: {}", e) }</p> }
} else {
html! {
<ul class= "postits">
<div>
<div class="page-header">
<h1>{ "All Tickets" }</h1>
</div>
<ul class="ticket-list">
{ for tickets.iter().filter(|t| t.status != "Archived" && (if user.is_admin { true } else if let Some(uid) = user.id { t.user_id == uid } else { false })).map(|t| {
let status_class = match t.status.as_str() {
"ToDo" => "To-Do",
@@ -679,14 +704,17 @@ pub fn all_tickets_component() -> Html {
_ => "To-Do"
};
html! {
<div class={classes!{status_class, "listbox"}}>
<li key={t.id.to_string()}>
<Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff,) }</h3></Link<crate::Route>>
<li key={t.id.to_string()} class={status_class}>
<Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff) }</h3></Link<crate::Route>>
<p>{ &t.description }</p>
</li>
</div>
}})}
}
})}
</ul>
<div class="ticket-list-actions">
<Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
</div>
</div>
}
}
}
@@ -747,17 +775,17 @@ pub fn archived_tickets_component() -> Html {
Ok(response) if response.status() == 200 => {
match response.json::<Vec<Ticket>>().await {
Ok(t) => tickets.set(t),
Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
Err(e) => error.set(Some(format!("parse error: {}", e))),
}
}
Ok(response) => {
if let Ok(text) = response.text().await {
error.set(Some(text));
} else {
error.set(Some(format!("Status {}", response.status())));
error.set(Some(format!("status {}", response.status())));
}
}
Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
Err(err) => error.set(Some(format!("Network error: {}", err))),
}
loading.set(false);
});
@@ -797,29 +825,28 @@ pub fn archived_tickets_component() -> Html {
}
if *loading {
html! {<p>{ "Wird geladen" }</p>}
html! {<p>{ "Loading" }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p>{ format!("Error: {}", e) }</p> }
} else {
html! {
<ul class="postits">
<div>
<div class="page-header">
<h1>{ "Archivierte Tickets" }</h1>
</div>
<ul class="ticket-list">
{ for tickets.iter().filter(|t| t.status == "Archived" && (user.is_admin || if let Some(uid) = user.id { t.user_id == uid } else { false })).map(|t| html! {
<div class="listbox">
<div>
<li key={t.id.to_string()}>
<Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
<Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff) }</h3></Link<crate::Route>>
<p>{ &t.description }</p>
<p>{ match t.status.as_str() {
"ToDo" => "Zu tun",
"InProgress" => "In Bearbeitung",
"Completed" => "Erledigt",
"Archived" => "Archiviert",
_ => "Ungültiger Status"
}}</p>
</li>
</div>
})}
</ul>
</div>
}
}
}
frontend/src/pages/user.rs
+59 -44
View File
@@ -102,14 +102,6 @@ pub struct UserProps {
pub id: i16,
}
/// Represents an error response from the API.
///
/// This struct is used to deserialize error messages received from the backend API.
/// It typically contains a human-readable message and an internal status code.
///
/// # Fields
/// - `message`: A `String` containing a description of the error.
/// - `_status`: An internal status code or message, often ignored in frontend display.
#[derive(Deserialize, Debug)]
struct ApiError {
message: String,
@@ -181,12 +173,9 @@ pub fn register_component() -> Html {
.expect("Error building request");
match request.send().await {
Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
Ok(response) => {
let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
status.set(Some(text));
}
Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
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))),
}
});
})
@@ -233,7 +222,11 @@ pub fn register_component() -> Html {
};
html! {
<form {onsubmit} class="rundbg">
<div class="form-container">
<div class="page-header">
<h1>{ "Register User" }</h1>
</div>
<form {onsubmit}>
<label>{ "Vorname:" }
<input type="text" value={(*first_name).clone()} oninput={fn_change}/>
</label>
@@ -251,6 +244,7 @@ pub fn register_component() -> Html {
</label>
<button type="submit">{ "Bestätigen" }</button>
</form>
</div>
}
}
@@ -329,21 +323,24 @@ pub fn login_component() -> Html {
navigator.push(&crate::Route::Home);
}
Ok(r) => {
let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
error.set(text);
let text = r.text().await.unwrap_or_else(|_| "unknown".into());
error.set(format!("HTTP {}: {}", r.status(), text));
}
Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
Err(err) => error.set(format!("Network error: {}", err)),
}
});
})
};
html! {
<div>
<h1 class="headline">{ "Anmeldung" }</h1>
<form {onsubmit} class="rundbg login">
<main class="content">
<div class="form-container">
<div class="page-header">
<h1>{ "Login" }</h1>
</div>
<form {onsubmit}>
<input
placeholder="Benutzername"
placeholder="username"
value={(*username).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -352,17 +349,18 @@ pub fn login_component() -> Html {
/>
<input
type="password"
placeholder="Passwort"
placeholder="password"
value={(*pwd).clone()}
oninput={Callback::from(move |e: InputEvent| {
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
pwd.set(input.value());
})}
/>
<button type="submit" disabled={*loading}>{ if *loading { "Anmeldung läuft..." } else { "Anmelden" } }</button>
if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
<button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
</form>
</div>
</main>
}
}
@@ -431,18 +429,37 @@ pub fn all_users_component() -> Html {
}
if *loading {
html! {<p>{ "Wird geladen" }</p>}
html! {
<div class="form-container">
<div class="page-header">
<h1>{ "All Users" }</h1>
</div>
<p>{ "Loading..." }</p>
</div>
}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! {
<div class="form-container">
<div class="page-header">
<h1>{ "All Users" }</h1>
</div>
<p class="alert error">{ format!("Error: {}", e) }</p>
</div>
}
} else {
html! {
<ul class="postits">
<div class="form-container">
<div class="page-header">
<h1>{ "All Users" }</h1>
</div>
<ul class="user-list">
{ for users.iter().map(|t| html! {
<li key={t.id.to_string()} class="listbox">
<li key={t.id.to_string()}>
<Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}", t.first_name, t.last_name) }</h3></Link<crate::Route>>
</li>
})}
</ul>
</div>
}
}
}
@@ -577,7 +594,6 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
let last_name = (*last_name).clone();
let username = (*username).clone();
let make_admin = *make_admin;
let new_pwd_state = new_pwd.clone();
let new_pwd = (*new_pwd).clone();
saving.set(true);
@@ -612,7 +628,6 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
if let Ok(updated) = resp.json::<FilteredUser>().await {
user_state.set(Some(updated));
}
new_pwd_state.set(String::new());
save_success.set(true);
}
Ok(resp) => {
@@ -640,7 +655,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
// confirm
if !web_sys::window()
.and_then(|w| {
w.confirm_with_message("Möchten Sie diesen Eintrag wirklich löschen?")
w.confirm_with_message("Are you sure you want to delete this item?")
.ok()
})
.unwrap_or(false)
@@ -656,18 +671,19 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
let user_state = user_state.clone();
spawn_local(async move {
let url = format!("/api/users/{}", id);
let url = format!("/api/users/{}", id); // or /api/tickets/{}
let req = Request::delete(&url).credentials(web_sys::RequestCredentials::Include);
match req.send().await {
Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
user_state.set(None);
// remove local state or navigate away
user_state.set(None); // clears the shown item
}
Ok(resp) => {
let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
delete_error.set(Some(txt));
let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
}
Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
Err(err) => delete_error.set(Some(format!("Network error: {}", err))),
}
deleting.set(false);
});
@@ -675,12 +691,12 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
};
if *loading {
html! {<p>{ "Wird geladen" }</p>}
html! {<p>{ "Loading" }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p>{ format!("Error: {}", e) }</p> }
} else if let Some(u) = &*user {
html! {
<div class="rundbg">
<div>
<div>
<p><strong>{ "Vorname: " }</strong>{ &u.first_name }</p>
<p><strong>{ "Nachname: " }</strong>{ &u.last_name }</p>
@@ -688,8 +704,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
<p><strong>{ "Ist Admin: " }</strong>{ u.is_admin }</p>
</div>
<crate::pages::qr::QrManager user_id={u.id}/>
<h1>{ format!("User #{}", u.id) }</h1>
<form onsubmit={onsubmit}>
<div>
<label>{ "Vorname" }
@@ -746,7 +761,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
<button type="submit" disabled={*saving}>{ if *saving { "Speichern..." } else { "Speichern" } }</button>
if *save_success {
<p style="color:green">{ "Erfolgreich aktualisiert" }</p>
<p style="color:green">{ "Updated successfully" }</p>
}
if let Some(err) = &*save_error {
<p style="color:red">{ err.clone() }</p>
@@ -764,6 +779,6 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
</div>
}
} else {
html! { <p>{ "Kein Benutzer gefunden." }</p> }
html! { <p>{ "No ticket found." }</p> }
}
}
frontend/src/pages/utilities.rs
+190 -32
View File
@@ -6,8 +6,15 @@ use serde::Deserialize;
use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;
use crate::dequote;
use crate::pages::ticket::{ActiveUser, Ticket};
/// The response struct for the [EasyFixCount]
#[derive(Deserialize)]
struct CountResponse {
value: i64,
}
/// A partial representation of a ticket, containing only the fields necessary for statistical analysis.
///
/// This struct is used to efficiently retrieve and process ticket data for diagnostics
@@ -16,10 +23,27 @@ use crate::pages::ticket::{ActiveUser, Ticket};
/// # Fields
/// - `date`: The creation date and time of the ticket in UTC.
/// - `room`: The room number associated with the ticket.
#[derive(Debug, Deserialize, Clone, PartialEq)]
struct TicketPartial {
date: DateTime<Utc>,
room: i16,
user_id: i16,
}
/// A partial representation of a user, containing only the fields necessary for statistical analysis.
///
/// This struct is used to retrieve and process user data for diagnostics
///
/// # Fields
/// - `id`: The users id
/// - `first_name`: The users first name
/// - `last_name`: The users last name
#[derive(Debug, Deserialize, Clone, PartialEq)]
struct UserPartial {
id: i16,
first_name: String,
last_name: String,
}
/// Properties for components that display room-wise ticket totals.
@@ -28,12 +52,18 @@ struct TicketPartial {
/// for calculating and visualizing ticket distribution per room.
///
/// # Fields
/// - `tickets`: A vector of [`TicketPartial`] containing ticket data relevant for room totals.
/// - `tickets`: A vector of `TicketPartial` containing ticket data relevant for room totals.
#[derive(Properties, PartialEq)]
struct RoomTotalsProps {
tickets: Vec<TicketPartial>,
}
#[derive(Properties, PartialEq)]
struct UserTotalProps {
users: Vec<UserPartial>,
tickets: Vec<TicketPartial>,
}
/// Converts a `chrono::DateTime<Utc>` object's weekday to a 0-indexed integer.
///
/// This function maps `chrono::Weekday` values (where Monday is 1, Sunday is 7)
@@ -64,7 +94,7 @@ fn weekday_index(dt: &DateTime<Utc>) -> usize {
/// the total count of tickets submitted on that day.
///
/// # Arguments
/// - `tickets`: A slice of [`TicketPartial`] items to count.
/// - `tickets`: A slice of `TicketPartial` items to count.
///
/// # Returns
/// An array `[usize; 7]` with ticket counts for each weekday.
@@ -78,12 +108,12 @@ fn count_by_weekday(tickets: &[TicketPartial]) -> [usize; 7] {
/// Calculates the occurrences of each weekday within the date range covered by the tickets.
///
/// This function determines the minimum and maximum dates from the provided [`TicketPartial`]
/// This function determines the minimum and maximum dates from the provided `TicketPartial`
/// slice and then counts how many times each weekday occurs within that inclusive date range.
/// This is useful for normalizing ticket counts against the number of available days for each weekday.
///
/// # Arguments
/// - `partials`: A slice of [`TicketPartial`] items defining the date range.
/// - `partials`: A slice of `TicketPartial` items defining the date range.
///
/// # Returns
/// An array `[usize; 7]` where each element represents the number of times a
@@ -132,8 +162,7 @@ fn day_counts(partials: &[TicketPartial]) -> [usize; 7] {
/// Converts a numerical room representation back into a human-readable string format.
///
/// This function is the inverse of the room parsing logic in
/// [`SubmitTicket`](`crate::pages::ticket::SubmitTicket`) component.
/// This function is the inverse of the room parsing logic in `SubmitTicket` component.
/// It converts negative numbers back to "K" prefixed rooms, numbers >= 1000 back to "D" prefixed rooms,
/// and other numbers to their string representation.
///
@@ -170,8 +199,9 @@ fn parse_room(r: i16) -> String {
#[component(Diagnostics)]
pub fn diagnostics_component() -> Html {
html! {
<div class="rundbg">
<div>
<TicketCount/>
<EasyFixCount/>
<SubmitStats/>
</div>
}
@@ -225,17 +255,17 @@ pub fn ticket_count_component() -> Html {
Ok(response) if response.status() == 200 => {
match response.json::<Vec<Ticket>>().await {
Ok(t) => tickets.set(t),
Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
Err(e) => error.set(Some(format!("parse error: {}", e))),
}
}
Ok(response) => {
if let Ok(text) = response.text().await {
error.set(Some(text));
} else {
error.set(Some(format!("Status {}", response.status())));
error.set(Some(format!("status {}", response.status())));
}
}
Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
Err(err) => error.set(Some(format!("Network error: {}", err))),
}
loading.set(false);
});
@@ -275,9 +305,9 @@ pub fn ticket_count_component() -> Html {
}
if *loading {
html! {<p>{ "Wird geladen" }</p>}
html! {<p>{ "Loading" }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p>{ format!("Error: {}", e) }</p> }
} else {
let status_conditions = |t: &Ticket| t.status == "ToDo" || t.status == "InProgress";
let count = tickets
@@ -288,9 +318,9 @@ pub fn ticket_count_component() -> Html {
})
.count();
html! {
<div class="ticket-count">
<h2>{ "Offene Tickets" }</h2>
<h4>{ count }</h4>
<div class="open-tickets">
<h2 class="left">{ "Offene Tickets" }</h2>
<h4 class="ticket_count center">{ count }</h4>
</div>
}
}
@@ -304,12 +334,12 @@ pub fn ticket_count_component() -> Html {
///
/// # State
/// Uses `use_state` hooks to manage:
/// - `tickets`: A vector of [`TicketPartial`] for statistical analysis.
/// - `tickets`: A vector of `TicketPartial` for statistical analysis.
/// - `error`: Any error message from API calls.
/// - `loading`: A boolean indicating if data is being fetched.
///
/// # Functionality
/// - Fetches all tickets (as [`TicketPartial`]) from `/api/tickets`.
/// - Fetches all tickets (as `TicketPartial`) from `/api/tickets`.
/// - Calculates:
/// - `counts`: Number of tickets submitted on each weekday.
/// - `occ`: Number of occurrences of each weekday in the ticket date range.
@@ -326,11 +356,13 @@ pub fn ticket_count_component() -> Html {
#[component(SubmitStats)]
pub fn submit_stats_component() -> Html {
let tickets = use_state(|| Vec::<TicketPartial>::new());
let users = use_state(|| Vec::<UserPartial>::new());
let error = use_state(|| None::<String>);
let loading = use_state(|| false);
{
let tickets = tickets.clone();
let users = users.clone();
let error = error.clone();
let loading = loading.clone();
@@ -342,18 +374,36 @@ pub fn submit_stats_component() -> Html {
Ok(response) if response.status() == 200 => {
match response.json::<Vec<TicketPartial>>().await {
Ok(t) => tickets.set(t),
Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
Err(e) => error.set(Some(format!("parse error: {}", e))),
}
}
Ok(response) => {
if let Ok(text) = response.text().await {
error.set(Some(text));
} else {
error.set(Some(format!("Status {}", response.status())));
error.set(Some(format!("status {}", response.status())));
}
}
Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
Err(err) => error.set(Some(format!("Network error: {}", err))),
}
match Request::get("/api/users").send().await {
Ok(response) if response.status() == 200 => {
match response.json::<Vec<UserPartial>>().await {
Ok(u) => users.set(u),
Err(e) => error.set(Some(format!("users parse error: {}", e))),
}
}
Ok(response) => {
if let Ok(text) = response.text().await {
error.set(Some(text));
} else {
error.set(Some(format!("users status {}", response.status())));
}
}
Err(err) => error.set(Some(format!("users network error: {}", err))),
}
loading.set(false);
});
|| ()
@@ -372,7 +422,7 @@ pub fn submit_stats_component() -> Html {
}
}
let weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
let weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let (max_idx, _max_val) = counts
.iter()
.enumerate()
@@ -383,12 +433,12 @@ pub fn submit_stats_component() -> Html {
html! {
<div class="diagnostics-section">
if *loading {
<p>{ "Wird geladen..." }</p>
<p>{ "Loading..." }</p>
}
if let Some(e) = &*error {
<p style="color: red;">{ e.clone() }</p>
}
<h3>{ "Tickets pro Wochentag" }</h3>
<h3>{ "Tickets per weekday" }</h3>
<div class="weekday-chart">
<div class="weekday-bars">
{ for (0..7).map(|i| {
@@ -415,8 +465,17 @@ pub fn submit_stats_component() -> Html {
})}
</div>
</div>
<div class="diagnostics-row">
<div class="diagnostics-column">
<h3>{ "Tickets pro Raum" }</h3>
<RoomTotalTickets tickets={(*tickets).clone()}/>
</div>
<div class="diagnostics-column">
<h3>{ "Tickets pro Benutzer" }</h3>
<UserTotal users={(*users).clone()} tickets={(*tickets).clone()}/>
</div>
</div>
</div>
}
}
@@ -434,7 +493,7 @@ pub fn submit_stats_component() -> Html {
/// - **Sorts Results**: Displays rooms sorted by ticket count in descending order.
/// - **Visualizes Data**: Renders a bar chart where the width of each bar is
/// proportional to the ticket count for that room, relative to the room with the maximum tickets.
/// - **Room Formatting**: Uses the [`parse_room`] function to display room numbers
/// - **Room Formatting**: Uses the `parse_room` function to display room numbers
/// in a human-readable format.
///
/// # Example
@@ -457,19 +516,18 @@ fn room_total_component(props: &RoomTotalsProps) -> Html {
html! {
<div class="diagnostics-section">
<h3>{ "Tickets pro Raum" }</h3>
<div class="room-chart">
<div class="chart">
{ for totals_vec.into_iter().map(|(room, count)| {
let label = parse_room(room);
let bar_width_percent = (count as f64 / max_count as f64) * 100.0;
html! {
<div class="room-bar-item">
<div class="room-header">
<span class="room-label">{ label }</span>
<span class="room-count">{ count }</span>
<div class="bar-item">
<div class="diagnostics-header">
<span class="diagnostics-label">{ label }</span>
<span class="diagnostics-count">{ count }</span>
</div>
<div class="room-bar-container">
<div class="room-bar" style={format!("width: {}%;", bar_width_percent)}>
<div class="bar-container">
<div class="bar" style={format!("width: {}%;", bar_width_percent)}>
</div>
</div>
</div>
@@ -479,3 +537,103 @@ fn room_total_component(props: &RoomTotalsProps) -> Html {
</div>
}
}
#[component(UserTotal)]
fn user_total_component(props: &UserTotalProps) -> Html {
let name_map: HashMap<i16, (String, String)> = props
.users
.iter()
.map(|u| (u.id, (u.first_name.clone(), u.last_name.clone())))
.collect();
let mut counts: HashMap<i16, usize> = HashMap::new();
for t in &props.tickets {
*counts.entry(t.user_id).or_insert(0) += 1;
}
let mut totals_vec: Vec<(i16, String, String, usize)> = name_map
.into_iter()
.map(|(id, (fname, lname))| {
let c = counts.get(&id).cloned().unwrap_or(0);
(id, fname, lname, c)
})
.collect();
totals_vec.sort_by(|a, b| b.3.cmp(&a.3));
let max_count = totals_vec
.iter()
.map(|(_, _, _, c)| *c)
.max()
.unwrap_or(1)
.max(1);
html! {
<div class="diagnostics-section">
<div class="chart">
{ for totals_vec.into_iter().map(|(_id, fname, lname, count)| {
let label = format!("{} {}", dequote!(fname), dequote!(lname));
let bar_width_percent = (count as f64 / max_count as f64) * 100.0;
html! {
<div class="bar-item">
<div class="diagnostics-header">
<span class="diagnostics-label">{ label }</span>
<span class="diagnostics-count">{ count }</span>
</div>
<div class="bar-container">
<div class="bar" style={format!("width: {}%;", bar_width_percent)}>
</div>
</div>
</div>
}
}) }
</div>
</div>
}
}
/// A component for displaying how many problems were solved without creating a ticket
///
/// # Functionality
/// Fetches the value for the count from `/api/count` and parses it into a [`CountResponse`]
///
/// # Example
/// ``` rust
/// html! {
/// <EasyFixCount/>
/// }
/// ```
#[component(EasyFixCount)]
fn easy_fix_component() -> Html {
let count = use_state(|| 0);
let error = use_state(|| None::<String>);
{
let count = count.clone();
let error = error.clone();
use_effect_with((), move |_| {
spawn_local(async move {
match Request::get("/api/count").send().await {
Ok(resp) if resp.status() == 200 => match resp.json::<CountResponse>().await {
Ok(r) => count.set(r.value),
Err(e) => error.set(Some(format!("parse error: {}", e))),
},
Ok(resp) => error.set(Some(
resp.text()
.await
.unwrap_or_else(|_| format!("status {}", resp.status())),
)),
Err(e) => error.set(Some(format!("Network error: {}", e))),
}
});
|| ()
});
}
html! {
<div class="open-tickets">
<h2 class="left">{ "Probleme ohne Ticket gelößt" }</h2>
<h4 class="ticket_count center">{ *count }</h4>
</div>
}
}
frontend/src/styles/_mixins.scss
+8 -4
View File
@@ -1,8 +1,12 @@
@use "variables" as *;
@mixin card {
backgroud: #fff;
border-radius: &border-radius;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
padding: var(--spacing-md);
background: $color-container;
border-radius: $border-radius;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: $spacing-md;
@media (prefers-color-scheme: dark) {
background: $color-container-dark;
}
}
frontend/src/styles/_utilities.scss
+2 -3
View File
@@ -1,6 +1,5 @@
@use "variables" as *;
.u-hidden { display: none !important; }
.u-gap-sm { gap: var(--spacing-sm); }
.text-muted { color: var(--color-muted); }
.u-gap-sm { gap: $spacing-sm; }
.text-muted { color: $color-muted; }
frontend/src/styles/_variables.scss
+32 -32
View File
@@ -1,34 +1,34 @@
:root {
--color-bg: #ffffff;
--color-sidebar: #570000;
--color-accent: #2563eb;
--color-muted: #6b7280;
--spacing-sm: 8px;
--spacing-md: 16px;
--border-radius: 6px;
--rundbgbackgroundcolor: #a0a0a0;
--sidebar-font: #fffefe;
--color: #000000;
--color-container: #f0f0f0;
--color-text: #000000;
--color-placeholder: #757575;
--color-input: #1a1a1a;
}
// Color Palette (Reference Style)
$color-bg: #f0f2f5;
$color-bg-dark: #121212;
$color-container: #ffffff;
$color-container-dark: #333333;
$color-sidebar: #0f172a;
$color-primary: #2b79c2;
$color-primary-hover: #1d5fa0;
$color-accent: #2b79c2;
$color-muted: #6b7280;
$color-text: #111827;
$color-text-dark: #e2e2e2;
[data-theme='dark'] {
--color-bg: #000000;
--color-sidebar: #b7d300;
--color-accent: #eb2525;
--color-muted: #999999;
--spacing-sm: 8px;
--spacing-md: 16px;
--border-radius: 6px;
--rundbgbackgroundcolor: #505050;
--sidebar-font: #000000;
--color: #000000;
--color-container: #1a1a1a;
--color-text: #000000;
--color-placeholder: #a0a0a0;
--color-input: #f0f0f0;
}
// Status Colors
$color-status-todo: #ffcccc;
$color-status-todo-text: #a00;
$color-status-inprogress: #fff3cd;
$color-status-inprogress-text: #856404;
$color-status-done: #d4edda;
$color-status-done-text: #155724;
$color-status-archived: #e0e0e0;
$color-status-archived-text: #666666;
// Action Colors
$color-logout: #ff4d4d;
$color-logout-hover: #e60000;
// Spacing
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 2rem;
$border-radius: 0.5rem;
$border-radius-lg: 10px;
frontend/src/styles/components/_alltickets.scss
+82
View File
@@ -0,0 +1,82 @@
@use "../variables" as *;
.ticket-list {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: $spacing-lg;
li {
border-left: 4px solid;
padding: 1rem;
margin-bottom: 1rem;
border-radius: $border-radius-lg;
background: $color-container;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
background: $color-container-dark;
}
h3 {
margin-top: 0;
margin-bottom: $spacing-md;
color: $color-primary;
a {
color: $color-primary;
text-decoration: none;
transition: color 0.2s ease-in-out;
&:hover {
color: $color-primary-hover;
text-decoration: underline;
}
}
}
p {
margin: 0.3rem 0;
}
&.To-Do {
border-left-color: $color-status-todo-text;
}
&.InProgress {
border-left-color: $color-status-inprogress-text;
}
&.Completed {
border-left-color: $color-status-done-text;
}
&.Archived {
border-left-color: $color-status-archived-text;
}
}
}
.ticket-list-actions {
display: flex;
gap: $spacing-md;
flex-wrap: wrap;
margin-top: $spacing-lg;
a {
display: inline-block;
padding: $spacing-md $spacing-lg;
background: $color-primary;
color: white;
text-decoration: none;
border-radius: $border-radius;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color-primary-hover;
}
}
}
frontend/src/styles/components/_allusers.scss
+13
View File
@@ -0,0 +1,13 @@
@use "../variables" as *;
.user-list {
list-style: none;
padding-left: 0;
margin: 0;
li {
h3 {
margin-top: 0;
}
}
}
frontend/src/styles/components/_darkmode.scss
-27
View File
@@ -1,27 +0,0 @@
body {
/* Formular Styles */
input, textarea, select, button {
width: 100%;
margin-top: 1rem;
padding: 0.75rem;
font-size: 1rem;
border-radius: 0.5rem;
color: var(--color-input);
border: none;
cursor: pointer;
margin-bottom: 15px;
}
input::placeholder,
textarea::placeholder {
color: var(--color-placeholder);
opacity: 1;
}
button:hover {
cursor: pointer;
border: none;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
}
}
frontend/src/styles/components/_diagnostics.scss
+107 -28
View File
@@ -4,18 +4,22 @@
.diagnostics-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
gap: $spacing-md;
}
.diagnostics-section {
background-color: #ffffff;
border-radius: var(--border-radius);
padding: var(--spacing-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
background-color: $color-container;
border-radius: $border-radius;
padding: $spacing-md;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
background-color: $color-container-dark;
}
h3 {
margin: 0 0 var(--spacing-md) 0;
color: #1f2937;
margin: 0;
color: $color-primary;
font-size: 1.1rem;
font-weight: 600;
}
@@ -26,8 +30,14 @@
flex-direction: column;
gap: 12px;
border: 1px solid #e5e7eb;
border-radius: var(--border-radius);
background-color: #f9fafb;
border-radius: $border-radius;
background-color: $color-container;
margin: 16px 0px;
@media (prefers-color-scheme: dark) {
background-color: $color-container-dark;
border-color: #555;
}
}
.weekday-bars {
@@ -35,7 +45,7 @@
gap: 12px;
align-items: flex-end;
height: 205px;
padding: var(--spacing-md);
padding: $spacing-md;
overflow-x: auto;
padding-bottom: 0px;
}
@@ -43,15 +53,15 @@
.weekday-bar {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
flex: 1;
min-width: 60px;
height: 100%;
justify-content: end;
.bar {
width: 100%;
background-color: var(--color-accent);
background-color: $color-primary;
border-radius: 4px 4px 0 0;
transition: background-color 0.2s ease;
@@ -64,7 +74,7 @@
.weekday-labels {
display: flex;
gap: 12px;
padding: var(--spacing-md);
padding: $spacing-md;
padding-top: 0;
overflow-x: auto;
@@ -77,62 +87,131 @@
.day {
font-weight: 600;
font-size: 12px;
color: #1f2937;
color: $color-text;
margin-bottom: 2px;
@media (prefers-color-scheme: dark) {
color: $color-text-dark;
}
}
.value {
font-size: 11px;
color: var(--color-muted);
color: $color-muted;
}
}
}
.room-chart {
.chart {
display: flex;
flex-direction: column;
gap: 12px;
padding: var(--spacing-md);
padding: $spacing-md;
border: 1px solid #e5e7eb;
border-radius: var(--border-radius);
background-color: #f9fafb;
border-radius: $border-radius;
background-color: $color-container;
width: 100%;
@media (prefers-color-scheme: dark) {
background-color: $color-container-dark;
border-color: #555;
}
}
.room-bar-item {
.bar-item {
display: flex;
flex-direction: column;
gap: 4px;
.room-header {
.diagnostics-header {
display: flex;
justify-content: space-between;
align-items: center;
.room-label {
.diagnostics-label {
font-weight: 600;
font-size: 14px;
color: #1f2937;
color: $color-text;
min-width: 50px;
@media (prefers-color-scheme: dark) {
color: $color-text-dark;
}
}
.room-count {
.diagnostics-count {
font-size: 12px;
color: var(--color-muted);
color: $color-muted;
font-weight: 500;
}
}
.room-bar-container {
.bar-container {
width: 100%;
height: 24px;
background-color: #e5e7eb;
border-radius: 4px;
overflow: hidden;
.room-bar {
@media (prefers-color-scheme: dark) {
background-color: #555;
}
.bar {
height: 100%;
background-color: #570000;
background-color: $color-primary;
transition: width 0.3s ease;
}
}
}
.diagnostics-row {
display: flex;
gap: 24px;
align-items: flex-start;
flex-wrap: wrap;
}
.diagnostics-column {
display: flex;
flex-direction: column;
gap: 12px;
width: 48%;
min-width: 280px;
}
.open-tickets{
display: flex;
align-items: center;
position: relative;
width: 100%;
padding: 0 1rem;
box-sizing: border-box;
min-height: 60px;
.left {
display: flex;
align-items: center;
flex-shrink: 0;
max-width: 30%;
h2 {
margin: 0;
white-space: nowrap;
}
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.home {
.ticket_count {
font-size: xxx-large;
height: 115px;
}
}
frontend/src/styles/components/_forms.scss
+97
View File
@@ -0,0 +1,97 @@
@use "../variables" as *;
.form-container {
display: flex;
flex-direction: column;
gap: $spacing-lg;
margin-bottom: $spacing-lg;
form {
display: flex;
flex-direction: column;
gap: $spacing-md;
label {
display: flex;
flex-direction: column;
gap: $spacing-sm;
font-weight: 500;
color: $color-text;
@media (prefers-color-scheme: dark) {
color: $color-text-dark;
}
}
input, textarea, select {
padding: $spacing-md;
border: 1px solid #ccc;
border-radius: $border-radius;
font-family: Arial, sans-serif;
font-size: 1rem;
@media (prefers-color-scheme: dark) {
background-color: #6b6b6b;
color: $color-text-dark;
border-color: #555;
}
&:focus {
outline: none;
border-color: $color-primary;
box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
}
}
textarea {
min-height: 120px;
resize: vertical;
}
button {
align-self: flex-start;
padding: $spacing-md $spacing-lg;
background-color: $color-primary;
color: white;
border: none;
border-radius: $border-radius;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color-primary-hover;
}
&:active {
transform: scale(0.98);
}
}
a {
display: inline-block;
padding: $spacing-md $spacing-lg;
background: $color-primary;
color: white;
text-decoration: none;
border-radius: $border-radius;
text-align: center;
transition: background-color 0.2s ease-in-out;
align-self: flex-start;
&:hover {
background-color: $color-primary-hover;
}
}
}
ul {
list-style: none;
padding-left: 0;
li h3 {
margin-top: 0;
}
}
}
frontend/src/styles/components/_frontpage.scss
-7
View File
@@ -1,7 +0,0 @@
.headline {
font-size: 40px;
font-weight: bold;
text-align: center;
color: #570000;
margin-top: 150px;
}
frontend/src/styles/components/_home.scss
-9
View File
@@ -1,9 +0,0 @@
.login-status {
font-weight: bold;
margin: 4px 8px;
}
.name {
font-size: 24px;
margin: 4px 8px;
}
frontend/src/styles/components/_icon.scss
-27
View File
@@ -1,27 +0,0 @@
.csg-icon {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 9999;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
@media (max-width: 768px) {
max-width: 60px;
img {
width: 100%;
height: auto;
}
}
img {
width: auto;
height: auto;
}
}
frontend/src/styles/components/_login.scss
+39
View File
@@ -0,0 +1,39 @@
@use "../variables" as *;
.login-btn {
display: inline-block;
padding: 12px 400px;
background: $color-primary;
color: white;
border-radius: $border-radius-lg;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
border: none;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
&:hover {
background: $color-primary-hover;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
}
.logout-btn {
display: inline-block;
padding: 10px 20px;
background: $color-logout;
color: white;
border-radius: $border-radius-lg;
text-decoration: none;
font-weight: bold;
transition: 0.2s ease-in-out;
margin-bottom: 20px;
&:hover {
background: $color-logout-hover;
transform: scale(1.05);
}
}
frontend/src/styles/components/_pages.scss
+272
View File
@@ -0,0 +1,272 @@
@use "../variables" as *;
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $spacing-lg;
padding-bottom: $spacing-md;
border-bottom: 2px solid #e5e7eb;
@media (prefers-color-scheme: dark) {
border-bottom-color: #555;
}
h1 {
margin: 0;
color: $color-primary;
font-size: 1.75rem;
}
}
.page-actions {
display: flex;
gap: $spacing-md;
flex-wrap: wrap;
a, button {
display: inline-block;
padding: $spacing-md;
background: $color-primary;
color: white;
text-decoration: none;
border: none;
border-radius: $border-radius;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color-primary-hover;
}
}
}
input[type="checkbox"] {
width: fit-content;
}
.grid-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: $spacing-lg;
margin-top: $spacing-lg;
.grid-item {
background: $color-container;
border: 1px solid #e5e7eb;
border-radius: $border-radius;
padding: $spacing-md;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease, transform 0.2s ease;
@media (prefers-color-scheme: dark) {
background: $color-container-dark;
border-color: #555;
}
&:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
h3 {
color: $color-primary;
margin-top: 0;
margin-bottom: $spacing-md;
}
p {
margin: $spacing-sm 0;
color: $color-muted;
&:last-child {
margin-bottom: 0;
}
}
.item-actions {
display: flex;
gap: $spacing-md;
margin-top: $spacing-md;
flex-wrap: wrap;
a, button {
flex: 1;
min-width: 100px;
padding: $spacing-md;
border: none;
border-radius: $border-radius;
font-weight: bold;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: background-color 0.2s ease-in-out;
}
a.view, button.view {
background: $color-primary;
color: white;
&:hover {
background-color: $color-primary-hover;
}
}
a.edit, button.edit {
background: #f59e0b;
color: white;
&:hover {
background-color: #d97706;
}
}
a.delete, button.delete {
background: $color-logout;
color: white;
&:hover {
background-color: $color-logout-hover;
}
}
}
}
}
.table-container {
overflow-x: auto;
margin-top: $spacing-lg;
border-radius: $border-radius;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
table {
width: 100%;
border-collapse: collapse;
background: $color-container;
@media (prefers-color-scheme: dark) {
background: $color-container-dark;
}
thead {
background: $color-primary;
color: white;
th {
padding: $spacing-md;
text-align: left;
font-weight: 600;
border-bottom: 2px solid darken($color-primary, 10%);
}
}
tbody {
tr {
border-bottom: 1px solid #e5e7eb;
transition: background-color 0.2s ease;
@media (prefers-color-scheme: dark) {
border-bottom-color: #555;
}
&:hover {
background-color: #f9fafb;
@media (prefers-color-scheme: dark) {
background-color: #444;
}
}
td {
padding: $spacing-md;
color: $color-text;
@media (prefers-color-scheme: dark) {
color: $color-text-dark;
}
}
}
}
}
}
.alert {
padding: $spacing-md;
border-radius: $border-radius;
margin-bottom: $spacing-lg;
border-left: 4px solid;
&.success {
background: $color-status-done;
color: $color-status-done-text;
border-left-color: $color-status-done-text;
}
&.error {
background: $color-status-todo;
color: $color-status-todo-text;
border-left-color: $color-status-todo-text;
}
&.warning {
background: $color-status-inprogress;
color: $color-status-inprogress-text;
border-left-color: $color-status-inprogress-text;
}
&.info {
background: #dbeafe;
color: #1e40af;
border-left-color: #1e40af;
@media (prefers-color-scheme: dark) {
background: #1e3a8a;
color: #93c5fd;
border-left-color: #93c5fd;
}
}
}
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #e5e7eb;
border-top-color: $color-primary;
border-radius: 50%;
animation: spin 0.8s linear infinite;
@keyframes spin {
to { transform: rotate(360deg); }
}
}
.empty-state {
text-align: center;
padding: $spacing-lg;
color: $color-muted;
p {
font-size: 1.1rem;
margin-bottom: $spacing-md;
}
a {
display: inline-block;
padding: $spacing-md $spacing-lg;
background: $color-primary;
color: white;
text-decoration: none;
border-radius: $border-radius;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color-primary-hover;
}
}
}
frontend/src/styles/components/_setup.scss
+120
View File
@@ -0,0 +1,120 @@
@use "../variables" as *;
.setup-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: $color-bg;
padding: $spacing-lg;
@media (prefers-color-scheme: dark) {
background: $color-bg-dark;
}
}
.setup-box {
width: 100%;
max-width: 400px;
background: $color-container;
padding: $spacing-lg;
border-radius: 1rem;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
background: $color-container-dark;
}
h1 {
color: $color-primary;
text-align: center;
margin-top: 0;
margin-bottom: $spacing-md;
}
p {
text-align: center;
color: $color-muted;
margin-bottom: $spacing-lg;
}
}
.setup-form {
display: flex;
flex-direction: column;
gap: $spacing-md;
.form-group {
display: flex;
flex-direction: column;
gap: $spacing-sm;
label {
font-weight: 500;
color: $color-text;
@media (prefers-color-scheme: dark) {
color: $color-text-dark;
}
}
}
input {
padding: $spacing-md;
border: 1px solid #ccc;
border-radius: $border-radius;
font-family: Arial, sans-serif;
font-size: 1rem;
@media (prefers-color-scheme: dark) {
background-color: #6b6b6b;
color: $color-text-dark;
border-color: #555;
}
&:focus {
outline: none;
border-color: $color-primary;
box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
}
}
button {
padding: $spacing-md;
background-color: $color-primary;
color: white;
border: none;
border-radius: $border-radius;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
margin-top: $spacing-md;
&:hover {
background-color: $color-primary-hover;
}
&:active {
transform: scale(0.98);
}
}
}
.success-message {
background: $color-status-done;
color: $color-status-done-text;
padding: $spacing-md;
border-radius: $border-radius;
margin-bottom: $spacing-md;
border-left: 4px solid $color-status-done-text;
}
.error-message {
background: $color-status-todo;
color: $color-status-todo-text;
padding: $spacing-md;
border-radius: $border-radius;
margin-bottom: $spacing-md;
border-left: 4px solid $color-status-todo-text;
}
frontend/src/styles/components/_sidebar.scss
+13 -153
View File
@@ -1,30 +1,23 @@
@use "../variables" as *;
@use "../mixins" as *;
:root {
color-scheme: dark light;
}
.sidebar {
width: 260px;
background: var(--color-sidebar);
color: var(--sidebar-font);
background: $color-sidebar;
color: #fff;
min-height: 100%;
padding: var(--spacing-md);
padding: $spacing-md;
display: flex;
flex-direction: column;
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; }
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; flex: 1; }
a, .menu-toggle {
color: var(--sidebar-font);
color: #fff;
text-decoration: none;
display: block;
padding: 8px 12px;
border-radius: var(--border-radius);
border-radius: $border-radius;
transition: background 0.2s ease-in-out;
&:hover { background: rgba(255,255,255,0.1); }
}
@@ -34,7 +27,7 @@
.submenu {
margin-left: 8px;
background: rgba(255,255,255,0.05);
border-radius: var(--border-radius);
border-radius: $border-radius;
padding: 6px;
li { padding: 4px 0; }
}
@@ -42,153 +35,20 @@
.logout-item {
margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--spacing-sm);
padding-top: $spacing-sm;
}
.sidebar-button {
background: rgba(255, 93, 43, 0.527);
color: var(--sidebar-font);
border: 1px solid rgba(255, 255, 255, 0.801);
.logout-button {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 12px;
border-radius: 4px;
width: 100%;
cursor: pointer;
text-align: left;
margin-top: var(--spacing-sm);
&.theme-toggle-btn {
display: flex;
justify-content: center;
align-items: center;
}
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: var(--spacing-md);
.home {
flex-grow: 1;
display: flex;
justify-content: center;
@media (max-width: 768px) {
padding-left: 36px;
}
}
.sidebar-close {
display: none;
background: transparent;
border: none;
color: var(--sidebar-font);
cursor: pointer;
padding: 8px;
border-radius: 50%;
align-items: center;
justify-content: center;
transition: background 0.2s ease-in-out;
margin-bottom: 0;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
svg {
width: 20px;
height: 20px;
stroke: var(--sidebar-font);
}
@media (max-width: 768px) {
display: flex;
}
}
}
.home-svg {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 8px;
}
&.user { width: 220px; background: darken(#570000, 6%); }
}
// Floating mobile menu toggle button
.mobile-menu-toggle {
display: none;
@media (max-width: 768px) {
display: flex;
position: fixed;
top: 1rem;
left: 1rem;
z-index: 999;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(128, 128, 128, 0.2);
background-color: var(--color-container);
color: var(--color-text);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.2s ease-in-out;
svg {
width: 24px;
height: 24px;
stroke: var(--color-text);
transition: stroke 0.2s ease-in-out;
}
&:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
background-color: var(--color-bg);
color: var(--color-container);
svg {
stroke: var(--color-container);
}
}
&:active {
transform: translateY(0);
}
}
}
// Overlay backdrop that dims the screen and allows dismissals on mobile
.sidebar-overlay {
display: none;
@media (max-width: 768px) {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
&.open {
opacity: 1;
pointer-events: auto;
}
}
&.user { width: 220px; background: darken($color-sidebar, 6%); }
}
frontend/src/styles/components/_tickets.scss
+57 -56
View File
@@ -1,79 +1,80 @@
@use "../mixins" as *;
@use "../variables" as *;
.ticket-card {
@include card();
border-left: 4px solid var(--color-accent);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
.meta { color: var(--color-muted); font-size: 0.9rem; }
.title { font-weight: 600; }
.ticket {
border: 1px solid #ccc;
padding: 1rem;
margin-bottom: 1rem;
border-radius: $border-radius-lg;
background: $color-container;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
background: $color-container-dark;
}
.listbox {
max-width: auto;
margin:0 0;
background-color: #90ff82;
background-color: var(--rundbgbackgroundcolor);
padding-bottom: 8px;
color: white;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
border-radius: 20px;
border-color: #000000;
border-style: double;
box-shadow: 10px 10px 10px rgba(43, 43, 43, 0.8);
font-size: 26px;
list-style-type: none;
text-align: center;
h3 {
margin-top: 0;
color: $color-primary;
}
p {
margin: 0.3rem 0;
}
}
.ticket-card {
@include card();
border-left: 4px solid $color-primary;
display: flex;
flex-direction: column;
gap: $spacing-sm;
.meta { color: $color-muted; font-size: 0.9rem; }
.title { font-weight: 600; }
}
.status {
display: inline-block;
padding: 4px 10px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: bold;
margin-top: 8px;
&.To-Do {
background-color: #b1003b;
background: $color-status-todo;
color: $color-status-todo-text;
}
&.InProgress {
background-color: #fff385;
background: $color-status-inprogress;
color: $color-status-inprogress-text;
}
&.Done {
background: $color-status-done;
color: $color-status-done-text;
}
&.Completed {
background-color: #90ff82;
background: $color-status-done;
color: $color-status-done-text;
}
&.Archived {
background-color: #af69ee;
}
a {
text-decoration: none;
color: white;
background: $color-status-archived;
color: $color-status-archived-text;
}
}
.postits {
display: grid;
gap: 8px;
margin-top: 96px;
}
.warning {
color: #570000;
}
.ticket-count {
border-radius: 10px;
border: 2px solid black;
width: fit-content;
padding: 8px;
margin: 0 auto;
margin-bottom: 32px;
h4 {
.ticket_count {
text-align: center;
font-size: 32px;
margin: 8px;
}
align-content: center;
color: #005f00;
border: 2px solid #848484;
border-radius: 10px;
height: 50px;
width: 250px;
margin: 0;
font-size: xx-large;
}
frontend/src/styles/main.scss
+132 -96
View File
@@ -3,25 +3,125 @@
@use "utilities";
@use "components/sidebar";
@use "components/tickets";
@use "components/alltickets";
@use "components/allusers";
@use "components/forms";
@use "components/login";
@use "components/diagnostics";
@use "components/frontpage";
@use "components/home";
@use "components/icon";
@use "components/pages";
@use "components/setup";
* {
box-sizing: border-box;
}
body {
background: var(--color-bg);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color: #111827;
background: variables.$color-bg;
font-family: Arial, sans-serif;
color: variables.$color-text;
margin: 0;
padding: 0;
@media (prefers-color-scheme: dark) {
background: variables.$color-bg-dark;
color: variables.$color-text-dark;
}
}
input, textarea, select {
width: 100%;
padding: variables.$spacing-md;
font-size: 1rem;
border-radius: variables.$border-radius;
border: 1px solid #ccc;
box-sizing: border-box;
margin-bottom: 15px;
font-family: Arial, sans-serif;
@media (prefers-color-scheme: dark) {
background-color: #6b6b6b;
color: variables.$color-text-dark;
border-color: #555;
}
}
button {
padding: variables.$spacing-md;
font-size: 1rem;
border-radius: variables.$border-radius;
background-color: variables.$color-primary;
color: white;
border: none;
cursor: pointer;
margin-bottom: 15px;
transition: background-color 0.2s ease-in-out;
font-family: Arial, sans-serif;
font-weight: bold;
&:hover {
background-color: variables.$color-primary-hover;
}
}
form {
display: flex;
flex-direction: column;
gap: variables.$spacing-md;
label {
display: flex;
flex-direction: column;
gap: variables.$spacing-sm;
font-weight: 500;
}
a {
display: inline-block;
padding: variables.$spacing-md;
background: variables.$color-primary;
color: white;
text-decoration: none;
border-radius: variables.$border-radius;
text-align: center;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: variables.$color-primary-hover;
}
}
}
.container {
max-width: 900px;
margin: auto;
background: variables.$color-container;
padding: variables.$spacing-lg;
border-radius: 1rem;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
background: variables.$color-container-dark;
}
}
.header-with-image {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header-with-image img {
height: 60px;
}
.admin { display: flex; }
.layout {
display: flex;
height: 100vh;
overflow: hidden;
box-sizing: border-box;
min-height: 100vh;
margin: 0;
padding: 0;
}
.sidebar {
@@ -32,108 +132,44 @@ body {
top: 0;
height: 100vh;
overflow-y: auto;
box-sizing: border-box;
}
.content {
flex: 1;
min-width: 0;
margin-left: 260px;
height: 100%;
overflow-y: auto;
padding: var(--spacing-md);
box-sizing: border-box;
padding: variables.$spacing-lg;
> :first-child {
max-width: 900px;
margin: 0 auto;
background: variables.$color-container;
padding: variables.$spacing-lg;
border-radius: 1rem;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
@media (prefers-color-scheme: dark) {
background: variables.$color-container-dark;
}
}
h1, h2, h3 {
color: variables.$color-primary;
margin-top: 0;
}
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: -260px;
transition: left .3s ease-in-out;
z-index: 1000;
height: 100%;
box-sizing: border-box;
}
.sidebar.open { left: 0; }
.content { margin-left: 0; padding: var(--spacing-md); box-sizing: border-box; }
.sidebar.open {
left: 0;
}
.rundbg {
display: flex;
justify-content: center;
flex-direction: column;
max-width: 60%;
margin: 0 auto;
background-color: var(--rundbgbackgroundcolor);
padding-bottom: 96px;
padding-left: 32px;
padding-right: 32px;
padding-top: 96px;
border-radius: 20px;
gap: 8px;
border-color: #000000;
border-style: double;
box-shadow: 20px 20px 10px rgb(43, 43, 43);
font-size: 26px;
label {
display: block;
width: 100%;
box-sizing: border-box;
}
input, select, button, a {
width: 100%;
box-sizing: border-box;
padding: 16px;
font-size: 1.8rem;
background-color: #f0f0f0;
color: var(--color-input);
box-shadow: #6d6d6d;
box-shadow: 6px 6px 8px;
}
input[type="checkbox"] {
width: auto;
}
button {
margin: 16px 0;
}
a {
color: var (--color);
text-align: center;
border-style: dashed;
}
&.login {
margin-top: 96px;
max-width: 40%;
}
&.home {
padding-top: 16px;
.content {
margin-left: 0;
}
}
.setup-form input {
width: 100%;
box-sizing: border-box;
}
input, select, textarea {
color: var(--color-input);
}
input::placeholder,
textarea::placeholder {
color: var(--color-placeholder);
opacity: 1;
}
info ding video.mp4
BIN
View File
Binary file not shown.
src/lib.rs
+1 -1
View File
@@ -1 +1 @@
#![doc = include_str!("../README.cargo.md")]
#![doc = include_str!("../README.md")]