mannpatel/Poll-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added a side bar

Browse Source
This commit is contained in:
Mann Patel
2025-09-05 15:39:06 -06:00
parent a5bdc27de0
commit 05001a53e0
28 changed files with 1631 additions and 1655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
app/internal/templates/profile.html Normal file
View File

@@ -0,0 +1,348 @@
{{ define "content" }}
<div class="min-h-screen bg-gray-50">
<!-- Main Content -->
<div class="p-6">
<!-- Profile Info Section -->
<div class="mb-8">
<div class="flex items-start space-x-4">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900">
{{ .User.FirstName }} {{ .User.LastName }}
</h3>
<p class="text-gray-600">{{ .User.Email }}</p>
<div class="flex items-center mt-2 space-x-4">
<span class="text-gray-600">User Role:</span>
<span
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
>
<i class="fas fa-user-check mr-1"></i>
{{ if eq .User.RoleID 1 }}Admin {{ else if eq .User.RoleID 2
}}Team Leader {{ else }}Volunteer {{ end }}
</span>
<span class="text-gray-600">User ID:</span>
<span
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
>
<i class="fas fa-user-check mr-1"></i>
{{ .User.UserID }}</span
>
{{if eq .User.RoleID 1}}
<span class="text-gray-600">Signup Code:</span>
<span class="font-mono text-gray-900">{{.User.AdminCode }} </span>
{{end}}
</div>
</div>
</div>
</div>
<!-- Edit Profile Section -->
<div class="border-t border-gray-200 pt-8">
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
<i class="fas fa-edit text-blue-600 mr-3"></i>
Edit Profile Information
</h3>
<!-- Edit Profile Form -->
<form method="post" action="/profile/update">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- First Name -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
First Name <span class="text-red-500">*</span>
</label>
<input
type="text"
name="first_name"
value="{{ .User.FirstName }}"
required
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
placeholder="Enter first name"
/>
</div>
<!-- Last Name -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
Last Name <span class="text-red-500">*</span>
</label>
<input
type="text"
name="last_name"
value="{{ .User.LastName }}"
required
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
placeholder="Enter last name"
/>
</div>
<!-- Email (Read-only) -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
Email Address
<span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
>Read Only</span
>
</label>
<div class="relative">
<input
type="email"
name="email"
value="{{ .User.Email }}"
disabled
class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<i class="fas fa-lock text-gray-400"></i>
</div>
</div>
<p class="text-xs text-gray-500 mt-1">
Contact system administrator to change email
</p>
</div>
<!-- Phone -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"
>Phone Number</label
>
<input
type="tel"
name="phone"
value="{{ .User.Phone }}"
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
placeholder="Enter phone number"
/>
</div>
</div>
<!-- Profile Form Actions -->
<div
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
Changes will be applied immediately after saving
</div>
<div class="flex space-x-3">
<button
type="button"
onclick="window.history.back()"
class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
>
<i class="fas fa-times mr-2"></i>
Cancel
</button>
<button
type="submit"
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
>
<i class="fas fa-save mr-2"></i>
Save Changes
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
let settings = [];
function addSetting() {
const nameInput = document.getElementById("newSettingName");
const valueInput = document.getElementById("newSettingValue");
const name = nameInput.value.trim();
const value = valueInput.value.trim();
if (!name || !value) {
alert("Please enter both setting name and value");
return;
}
// Check if setting already exists
const existingIndex = settings.findIndex(
(s) => s.name.toLowerCase() === name.toLowerCase()
);
if (existingIndex !== -1) {
// Update existing setting
settings[existingIndex].value = value;
} else {
// Add new setting
settings.push({ name, value });
}
// Clear inputs
nameInput.value = "";
valueInput.value = "";
// Update display
displaySettings();
}
function removeSetting(index) {
settings.splice(index, 1);
displaySettings();
}
function displaySettings() {
const settingsList = document.getElementById("settingsList");
const noSettingsMessage = document.getElementById("noSettingsMessage");
if (settings.length === 0) {
noSettingsMessage.style.display = "block";
settingsList.innerHTML =
'<div class="text-gray-500 text-sm" id="noSettingsMessage">No settings configured yet. Add your first setting above.</div>';
return;
}
noSettingsMessage.style.display = "none";
settingsList.innerHTML = settings
.map(
(setting, index) => `
<div class="flex items-center justify-between p-4 border border-gray-200 bg-gray-50">
<div class="flex-1">
<div class="flex items-center space-x-4">
<span class="font-semibold text-gray-900">${setting.name}:</span>
<span class="text-gray-700">${setting.value}</span>
</div>
</div>
<button
type="button"
onclick="removeSetting(${index})"
class="px-3 py-1 text-red-600 hover:text-red-800 focus:outline-none"
title="Remove setting"
>
<i class="fas fa-times"></i>
</button>
</div>
`
)
.join("");
}
function clearAllSettings() {
if (settings.length === 0) return;
if (confirm("Are you sure you want to clear all settings?")) {
settings = [];
displaySettings();
}
}
// Allow Enter key to add setting
document
.getElementById("newSettingName")
.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
e.preventDefault();
document.getElementById("newSettingValue").focus();
}
});
document
.getElementById("newSettingValue")
.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
e.preventDefault();
addSetting();
}
});
// Form submission handler
document
.getElementById("settingsForm")
.addEventListener("submit", function (e) {
e.preventDefault();
// Here you would typically send the settings to your server
console.log("Saving settings:", settings);
// Show success message
alert("Settings saved successfully!");
});
</script>
<style>
/* Professional square corner design */
* {
border-radius: 0 !important;
}
/* Clean transitions */
input,
button,
.transition-colors {
transition: all 0.2s ease;
}
/* Focus states with blue accent */
input:focus {
box-shadow: 0 0 0 1px #3b82f6;
}
button:focus {
box-shadow: 0 0 0 2px #3b82f6;
}
/* Hover effects */
.hover\:bg-gray-50:hover {
background-color: #f9fafb;
}
.hover\:bg-blue-700:hover {
background-color: #1d4ed8;
}
.hover\:bg-green-700:hover {
background-color: #15803d;
}
.hover\:bg-red-50:hover {
background-color: #fef2f2;
}
/* Professional button styling */
button {
font-weight: 500;
letter-spacing: 0.025em;
}
/* Clean form inputs */
input[disabled] {
opacity: 0.8;
}
/* Status indicators */
.bg-blue-100 {
background-color: #dbeafe;
}
.text-blue-800 {
color: #1e40af;
}
/* Progress bars */
.bg-blue-600 {
background-color: #2563eb;
}
.bg-green-600 {
background-color: #16a34a;
}
/* Responsive design */
@media (max-width: 1024px) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
</style>
{{ end }}