CSS Fixes - Scrollbars, Album page, and making constants

.env.example

@@ -18,4 +18,3 @@ DATABASE_URL=postgresql://libretunes:password@localhost:5432/libretunes
 
 LIBRETUNES_AUDIO_PATH=assets/audio
 LIBRETUNES_IMAGE_PATH=assets/images
-LIBRETUNES_DISABLE_SIGNUP=true

Dockerfile

@@ -1,4 +1,4 @@
-FROM rust:slim AS builder
+FROM rust:slim as builder
 
 WORKDIR /app
 

docker-compose.yml

@@ -3,7 +3,7 @@ name: libretunes
 services:
   libretunes:
     container_name: libretunes
-    # image: git.libretunes.xyz/libretunes/libretunes:latest
+    # image: registry.mregirouard.com/libretunes/libretunes:latest
     build: .
     ports:
       - "3000:3000"
@@ -15,7 +15,6 @@ services:
       POSTGRES_DB: ${POSTGRES_DB}
       LIBRETUNES_AUDIO_PATH: /assets/audio
       LIBRETUNES_IMAGE_PATH: /assets/images
-      LIBRETUNES_DISABLE_SIGNUP: "true"
     volumes:
       - libretunes-audio:/assets/audio
       - libretunes-images:/assets/images

src/api/friends.rs

