Get and store steam username and display it on the homepage

2024-09-10 17:48:06 +02:00
parent d3658be232
commit 9a033b7190
15 changed files with 528 additions and 103 deletions
--- a/frontend/src/navbar.rs
+++ b/frontend/src/navbar.rs
@@ -0,0 +1,80 @@
+use leptos::*;
+use leptos_router::A;
+
+use crate::DemoUploadStatus;
+
+#[leptos::component]
+fn steam_login(height: &'static str, width: &'static str) -> impl leptos::IntoView {
+    let user_status = create_resource(|| (), |_| async move {
+        let res = reqwasm::http::Request::get("/api/user/status").send().await.unwrap();
+        res.json::<common::UserStatus>().await.map_err(|e| ())
+    });
+
+    let tmp = move || match user_status.get() {
+        Some(Ok(user)) => 
+            view! {
+                <p>{user.name}</p>
+            }.into_view(),
+        _ => 
+        view! {    
+            <a href="/api/steam/login" rel="external">
+                <img src="https://community.akamai.steamstatic.com/public/images/signinthroughsteam/sits_01.png" alt="Steam Login" style=format!("height: {height}; width: {width}") />
+            </a>
+        }.into_view(),
+    };
+
+    view! {
+        { tmp }
+    }
+}
+
+#[leptos::component]
+pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> impl leptos::IntoView {
+    let style = stylers::style! {
+        "TopBar",
+        .bar {
+            width: 100%;
+            height: 4vh;
+            padding-top: 0.5vh;
+            padding-bottom: 0.5vh;
+
+            background-color: #28282f;
+            color: #d5d5d5;
+
+            display: grid;
+            grid-template-columns: 15vw auto 10vw calc(4vh * (180/35) + 20px);
+        }
+
+        .elem {
+            display: inline-block;
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+        .logo {
+            color: #d5d5d5;
+            width: 15vw;
+            font-size: 24px;
+            padding: 0px;
+            margin: 0px;
+        }
+    };
+
+    view! {class = style,
+        <div class="bar">
+            <A href="/">
+                <p class="logo">Knifer</p>
+            </A>
+            
+            <div class="elem" style="grid-column-start: 3">
+                <button on:click=move |_| update_demo_visible(DemoUploadStatus::Shown)>
+                    Upload Demo
+                </button>
+            </div>
+
+            <div class="elem" style="grid-column-start: 4">
+                <SteamLogin height="4vh" width="auto" />
+            </div>
+        </div>
+    }
+}