bookhoard/templates/profile_form.templ

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"
	>
		<!-- Account Information -->
		<div>
			<h3 class="text-lg font-semibold mb-4 text-content">Account Information</h3>
			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div>
					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Username</label>
					<input
						type="text"
						name="username"
						value={ user.Username }
						class="input"
					/>
				</div>
				<div>
					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Email Address</label>
					<input
						type="email"
						name="email"
						value={ user.Email }
						class="input"
					/>
				</div>
				<div>
					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">First Name</label>
					<input
						type="text"
						name="first_name"
						value={ user.FirstName }
						placeholder="Optional"
						class="input"
					/>
				</div>
				<div>
					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Last Name</label>
					<input
						type="text"
						name="last_name"
						value={ user.LastName }
						placeholder="Optional"
						class="input"
					/>
				</div>
				<div>
					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Theme</label>
					<select
						name="theme"
						class="input"
					>
						<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>
					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Timezone</label>
					<select
						name="timezone"
						class="input"
					>
						<option value="UTC" selected?={ user.Timezone == "UTC" }>UTC (UTC+0)</option>
						<option value="Pacific/Honolulu" selected?={ user.Timezone == "Pacific/Honolulu" }>Hawaii (UTC-10)</option>
						<option value="America/Anchorage" selected?={ user.Timezone == "America/Anchorage" }>Alaska (UTC-9/-8)</option>
						<option value="America/Los_Angeles" selected?={ user.Timezone == "America/Los_Angeles" }>Pacific (UTC-8/-7)</option>
						<option value="America/Denver" selected?={ user.Timezone == "America/Denver" }>Mountain (UTC-7/-6)</option>
						<option value="America/Phoenix" selected?={ user.Timezone == "America/Phoenix" }>Mountain - no DST (UTC-7)</option>
						<option value="America/Chicago" selected?={ user.Timezone == "America/Chicago" }>Central (UTC-6/-5)</option>
						<option value="America/New_York" selected?={ user.Timezone == "America/New_York" }>Eastern (UTC-5/-4)</option>
						<option value="America/Sao_Paulo" selected?={ user.Timezone == "America/Sao_Paulo" }>Brasilia (UTC-3/-2)</option>
						<option value="Europe/London" selected?={ user.Timezone == "Europe/London" }>British (UTC+0/+1)</option>
						<option value="Europe/Paris" selected?={ user.Timezone == "Europe/Paris" }>Central European (UTC+1/+2)</option>
						<option value="Europe/Helsinki" selected?={ user.Timezone == "Europe/Helsinki" }>Eastern European (UTC+2/+3)</option>
						<option value="Europe/Moscow" selected?={ user.Timezone == "Europe/Moscow" }>Moscow (UTC+3)</option>
						<option value="Asia/Tehran" selected?={ user.Timezone == "Asia/Tehran" }>Iran (UTC+3:30)</option>
						<option value="Asia/Dubai" selected?={ user.Timezone == "Asia/Dubai" }>Gulf (UTC+4)</option>
						<option value="Asia/Karachi" selected?={ user.Timezone == "Asia/Karachi" }>Pakistan (UTC+5)</option>
						<option value="Asia/Kolkata" selected?={ user.Timezone == "Asia/Kolkata" }>India (UTC+5:30)</option>
						<option value="Asia/Dhaka" selected?={ user.Timezone == "Asia/Dhaka" }>Bangladesh (UTC+6)</option>
						<option value="Asia/Bangkok" selected?={ user.Timezone == "Asia/Bangkok" }>Indochina (UTC+7)</option>
						<option value="Asia/Shanghai" selected?={ user.Timezone == "Asia/Shanghai" }>China (UTC+8)</option>
						<option value="Asia/Tokyo" selected?={ user.Timezone == "Asia/Tokyo" }>Japan/Korea (UTC+9)</option>
						<option value="Australia/Darwin" selected?={ user.Timezone == "Australia/Darwin" }>Australian Central (UTC+9:30)</option>
						<option value="Australia/Sydney" selected?={ user.Timezone == "Australia/Sydney" }>Australian Eastern (UTC+10/+11)</option>
						<option value="Pacific/Auckland" selected?={ user.Timezone == "Pacific/Auckland" }>New Zealand (UTC+12/+13)</option>
					</select>
				</div>
				if showRoleField {
					<div>
						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Role</label>
						<select
							name="role"
							class="input"
						>
							<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 text-content">Change Password</h3>
			if requireCurrentPassword {
				<!-- Self-edit: require current password -->
				<div class="space-y-4 max-w-md">
					<div>
						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Current Password</label>
						<input
							type="password"
							name="current_password"
							class="input"
							required
						/>
					</div>
					<div>
						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">New Password</label>
						<input
							type="password"
							name="new_password"
							class="input"
							minlength="6"
						/>
					</div>
					<div>
						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Confirm New Password</label>
						<input
							type="password"
							name="confirm_password"
							class="input"
							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="btn btn-primary"
					>
						Update Password
					</button>
					<div id="password-result" class="mt-2"></div>
				</div>
			} else {
				<!-- Admin edit: no current password required -->
				<p class="text-sm italic mb-4 text-content-muted">
					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="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">New Password</label>
						<input
							type="password"
							name="new_password"
							class="input"
							minlength="6"
						/>
					</div>
					<div>
						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Confirm New Password</label>
						<input
							type="password"
							name="confirm_password"
							class="input"
							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="btn btn-primary"
					>
						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 border-line">
			if showCancelButton {
				<button
					type="button"
					@click="closeProfileModal()"
					class="btn btn-secondary"
				>
					Cancel
				</button>
			}
			<button
				type="submit"
				class="btn btn-primary"
			>
				Save Changes
			</button>
		</div>
		<div id="profile-result" class="mt-2"></div>
	</form>
}