247 lines
13 KiB
HTML
247 lines
13 KiB
HTML
{% extends "portal_base.html" %}
|
|
{% load static %}
|
|
{% load i18n crispy_forms_tags %}
|
|
|
|
{% block title %}{% trans "User Profile" %} - ATS{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto mt-6 px-4">
|
|
|
|
<!-- Profile Header -->
|
|
<div class="flex items-center justify-between pb-6 mb-6 border-b-2 border-gray-200">
|
|
<div>
|
|
<h1 class="text-2xl font-bold mb-1">{% trans "Account Settings" %}</h1>
|
|
<p class="text-gray-500">{% trans "Manage your personal details and security." %}</p>
|
|
</div>
|
|
<div class="rounded-full flex items-center justify-center"
|
|
style="width: 50px; height: 50px; font-size: 1.5rem; background-color: rgba(157, 34, 53, 0.1);">
|
|
{% if user.profile_image %}
|
|
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
|
style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;"
|
|
title="{% trans 'Your account' %}">
|
|
{% else %}
|
|
<span class="font-semibold" style="color: #9d2235;">
|
|
{% if user.first_name %}{{ user.first_name.0 }}{% else %}<i class="fas fa-user"></i>{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Left Column - Personal Information -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<h2 class="text-lg font-bold mb-4" style="color: #9d2235;">
|
|
{% trans "Personal Information" %}
|
|
</h2>
|
|
|
|
<form method="POST" action="{% url 'user_detail' user.pk %}" class="space-y-4">
|
|
{% csrf_token %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="id_first_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "First Name" %}
|
|
</label>
|
|
<input type="text"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none transition-colors"
|
|
id="id_first_name"
|
|
name="first_name"
|
|
value="{{ user.first_name|default:'' }}"
|
|
style="focus:border-color: #9d2235; focus:box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_last_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Last Name" %}
|
|
</label>
|
|
<input type="text"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none transition-colors"
|
|
id="id_last_name"
|
|
name="last_name"
|
|
value="{{ user.last_name|default:'' }}"
|
|
style="focus:border-color: #9d2235; focus:box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);">
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="id_email" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Email Address" %}
|
|
</label>
|
|
<input type="email"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-200 bg-gray-50 text-gray-500 cursor-not-allowed"
|
|
id="id_email"
|
|
value="{{ user.email }}"
|
|
disabled>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i class="fas fa-save"></i>
|
|
{% trans "Save Changes" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Security & Status -->
|
|
<div>
|
|
<!-- Security Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-6">
|
|
<h2 class="text-lg font-bold mb-4" style="color: #9d2235;">
|
|
{% trans "Security" %}
|
|
</h2>
|
|
|
|
<div class="space-y-3">
|
|
<button type="button"
|
|
onclick="document.getElementById('passwordModal').classList.remove('hidden')"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i class="fas fa-lock"></i>
|
|
{% trans "Change Password" %}
|
|
</button>
|
|
|
|
<button type="button"
|
|
onclick="document.getElementById('imageModal').classList.remove('hidden')"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 transition-all duration-200 hover:border-gray-300"
|
|
onmouseover="this.style.backgroundColor='rgba(157, 34, 53, 0.05)'"
|
|
onmouseout="this.style.backgroundColor='white'">
|
|
<i class="fas fa-image"></i>
|
|
{% trans "Change Profile Image" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Status Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
|
<h2 class="text-lg font-bold mb-4" style="color: #9d2235;">
|
|
{% trans "Account Status" %}
|
|
</h2>
|
|
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-600 mb-1">{% trans "Username" %}</div>
|
|
<div class="text-base font-bold text-gray-900">{{ user.username }}</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-600 mb-1">{% trans "Last Login" %}</div>
|
|
<div class="text-base font-bold text-gray-900">
|
|
{% if user.last_login %}{{ user.last_login|date:"F d, Y P" }}{% else %}{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-600 mb-1">{% trans "Date Joined" %}</div>
|
|
<div class="text-base font-bold text-gray-900">{{ user.date_joined|date:"F d, Y" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Change Modal -->
|
|
<div id="passwordModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
|
|
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
|
<h3 class="text-xl font-bold">{% trans "Change Password" %}</h3>
|
|
<button onclick="document.getElementById('passwordModal').classList.add('hidden')"
|
|
class="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<form action="{% url 'portal_password_reset' user.pk %}" method="post" class="space-y-4">
|
|
{% csrf_token %}
|
|
{{password_reset_form|crispy}}
|
|
<button type="submit"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
{% trans "Change Password" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Upload Modal -->
|
|
<div id="imageModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
|
|
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
|
<h3 class="text-xl font-bold">{% trans "Upload Profile Image" %}</h3>
|
|
<button onclick="document.getElementById('imageModal').classList.add('hidden')"
|
|
class="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" action="{% url 'user_profile_image_update' user.pk %}" enctype="multipart/form-data" class="space-y-4">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label for="{{ profile_form.profile_image.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Profile Image" %}
|
|
</label>
|
|
|
|
{% if profile_form.instance.profile_image %}
|
|
<div class="mb-3">
|
|
<small class="text-gray-500 block mb-2">{% trans "Current Image:" %}</small>
|
|
|
|
<a href="{{ profile_form.instance.profile_image.url }}" target="_blank"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors"
|
|
style="background-color: rgba(157, 34, 53, 0.1); color: #9d2235;">
|
|
<i class="fas fa-eye"></i>
|
|
{% trans "View/Download" %} ({{ profile_form.instance.profile_image.name }})
|
|
</a>
|
|
|
|
<div class="mt-3">
|
|
<img src="{{ profile_form.instance.profile_image.url }}"
|
|
alt="Profile Image"
|
|
class="max-w-[150px] h-auto rounded-lg border border-gray-200">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ profile_form.profile_image }}
|
|
</div>
|
|
{% else %}
|
|
<div class="px-4 py-3 rounded-lg border border-gray-200">
|
|
{{ profile_form.profile_image }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for error in profile_form.profile_image.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="button"
|
|
onclick="document.getElementById('imageModal').classList.add('hidden')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 transition-all duration-200 hover:bg-gray-50">
|
|
{% trans "Close" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
{% trans "Save Changes" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |