114 lines
2.9 KiB
Swift
114 lines
2.9 KiB
Swift
import Elementary
|
|
import ElementaryHTMX
|
|
import Styleguide
|
|
|
|
struct LoginForm: HTML, Sendable {
|
|
|
|
let style: Style
|
|
let next: String?
|
|
|
|
init(style: Style = .login, next: String? = nil) {
|
|
self.style = style
|
|
self.next = next
|
|
}
|
|
|
|
var body: some HTML {
|
|
div(
|
|
.id("loginForm"),
|
|
.class("flex items-center justify-center")
|
|
) {
|
|
form(
|
|
.method(.post)
|
|
) {
|
|
|
|
if let next {
|
|
input(.class("hidden"), .name("next"), .value(next))
|
|
}
|
|
|
|
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"),
|
|
.name("username"), .id("username"),
|
|
.minlength("3"), .pattern(.username)
|
|
)
|
|
}
|
|
div(.class("validator-hint hidden")) {
|
|
"Enter valid username"
|
|
br()
|
|
"Must be at least 3 characters"
|
|
}
|
|
}
|
|
|
|
label(.class("input validator w-full")) {
|
|
SVG(.email)
|
|
input(
|
|
.type(.email), .placeholder("Email"), .required,
|
|
.name("email"), .id("email"),
|
|
)
|
|
}
|
|
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"),
|
|
.name("password"), .id("password"),
|
|
)
|
|
}
|
|
|
|
if style == .signup {
|
|
label(.class("input validator w-full")) {
|
|
SVG(.key)
|
|
input(
|
|
.type(.password), .placeholder("Confirm Password"), .required,
|
|
.pattern(.password), .minlength("8"),
|
|
.name("confirmPassword"), .id("confirmPassword"),
|
|
)
|
|
}
|
|
}
|
|
|
|
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(next: next)) : .signup(.index))
|
|
) {
|
|
style == .login ? "Sign Up" : "Login"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
extension LoginForm {
|
|
enum Style: Equatable, Sendable {
|
|
case login
|
|
case signup
|
|
|
|
var title: String {
|
|
switch self {
|
|
case .login: return "Login"
|
|
case .signup: return "Sign Up"
|
|
}
|
|
}
|
|
}
|
|
}
|