Add timezone dropdown to profile form and admin settings
- Add timezone select dropdown to profile form with common US timezones and UTC - Add system default timezone setting to admin settings page - Reformat profile_form.templ with consistent indentation and multi-line attribute formatting
This commit is contained in:
+136
-93
@@ -1,113 +1,149 @@
|
||||
package templates
|
||||
|
||||
templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, showRoleField bool, showCancelButton bool) {
|
||||
<form hx-put={ actionURL }
|
||||
hx-target="#profile-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
class="space-y-6">
|
||||
|
||||
<form
|
||||
hx-put={ actionURL }
|
||||
hx-target="#profile-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
class="space-y-6"
|
||||
>
|
||||
<!-- Account Information -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary)">Account Information</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
|
||||
<input type="text" name="username" value={user.Username}
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={ user.Username }
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email Address</label>
|
||||
<input type="email" name="email" value={user.Email}
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={ user.Email }
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">First Name</label>
|
||||
<input type="text" name="first_name" value={user.FirstName} placeholder="Optional"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
value={ user.FirstName }
|
||||
placeholder="Optional"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Last Name</label>
|
||||
<input type="text" name="last_name" value={user.LastName} placeholder="Optional"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
value={ user.LastName }
|
||||
placeholder="Optional"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Theme</label>
|
||||
<select name="theme"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<option value="tokyo-night" selected?={user.Theme == "tokyo-night"}>Tokyo Night</option>
|
||||
<option value="dracula" selected?={user.Theme == "dracula"}>Dracula</option>
|
||||
<option value="nord" selected?={user.Theme == "nord"}>Nord</option>
|
||||
<option value="solarized-dark" selected?={user.Theme == "solarized-dark"}>Solarized Dark</option>
|
||||
<option value="monokai" selected?={user.Theme == "monokai"}>Monokai</option>
|
||||
<option value="one-dark-pro" selected?={user.Theme == "one-dark-pro"}>One Dark Pro</option>
|
||||
<option value="material-dark" selected?={user.Theme == "material-dark"}>Material Dark</option>
|
||||
</select>
|
||||
<select
|
||||
name="theme"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
>
|
||||
<option value="tokyo-night" selected?={ user.Theme == "tokyo-night" }>Tokyo Night</option>
|
||||
<option value="dracula" selected?={ user.Theme == "dracula" }>Dracula</option>
|
||||
<option value="nord" selected?={ user.Theme == "nord" }>Nord</option>
|
||||
<option value="solarized-dark" selected?={ user.Theme == "solarized-dark" }>Solarized Dark</option>
|
||||
<option value="monokai" selected?={ user.Theme == "monokai" }>Monokai</option>
|
||||
<option value="one-dark-pro" selected?={ user.Theme == "one-dark-pro" }>One Dark Pro</option>
|
||||
<option value="material-dark" selected?={ user.Theme == "material-dark" }>Material Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timezone">Timezone</label>
|
||||
<select name="timezone" id="timezone" class="form-select">
|
||||
<option value="UTC" selected?={ user.Timezone == "UTC" }>UTC (Coordinated Universal Time)</option>
|
||||
<option value="America/New_York" selected?={ user.Timezone == "America/New_York" }>Eastern Time</option>
|
||||
<option value="America/Chicago" selected?={ user.Timezone == "America/Chicago" }>Central Time</option>
|
||||
<option value="America/Denver" selected?={ user.Timezone == "America/Denver" }>Mountain Time</option>
|
||||
<option value="America/Los_Angeles" selected?={ user.Timezone == "America/Los_Angeles" }>Pacific Time</option>
|
||||
<option value="America/Phoenix" selected?={ user.Timezone == "America/Phoenix" }>Mountain Time (no DST)</option>
|
||||
<option value="America/Anchorage" selected?={ user.Timezone == "America/Anchorage" }>Alaska Time</option>
|
||||
<option value="Pacific/Honolulu" selected?={ user.Timezone == "Pacific/Honolulu" }>Hawaii Time</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
if showRoleField {
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Role</label>
|
||||
<select name="role"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<option value="user" selected?={user.Role == "user"}>User</option>
|
||||
<option value="admin" selected?={user.Role == "admin"}>Admin</option>
|
||||
<select
|
||||
name="role"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
>
|
||||
<option value="user" selected?={ user.Role == "user" }>User</option>
|
||||
<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Section -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary)">Change Password</h3>
|
||||
|
||||
if requireCurrentPassword {
|
||||
<!-- Self-edit: require current password -->
|
||||
<div class="space-y-4 max-w-md">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Current Password</label>
|
||||
<input type="password" name="current_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
required>
|
||||
<input
|
||||
type="password"
|
||||
name="current_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">New Password</label>
|
||||
<input type="password" name="new_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6">
|
||||
<input
|
||||
type="password"
|
||||
name="new_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm New Password</label>
|
||||
<input type="password" name="confirm_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6">
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="button"
|
||||
hx-put="/api/auth/password"
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target="#password-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-include="closest form"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--accent); color: white;">
|
||||
<button
|
||||
type="button"
|
||||
hx-put="/api/auth/password"
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target="#password-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-include="closest form"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--accent); color: white;"
|
||||
>
|
||||
Update Password
|
||||
</button>
|
||||
<div id="password-result" class="mt-2"></div>
|
||||
@@ -117,56 +153,63 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
|
||||
<p class="text-sm italic mb-4" style="color: var(--text-secondary);">
|
||||
As an admin, you can change this user's password without knowing their current password.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4 max-w-md">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">New Password</label>
|
||||
<input type="password" name="new_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6">
|
||||
<input
|
||||
type="password"
|
||||
name="new_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm New Password</label>
|
||||
<input type="password" name="confirm_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6">
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
class="w-full px-3 py-2 border rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
minlength="6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="button"
|
||||
hx-put={ "/api/auth/password/" + user.ID }
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target="#password-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-include="closest form"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--accent); color: white;">
|
||||
<button
|
||||
type="button"
|
||||
hx-put={ "/api/auth/password/" + user.ID }
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target="#password-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-include="closest form"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--accent); color: white;"
|
||||
>
|
||||
Reset Password
|
||||
</button>
|
||||
<div id="password-result" class="mt-2"></div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3 pt-6 border-t" style="border-color: var(--border);">
|
||||
if showCancelButton {
|
||||
<button type="button"
|
||||
@click="closeProfileModal()"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeProfileModal()"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
}
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--accent); color: white;">
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 rounded"
|
||||
style="background-color: var(--accent); color: white;"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="profile-result" class="mt-2"></div>
|
||||
</form>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user