275 lines
8.6 KiB
HTML
275 lines
8.6 KiB
HTML
|
{{ define "content" }}
|
||
|
|
<div class="min-h-screen bg-gray-50">
|
||
|
|
<!-- Header Bar -->
|
||
|
|
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<i class="fas fa-user-circle text-blue-600 text-xl"></i>
|
||
|
|
<h1 class="text-xl font-semibold text-gray-900">User Profile</h1>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-2 text-sm text-gray-600">
|
||
|
|
<i class="fas fa-shield-check text-blue-500"></i>
|
||
|
|
<span>Secure Profile Management</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<div class="p-6">
|
||
|
|
<!-- Profile Overview Tile -->
|
||
|
|
<div class="bg-white border border-gray-200 mb-6">
|
||
|
|
<div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
|
||
|
|
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
|
||
|
|
<i class="fas fa-id-card text-blue-600 mr-3"></i>
|
||
|
|
Profile Overview
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div class="p-6">
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
|
|
<!-- User Info -->
|
||
|
|
<div class="lg:col-span-2">
|
||
|
|
<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="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>
|
||
|
|
Active User
|
||
|
|
</span>
|
||
|
|
<span class="text-xs text-gray-500"
|
||
|
|
>ID: {{ .User.UserID }}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Quick Stats -->
|
||
|
|
<div class="bg-gray-50 border border-gray-200 p-4">
|
||
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">
|
||
|
|
Account Information
|
||
|
|
</h4>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div class="flex justify-between text-sm">
|
||
|
|
<span class="text-gray-600">User ID:</span>
|
||
|
|
<span class="font-mono text-gray-900">{{ .User.UserID }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between text-sm">
|
||
|
|
<span class="text-gray-600">Role:</span>
|
||
|
|
<span class="text-gray-900">{{ if eq .User.RoleID 1 }}Admin
|
||
|
|
{{ else if eq .User.RoleID 2 }}Team Leader
|
||
|
|
{{ else }}Volunteer
|
||
|
|
{{ end }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between text-sm">
|
||
|
|
<span class="text-gray-600">Status:</span>
|
||
|
|
<span class="text-green-600 font-medium">Active</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Edit Profile Form Tile -->
|
||
|
|
<div class="bg-white border border-gray-200 mt-0 m-6">
|
||
|
|
<div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
|
||
|
|
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
|
||
|
|
<i class="fas fa-edit text-blue-600 mr-3"></i>
|
||
|
|
Edit Profile Information
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-6">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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 for tiles */
|
||
|
|
.hover\:bg-blue-50:hover {
|
||
|
|
background-color: #eff6ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hover\:border-blue-500:hover {
|
||
|
|
border-color: #3b82f6;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Professional table-like layout */
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ensure full width usage */
|
||
|
|
.min-h-screen {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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 }}
|