Setup Basic Playlist page with PlaylistData

Reviewed-on: LibreTunes/LibreTunes#160

.env.example

@@ -18,3 +18,4 @@ 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

@@ -15,6 +15,7 @@ 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

migrations/2024-12-10-221544_add_playlist_track/down.sql

@@ -0,0 +1 @@
+ALTER TABLE playlist_songs DROP COLUMN track;

migrations/2024-12-10-221544_add_playlist_track/up.sql

@@ -0,0 +1 @@
+ALTER TABLE playlist_songs ADD COLUMN track INTEGER DEFAULT 1 NOT NULL;

src/api/mod.rs

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

src/api/playlist.rs

@@ -0,0 +1,22 @@
+use leptos::*;
+use crate::playlistdata::PlaylistData;
+use crate::songdata::SongData;
+
+use cfg_if::cfg_if;
+
+cfg_if! {
+	if #[cfg(feature = "ssr")] {
+		use leptos::server_fn::error::NoCustomError;
+		use crate::database::get_db_conn;
+	}
+}
+
+#[server(endpoint = "playlist/get")]
+pub async fn get_playlist(id: i32) -> Result<PlaylistData, ServerFnError> {
+    use crate::models::Playlist;
+    let db_con = &mut get_db_conn();
+    let playlist = Playlist::get_playlist_data(id,db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting playlist: {}", e)))?;
+    Ok(playlist)
+}
+

src/app.rs

@@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::playlistpage::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -46,6 +47,7 @@ pub fn App() -> impl IntoView {
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
                         <Route path="album/:id" view=AlbumPage />
+                        <Route path="playlist/:id" view=PlaylistPage />
                     </Route>
                     <Route path="/login" view=Login />
                     <Route path="/signup" view=Signup />

src/auth.rs

@@ -19,6 +19,11 @@ 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/lib.rs

@@ -4,6 +4,7 @@ pub mod songdata;
 pub mod albumdata;
 pub mod artistdata;
 pub mod playstatus;
+pub mod playlistdata;
 pub mod playbar;
 pub mod database;
 pub mod queue;

src/main.rs

@@ -14,10 +14,11 @@ extern crate diesel_migrations;
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{routing::get, Router, extract::Path};
+    use axum::{routing::get, Router, extract::Path, middleware::from_fn};
     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};
@@ -63,6 +64,7 @@ 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/models.rs

@@ -10,6 +10,7 @@ cfg_if! {
 		use std::error::Error;
 		use crate::songdata::SongData;
 		use crate::albumdata::AlbumData;
+		use crate::playlistdata::PlaylistData;
 	}
 }
 
@@ -795,3 +796,44 @@ pub struct Playlist {
 	/// The name of the playlist
 	pub name: String,
 }
+
+impl Playlist {
+	/// Obtain a playlist from its playlistid
+	/// # Arguments
+	/// 
+	/// * `playlist_id` - The id of the playlist to select
+	/// * `conn` - A mutable reference to a database connection
+	/// 
+	/// # Returns
+	/// 
+	/// * `Result<Playlist, Box<dyn Error>>` - A result indicating success with the desired playlist, or an error
+	///
+	#[cfg(feature = "ssr")]
+	pub fn get_playlist_data(playlist_id: i32, conn: &mut PgPooledConn) -> Result<PlaylistData, Box<dyn Error>> {
+		use crate::schema::*;
+
+		let playlist: (Playlist, User) = playlists::table
+			.find(playlist_id)
+			.inner_join(users::table.on(playlists::owner_id.eq(users::id)))
+			.select((playlists::all_columns, users::all_columns))
+			.first(conn)?;
+
+		let playlistdata = PlaylistData {
+			id: playlist.0.id.unwrap(),
+			title: playlist.0.name,
+			owner: User {
+				id: playlist.1.id,
+				username: playlist.1.username,
+				email: playlist.1.email,
+				password: None,
+				created_at: playlist.1.created_at,
+				admin: playlist.1.admin,
+			},
+			created_at: playlist.0.created_at.unwrap(),
+			updated_at: playlist.0.updated_at.unwrap(),
+			image_path: "/assets/images/placeholders/MusicPlaceholder.svg".to_string(),
+		};
+
+		Ok(playlistdata)
+	}
+}

