144 lines
7.9 KiB
HTML
144 lines
7.9 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load account %}
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block title %}{% translate "Email Addresses" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container my-5">
|
|
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h3 class="fw-bold">{% translate "Account Settings" %}</h3>
|
|
<p class="text-muted">{% translate "Manage your personal details and security." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
{# ------------------- LEFT COLUMN: ACCOUNT MENU (New Card Style) ------------------- #}
|
|
<div class="col-md-4 col-lg-3 mb-4">
|
|
<div class="card shadow-sm border-0 rounded-4">
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush rounded-4">
|
|
{# Assuming a main 'Profile' or 'Personal Information' page exists #}
|
|
<a href="{% url 'user_detail' user.pk %}" class="list-group-item list-group-item-action border-0 rounded-top-4 py-3">
|
|
<i class="fas fa-user-circle me-2"></i> {% translate "Personal Information" %}
|
|
</a>
|
|
|
|
{# Highlight the current page (Email) as active #}
|
|
<a href="{% url 'account_email' %}" class="list-group-item list-group-item-action active border-0 py-3" style="background-color: #e6f3f3; color: #008080; font-weight: 500;" aria-current="true">
|
|
<i class="fas fa-envelope me-2"></i> {% translate "Email Addresses" %}
|
|
</a>
|
|
<a href="{% url 'account_change_password' %}" class="list-group-item list-group-item-action border-0 py-3">
|
|
<i class="fas fa-lock me-2"></i> {% translate "Change Password" %}
|
|
</a>
|
|
|
|
<a href="{% url 'account_logout' %}" class="list-group-item list-group-item-action border-0 rounded-bottom-4 text-danger py-3">
|
|
<i class="fas fa-sign-out-alt me-2"></i> {% translate "Sign Out" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ------------------- RIGHT COLUMN: EMAIL MANAGEMENT ------------------- #}
|
|
<div class="col-md-8 col-lg-9">
|
|
<div class="card shadow-sm border-0 rounded-4">
|
|
<div class="card-body p-4">
|
|
|
|
<h5 class="fw-bold mb-3">{% translate "Email Addresses" %}</h5>
|
|
<p class="text-muted border-bottom pb-3">{% translate "These email addresses are linked to your account. You can set the primary address, resend verification, or remove an address." %}</p>
|
|
|
|
{% if emailaddresses %}
|
|
{% for emailaddress in emailaddresses %}
|
|
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center py-3 {% if not forloop.last %}border-bottom{% endif %}">
|
|
|
|
<p class="mb-2 mb-sm-0 me-3">
|
|
<span class="fw-bold text-dark">{{ emailaddress.email }}</span>
|
|
|
|
{# Status Badges: Using rounded-pill and appropriate colors #}
|
|
{% if emailaddress.primary %}
|
|
<span class="badge rounded-pill bg-info text-dark ms-2">{% translate "Primary" %}</span>
|
|
{% endif %}
|
|
{% if emailaddress.verified %}
|
|
<span class="badge rounded-pill bg-success ms-2">{% translate "Verified" %}</span>
|
|
{% else %}
|
|
<span class="badge rounded-pill bg-warning text-dark ms-2">{% translate "Unverified" %}</span>
|
|
{% endif %}
|
|
</p>
|
|
|
|
<div class="d-flex flex-wrap gap-2">
|
|
|
|
{# 1. MAKE PRIMARY ACTION #}
|
|
{% if not emailaddress.primary %}
|
|
<form method="post" action="{% url 'account_email' %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="email" value="{{ emailaddress.email }}" />
|
|
<input type="hidden" name="action" value="set_primary" />
|
|
<button type="submit" class="btn btn-sm btn-outline-primary">{% translate "Make Primary" %}</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
{# 2. RESEND VERIFICATION ACTION #}
|
|
{% if not emailaddress.verified %}
|
|
<form method="post" action="{% url 'account_email' %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="email" value="{{ emailaddress.email }}" />
|
|
<input type="hidden" name="action" value="send" />
|
|
<button type="submit" class="btn btn-sm btn-outline-warning">{% translate "Re-send Verification" %}</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
{# 3. REMOVE ACTION #}
|
|
{% if not emailaddress.primary %}
|
|
<form method="post" action="{% url 'account_email' %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="email" value="{{ emailaddress.email }}" />
|
|
<input type="hidden" name="action" value="remove" />
|
|
<button type="submit" class="btn btn-sm btn-outline-danger">{% translate "Remove" %}</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="alert alert-info mt-3">{% translate "No email addresses found." %}</p>
|
|
{% endif %}
|
|
|
|
<hr class="my-4">
|
|
|
|
{# ------------------- ADD EMAIL FORM ------------------- #}
|
|
<h5 class="fw-bold mb-3">{% translate "Add Email Address" %}</h5>
|
|
<form method="post" action="{% url 'account_email' %}">
|
|
{% csrf_token %}
|
|
|
|
{# 1. Explicitly render non-field errors first #}
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger" role="alert">
|
|
{% for error in form.non_field_errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# 2. Render the fields using crispy #}
|
|
{{ form|crispy }}
|
|
|
|
{# 3. If there are any global errors (not common here, but safe to include) #}
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} mt-3">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{# Teal/Dark Green button consistent with "Save Changes" #}
|
|
<button class="btn btn-success mt-3" type="submit" style="background-color: #008080; border-color: #008080;">{% translate "Add Email" %}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %} |