Askama + htmx for frontend

Server-side rendering with htmx and Tailwind CSS for the styling
This commit is contained in:
Alphonse Paix
2025-09-16 01:47:18 +02:00
parent 7c8ac0361e
commit 8a977df948
9 changed files with 402 additions and 36 deletions

View File

@@ -1,5 +1,11 @@
use axum::response::{Html, IntoResponse};
use askama::Template;
use axum::response::Html;
pub async fn home() -> impl IntoResponse {
Html(include_str!("home/home.html"))
#[derive(Template)]
#[template(path = "../templates/home.html")]
struct HomeTemplate;
pub async fn home() -> Html<String> {
let template = HomeTemplate;
Html(template.render().unwrap())
}

View File

@@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Home</title>
</head>
<body>
<p>Welcome to our newsletter!</p>
<ol>
<li><a href="/login">Admin login</a></li>
<li><a href="/register">Register</a></li>
</ol>
</body>
</html>

View File

@@ -4,6 +4,7 @@ use crate::{
session_state::TypedSession,
startup::AppState,
};
use askama::Template;
use axum::{
Form, Json,
extract::State,
@@ -50,18 +51,25 @@ impl IntoResponse for LoginError {
}
}
#[derive(Template)]
#[template(path = "../templates/login.html")]
struct LoginTemplate {
error_html: String,
}
#[derive(serde::Deserialize)]
pub struct LoginFormData {
username: String,
password: SecretString,
}
pub async fn get_login(messages: Messages) -> impl IntoResponse {
pub async fn get_login(messages: Messages) -> Html<String> {
let mut error_html = String::new();
for message in messages {
writeln!(error_html, "<p><i>{}</i></p>", message).unwrap();
}
Html(format!(include_str!("login/login.html"), error_html))
let template = LoginTemplate { error_html };
Html(template.render().unwrap())
}
pub async fn post_login(

View File

@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
<form action="/login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
{}
</body>
</html>