514 lines
33 KiB
HTML
514 lines
33 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Settings" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Page Header -->
|
|
<div class="hh-page-header mb-8">
|
|
<h1 class="text-2xl font-bold flex items-center gap-2">
|
|
<i data-lucide="settings" class="w-7 h-7"></i>
|
|
{% trans "Settings" %}
|
|
</h1>
|
|
<p>{% trans "Manage your account preferences and configurations" %}</p>
|
|
</div>
|
|
|
|
<!-- Settings Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-slate-200 overflow-x-auto">
|
|
<div class="flex gap-1 p-2 min-w-max" role="tablist">
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2 active" data-tab="profile">
|
|
<i data-lucide="user-circle" class="w-4 h-4"></i>
|
|
{% trans "Profile" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="notifications">
|
|
<i data-lucide="bell" class="w-4 h-4"></i>
|
|
{% trans "Notifications" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="security">
|
|
<i data-lucide="shield" class="w-4 h-4"></i>
|
|
{% trans "Security" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="account">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
{% trans "Account" %}
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="p-6">
|
|
|
|
<!-- Profile Tab -->
|
|
<div class="settings-content" id="profile-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
|
|
<i data-lucide="user-circle" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Profile Settings" %}
|
|
</h5>
|
|
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="profile">
|
|
|
|
<!-- Avatar -->
|
|
<div class="text-center mb-8">
|
|
{% if user.avatar %}
|
|
<img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-gray-100 object-cover">
|
|
{% else %}
|
|
<div class="w-32 h-32 rounded-full bg-light mx-auto mb-4 border-4 border-slate-100 flex items-center justify-center">
|
|
<i data-lucide="user" class="w-16 h-16 text-slate-300"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mt-3">
|
|
<label for="avatar" class="inline-flex items-center gap-2 px-4 py-2 text-navy bg-light rounded-xl hover:bg-light transition cursor-pointer">
|
|
<i data-lucide="camera" class="w-4 h-4"></i>
|
|
{% trans "Change Avatar" %}
|
|
</label>
|
|
<input type="file" id="avatar" name="avatar" class="hidden" accept="image/*">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="first_name" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "First Name" %}
|
|
</label>
|
|
<input type="text" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="first_name" name="first_name" value="{{ user.first_name }}" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="last_name" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Last Name" %}
|
|
</label>
|
|
<input type="text" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="last_name" name="last_name" value="{{ user.last_name }}" required>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="email" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Email" %}
|
|
</label>
|
|
<input type="email" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 bg-slate-50" id="email" value="{{ user.email }}" readonly>
|
|
<p class="text-sm text-slate mt-1">{% trans "Contact administrator to change email" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Phone Number" %}
|
|
</label>
|
|
<input type="tel" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}">
|
|
<p class="text-sm text-slate mt-1">{% trans "Required for SMS notifications" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="language" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Language" %}
|
|
</label>
|
|
<select class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="language" name="language">
|
|
{% for lang_code, lang_name in languages %}
|
|
<option value="{{ lang_code }}" {% if user.language == lang_code %}selected{% endif %}>
|
|
{{ lang_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="bio" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Bio" %}
|
|
</label>
|
|
<textarea class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="bio" name="bio" rows="4">{{ user.bio|default:'' }}</textarea>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<button type="submit" class="bg-navy text-white px-6 py-3 rounded-xl font-bold hover:bg-blue transition flex items-center gap-2">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Save Profile" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-light rounded-2xl p-6">
|
|
<h6 class="font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Profile Tips" %}
|
|
</h6>
|
|
<ul class="space-y-3 text-sm text-slate">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Add a professional photo to help others recognize you" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Keep your phone number updated for SMS notifications" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Add a bio to share your role and expertise" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Choose your preferred language for the interface" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications Tab -->
|
|
<div class="settings-content hidden" id="notifications-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
|
|
<i data-lucide="bell" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Notification Preferences" %}
|
|
</h5>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="preferences">
|
|
|
|
<!-- Email Notifications -->
|
|
<div class="bg-light rounded-2xl p-6 mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<strong class="text-navy">{% trans "Email Notifications" %}</strong>
|
|
<p class="text-sm text-slate mt-1">{% trans "Receive notifications via email for complaint assignments, updates, and escalations" %}</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="notification_email_enabled" name="notification_email_enabled" class="sr-only peer" {% if user.notification_email_enabled %}checked{% endif %}>
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-navy"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMS Notifications -->
|
|
<div class="bg-light rounded-2xl p-6 mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<strong class="text-navy">{% trans "SMS Notifications" %}</strong>
|
|
<p class="text-sm text-slate mt-1">{% trans "Receive critical notifications via SMS (requires phone number)" %}</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="notification_sms_enabled" name="notification_sms_enabled" class="sr-only peer" {% if user.notification_sms_enabled %}checked{% endif %}>
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-navy"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label for="preferred_notification_channel" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Preferred Notification Channel" %}
|
|
</label>
|
|
<select class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="preferred_notification_channel" name="preferred_notification_channel">
|
|
{% for channel_code, channel_name in notification_channels %}
|
|
<option value="{{ channel_code }}" {% if user.preferred_notification_channel == channel_code %}selected{% endif %}>
|
|
{{ channel_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-sm text-slate mt-1">{% trans "Default channel for general notifications" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="explanation_notification_channel" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Explanation Request Channel" %}
|
|
</label>
|
|
<select class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="explanation_notification_channel" name="explanation_notification_channel">
|
|
{% for channel_code, channel_name in notification_channels %}
|
|
<option value="{{ channel_code }}" {% if user.explanation_notification_channel == channel_code %}selected{% endif %}>
|
|
{{ channel_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-sm text-slate mt-1">{% trans "Default channel when requesting complaint explanations" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Phone Number for SMS" %}
|
|
</label>
|
|
<input type="tel" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}" placeholder="+966 5X XXX XXXX">
|
|
<p class="text-sm text-slate mt-1">{% trans "Required to receive SMS notifications" %}</p>
|
|
</div>
|
|
|
|
<button type="submit" class="bg-navy text-white px-6 py-3 rounded-xl font-bold hover:bg-blue transition flex items-center gap-2">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Save Preferences" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-light rounded-2xl p-6">
|
|
<h6 class="font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Notification Tips" %}
|
|
</h6>
|
|
<p class="text-sm text-slate mb-4">
|
|
{% trans "Configure how you receive notifications to stay informed without being overwhelmed." %}
|
|
</p>
|
|
<ul class="space-y-3 text-sm text-slate">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="mail" class="w-4 h-4 text-blue-500 flex-shrink-0"></i>
|
|
<span>{% trans "Email is best for detailed information" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="smartphone" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "SMS is best for urgent alerts" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="bell" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
|
|
<span>{% trans "In-app notifications are always enabled" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Tab -->
|
|
<div class="settings-content hidden" id="security-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
|
|
<i data-lucide="shield" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Security Settings" %}
|
|
</h5>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="password">
|
|
|
|
<div class="bg-light rounded-2xl p-6">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label for="current_password" class="block text-sm font-bold text-slate mb-2">{% trans "Current Password" %}</label>
|
|
<input type="password" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="current_password" name="current_password" required>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="new_password" class="block text-sm font-bold text-slate mb-2">{% trans "New Password" %}</label>
|
|
<input type="password" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="new_password" name="new_password" required minlength="8">
|
|
<p class="text-sm text-slate mt-1">{% trans "Minimum 8 characters" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirm_password" class="block text-sm font-bold text-slate mb-2">{% trans "Confirm New Password" %}</label>
|
|
<input type="password" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="confirm_password" name="confirm_password" required minlength="8">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="bg-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-orange-600 transition flex items-center gap-2">
|
|
<i data-lucide="key" class="w-4 h-4"></i>
|
|
{% trans "Change Password" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="bg-light rounded-2xl p-6 mt-6">
|
|
<h6 class="font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="clock" class="w-4 h-4 text-slate"></i>
|
|
{% trans "Password History" %}
|
|
</h6>
|
|
<p class="text-sm text-slate">
|
|
<i data-lucide="clock" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "Last password change:" %} {% if user.password %}{% trans "Recently" %}{% else %}{% trans "Never" %}{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-light rounded-2xl p-6">
|
|
<h6 class="font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Security Tips" %}
|
|
</h6>
|
|
<ul class="space-y-3 text-sm text-slate">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Use strong passwords with letters, numbers, and symbols" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Don't reuse passwords from other sites" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Change your password regularly" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Never share your password with anyone" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Tab -->
|
|
<div class="settings-content hidden" id="account-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Account Information" %}
|
|
</h5>
|
|
|
|
<div class="bg-light rounded-2xl p-6">
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="user" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Full Name" %}</span>
|
|
</div>
|
|
<span class="font-bold text-navy">{{ user.get_full_name }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="mail" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Email" %}</span>
|
|
</div>
|
|
<span class="font-bold text-navy">{{ user.email }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="calendar" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Member Since" %}</span>
|
|
</div>
|
|
<span class="font-bold text-navy">{{ user.date_joined|date:"F d, Y" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="building-2" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Hospital" %}</span>
|
|
</div>
|
|
<span class="font-bold text-navy">{% if user.hospital %}{{ user.hospital.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="building" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Department" %}</span>
|
|
</div>
|
|
<span class="font-bold text-navy">{% if user.department %}{{ user.department.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="badge" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Employee ID" %}</span>
|
|
</div>
|
|
<span class="font-bold text-navy">{{ user.employee_id|default:"N/A" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="user-tie" class="w-5 h-5 text-slate"></i>
|
|
<span class="text-slate">{% trans "Role" %}</span>
|
|
</div>
|
|
<div>
|
|
{% if user.is_px_admin %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-light text-navy">{% trans "PX Admin" %}</span>
|
|
{% elif user.is_hospital_admin %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">{% trans "Hospital Admin" %}</span>
|
|
{% elif user.is_department_head %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">{% trans "Department Head" %}</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{% trans "Staff" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-light rounded-2xl p-6">
|
|
<h6 class="font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Account Info" %}
|
|
</h6>
|
|
<p class="text-sm text-slate">
|
|
{% trans "This information is managed by your organization's administrators. Contact them if you need to update your hospital, department, or employee ID." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// Tab switching
|
|
const tabs = document.querySelectorAll('.settings-tab');
|
|
const contents = document.querySelectorAll('.settings-content');
|
|
|
|
// Load saved tab
|
|
const savedTab = localStorage.getItem('activeSettingsTab') || 'profile';
|
|
|
|
function activateTab(tabName) {
|
|
tabs.forEach(tab => {
|
|
const isActive = tab.dataset.tab === tabName;
|
|
if (isActive) {
|
|
tab.classList.add('bg-light', 'text-navy');
|
|
tab.classList.remove('text-slate', 'hover:bg-light');
|
|
} else {
|
|
tab.classList.remove('bg-light', 'text-navy');
|
|
tab.classList.add('text-slate', 'hover:bg-light');
|
|
}
|
|
});
|
|
|
|
contents.forEach(content => {
|
|
if (content.id === `${tabName}-content`) {
|
|
content.classList.remove('hidden');
|
|
} else {
|
|
content.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
localStorage.setItem('activeSettingsTab', tabName);
|
|
}
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const tabName = this.dataset.tab;
|
|
activateTab(tabName);
|
|
});
|
|
});
|
|
|
|
// Initialize with saved tab
|
|
activateTab(savedTab);
|
|
|
|
// Password confirmation validation
|
|
const passwordForm = document.querySelector('form input[name="form_type"][value="password"]')?.closest('form');
|
|
if (passwordForm) {
|
|
passwordForm.addEventListener('submit', function(e) {
|
|
const newPassword = this.querySelector('#new_password').value;
|
|
const confirmPassword = this.querySelector('#confirm_password').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
e.preventDefault();
|
|
alert('{% trans "Passwords do not match!" %}');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |