WIP: Updates to login / signup forms, rearranges some view routes.

This commit is contained in:
2026-01-02 22:53:22 -05:00
parent 6602c4a8b5
commit 6c6045b4a6
10 changed files with 1641 additions and 194 deletions

View File

@@ -11,135 +11,77 @@ struct LoginForm: HTML, Sendable {
}
var body: some HTML {
form {
fieldset(.class("fieldset bg-base-200 border-base-300 rounded-box w-xl border p-4")) {
legend(.class("fieldset-legend")) { style.title }
div(
.id("loginForm"),
.class("flex items-center justify-center")
) {
form {
fieldset(.class("fieldset bg-base-200 border-base-300 rounded-box w-xl border p-4")) {
legend(.class("fieldset-legend")) { style.title }
if style == .signup {
label(.class("input validator w-full")) {
SVG(.user)
input(
.type(.text), .required, .placeholder("Username"),
.minlength("3"), .pattern(.username)
)
}
div(.class("validator-hint hidden")) {
"Enter valid username"
br()
"Must be at least 3 characters"
}
}
if style == .signup {
label(.class("input validator w-full")) {
SVG(.user)
SVG(.email)
input(
.type(.text), .required, .placeholder("Username"),
.minlength("3"), .pattern(.username)
.type(.email), .placeholder("Email"), .required
)
}
div(.class("validator-hint hidden")) {
"Enter valid username"
br()
"Must be at least 3 characters"
}
}
div(.class("validator-hint hidden")) { "Enter valid email address." }
label(.class("input validator w-full")) {
SVG(.email)
input(
.type(.email), .placeholder("Email"), .required
)
}
div(.class("validator-hint hidden")) { "Enter valid email address." }
label(.class("input validator w-full")) {
SVG(.key)
input(
.type(.password), .placeholder("Password"), .required,
.pattern(.password), .minlength("8")
)
}
if style == .signup {
label(.class("input validator w-full")) {
SVG(.key)
input(
.type(.password), .placeholder("Confirm Password"), .required,
.type(.password), .placeholder("Password"), .required,
.pattern(.password), .minlength("8")
)
}
}
div(.class("validator-hint hidden")) {
p {
"Must be more than 8 characters, including"
br()
"At least one number"
br()
"At least one lowercase letter"
br()
"At least one uppercase letter"
if style == .signup {
label(.class("input validator w-full")) {
SVG(.key)
input(
.type(.password), .placeholder("Confirm Password"), .required,
.pattern(.password), .minlength("8")
)
}
}
div(.class("validator-hint hidden")) {
p {
"Must be more than 8 characters, including"
br()
"At least one number"
br()
"At least one lowercase letter"
br()
"At least one uppercase letter"
}
}
button(.class("btn btn-secondary mt-4")) { style.title }
a(
.class("btn btn-link mt-4"),
.href(route: style == .signup ? .login(.index) : .user(.signup(.index)))
) {
style == .login ? "Sign Up" : "Login"
}
}
button(.class("btn btn-neutral mt-4")) { style.title }
}
}
// div(.class("flex items-center justify-center")) {
// div(.class("w-full mx-auto")) {
// h1(.class("text-2xl font-bold")) { style.title }
// form(
// .class("w-full h-screen")
// ) {
// fieldset(.class("fieldset w-full")) {
// legend(.class("fieldset-legend")) { "Email" }
// label(.class("input validator")) {
// SVG(.email)
// input(
// .type(.email), .placeholder("mail@site.com"), .required,
// .autofocus
// )
// }
// div(.class("validator-hint hidden")) { "Enter valid email address." }
// }
//
// if style == .signup {
// fieldset(.class("fieldset")) {
// legend(.class("fieldset-legend")) { "Name" }
// label(.class("input validator")) {
// input(
// .type(.text), .placeholder("Username"), .required,
// .init(name: "pattern", value: "[A-Za-z][A-Za-z0-9\\-]*"),
// .init(name: "minlength", value: "3")
// )
// }
// div(.class("validator-hint hidden")) { "Enter valid email address." }
// }
// }
//
// fieldset(.class("fieldset")) {
// legend(.class("fieldset-legend")) { "Password" }
// label(.class("input validator")) {
// SVG(.key)
// input(
// .type(.password), .placeholder("Password"), .required,
// .init(name: "pattern", value: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"),
// .init(name: "minlength", value: "8")
// )
// }
// if style == .signup {
// label(.class("input validator")) {
// SVG(.key)
// input(
// .type(.password), .placeholder("Confirm Password"), .required,
// .init(name: "pattern", value: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"),
// .init(name: "minlength", value: "8")
// )
// }
// }
// div(.class("validator-hint hidden")) {
// p {
// "Must be more than 8 characters, including"
// br()
// "At least one number"
// br()
// "At least one lowercase letter"
// br()
// "At least one uppercase letter"
// }
// }
// }
//
// SubmitButton(title: style.title)
// }
// }
// }
}
}