@@ -1,227 +0,0 @@
-use leptos::*;
-use cfg_if::cfg_if;
-use crate::frienddata::FriendData;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use crate::auth::get_user;
-		use server_fn::error::NoCustomError;
-
-		use crate::database::get_db_conn;
-		use diesel::prelude::*;
-		use diesel::dsl::exists;
-		use crate::models::*;
-		use crate::schema::*;
-
-		use chrono::prelude::*;
-	}
-}
-
-/// Get a user's list of friends from the database
-#[server(endpoint = "/profile/friends")]
-pub async fn friends(for_user_id: i32)
-	-> Result<Vec<FriendData>, ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	let friends = friendships::table
-		.filter(friendships::friend_1_id.eq(for_user_id))
-		.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
-		.inner_join(users::table.on(users::id.eq(friendships::friend_2_id)))
-		.select((users::all_columns, friendships::created_at))
-		.order(friendships::created_at.desc())
-		.order(users::username.asc())
-		.union(
-			friendships::table
-			.filter(friendships::friend_2_id.eq(for_user_id))
-			.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
-			.inner_join(users::table.on(users::id.eq(friendships::friend_1_id)))
-			.select((users::all_columns, friendships::created_at))
-			.order(friendships::created_at.desc())
-			.order(users::username.asc())
-		)
-		.load(&mut db_con)?;
-	
-	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
-		FriendData {
-			username: user.username,
-			created_at: created_at.into(),
-			user_id: user.id.unwrap()
-		}
-	}).collect();
-
-	Ok(friend_list)
-}
-
-/// Get a user's list of friend requests (outgoing) from the database
-#[server(endpoint = "/profile/friend-requests-outgoing")]
-pub async fn friend_requests_outgoing(for_user_id: i32)
-	-> Result<Vec<FriendData>, ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	let friends = friend_requests::table
-		.filter(friend_requests::from_id.eq(for_user_id))
-		.filter(friend_requests::from_id.ne(friend_requests::to_id))
-		.inner_join(users::table.on(users::id.eq(friend_requests::to_id)))
-		.select((users::all_columns, friend_requests::created_at))
-		.order(friend_requests::created_at.desc())
-		.order(users::username.asc())
-		.load(&mut db_con)?;
-	
-	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
-		FriendData {
-			username: user.username,
-			created_at: created_at.into(),
-			user_id: user.id.unwrap()
-		}
-	}).collect();
-
-	Ok(friend_list)
-}
-
-/// Get a user's list of friend requests (incoming) from the database
-#[server(endpoint = "/profile/friend-requests-incoming")]
-pub async fn friend_requests_incoming(for_user_id: i32)
-	-> Result<Vec<FriendData>, ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	let friends = friend_requests::table
-		.filter(friend_requests::to_id.eq(for_user_id))
-		.filter(friend_requests::from_id.ne(friend_requests::to_id))
-		.inner_join(users::table.on(users::id.eq(friend_requests::from_id)))
-		.select((users::all_columns, friend_requests::created_at))
-		.order(friend_requests::created_at.desc())
-		.order(users::username.asc())
-		.load(&mut db_con)?;
-	
-	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
-		FriendData {
-			username: user.username,
-			created_at: created_at.into(),
-			user_id: user.id.unwrap()
-		}
-	}).collect();
-
-	Ok(friend_list)
-}
-
-/// Send a friend request
-#[server(endpoint = "/profile/send-friend-request")]
-pub async fn send_friend_request(to_user_id: i32)
-	-> Result<(), ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	// Get user id from session
-	let user = get_user().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
-
-	// Get current time for request
-	let timestamp: NaiveDateTime = Utc::now().naive_utc();
-
-	// Insert into database (if already exists, won't succeed due to primary key)
-	diesel::insert_into(crate::schema::friend_requests::table)
-		.values((friend_requests::created_at.eq(timestamp),friend_requests::from_id.eq(user.id.unwrap()),friend_requests::to_id.eq(to_user_id)))
-		.execute(&mut db_con)
-		.map_err(|e| {
-			let msg = format!("Error saving friend request to database: {}", e);
-			ServerFnError::<NoCustomError>::ServerError(msg)
-		})?;
-	
-	Ok(())
-}
-
-/// Remove an outgoing friend request
-#[server(endpoint = "/profile/friend-requests-incoming")]
-pub async fn delete_friend_request(to_user_id: i32)
-	-> Result<(), ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	// Get user id from session
-	let user = get_user().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
-
-	// Delete the friend request
-	diesel::delete(friend_requests::table
-		.filter(friend_requests::from_id.eq(user.id.unwrap()))
-		.filter(friend_requests::to_id.eq(to_user_id))
-	).execute(&mut db_con)?;
-
-	Ok(())
-}
-
-/// Remove an existing friendship
-#[server(endpoint = "/profile/delete-friend")]
-pub async fn delete_friend(for_user_id: i32)
-	-> Result<(), ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	// Get user id from session
-	let user = get_user().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
-
-	// Delete the friend request
-	diesel::delete(friendships::table
-		.filter(friendships::friend_1_id.eq(user.id.unwrap()))
-		.filter(friendships::friend_2_id.eq(for_user_id))
-	).execute(&mut db_con)?;
-
-	diesel::delete(friendships::table
-		.filter(friendships::friend_2_id.eq(user.id.unwrap()))
-		.filter(friendships::friend_1_id.eq(for_user_id))
-	).execute(&mut db_con)?;
-
-	Ok(())
-}
-
-/// Accept a friend request
-#[server(endpoint = "/profile/accept-friend-request")]
-pub async fn accept_friend_request(to_user_id: i32)
-	-> Result<(), ServerFnError>
-{
-	let mut db_con = get_db_conn();
-
-	// Get user id from session
-	let user = get_user().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
-
-	// Get current time for request
-	let timestamp: NaiveDateTime = Utc::now().naive_utc();
-
-	// Make sure the person has received a friend request from the other person
-	let req = diesel::select(exists(
-		friend_requests::table
-			.filter(friend_requests::from_id.eq(user.id.unwrap()))
-			.filter(friend_requests::to_id.eq(to_user_id))
-	)).get_result::<bool>(&mut db_con)?;
-
-	if req == false {
-		Err(ServerFnError::<NoCustomError>::ServerError(format!("Error, the friend request does not exist!")))?;
-	}
-
-	// Delete the friend requests
-	diesel::delete(friend_requests::table
-		.filter(friend_requests::from_id.eq(user.id.unwrap()))
-		.filter(friend_requests::to_id.eq(to_user_id))
-	).execute(&mut db_con)?;
-
-	diesel::delete(friend_requests::table
-		.filter(friend_requests::to_id.eq(user.id.unwrap()))
-		.filter(friend_requests::from_id.eq(to_user_id))
-	).execute(&mut db_con)?;
-
-	// Add the new friend request either direction
-	diesel::insert_into(crate::schema::friendships::table)
-		.values((friendships::created_at.eq(timestamp),friendships::friend_1_id.eq(user.id.unwrap()),friendships::friend_2_id.eq(to_user_id)))
-		.execute(&mut db_con)
-		.map_err(|e| {
-			let msg = format!("Error saving friendship to database: {}", e);
-			ServerFnError::<NoCustomError>::ServerError(msg)
-	})?;
-	
-	Ok(())
-}

