feat: accounts settings page

This commit is contained in:
juancwu 2026-05-03 18:19:27 +00:00
commit c327189afd
8 changed files with 278 additions and 1 deletions

View file

@ -0,0 +1,76 @@
package forms
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
type UpdateAccountProps struct {
SpaceID string
AccountID string
Name string
NameErr string
GeneralErr string
SuccessMsg string
}
templ UpdateAccount(props UpdateAccountProps) {
<form
id="update-account-form"
hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.settings.rename", "spaceID", props.SpaceID, "accountID", props.AccountID) }
hx-swap="outerHTML"
>
@card.Card(card.Props{Class: "rounded-sm"}) {
@card.Header() {
@card.Title() {
Account Details
}
@card.Description() {
Update the account name.
}
}
@card.Content(card.ContentProps{Class: "space-y-4"}) {
if props.GeneralErr != "" {
@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
{ props.GeneralErr }
}
}
if props.SuccessMsg != "" {
@form.Message(form.MessageProps{Variant: form.MessageVariantInfo}) {
{ props.SuccessMsg }
}
}
@form.Item() {
@form.Label(form.LabelProps{For: "name"}) {
Account Name
}
@input.Input(input.Props{
ID: "name",
Name: "name",
Type: input.TypeText,
Class: "rounded-sm",
Value: props.Name,
HasError: props.NameErr != "",
Required: true,
Attributes: templ.Attributes{
"autocomplete": "off",
},
})
if props.NameErr != "" {
@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
{ props.NameErr }
}
}
}
}
@card.Footer(card.FooterProps{Class: "flex justify-end gap-2"}) {
@button.Button(button.Props{Type: button.TypeSubmit}) {
Save changes
}
}
}
</form>
}

View file

@ -69,6 +69,7 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
@button.Button(button.Props{
Class: "w-full flex gap-2 md:gap-4 items-center",
Variant: button.VariantLink,
Href: routeurl.URL("page.app.spaces.space.accounts.account.settings", "spaceID", props.SpaceID, "accountID", props.AccountID),
}) {
Account Settings
@icon.Settings()

View file

@ -1,4 +1,59 @@
package pages
templ SpaceAccountSettings() {
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
type SpaceAccountSettingsPageProps struct {
SpaceID string
AccountID string
AccountName string
UpdateForm forms.UpdateAccountProps
}
templ SpaceAccountSettingsPage(props SpaceAccountSettingsPageProps) {
@layouts.App(
"Account Settings",
spaceOverviewSidebarContent(),
spaceSpecificSidebarContent(props.SpaceID),
spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName),
) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Account Settings</h1>
<p class="text-muted-foreground mt-2">
Manage settings for { props.AccountName }.
</p>
</div>
@forms.UpdateAccount(props.UpdateForm)
@card.Card(card.Props{Class: "rounded-sm border-destructive"}) {
@card.Header() {
@card.Title(card.TitleProps{Class: "text-destructive"}) {
Danger Zone
}
@card.Description() {
Deleting an account permanently removes it and all associated transactions. This cannot be undone.
}
}
@card.Footer(card.FooterProps{Class: "flex justify-end pt-8"}) {
<form
hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.settings.delete", "spaceID", props.SpaceID, "accountID", props.AccountID) }
hx-confirm={ "Permanently delete \"" + props.AccountName + "\" and all of its transactions? This cannot be undone." }
>
@button.Button(button.Props{
Type: button.TypeSubmit,
Variant: button.VariantDestructive,
Class: "flex gap-2 items-center",
}) {
@icon.Trash2()
Delete Account
}
</form>
}
}
</div>
}
}

View file

@ -114,6 +114,16 @@ templ spaceAccountSidebarContent(spaceID, accountID, accountName string) {
<span>Deposit Funds</span>
}
}
@sidebar.MenuItem() {
@sidebar.MenuButton(sidebar.MenuButtonProps{
Href: routeurl.URL("page.app.spaces.space.accounts.account.settings", "spaceID", spaceID, "accountID", accountID),
IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces.space.accounts.account.settings", "spaceID", spaceID, "accountID", accountID),
Tooltip: "Account Settings",
}) {
@icon.Settings()
<span>Settings</span>
}
}
}
}
}