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

View File

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

View File

@@ -1,3 +1,5 @@
#extend("index"):
#export("content"):
<div id="content"> <div id="content">
<header> <header>
<div class="container"> <div class="container">
@@ -5,7 +7,11 @@
</div> </div>
</header> </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> <label for="username">Username</label>
<input type="text" id="username" placeholder="Username" name="username" autocomplete="username" required autofocus> <input type="text" id="username" placeholder="Username" name="username" autocomplete="username" required autofocus>
<br> <br>
@@ -15,3 +21,5 @@
<input type="submit" value="Sign In"> <input type="submit" value="Sign In">
</form> </form>
</div> </div>
#endexport
#endextend

View File

@@ -5,34 +5,30 @@ import Vapor
struct ViewController: RouteCollection { struct ViewController: RouteCollection {
private let api = ApiController() private let api = ApiController()
private let employees = EmployeeViewController()
func boot(routes: any RoutesBuilder) throws { func boot(routes: any RoutesBuilder) throws {
let protected = routes.protected let protected = routes.protected
let login = routes.grouped("login")
// MARK: - Non-protected routes. // MARK: - Non-protected routes.
routes.get(use: index(req:)) // routes.get(use: index(req:))
login.get(use: getLogin(req:)) routes.get("login", use: getLogin(req:))
login.post(use: postLogin(req:)) routes.post(use: postLogin(req:))
routes.post("logout", use: logout(req:))
// MARK: Protected routes. // 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:)) protected.get("users", use: users(req:))
try routes.register(collection: employees)
try routes.register(collection: EmployeeViewController())
}
@Sendable
func index(req: Request) async throws -> View {
try await req.view.render("index")
} }
@Sendable @Sendable
func getLogin(req: Request) async throws -> View { 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 @Sendable
@@ -51,7 +47,7 @@ struct ViewController: RouteCollection {
req.auth.login(user) req.auth.login(user)
req.logger.debug("User logged in: \(user.toDTO())") req.logger.debug("User logged in: \(user.toDTO())")
return try await req.view.render("home") return try await home(req: req)
} }
@Sendable @Sendable
@@ -60,11 +56,19 @@ struct ViewController: RouteCollection {
return try await req.view.render("login") return try await req.view.render("login")
} }
// TODO: Add route parameters for active route / tab.
@Sendable @Sendable
func home(req: Request) async throws -> View { 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 @Sendable
@@ -79,3 +83,16 @@ private struct UserForm: Content {
let username: String let username: String
let password: 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 // Used to ensure views are protected, redirects users to the login page if they're
// not authenticated. // not authenticated.
var protected: any RoutesBuilder { var protected: any RoutesBuilder {
grouped(User.credentialsAuthenticator(), User.redirectMiddleware(path: "login")) grouped(
User.credentialsAuthenticator(),
User.redirectMiddleware { req in
"login?next=\(req.url)"
}
)
} }
} }