src/api/mod.rs

@@ -2,4 +2,3 @@ pub mod history;
 pub mod profile;
 pub mod songs;
 pub mod album;
-pub mod friends;

src/app.rs

@@ -8,7 +8,6 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
-use crate::pages::friends::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -46,8 +45,6 @@ pub fn App() -> impl IntoView {
                         <Route path="search" view=Search />
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
-                        <Route path="user/:id/friends" view=Friends />
-                        <Route path="user/:id/friendrequests" view=FriendRequests />
                         <Route path="album/:id" view=AlbumPage />
                     </Route>
                     <Route path="/login" view=Login />

src/auth.rs

@@ -19,11 +19,6 @@ use crate::users::UserCredentials;
 /// Returns a Result with the error message if the user could not be created
 #[server(endpoint = "signup")]
 pub async fn signup(new_user: User) -> Result<(), ServerFnError> {
-	// Check LIBRETUNES_DISABLE_SIGNUP env var
-	if std::env::var("LIBRETUNES_DISABLE_SIGNUP").is_ok_and(|v| v == "true") {
-		return Err(ServerFnError::<NoCustomError>::ServerError("Signup is disabled".to_string()));
-	}
-
 	use crate::users::create_user;
 
 	// Ensure the user has no id, and is not a self-proclaimed admin

src/components.rs

@@ -9,4 +9,3 @@ pub mod song_list;
 pub mod loading;
 pub mod error;
 pub mod album_info;
-pub mod friend_list;

src/components/friend_list.rs

@@ -1,37 +0,0 @@
-use leptos::leptos_dom::*;
-use leptos::*;
-use leptos_icons::*;
-use crate::frienddata::FriendData;
-
-#[component]
-pub fn FriendRow(user: FriendData) -> impl IntoView {
-	  
-    view! {
-		<div class="friend-row">
-            <div class="friend-info">
-                <div class="friend-item">
-                    <Suspense fallback=|| view! { <Icon class="friend-image" icon=icondata::CgProfile/> }>
-                        <img class="friend-image" src={format!("/assets/images/profile/{}.webp", user.user_id)} alt="Profile Photo" />
-                    </Suspense>
-                </div>
-                <a class="friend-item" href={format!("../../user/{}",user.user_id)}>{user.username}</a>
-            </div>
-            <p class="friend-created-date">{user.created_at.format("%m/%d/%Y").to_string()}</p>
-		</div>
-	}.into_view()
-}
-
-#[component]
-pub fn FriendList(friends: Vec<FriendData>) -> impl IntoView {
-    view! {
-		<div class="friend-container">
-            {
-                friends.iter().map(|friend| {
-                    view! {
-                        <FriendRow user={friend.clone()} />
-                    }
-                }).collect::<Vec<_>>()
-            }
-		</div>
-	}.into_view()
-}

src/frienddata.rs

@@ -1,17 +0,0 @@
-use serde::{Serialize, Deserialize};
-
-use chrono::NaiveDate;
-
-/// Holds information about a user (friend)
-/// 
-/// Intended to be used in the front-end
-
-#[derive(Serialize, Deserialize, Clone)]
-pub struct FriendData {
-	/// Username
-	pub username: String,
-	/// Date which the user/friend was added
-	pub created_at: NaiveDate,
-	/// User's id to be used to locate their profile image
-	pub user_id: i32
-}

src/lib.rs

@@ -3,7 +3,6 @@ pub mod auth;
 pub mod songdata;
 pub mod albumdata;
 pub mod artistdata;
-pub mod frienddata;
 pub mod playstatus;
 pub mod playbar;
 pub mod database;

src/main.rs

@@ -14,11 +14,10 @@ extern crate diesel_migrations;
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{routing::get, Router, extract::Path, middleware::from_fn};
+    use axum::{routing::get, Router, extract::Path};
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use libretunes::app::*;
-    use libretunes::util::require_auth::require_auth_middleware;
     use libretunes::fileserv::{file_and_error_handler, get_asset_file, get_static_file, AssetType};
     use axum_login::tower_sessions::SessionManagerLayer;
     use tower_sessions_redis_store::{fred::prelude::*, RedisStore};
@@ -64,7 +63,6 @@ async fn main() {
         .route("/assets/audio/:song", get(|Path(song) : Path<String>| get_asset_file(song, AssetType::Audio)))
         .route("/assets/images/:image", get(|Path(image) : Path<String>| get_asset_file(image, AssetType::Image)))
         .route("/assets/*uri", get(|uri| get_static_file(uri, "")))
-        .layer(from_fn(require_auth_middleware))
         .layer(auth_layer)
         .fallback(file_and_error_handler)
         .with_state(leptos_options);

src/pages.rs

@@ -2,4 +2,3 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
-pub mod friends;

src/pages/albumpage.rs

@@ -63,7 +63,7 @@ pub fn AlbumPage() -> impl IntoView {
                     }}
                 </Suspense>
             </div>
-        
+            <div class="album-songs">
             <Suspense
                 fallback=move || view! { <p class="loading">"Loading..."</p> }
             >
@@ -82,6 +82,7 @@ pub fn AlbumPage() -> impl IntoView {
                 }}
             </Suspense>
             </div>
+        </div>
     }
 }
 

