91 lines
3.1 KiB
Cheetah
91 lines
3.1 KiB
Cheetah
{{define "title"}}Settings{{end}}
|
|
|
|
{{define "main"}}
|
|
<div class="container">
|
|
<h1>Settings</h1>
|
|
|
|
<div x-data="{ editingUsername: false}" style="display: flex; align-items: center; gap: 10px">
|
|
<p id="username-display" x-show="!editingUsername" style="margin: 0">
|
|
<strong>Username:</strong> {{.Username}}
|
|
</p>
|
|
|
|
<form
|
|
x-show="editingUsername"
|
|
hx-patch="/api/user"
|
|
hx-target="#username-error-container"
|
|
@htmx:after-request="if (event.detail.successful) editingUsername = false"
|
|
style="display: flex; align-items: center; gap: 10px; margin: 0"
|
|
>
|
|
<label for="username" class="sr-only">Username:</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
required
|
|
minlength="3"
|
|
value="{{.Username}}"
|
|
/>
|
|
<button type="submit" class="btn">Save</button>
|
|
</form>
|
|
|
|
<button type="button" class="btn" @click="editingUsername = !editingUsername" x-text="editingUsername ? 'Cancel' : 'Edit'"></button>
|
|
</div>
|
|
<div id="username-error-container" style="color: red; margin-bottom: 10px"></div>
|
|
|
|
<div x-data="{ editingEmail: false}" style="display: flex; align-items: center; gap: 10px">
|
|
<p id="email-display" x-show="!editingEmail" style="margin: 0">
|
|
<strong>Email:</strong> {{.Email}}
|
|
</p>
|
|
<form
|
|
x-show="editingEmail"
|
|
hx-patch="/api/user"
|
|
hx-target="#email-error-container"
|
|
@htmx:after-request="if (event.detail.successful) editingEmail = false"
|
|
style="display: flex; align-items: center; gap: 10px; margin: 0"
|
|
>
|
|
<label for="email" class="sr-only">Username:</label>
|
|
<input
|
|
type="text"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
minlength="3"
|
|
value="{{.Email}}"
|
|
/>
|
|
<button type="submit" class="btn">Save</button>
|
|
</form>
|
|
|
|
<button type="button" class="btn" @click="editingEmail = !editingEmail" x-text="editingEmail ? 'Cancel' : 'Edit'"></button>
|
|
</div>
|
|
<div id="email-error-container" style="color: red; margin-bottom: 10px"></div>
|
|
|
|
|
|
<h2>Change password</h2>
|
|
<form hx-patch="/api/user" hx-target="#password-error-container">
|
|
<div class="form-group">
|
|
<div id="password-error-container" style="color: red; margin-bottom: 10px"></div>
|
|
<label for="current-password">Current password:</label>
|
|
<input
|
|
type="password"
|
|
id="current-password"
|
|
name="current_password"
|
|
required
|
|
minlength="6"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="new-password">New password:</label>
|
|
<input
|
|
type="password"
|
|
id="new-password"
|
|
name="new_password"
|
|
required
|
|
minlength="6"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" class="btn">Update password</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|