Login form

app/templates/login.templ

@@ -0,0 +1,69 @@
+package templates
+
+templ LoginFormContent(content LoginFormValidationContent) {
+	<div id="login-form-container">
+		<div class="mb-3">
+			<label for="username" class="form-label">
+				Username
+			</label>
+			<input
+				type="text"
+				id="username"
+				name="username"
+				class={ "form-control",
+						templ.KV("is-invalid", content.UsernameError != ""),
+						templ.KV("is-valid", content.Validated && content.UsernameError == "") }
+				value={ content.Username }
+			/>
+			if content.UsernameError != "" {
+				<div class="invalid-feedback">{ content.UsernameError }</div>
+			}
+		</div>
+		<div class="mb-3">
+			<label for="password" class="form-label">
+				Password
+			</label>
+			<input
+				type="text"
+				id="password"
+				name="password"
+				class={ "form-control",
+						templ.KV("is-invalid", content.PasswordError != ""),
+						templ.KV("is-valid", content.Validated && content.PasswordError == "") }
+				value={ content.Password }
+			/>
+			if content.PasswordError != "" {
+				<div class="invalid-feedback">{ content.PasswordError }</div>
+			}
+		</div>
+		if content.LoginError != "" {
+			<div class="alert alert-danger">
+				{ content.LoginError }
+			</div>
+		}
+		<div class="text-center">
+			<button type="submit" class="btn btn-success">
+				Submit
+			</button>
+		</div>
+	</div>
+}
+
+templ RenderLogin(pc PageContext) {
+	@baseLayout(pc) {
+		<div class="card ms-auto me-auto" style="max-width: 500px;">
+			<div class="card-body">
+				<h4 class="card-title mb-4">
+					Login
+				</h4>
+				<form
+					hx-post="/login"
+					hx-target="#login-form-container"
+					hx-swap="outerHTML"
+				>
+					@LoginFormContent(LoginFormValidationContent{})
+				</form>
+			</div>
+		</div>
+	}
+}