feat: More view changes.

This commit is contained in:
2025-01-07 07:53:32 -05:00
parent f9b58676bb
commit e3f150b32c
5 changed files with 122 additions and 18 deletions

View File

@@ -1,4 +1,72 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1e1e2e;
color: #ff66ff;
}
.container {
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
header {
background-color: #14141f;
color: #ff66ff;
padding: 10px 0;
border-bottom: 1px solid grey;
}
#logo {
float: left;
font-size: 1.5em;
}
nav {
float: right;
}
.nav-links {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-links li {
display: inline-block;
margin-left: 20px;
}
.nav-links li a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: inline-block;
transition: background-color 0.3s;
}
.nav-links li a:hover {
background-color: #555;
}
.content {
padding: 50px 0;
}
.login-form {
padding: 50px 0;
text-align: center;
}
.login-form label {
padding: 15px;
}
.login-form input {
margin-bottom: 15px;
}

View File

@@ -2,16 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="css/main.css">
<title>#(title)</title>
</head>
<body>
<h1>#(title)</h1>
<!-- <h1>#(title)</h1> -->
<div id="content"
hx-get="/home"
hx-trigger="load"
hx-swap="outerHTML"
>
</div>
</body>

View File

@@ -1,7 +1,17 @@
<p>We're in!</p>
<button hx-post="/logout"
hx-target="#content"
hx-trigger="click"
>
Log Out.
</button>
<div id="content">
<header>
<div class="container">
<div id="logo">HHE - Purchase Orders</div>
<nav>
<ul class="nav-links">
<li><a hx-post="logout" hx-target="#content" hx-trigger="click" hx-swap="outerHTML">Logout</a></li>
</ul>
</nav>
</div>
</header>
<section class="content">
<div class="container">
<p>We're in!</p>
</div>
</section>
</div>

View File

@@ -1,4 +1,11 @@
<form class="login-form" hx-post="/login" hx-target="#content">
<div id="content">
<header>
<div class="container">
<div id="logo">HHE - Purchase Orders</div>
</div>
</header>
<form class="login-form" hx-post="/login" hx-target="#content" hx-swap="outerHTML">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username" name="username" autocomplete="username" required autofocus>
<br>
@@ -6,4 +13,5 @@
<input type="password" id="password" placeholder="Password" name="password" autocomplete="current-password" required>
<br>
<input type="submit" value="Sign In">
</form>
</form>
</div>

View File

@@ -7,7 +7,10 @@ func routes(_ app: Application) throws {
let credentialsProtected = app.grouped(User.credentialsAuthenticator(), redirectMiddleware)
app.get { req async throws in
try await req.view.render("index", ["title": "HHE - Purchase Orders"])
try await req.view.render(
"index",
Index(showNavLinks: false)
)
}
app.get("login") { req async throws -> View in
@@ -59,6 +62,19 @@ func routes(_ app: Application) throws {
try app.register(collection: ApiController())
}
struct Index: Content {
let title: String
let showNavLinks: Bool
init(
title: String = "HHE - Purchase Orders",
showNavLinks: Bool
) {
self.title = title
self.showNavLinks = showNavLinks
}
}
struct UserForm: Content {
let username: String
let password: String