feat: Adds route query parameter to home, htmx updates url, and working next parameter for login

This commit is contained in:
2025-01-07 20:39:12 -05:00
parent 6eb723a7cf
commit e86e5facc6
5 changed files with 61 additions and 30 deletions

View File

@@ -1,3 +1,5 @@
#extend("index"):
#export("content"):
<div id="content">
<header>
<div class="container">
@@ -10,17 +12,21 @@
<nav>
<ul class="nav-links">
<li>
<a hx-get="/users"
<a hx-get="/?route=users"
hx-target="#home-content"
hx-swap="outerHTML"
hx-push-url="true"
#if(route == "users"): hx-trigger="revealed" #endif
>
Users
</a>
</li>
<li>
<a hx-get="/employees"
<a hx-get="/?route=employees"
hx-target="#home-content"
hx-swap="outerHTML"
hx-push-url="true"
#if(route == "employees"): hx-trigger="revealed" #endif
>
Employees
</a>
@@ -33,3 +39,5 @@
</div>
</section>
</div>
#endexport
#endextend

View File

@@ -7,14 +7,7 @@
<link rel="stylesheet" href="css/main.css">
<title>#(title)</title>
</head>
<body>
<!-- <h1>#(title)</h1> -->
<div id="content"
hx-get="/home"
hx-trigger="load"
hx-swap="outerHTML"
>
</div>
#import("content")
</body>
</html>

View File

@@ -1,3 +1,5 @@
#extend("index"):
#export("content"):
<div id="content">
<header>
<div class="container">
@@ -5,7 +7,11 @@
</div>
</header>
<form class="login-form" hx-post="/login" hx-target="#content" hx-swap="outerHTML">
<form class="login-form"
hx-post="#(route)"
hx-target="body"
hx-push-url="true"
>
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username" name="username" autocomplete="username" required autofocus>
<br>
@@ -15,3 +21,5 @@
<input type="submit" value="Sign In">
</form>
</div>
#endexport
#endextend

View File

@@ -5,34 +5,30 @@ import Vapor
struct ViewController: RouteCollection {
private let api = ApiController()
private let employees = EmployeeViewController()
func boot(routes: any RoutesBuilder) throws {
let protected = routes.protected
let login = routes.grouped("login")
// MARK: - Non-protected routes.
routes.get(use: index(req:))
login.get(use: getLogin(req:))
login.post(use: postLogin(req:))
routes.post("logout", use: logout(req:))
// routes.get(use: index(req:))
routes.get("login", use: getLogin(req:))
routes.post(use: postLogin(req:))
// MARK: Protected routes.
protected.get("home", use: home(req:))
protected.get(use: home(req:))
protected.post("logout", use: logout(req:))
protected.get("users", use: users(req:))
try routes.register(collection: EmployeeViewController())
}
@Sendable
func index(req: Request) async throws -> View {
try await req.view.render("index")
try routes.register(collection: employees)
}
@Sendable
func getLogin(req: Request) async throws -> View {
try await req.view.render("login")
req.logger.info("Query: \(req.url.query ?? "n/a")")
let params = try? req.query.decode(LoginParameter.self)
return try await req.view.render("login", ["route": params?.next ?? "/"])
}
@Sendable
@@ -51,7 +47,7 @@ struct ViewController: RouteCollection {
req.auth.login(user)
req.logger.debug("User logged in: \(user.toDTO())")
return try await req.view.render("home")
return try await home(req: req)
}
@Sendable
@@ -60,11 +56,19 @@ struct ViewController: RouteCollection {
return try await req.view.render("login")
}
// TODO: Add route parameters for active route / tab.
@Sendable
func home(req: Request) async throws -> View {
try await req.view.render("home")
let ctx = try req.query.decode(HomeCTX.self)
guard let route = ctx.route else {
return try await req.view.render("home", ctx)
}
switch route {
case .users:
return try await users(req: req)
case .employees:
return try await employees.employees(req: req)
}
}
@Sendable
@@ -79,3 +83,16 @@ private struct UserForm: Content {
let username: String
let password: String
}
enum HomeRoute: String, Content {
case employees
case users
}
struct HomeCTX: Content {
let route: HomeRoute?
}
struct LoginParameter: Content {
let next: String
}

View File

@@ -5,6 +5,11 @@ extension RoutesBuilder {
// Used to ensure views are protected, redirects users to the login page if they're
// not authenticated.
var protected: any RoutesBuilder {
grouped(User.credentialsAuthenticator(), User.redirectMiddleware(path: "login"))
grouped(
User.credentialsAuthenticator(),
User.redirectMiddleware { req in
"login?next=\(req.url)"
}
)
}
}