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" 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);">
				</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);">
				</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);">
				</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);">
				</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>
				</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>
					</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>
					</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">
					</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">
					</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;">
						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" 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">
					</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">
					</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;">
						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"
						onclick="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;">
				Save Changes
			</button>
		</div>

		<div id="profile-result" class="mt-2"></div>
	</form>
}