Set up a Yew login page

2025-02-17 23:03:12 -05:00 · 2025-02-17 23:03:12 -05:00 · ca89455d4d
commit ca89455d4d
parent 2ff981e28a
6 changed files with 92 additions and 1 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -5475,6 +5475,16 @@ version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"

+[[package]]
+name = "visions-client"
+version = "0.1.0"
+dependencies = [
+ "gloo-net 0.6.0",
+ "serde 1.0.217",
+ "wasm-bindgen-futures",
+ "yew",
+]
+
 [[package]]
 name = "wait-timeout"
 version = "0.2.0"
--- a/Cargo.toml
+++ b/Cargo.toml
@ -33,4 +33,4 @@ members = [
    "tree",
    "visions/server",
    "gm-dash/server"
-, "visions/yew-app"]
+, "visions/yew-app", "visions/ui"]
--- a/visions/ui/Cargo.toml
+++ b/visions/ui/Cargo.toml
@ -0,0 +1,11 @@
+[package]
+name = "visions-client"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+gloo-net = "0.6.0"
+serde = { version = "1.0.217", features = ["derive"] }
+wasm-bindgen-futures = "0.4.50"
+yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
+
--- a/visions/ui/design.css
+++ b/visions/ui/design.css
@ -0,0 +1,36 @@
+:root {
+    --spacing-s: 4px;
+    --spacing-m: 8px;
+    --shadow-shallow: 2px 2px 1px;
+}
+
+body {
+    background-color: hsl(0, 0%, 95%);
+    font-family: Ariel, sans-serif;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: space-between;
+    border: 1px solid black;
+    box-shadow: var(--shadow-shallow);
+    border-radius: var(--spacing-s);
+    padding: var(--spacing-m);
+}
+
+.card > h1 {
+    margin: 0px;
+}
+
+.card > * {
+    margin-top: var(--spacing-s);
+    margin-bottom: var(--spacing-s);
+}
+
+.login-form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
--- a/visions/ui/index.html
+++ b/visions/ui/index.html
@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Visions Client Demo</title>
+        <link data-trunk rel="css" href="design.css" />
+    </head>
+    <body></body>
+</html>
--- a/visions/ui/src/main.rs
+++ b/visions/ui/src/main.rs
@ -0,0 +1,25 @@
+use yew::prelude::*;
+
+#[function_component]
+fn Login() -> Html {
+    html! {
+        <div class="login-form">
+        <div class="card">
+            <h1>{"Welcome to Visions VTT"}</h1>
+            <input type="text" name="username" placeholder="username" />
+            <input type="password" name="password" placeholder="password" />
+        </div>
+        </div>
+    }
+}
+
+#[function_component]
+fn App() -> Html {
+    html! {
+        <Login />
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}