src/pages/friends.rs

@@ -1,133 +0,0 @@
-use leptos::leptos_dom::*;
-use leptos::*;
-use leptos_router::*;
-use crate::api::friends::*;
-use crate::components::friend_list::*;
-use crate::components::loading::Loading;
-
-
-#[derive(Params, PartialEq)]
-struct FriendParams {
-    id: i32
-}
-
-#[component]
-pub fn Friends() -> impl IntoView {
-    let params = use_params::<FriendParams>();
-
-    let id = move || {params.with(|params| {
-            params.as_ref()
-                .map(|params| params.id)
-                .map_err(|e| e.clone())
-        })
-    };
-
-    let friend_list = create_resource(
-        id,
-        |value| async move {
-            match value {
-                Ok(v) => {friends(v).await},
-                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
-            }
-        },
-    );
-
-    view! {
-        <div class="friend-page-container">
-            <h1 class="friend-header"> "Friends:" </h1>
-            <Transition
-                fallback=move || view! {
-                    <Loading />
-                }
-            >
-                <ErrorBoundary
-                    fallback=|errors| view! {
-                        {move || errors.get()
-                            .into_iter()
-                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
-                            .collect_view()
-                        }
-                    }
-                >
-                    {
-                        friend_list.get().map(|friend_list| {
-                            friend_list.map(|friend_list| {
-                                view! {<FriendList friends={friend_list} />}
-                            })
-                        })
-                    }
-                </ErrorBoundary>
-            </Transition>
-        </div>
-    }
-}
-
-#[component]
-pub fn FriendRequests() -> impl IntoView {
-    let params = use_params::<FriendParams>();
-
-    let id = move || {params.with(|params| {
-            params.as_ref()
-                .map(|params| params.id)
-                .map_err(|e| e.clone())
-        })
-    };
-
-    let friend_list_incoming = create_resource(
-        id,
-        |value| async move {
-            match value {
-                Ok(v) => {friend_requests_incoming(v).await},
-                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
-            }
-        },
-    );
-
-    let friend_list_outgoing = create_resource(
-        id,
-        |value| async move {
-            match value {
-                Ok(v) => {friend_requests_outgoing(v).await},
-                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
-            }
-        },
-    );
-
-    view! {
-        <div class="friend-page-container">
-            <h1 class="friend-header"> "Friend Requests:" </h1>
-            <Transition
-                fallback=move || view! {
-                    <Loading />
-                }
-            >
-                <ErrorBoundary
-                    fallback=|errors| view! {
-                        {move || errors.get()
-                            .into_iter()
-                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
-                            .collect_view()
-                        }
-                    }
-                >
-                    <h2>Sent: </h2>
-                    {
-                        friend_list_outgoing.get().map(|friend_list| {
-                            friend_list.map(|friend_list| {
-                                view! {<FriendList friends={friend_list} />}
-                            })
-                        })
-                    }
-                    <h2>Received: </h2>
-                    {
-                        friend_list_incoming.get().map(|friend_list| {
-                            friend_list.map(|friend_list| {
-                                view! {<FriendList friends={friend_list} />}
-                            })
-                        })
-                    }
-                </ErrorBoundary>
-            </Transition>
-        </div>
-    }
-}