src/pages.rs

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

src/pages/login.rs

@@ -16,10 +16,9 @@ pub fn Login() -> impl IntoView {
     let loading = create_rw_signal(false);
     let error_msg = create_rw_signal(None);
 
-    let toggle_password = move |ev: leptos::ev::MouseEvent| {
-        ev.prevent_default();
+    let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
-        log!("Password visibility toggled");
+        log!("showing password");
     };
 
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
@@ -95,16 +94,16 @@ pub fn Login() -> impl IntoView {
                         />
                         <span>Password</span>
                         <i></i>
-                        <Show when=move || { show_password() == false }
-                            fallback=move || view! {
-                                <button on:click=toggle_password class="login-password-visibility">
+                        <Show
+                            when=move || {show_password() == false}
+                            fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility">
                                                   <Icon icon=icondata::AiEyeInvisibleFilled />
-                                </button>
-                            }
+                                               </button> /> }
                         >
                             <button on:click=toggle_password class="login-password-visibility">
                                 <Icon icon=icondata::AiEyeFilled />
                             </button>
+
                         </Show>
                     </div>
                     <a href="" class="forgot-pw">Forgot Password?</a>

src/pages/playlistpage.rs

@@ -0,0 +1,58 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::components::song_list::*;
+use crate::api::playlist::*;
+
+
+#[derive(Params, PartialEq)]
+struct PlaylistParams {
+    id: i32
+}
+
+#[component]
+pub fn PlaylistPage() -> impl IntoView {
+    let params = use_params::<PlaylistParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let playlist_data = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {get_playlist(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        }
+    );
+
+    view! {
+        <div class="album-page-container">
+            <div class="album-header">
+                <Suspense
+                    fallback=move || view! { <p class="loading">"Loading..."</p> }
+                >
+                    {move || {
+                        playlist_data.with( |playlist_data| {
+                            match playlist_data {
+                                Some(Ok(s)) => {
+                                    view! { <h1>{(*s).clone().title}</h1> }
+                                },
+                                Some(Err(e)) => {
+                                    view! { <div class="error">{format!("Error loading playlist : {}",e)}</div> }.into_view()
+                                },
+                                None => {view! { }.into_view()}
+                            }
+                        })
+                    }}
+                </Suspense>
+            </div>
+        </div>
+    }
+}
+

src/playlistdata.rs

@@ -0,0 +1,43 @@
+use crate::components::dashboard_tile::DashboardTile;
+use crate::models::User;
+use serde::{Serialize, Deserialize};
+
+use chrono::NaiveDateTime;
+
+/// Holds information about a playlist
+///
+/// Intended to be used in the front-end
+#[derive(Serialize, Deserialize, Clone)]
+pub struct PlaylistData {
+    /// Playlist id
+    pub id: i32,
+    /// Playlist title
+    pub title: String,
+    /// Playlist owner
+    pub owner: User,
+    /// Playlist creation time
+    pub created_at: NaiveDateTime,
+    /// Playlist update time3
+    pub updated_at: NaiveDateTime,
+    /// Path to playlist image, relative to the root of the web server.
+    /// For example, `"/assets/images/Playlist.jpg"`
+    pub image_path: String,
+}
+
+impl DashboardTile for PlaylistData {
+    fn image_path(&self) -> String {
+        self.image_path.clone()
+    }
+
+    fn title(&self) -> String {
+        self.title.clone()
+    }
+
+    fn link(&self) -> String {
+        format!("/playlist/{}", self.id)
+    }
+
+    fn description(&self) -> Option<String> {
+        Some(format!("Playlist by {}", self.owner.username))
+    }
+}

src/util/mod.rs

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

src/util/require_auth.rs

@@ -0,0 +1,46 @@
+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)
+	}
+}