fullstack: added profile pictures/avatars to accounts and improved settings page layout

This commit is contained in:
2026-01-11 18:04:24 +01:00
parent 52a6231d0b
commit b512f9d65f
3 changed files with 104 additions and 14 deletions

View File

@@ -3,6 +3,7 @@ CREATE TABLE IF NOT EXISTS user_ (
uuid UUID UNIQUE, uuid UUID UNIQUE,
email TEXT UNIQUE, email TEXT UNIQUE,
username TEXT NOT NULL UNIQUE, username TEXT NOT NULL UNIQUE,
avatar_url TEXT,
password_hash TEXT NOT NULL password_hash TEXT NOT NULL
); );

View File

@@ -1,14 +1,15 @@
use axum::{ use axum::{
Extension, Router, Extension,
Router,
http::{ http::{
Method, Method,
header::{self, CONTENT_TYPE}, header::{self, CONTENT_TYPE},
}, },
middleware, // middleware,
}; };
use axum::{body::Body, extract::Request, middleware::Next, response::Response}; use axum::{body::Body, extract::Request, middleware::Next, response::Response};
use clap::Parser; use clap::Parser;
use std::{net::SocketAddr, time::Duration}; use std::{net::SocketAddr, path::PathBuf, sync::Arc, time::Duration};
use tower_governor::{GovernorLayer, governor::GovernorConfigBuilder}; use tower_governor::{GovernorLayer, governor::GovernorConfigBuilder};
use tower_http::{ use tower_http::{
cors::{Any, CorsLayer}, cors::{Any, CorsLayer},
@@ -22,6 +23,10 @@ mod db;
mod realtime; mod realtime;
mod routes; mod routes;
pub struct AppConfig {
pub avatar_dir: PathBuf,
}
#[derive(clap::Parser, Debug)] #[derive(clap::Parser, Debug)]
#[command(author, version, about, long_about = None)] #[command(author, version, about, long_about = None)]
pub struct Cli { pub struct Cli {
@@ -33,6 +38,10 @@ pub struct Cli {
#[arg(short, long, default_value = "localhost:5432")] #[arg(short, long, default_value = "localhost:5432")]
database: String, database: String,
/// Data directory path
#[arg(short = 'D', long, default_value = "/var/lib/chatapp")]
data_dir: String,
/// Verbose mode /// Verbose mode
#[arg(short, long)] #[arg(short, long)]
verbose: bool, verbose: bool,
@@ -74,6 +83,11 @@ async fn main() -> anyhow::Result<()> {
let realtime = realtime::Realtime::new(); let realtime = realtime::Realtime::new();
let data_dir = PathBuf::from(cli.data_dir);
let config = Arc::new(AppConfig {
avatar_dir: data_dir.join("avatars"),
});
let mut app = Router::new() let mut app = Router::new()
.merge(routes::users::routes()) .merge(routes::users::routes())
.merge(routes::rooms::routes()) .merge(routes::rooms::routes())
@@ -82,17 +96,17 @@ async fn main() -> anyhow::Result<()> {
.merge(routes::ws::routes()) .merge(routes::ws::routes())
.layer(Extension(db_pool)) .layer(Extension(db_pool))
.layer(Extension(realtime)) .layer(Extension(realtime))
.layer(Extension(config))
.layer(GovernorLayer::new(governor_conf)) .layer(GovernorLayer::new(governor_conf))
.layer(cors); .layer(cors);
if cli.verbose { if cli.verbose {
app = app app = app.layer(
.layer(
TraceLayer::new_for_http() TraceLayer::new_for_http()
.make_span_with(DefaultMakeSpan::new().level(Level::INFO)) .make_span_with(DefaultMakeSpan::new().level(Level::INFO))
.on_response(DefaultOnResponse::new().level(Level::INFO)), .on_response(DefaultOnResponse::new().level(Level::INFO)),
) )
.layer(middleware::from_fn(log_json_body)); // .layer(middleware::from_fn(log_json_body));
} }
let port = cli.port; let port = cli.port;
@@ -111,7 +125,7 @@ async fn main() -> anyhow::Result<()> {
Ok(()) Ok(())
} }
async fn log_json_body(req: Request, next: Next) -> Response { async fn _log_json_body(req: Request, next: Next) -> Response {
let (parts, body) = req.into_parts(); let (parts, body) = req.into_parts();
// Check if the content type is JSON // Check if the content type is JSON

View File

@@ -1,17 +1,18 @@
use axum::{ use axum::{
Extension, Json, Router, Extension, Json, Router,
extract::Request, extract::{Path, Request},
http::{HeaderMap, StatusCode}, http::{HeaderMap, StatusCode},
middleware::Next, middleware::Next,
response::Response, response::Response,
routing::{get, post, put}, routing::{get, post, put},
}; };
use sqlx::PgPool; use sqlx::PgPool;
use std::env; use std::{env, sync::Arc};
use uuid::Uuid; use uuid::Uuid;
use validator::ValidateEmail; use validator::ValidateEmail;
use crate::{ use crate::{
AppConfig,
auth::{create_jwt, hash_password, validate_token, verify_jwt, verify_password}, auth::{create_jwt, hash_password, validate_token, verify_jwt, verify_password},
db::{user_id_from_uuid, username_from_uuid}, db::{user_id_from_uuid, username_from_uuid},
}; };
@@ -65,7 +66,9 @@ pub fn routes() -> Router {
.route("/login", post(login)) .route("/login", post(login))
.route("/register", post(register_user)) .route("/register", post(register_user))
.route("/validate-token", get(validate_token)) .route("/validate-token", get(validate_token))
.route("/account", put(update_user)) .route("/account/settings", put(update_user))
.route("/account/upload-avatar", post(upload_avatar))
.route("/account/get-avatar/{uuid}", get(get_avatar))
.layer(axum::middleware::from_fn(registration_guard)) .layer(axum::middleware::from_fn(registration_guard))
} }
@@ -264,3 +267,75 @@ pub async fn update_user(
}), }),
)) ))
} }
async fn upload_avatar(
headers: HeaderMap,
Extension(db): Extension<PgPool>,
Extension(config): Extension<Arc<AppConfig>>,
body: axum::body::Bytes,
) -> Result<StatusCode, (StatusCode, String)> {
let claims = verify_jwt(headers)?;
let user_id = user_id_from_uuid(&db, claims.sub).await?;
tracing::info!("User ID {} is uploading {} bytes)", user_id, body.len());
let base_dir = &config.avatar_dir;
let file_extension = "png"; // TODO: detect MIME type
let filename = format!("{}.{}", claims.sub, file_extension);
let full_path = std::path::Path::new(&base_dir).join(&filename);
tokio::fs::create_dir_all(&base_dir).await.map_err(|e| {
tracing::error!("Failed to create storage: {}", e);
(
StatusCode::INTERNAL_SERVER_ERROR,
"Failed to upload file".into(),
)
})?;
tokio::fs::write(&full_path, body).await.map_err(|e| {
tracing::error!("Failed to save file: {}", e);
(
StatusCode::INTERNAL_SERVER_ERROR,
"Failed to upload file".into(),
)
})?;
sqlx::query("UPDATE user_ SET avatar_url = $1 WHERE id = $2")
.bind(filename)
.bind(user_id)
.execute(&db)
.await
.map_err(|e| {
tracing::error!("DB error: {}", e);
(StatusCode::INTERNAL_SERVER_ERROR, "DB erorr".into())
})?;
Ok(StatusCode::OK)
}
// Public route
async fn get_avatar(
Path(uuid): Path<Uuid>,
Extension(config): Extension<Arc<AppConfig>>,
) -> Result<Response, (StatusCode, String)> {
let base_dir = &config.avatar_dir;
let filename = format!("{}.png", uuid);
let full_path = std::path::Path::new(&base_dir).join(filename);
if !full_path.exists() {
return Err((StatusCode::NOT_FOUND, "Avatar not found".into()));
}
let file_contents = tokio::fs::read(&full_path).await.map_err(|e| {
tracing::error!("Could not read avatar file: {}", e);
(
StatusCode::INTERNAL_SERVER_ERROR,
"Could not read file".into(),
)
})?;
Ok(Response::builder()
.header("Content-Type", "image/png")
.body(axum::body::Body::from(file_contents))
.unwrap())
}