ruidy/rentease
1
0
Fork 0
mirror of https://github.com/rjNemo/rentease.git synced 2026-06-12 13:46:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add alpinejs form validation on the login step

Browse source
This commit is contained in:
Ruidy 2024-06-17 17:19:48 +02:00
parent 0dc9bee3f7
commit ae233e46e0
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
4 changed files with 63 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
internal/view/layout/base.templ
View file

@ -11,6 +11,7 @@ templ BaseLayout() {
<link rel="icon" href="/static/icons/favicon-main.png"/> <link rel="icon" href="/static/icons/favicon-main.png"/>
<link rel="stylesheet" href="/static/css/pico.min.css"/> <link rel="stylesheet" href="/static/css/pico.min.css"/>
<script src="/static/js/htmx.js" defer></script> <script src="/static/js/htmx.js" defer></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("htmx:beforeSwap", (e) => { document.addEventListener("htmx:beforeSwap", (e) => {

2
internal/view/layout/base_templ.go
View file

@ -23,7 +23,7 @@ func BaseLayout() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><title>RentEase | Your Property Management System</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"AI assistant to help you improve your management\"><link rel=\"icon\" href=\"/static/icons/favicon-main.png\"><link rel=\"stylesheet\" href=\"/static/css/pico.min.css\"><script src=\"/static/js/htmx.js\" defer></script><script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n document.addEventListener(\"htmx:beforeSwap\", (e) => {\n if([422,401].includes(e.detail.xhr.status) ){\n e.detail.shouldSwap = true\n e.detail.isError = false\n }\n })\n })\n </script></head><body hx-boost=\"true\" style=\"display: flex; flex-direction: column; min-height: 100vh;\"><nav class=\"container-fluid\"><ul><li><a href=\"/\"><b>🏨 RentEase </b></a></li></ul><ul><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li><li><a href=\"/bookings/new\" role=\"button\">New Booking</a></li></ul></nav><main class=\"container\" style=\"flex: 1 0 auto;\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><title>RentEase | Your Property Management System</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"AI assistant to help you improve your management\"><link rel=\"icon\" href=\"/static/icons/favicon-main.png\"><link rel=\"stylesheet\" href=\"/static/css/pico.min.css\"><script src=\"/static/js/htmx.js\" defer></script><script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js\"></script><script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n document.addEventListener(\"htmx:beforeSwap\", (e) => {\n if([422,401].includes(e.detail.xhr.status) ){\n e.detail.shouldSwap = true\n e.detail.isError = false\n }\n })\n })\n </script></head><body hx-boost=\"true\" style=\"display: flex; flex-direction: column; min-height: 100vh;\"><nav class=\"container-fluid\"><ul><li><a href=\"/\"><b>🏨 RentEase </b></a></li></ul><ul><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li><li><a href=\"/bookings/new\" role=\"button\">New Booking</a></li></ul></nav><main class=\"container\" style=\"flex: 1 0 auto;\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

36
internal/view/login_form.templ
View file

@ -12,16 +12,38 @@ func isFormError(data map[string]string, key string) bool {
} }
templ LoginForm(lfvm LoginFormViewModel) { templ LoginForm(lfvm LoginFormViewModel) {
<form hx-post="/"> <form hx-post="/" x-data="{passwordTooShort:false}">
<input type="email" name="email" value={ lfvm.Email } placeholder="john@email.com" aria-label="email" if isFormError(lfvm.Errors, "credentials") { <input
aria-invalid="true" type="email"
} autocomplete="email" autofocus required=""/> name="email"
<input type="password" name="password" value={ lfvm.Password } placeholder="p4Ssw0rD" aria-label="password" if isFormError(lfvm.Errors, "credentials") { value={ lfvm.Email }
aria-invalid="true" placeholder="john@email.com"
} autocomplete="password" required=""/> aria-label="email"
if isFormError(lfvm.Errors, "credentials") {
aria-invalid="true"
}
autocomplete="email"
autofocus
required
/>
if msg, ok := lfvm.Errors["credentials"]; ok { if msg, ok := lfvm.Errors["credentials"]; ok {
<small>Authentication error: { msg }</small> <small>Authentication error: { msg }</small>
} }
<input
type="password"
name="password"
value={ lfvm.Password }
placeholder="p4Ssw0rD"
aria-label="password"
if isFormError(lfvm.Errors, "credentials") {
aria-invalid="true"
}
autocomplete="password"
required
@input.debounce="passwordTooShort = $event.target.value.length < 4"
:aria-invalid="passwordTooShort"
/>
<small x-show="passwordTooShort">Password is too short</small>
<button type="submit">Log in</button> <button type="submit">Log in</button>
<small>Registration is disabled. Please ask an admin to activate it.</small> <small>Registration is disabled. Please ask an admin to activate it.</small>
</form> </form>

64
internal/view/login_form_templ.go
View file

@ -34,14 +34,14 @@ func LoginForm(lfvm LoginFormViewModel) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form hx-post=\"/\"><input type=\"email\" name=\"email\" value=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form hx-post=\"/\" x-data=\"{passwordTooShort:false}\"><input type=\"email\" name=\"email\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var2 string var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(lfvm.Email) templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(lfvm.Email)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 16, Col: 53} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 19, Col: 21}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -57,16 +57,39 @@ func LoginForm(lfvm LoginFormViewModel) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" autocomplete=\"email\" autofocus required=\"\"> <input type=\"password\" name=\"password\" value=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" autocomplete=\"email\" autofocus required> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var3 string if msg, ok := lfvm.Errors["credentials"]; ok {
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(lfvm.Password) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<small>Authentication error: ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 19, Col: 62} return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(msg)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 30, Col: 37}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</small> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"password\" name=\"password\" value=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(lfvm.Password)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 35, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -80,30 +103,7 @@ func LoginForm(lfvm LoginFormViewModel) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" autocomplete=\"password\" required=\"\"> ") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" autocomplete=\"password\" required @input.debounce=\"passwordTooShort = $event.target.value.length &lt; 4\" :aria-invalid=\"passwordTooShort\"> <small x-show=\"passwordTooShort\">Password is too short</small> <button type=\"submit\">Log in</button> <small>Registration is disabled. Please ask an admin to activate it.</small></form>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if msg, ok := lfvm.Errors["credentials"]; ok {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<small>Authentication error: ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(msg)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/login_form.templ`, Line: 23, Col: 37}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</small> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"submit\">Log in</button> <small>Registration is disabled. Please ask an admin to activate it.</small></form>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }