From f78066d7a8aab2186466d0a6e2d744777f92f411 Mon Sep 17 00:00:00 2001
From: ecco257 <connorjwittman@gmail.com>
Date: Tue, 15 Oct 2024 17:18:41 -0400
Subject: [PATCH] Display username in profile when logged in

---
 src/components/personal.rs | 10 ++++++----
 style/personal.scss        | 11 +++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/personal.rs b/src/components/personal.rs
index a7c4141..7ee63dd 100644
--- a/src/components/personal.rs
+++ b/src/components/personal.rs
@@ -18,17 +18,16 @@ pub fn Personal() -> impl IntoView {
 pub fn Profile() -> impl IntoView {
     let (dropdown_open, set_dropdown_open) = create_signal(false);
     let logged_in = create_rw_signal(false);
-
     let user_signal = create_rw_signal(User::default());
 
-    
-
     let open_dropdown = move |_| {
         spawn_local(async move {
             let user = get_user().await;
             if let Ok(user) = user {
                 logged_in.set(true);
-                user_signal.update(|value| *value = user);
+                user_signal.update(|value| {
+                    *value = user;
+                });
             } else {
                 logged_in.set(false);
             }
@@ -82,6 +81,9 @@ pub fn DropDownLoggedIn(user_signal: RwSignal<User>, logged_in: RwSignal<bool>)
     view! {
         <div class="dropdown-logged">
             <h1>"Logged In"</h1>
+            <div class="profile-info">
+                <h1>{move || user_signal.with(|user| user.username.clone())}</h1>
+            </div>
             <button on:click=logout class="auth-button">Log Out</button>
         </div>
     }
diff --git a/style/personal.scss b/style/personal.scss
index 08c6e93..de02199 100644
--- a/style/personal.scss
+++ b/style/personal.scss
@@ -54,6 +54,17 @@
         h1 {
           font-size: 1.2rem;
         }
+        .profile-info {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+          border-top: 0.2rem solid rgba(89, 89, 89, 0.199);
+          border-bottom: 0.2rem solid rgba(89, 89, 89, 0.199);
+          h1 {
+            font-size: 1rem;
+            margin-top: 0.5rem;
+          }
+        }
         .auth-button {
           margin-top: 0.5rem;
           padding: 0.5rem;