193 lines
11 KiB
HTML
193 lines
11 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "My Profile" %} - {{ site_settings.business_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-md-6">
|
|
<h1 class="h3 mb-0 text-gray-800">{% trans "My Profile" %}</h1>
|
|
<p class="text-muted">{% trans "Manage your personal information and account security." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if messages %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<!-- Profile Card -->
|
|
<div class="card shadow-sm border-0 rounded-4 glassmorphism mb-4">
|
|
<div class="card-body text-center py-5">
|
|
<div class="position-relative d-inline-block mb-4">
|
|
{% if user.profile.image %}
|
|
<img src="{{ user.profile.image.url }}" alt="{{ user.username }}" class="rounded-circle img-thumbnail shadow-sm" style="width: 150px; height: 150px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center mx-auto shadow-sm" style="width: 150px; height: 150px;">
|
|
<i class="bi bi-person-fill" style="font-size: 5rem;"></i>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<h4 class="fw-bold mb-1">{{ user.get_full_name|default:user.username }}</h4>
|
|
<p class="text-muted mb-3">{{ user.email|default:"No email provided" }}</p>
|
|
<div class="d-flex justify-content-center gap-2">
|
|
{% for group in user.groups.all %}
|
|
<span class="badge bg-primary-soft text-primary px-3 rounded-pill">{{ group.name }}</span>
|
|
{% empty %}
|
|
<span class="badge bg-secondary-soft text-secondary px-3 rounded-pill">{% trans "User" %}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-transparent border-0 pb-4 px-4">
|
|
<div class="d-flex justify-content-between small text-muted mb-2">
|
|
<span>{% trans "Joined" %}</span>
|
|
<span class="fw-bold text-dark">{{ user.date_joined|date:"M Y" }}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between small text-muted">
|
|
<span>{% trans "Last Login" %}</span>
|
|
<span class="fw-bold text-dark">{{ user.last_login|date:"d M, H:i"|default:"Never" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Tip -->
|
|
<div class="card shadow-sm border-0 rounded-4 glassmorphism bg-light">
|
|
<div class="card-body py-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="bg-warning-subtle text-warning p-2 rounded-3 me-3">
|
|
<i class="bi bi-shield-lock fs-4"></i>
|
|
</div>
|
|
<h6 class="fw-bold mb-0">{% trans "Security Tip" %}</h6>
|
|
</div>
|
|
<p class="small text-muted mb-0">
|
|
{% trans "Always use a strong, unique password for your account. Avoid using the same password across multiple sites." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm border-0 rounded-4 glassmorphism">
|
|
<div class="card-header bg-transparent border-0 py-4 px-4">
|
|
<ul class="nav nav-tabs nav-tabs-custom border-0" id="profileTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active fw-bold px-4 border-0" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit" type="button" role="tab">
|
|
<i class="bi bi-person-lines-fill me-2"></i>{% trans "Edit Profile" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link fw-bold px-4 border-0" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab">
|
|
<i class="bi bi-lock me-2"></i>{% trans "Security" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="tab-content" id="profileTabsContent">
|
|
<!-- Edit Profile Tab -->
|
|
<div class="tab-pane fade show active" id="edit" role="tabpanel">
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="row g-4">
|
|
<div class="col-md-12">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "Profile Picture" %}</label>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<input type="file" name="image" class="form-control" accept="image/*">
|
|
</div>
|
|
<div class="form-text">{% trans "Recommended: Square image, max 2MB." %}</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "First Name" %}</label>
|
|
<input type="text" name="first_name" class="form-control rounded-3" value="{{ user.first_name }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "Last Name" %}</label>
|
|
<input type="text" name="last_name" class="form-control rounded-3" value="{{ user.last_name }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "Email Address" %}</label>
|
|
<input type="email" name="email" class="form-control rounded-3" value="{{ user.email }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "Phone Number" %}</label>
|
|
<input type="text" name="phone" class="form-control rounded-3" value="{{ user.profile.phone }}">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "Bio" %}</label>
|
|
<textarea name="bio" class="form-control rounded-3" rows="3" placeholder="{% trans "A little bit about yourself..." %}">{{ user.profile.bio }}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 pt-3 border-top d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary px-5 py-2 rounded-3 fw-bold">
|
|
<i class="bi bi-save me-2"></i> {% trans "Update Profile" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Security Tab -->
|
|
<div class="tab-pane fade" id="security" role="tabpanel">
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="row g-4">
|
|
<div class="col-md-12">
|
|
<div class="alert alert-info border-0 rounded-4">
|
|
<i class="bi bi-info-circle-fill me-2"></i>
|
|
{% trans "Leave password fields blank if you don't want to change your password." %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "New Password" %}</label>
|
|
<input type="password" name="password" class="form-control rounded-3" minlength="8">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">{% trans "Confirm New Password" %}</label>
|
|
<input type="password" name="confirm_password" class="form-control rounded-3" minlength="8">
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 pt-3 border-top d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary px-5 py-2 rounded-3 fw-bold">
|
|
<i class="bi bi-key me-2"></i> {% trans "Change Password" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<style>
|
|
.nav-tabs-custom .nav-link {
|
|
color: #6c757d;
|
|
background: transparent;
|
|
border-bottom: 3px solid transparent !important;
|
|
margin-bottom: -1px;
|
|
}
|
|
.nav-tabs-custom .nav-link.active {
|
|
color: var(--bs-primary);
|
|
border-bottom: 3px solid var(--bs-primary) !important;
|
|
background: transparent;
|
|
}
|
|
.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); }
|
|
.bg-secondary-soft { background-color: rgba(108, 117, 125, 0.1); }
|
|
</style>
|
|
{% endblock %}
|