src/pages/login.rs

@@ -4,7 +4,6 @@ use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use crate::users::UserCredentials;
-use crate::components::loading::Loading;
 
 #[component]
 pub fn Login() -> impl IntoView {
@@ -13,9 +12,6 @@ pub fn Login() -> impl IntoView {
 
     let (show_password, set_show_password) = create_signal(false);
 
-    let loading = create_rw_signal(false);
-    let error_msg = create_rw_signal(None);
-
     let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
         log!("showing password");
@@ -28,9 +24,6 @@ pub fn Login() -> impl IntoView {
         let password1 = password.get();
 
         spawn_local(async move {
-            loading.set(true);
-            error_msg.set(None);
-
             let user_credentials = UserCredentials {
                 username_or_email: username_or_email1,
                 password: password1
@@ -42,7 +35,6 @@ pub fn Login() -> impl IntoView {
             if let Err(err) = login_result {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error logging in: {:?}", err);
-                error_msg.set(Some(err.to_string()));
 
                 // Since we're not sure what the state is, manually refetch the user
                 user.refetch();
@@ -56,13 +48,10 @@ pub fn Login() -> impl IntoView {
                 log!("Navigated to home page after login");
             } else if let Ok(None) = login_result {
                 log!("Invalid username or password");
-                error_msg.set(Some("Invalid username or password".to_string()));
 
                 // User could be already logged in or not, so refetch the user
                 user.refetch();
             }
-
-            loading.set(false);
         });
     };
 
@@ -107,13 +96,7 @@ pub fn Login() -> impl IntoView {
                         </Show>
                     </div>
                     <a href="" class="forgot-pw">Forgot Password?</a>
-                    <div class="error-msg" >{ move || error_msg.get() }</div>
-                    <Show
-                        when=move || !loading.get()
-                        fallback=move || view! { <Loading /> }
-                    >
                     <input type="submit" value="Login" />
-                    </Show>
                     <span class="go-to-signup">
                         New here? <a href="/signup">Create an Account</a>
                     </span>

src/pages/signup.rs

@@ -4,7 +4,6 @@ use crate::util::state::GlobalState;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::loading::Loading;
 
 #[component]
 pub fn Signup() -> impl IntoView {
@@ -14,9 +13,6 @@ pub fn Signup() -> impl IntoView {
 
     let (show_password, set_show_password) = create_signal(false);
 
-    let loading = create_rw_signal(false);
-    let error_msg = create_rw_signal(None);
-
     let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
         log!("showing password");
@@ -34,16 +30,12 @@ pub fn Signup() -> impl IntoView {
         };
         log!("new user: {:?}", new_user);
 
-        loading.set(true);
-        error_msg.set(None);
-
         let user = GlobalState::logged_in_user();
 
         spawn_local(async move {
             if let Err(err) = signup(new_user.clone()).await {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error signing up: {:?}", err);
-                error_msg.set(Some(err.to_string()));
 
                 // Since we're not sure what the state is, manually refetch the user
                 user.refetch();
@@ -57,8 +49,6 @@ pub fn Signup() -> impl IntoView {
                 leptos_router::use_navigate()("/", Default::default());
                 log!("Navigated to home page after signup")
             }
-
-            loading.set(false);
         });
     };
 
@@ -109,13 +99,7 @@ pub fn Signup() -> impl IntoView {
                             </button>
                         </Show>
                     </div>
-                    <div class="error-msg">{ move || error_msg.get() }</div>
-                    <Show
-                        when=move || !loading.get()
-                        fallback=move || view!{ <Loading /> }
-                    >
                     <input type="submit" value="Sign Up"  />
-                    </Show>
                     <span class="go-to-login">
                         Already Have an Account? <a href="/login" class="link" >Go to Login</a>
                     </span>

src/util/mod.rs

@@ -3,7 +3,6 @@ use cfg_if::cfg_if;
 cfg_if! {
 	if #[cfg(feature = "ssr")] {
 		pub mod audio;
-		pub mod require_auth;
 	}
 }
 

src/util/require_auth.rs

@@ -1,46 +0,0 @@
-use axum::extract::Request;
-use axum::response::Response;
-use axum::body::Body;
-use axum::middleware::Next;
-use axum_login::AuthSession;
-use http::StatusCode;
-
-use crate::auth_backend::AuthBackend;
-
-use axum::extract::FromRequestParts;
-
-// Things in pkg/ are allowed automatically. This includes the CSS/JS/WASM files
-const ALLOWED_PATHS: [&str; 5] = ["/login", "/signup", "/api/login", "/api/signup", "/favicon.ico"];
-
-/**
- * Middleware to require authentication for all paths except those in ALLOWED_PATHS
- * 
- * If a user is not authenticated, they will be redirected to the login page
- */
-pub async fn require_auth_middleware(req: Request, next: Next) -> Result<Response<Body>, (StatusCode, &'static str)> {
-	let path = req.uri().path();
-
-	if !ALLOWED_PATHS.iter().any(|&x| x == path) {
-		let (mut parts, body) = req.into_parts();
-
-		let auth_session = AuthSession::<AuthBackend>::from_request_parts(&mut parts, &())
-			.await?;
-
-		if auth_session.user.is_none() {
-			let response = Response::builder()
-				.status(StatusCode::TEMPORARY_REDIRECT)
-				.header("Location", "/login")
-				.body(Body::empty())
-				.map_err(|_| (StatusCode::INTERNAL_SERVER_ERROR, "Failed to build response"))?;
-
-			return Ok(response);
-		}
-
-		let req = Request::from_parts(parts, body);
-		let response = next.run(req).await;
-		Ok(response)
-	} else {
-		let response = next.run(req).await;
-		Ok(response)
-	}
-}

style/album_page.scss

@@ -1,15 +1,23 @@
 @import 'theme.scss';
 
 .album-page-container {
-	width: 90vw;
+	$album-header-height: calc(40% - 2px);
+	
+	width: $center-viewport-width;
+	max-height: $center-viewport-height;
+
+	overflow: hidden;
+
+	margin-top:2px;
 
 	.album-header {
-		height: 40vh;
-		width: 65vw;
-		margin: auto;
+		$album-header-padding: 20px;
 
+		height: $album-header-height;
+		width: calc(100% - 2*$album-header-padding);
+		margin: 2px;
 		
-		padding:20px;
+		padding: $album-header-padding;
 
 		background-image: linear-gradient($accent-color, $background-color);
 		border-radius: 15px;
@@ -19,6 +27,13 @@
 			height: 100%;
 		}
 	}
+
+	.album-songs {
+		width: 100%;
+		max-height: calc(100% - $album-header-height);
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
 }
 
 .album-info {

style/dashboard.scss

@@ -1,6 +1,9 @@
 @import "theme.scss";
 
 .dashboard-container {
+  max-width: $center-viewport-width;
+  max-height: $center-viewport-height;
+
   .dashboard-header {
     font-size: 1.2rem;
     font-weight: 300;

style/friend.scss

@@ -1,60 +0,0 @@
-@import 'theme.scss';
-
-.friend-page-container {
-    width: 100%;
-}
-
-.friend-container {
-	width: 100%;
-	border-collapse: collapse;
-
-    .friend-row {
-        border: solid;
-		border-width: 1px 0;
-		border-color: #303030;
-		position: relative;
-
-        min-width: 100%;
-        height: 50px;
-
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: space-between;
-        align-items: center;
-
-        .friend-info {
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-        .friend-item {
-            max-width: max-content;
-            margin: 0 20px;
-
-            .friend-image {
-                width: 35px;
-                height: 35px;
-                border-radius: 50%;
-            }
-
-        }
-
-        .friend-created-date {
-            margin-right: 50px;
-        }
-        a {
-            color: $text-controls-color;
-        }
-        a:visited {
-            color: $text-controls-color;
-        }
-        a:hover {
-            color: $controls-hover-color;
-        }
-        
-        a:active {
-            color: $controls-click-color;
-        }
-    }
-
-}

style/home.scss

@@ -1,17 +1,20 @@
 @import "theme.scss";
 
 .home-container {
-  margin-top: 0;
-  width: 100%;
+  width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: row;
 }
+
 .home-component {
   background: #1c1c1c;
-  width: calc(100% - 22rem - 16rem);
+
+  width: calc($center-viewport-width - 4px - 2rem);
+  height: calc($center-viewport-height - 4px - 1rem);
+
   margin: 2px;
-  padding: 0.2rem 1.5rem $playbar-size 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   overflow: scroll;
 }

style/login.scss

@@ -8,7 +8,7 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 31rem;
+  height: 30rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
   z-index: 1;
@@ -96,17 +96,6 @@
   color: #fff;
   transition: all 0.2s;
 }
-.login-form .error-msg {
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-.login-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
-}
 .login-form input[type="submit"] {
   margin-top: 3rem;
   width: 100%;

style/main.scss

@@ -16,7 +16,7 @@
 @import 'profile.scss';
 @import 'loading.scss';
 @import 'album_page.scss';
-@import 'friend.scss';
+@import 'scrollbar.scss';
 
 body {
   font-family: sans-serif;

style/personal.scss

@@ -1,9 +1,9 @@
 @import "theme.scss";
 
 .personal-container {
-  width: 16rem;
+  width: $personal-width;
   background: #1c1c1c;
-  margin: 2px;
+  margin: $personal-margin;
   border-radius: 0.5rem;
 
   .profile-container {

style/scrollbar.scss

@@ -0,0 +1,12 @@
+::-webkit-scrollbar {
+    width: 10px;
+    background-blend-mode: $scrollbar-background-color;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $scrollbar-handle-color;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $scrollbar-handle-hover-color;
+}

style/sidebar.scss

@@ -2,13 +2,15 @@
 
 .sidebar-container {
   background-color: transparent;
-  width: 22rem;
-  height: calc(100% - 75px);
+  width: $sidebar-width;
+  height: $center-viewport-height;
+  margin: 2px;
+
   .sidebar-top-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
     height: 9rem;
-    margin: 3px;
+    margin: 2px 0px;
     padding: 0.1rem 1rem 1rem 1rem;
     position: relative;
     .header {
@@ -68,7 +70,7 @@
   .sidebar-bottom-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
-    margin: 3px;
+    margin: 2px 0px;
     margin-top: 6px;
     padding: 0.2rem 1rem 1rem 1rem;
     height: calc(100% - 9rem);

style/signup.scss

@@ -17,7 +17,7 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 36rem;
+  height: 35rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
   z-index: 1;
@@ -92,17 +92,7 @@
 .signup-form .input-box input:focus ~ i {
   height: 2.6rem;
 }
-.signup-form .error-msg {
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-.signup-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
-}
+
 .signup-form input[type="submit"] {
   margin-top: 3.5rem;
   width: 100%;

style/theme.scss

@@ -12,10 +12,21 @@ $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 $border-color: #7851ed;
 $queue-background-color: $play-bar-background-color;
-$error-color: red;
+
+$scrollbar-background-color: #101010;
+$scrollbar-handle-color:#292929;
+$scrollbar-handle-hover-color:#5c5b5b;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;
 
 $dashboard-tile-size: 200px;
 $playbar-size: 75px;
+$personal-width: 16rem;
+$sidebar-width: 22rem;
+
+$personal-margin: 2px;
+$sidebar-margin: 2px;
+
+$center-viewport-width: calc(100vw - $personal-width - $sidebar-width - 2*$personal-margin - 2*$sidebar-margin);
+$center-viewport-height: calc(100vh - $playbar-size);