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 { body {
background-color: #1e1e2e; background-color: #1e1e2e;
color: #ff66ff; 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"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<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> <!-- <h1>#(title)</h1> -->
<div id="content" <div id="content"
hx-get="/home" hx-get="/home"
hx-trigger="load" hx-trigger="load"
hx-swap="outerHTML"
> >
</div> </div>
</body> </body>

View File

@@ -1,7 +1,17 @@
<p>We're in!</p> <div id="content">
<button hx-post="/logout" <header>
hx-target="#content" <div class="container">
hx-trigger="click" <div id="logo">HHE - Purchase Orders</div>
> <nav>
Log Out. <ul class="nav-links">
</button> <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> <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>
@@ -6,4 +13,5 @@
<input type="password" id="password" placeholder="Password" name="password" autocomplete="current-password" required> <input type="password" id="password" placeholder="Password" name="password" autocomplete="current-password" required>
<br> <br>
<input type="submit" value="Sign In"> <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) let credentialsProtected = app.grouped(User.credentialsAuthenticator(), redirectMiddleware)
app.get { req async throws in 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 app.get("login") { req async throws -> View in
@@ -59,6 +62,19 @@ func routes(_ app: Application) throws {
try app.register(collection: ApiController()) 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 { struct UserForm: Content {
let username: String let username: String
let password: String let password: String