Skip to content

Commit 45c9e5b

Browse files
ItsNotGoodNameItsNotGoodName
committed
feat(web): loading states and flash removal
1 parent 21d14b9 commit 45c9e5b

29 files changed

+534
-153
lines changed

‎web/components/base.templ

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ templ Base(head, body templ.Component, csrfToken string) {
1919
<meta name="gorilla.csrf.Token" content={ csrfToken } />
2020
{! head }
2121
</head>
22-
<body hx-boost="true">
22+
<body hx-boost="true" hx-ext="loading-states">
2323
{! body }
2424
</body>
2525
</html>

‎web/components/base_templ.go

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/components/flash.templ

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ type FlashProps struct {
1818
}
1919

2020
templ Flash(t FlashType, c templ.Component) {
21-
<div lass="flash">
21+
<div class="flash" data-loading-hide-class="absolute hidden">
2222
switch t {
2323
case FlashTypeSuccess:
2424
<div class="alert alert-success">

‎web/components/flash_templ.go

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/components/login_form.templ

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
package components
2+
3+
import (
4+
"github.com/ItsNotGoodName/smtpbridge/web/routes"
5+
)
6+
7+
type LoginFormProps struct {
8+
Flash templ.Component
9+
Username string
10+
Password string
11+
}
12+
13+
templ LoginForm(props LoginFormProps) {
14+
<form class="flex flex-col gap-4" hx-post={ routes.Login().URLString() } data-loading-states>
15+
<div class="form-control">
16+
<label class="label">
17+
<span class="label-text">Username</span>
18+
</label>
19+
<input name="username" type="text" placeholder="Username" autocomplete="username" class="input input-bordered" value={ props.Username } />
20+
</div>
21+
<div class="form-control">
22+
<label class="label">
23+
<span class="label-text">Password</span>
24+
</label>
25+
<input name="password" type="password" placeholder="Password" autocomplete="current-password" class="input input-bordered" value={ props.Password } />
26+
</div>
27+
<button type="submit" class="btn btn-primary" data-loading-disable>
28+
<span data-loading-class="loading loading-spinner loading-sm">
29+
Login
30+
</span>
31+
</button>
32+
if props.Flash != nil {
33+
{! props.Flash }
34+
}
35+
</form>
36+
}

‎web/components/login_form_templ.go

+105
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/components/rule_form.templ

+12-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type RuleFormCreateProps struct {
1919
}
2020

2121
templ RuleFormCreate(props RuleFormCreateProps) {
22-
<form hx-post={ routes.RuleCreate().URLString() } class="flex flex-col gap-4">
22+
<form hx-post={ routes.RuleCreate().URLString() } class="flex flex-col gap-4" data-loading-states>
2323
<div class="form-control">
2424
<label class="label">
2525
<span class="label-text">Name</span>
@@ -55,7 +55,11 @@ templ RuleFormCreate(props RuleFormCreateProps) {
5555
</div>
5656
}
5757
</fieldset>
58-
<button type="submit" class="btn btn-primary btn-block">Create Rule</button>
58+
<button type="submit" class="btn btn-primary btn-block" data-loading-disable>
59+
<span data-loading-class="loading loading-spinner loading-xs">
60+
Create Rule
61+
</span>
62+
</button>
5963
if props.Flash != nil {
6064
{! props.Flash }
6165
}
@@ -74,7 +78,7 @@ type RuleFormUpdateProps struct {
7478
}
7579

7680
templ RuleFormUpdate(props RuleFormUpdateProps) {
77-
<form hx-post={ routes.Rule(props.Rule.ID).URLString() } class="flex flex-col gap-4">
81+
<form hx-post={ routes.Rule(props.Rule.ID).URLString() } class="flex flex-col gap-4" data-loading-states>
7882
<div class="form-control">
7983
<label class="label">
8084
<span class="label-text">Name</span>
@@ -114,7 +118,11 @@ templ RuleFormUpdate(props RuleFormUpdateProps) {
114118
<span>Rule cannot be edited because it is internal.</span>
115119
</div>
116120
}
117-
<button disabled?={ props.Rule.Internal } type="submit" class="btn btn-primary btn-block">Update Rule</button>
121+
<button disabled?={ props.Rule.Internal } type="submit" class="btn btn-primary btn-block" data-loading-disable>
122+
<span data-loading-class="loading loading-spinner loading-xs">
123+
Update Rule
124+
</span>
125+
</button>
118126
if props.Flash != nil {
119127
{! props.Flash }
120128
}

‎web/components/rule_form_templ.go

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/components/rule_toggle_button.templ

+15-5
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,19 @@ type RuleToggleButtonProps struct {
88
}
99

1010
templ RuleToggleButton(props RuleToggleButtonProps) {
11-
if props.Enable {
12-
<button class="btn btn-sm btn-success w-full" hx-post={ routes.RuleToggle(props.ID).URLQueryString("enable=false") } hx-target="this" hx-swap="outerHTML">Enabled</button>
13-
} else {
14-
<button class="btn btn-sm btn-error w-full" hx-post={ routes.RuleToggle(props.ID).URLQueryString("enable=true") } hx-target="this" hx-swap="outerHTML">Disabled</button>
15-
}
11+
<div data-loading-states>
12+
if props.Enable {
13+
<button class="btn btn-sm btn-success w-full" hx-post={ routes.RuleToggle(props.ID).URLQueryString("enable=false") } hx-target="this" hx-swap="outerHTML" data-loading-disable>
14+
<span data-loading-class="loading loading-spinner loading-sm">
15+
Enabled
16+
</span>
17+
</button>
18+
} else {
19+
<button class="btn btn-sm btn-error w-full" hx-post={ routes.RuleToggle(props.ID).URLQueryString("enable=true") } hx-target="this" hx-swap="outerHTML" data-loading-disable>
20+
<span data-loading-class="loading loading-spinner loading-sm">
21+
Disabled
22+
</span>
23+
</button>
24+
}
25+
</div>
1626
}

‎web/components/rule_toggle_button_templ.go

+12-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/forms/forms.go

+5
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,8 @@ type RuleUpdate struct {
1919
Expression string
2020
Endpoints []int64
2121
}
22+
23+
type Login struct {
24+
Username string
25+
Password string
26+
}

‎web/pages/attachment.templ

+5-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@ templ attachmentListView(m meta.Meta, props attachmentListViewProps) {
2424
</ul>
2525
</div>
2626
<div class="flex flex-col gap-4 p-4">
27-
<div class="join flex items-center justify-end">
28-
<button class="btn btn-sm btn-info join-item tooltip-left tooltip" data-tip="delete orphan attachments" hx-post={ routes.AttachmentTrim().URLString() }>
29-
@icons.Recycle("w-5 h-5")
27+
<div class="join flex items-center justify-end" data-loading-states>
28+
<button class="btn btn-sm btn-info join-item tooltip-left tooltip" data-tip="delete orphan attachments" hx-post={ routes.AttachmentTrim().URLString() } data-loading-disable>
29+
<span data-loading-class="loading loading-spinner loading-sm">
30+
@icons.Recycle("w-5 h-5")
31+
</span>
3032
</button>
3133
</div>
3234
@c.PaginateHeader(c.PaginateHeaderProps{

0 commit comments

Comments
 (0)