203 lines
9.6 KiB
HTML
203 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{% load i18n %}
|
|
{% load static %}
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% translate "Déconnexion" %}</title>
|
|
<!-- Bootstrap 5.3.3 (local) -->
|
|
<link href="{% static 'common/bootstrap.min.css' %}" rel="stylesheet">
|
|
<style>
|
|
body { background-color: #f8f9fa; }
|
|
.logout-container {
|
|
max-width: 400px; margin: 50px auto; padding: 30px; background: white;
|
|
border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1);
|
|
}
|
|
h1 { color: rgba(47,62,139,1); border-bottom: 1px solid rgba(47,62,139,1); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="logout-container text-center">
|
|
<h1 class="mb-4 pb-4">StreetUp</h1>
|
|
|
|
<p class="mb-4">{% translate "Vous êtes connecté en tant que :" %}</p>
|
|
<h5 class="mb-4 text-primary">{{ user.get_username }}</h5>
|
|
|
|
<div class="mt-4 mb-4">
|
|
<button class="btn btn-outline-primary w-100" type="button"
|
|
data-bs-toggle="modal" data-bs-target="#languageModal">
|
|
{% translate "Changer de langue" %}
|
|
</button>
|
|
|
|
<!-- Modale pour changer la langue -->
|
|
<div class="modal fade" id="languageModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% translate "Choisir la langue" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="{% translate 'Fermer' %}">
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="language-form" method="post" action="{% url 'set_language' %}">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="next" value="{{ request.get_full_path }}">
|
|
<div class="d-grid gap-3">
|
|
<button type="submit" name="language" value="fr"
|
|
class="btn btn-lg {% if LANGUAGE_CODE == 'fr' %}btn-primary{% else %}btn-outline-primary{% endif %}">
|
|
🇫🇷 Français
|
|
</button>
|
|
<button type="submit" name="language" value="nl"
|
|
class="btn btn-lg {% if LANGUAGE_CODE == 'nl' %}btn-primary{% else %}btn-outline-primary{% endif %}">
|
|
🇳🇱 Nederlands
|
|
</button>
|
|
<button type="submit" name="language" value="en"
|
|
class="btn btn-lg {% if LANGUAGE_CODE == 'en' %}btn-primary{% else %}btn-outline-primary{% endif %}">
|
|
🇬🇧 English
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 mb-4">
|
|
<button class="btn btn-outline-primary w-100" type="button"
|
|
data-bs-toggle="modal" data-bs-target="#passwordModal">
|
|
{% translate "Modifier mon mot de passe" %}
|
|
</button>
|
|
|
|
<!-- Modale pour modifier le mot de passe -->
|
|
<div class="modal fade" id="passwordModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
<input type="hidden" name="password_change" value="1">
|
|
<input type="hidden" name="origin_next" value="{{ origin_next|default:'' }}">
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% translate "Modifier mon mot de passe" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="{% translate 'Fermer' %}">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} mb-3">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
{% for err in form.non_field_errors %}{{ err }}<br>{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.old_password.id_for_label }}" class="form-label">
|
|
{{ form.old_password.label }}
|
|
</label>
|
|
<input type="password" name="{{ form.old_password.name }}"
|
|
id="{{ form.old_password.id_for_label }}"
|
|
class="form-control{% if form.old_password.errors %} is-invalid{% endif %}"
|
|
required>
|
|
{% if form.old_password.errors %}
|
|
<div class="invalid-feedback">
|
|
{% for err in form.old_password.errors %}{{ err }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.new_password1.id_for_label }}" class="form-label">
|
|
{{ form.new_password1.label }}
|
|
</label>
|
|
<input type="password" name="{{ form.new_password1.name }}"
|
|
id="{{ form.new_password1.id_for_label }}"
|
|
class="form-control{% if form.new_password1.errors %} is-invalid{% endif %}"
|
|
required>
|
|
{% if form.new_password1.errors %}
|
|
<div class="invalid-feedback">
|
|
{% for err in form.new_password1.errors %}{{ err }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.new_password1.help_text %}
|
|
<div class="form-text">{{ form.new_password1.help_text|safe }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.new_password2.id_for_label }}" class="form-label">
|
|
{{ form.new_password2.label }}
|
|
</label>
|
|
<input type="password" name="{{ form.new_password2.name }}"
|
|
id="{{ form.new_password2.id_for_label }}"
|
|
class="form-control{% if form.new_password2.errors %} is-invalid{% endif %}"
|
|
required>
|
|
{% if form.new_password2.errors %}
|
|
<div class="invalid-feedback">
|
|
{% for err in form.new_password2.errors %}{{ err }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
|
|
{% translate "Annuler" %}
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
{% translate "Enregistrer" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" action="{% url 'logout' %}">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="next" value="{{ origin_next|default:'' }}">
|
|
<button type="submit" class="btn btn-danger w-100">
|
|
{% translate "Se déconnecter" %}
|
|
</button>
|
|
</form>
|
|
|
|
{% if origin_next %}
|
|
<div class="mt-4">
|
|
<a href="{{ origin_next }}" class="btn btn-secondary">
|
|
<i class="bi bi-arrow-left"></i> {% translate "Retour" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap 5.3.3 (local) -->
|
|
<script src="{% static 'common/bootstrap.bundle.min.js' %}"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const mustOpen = {{ open_password_modal|yesno:"true,false" }};
|
|
if (mustOpen) {
|
|
const modalEl = document.getElementById('passwordModal');
|
|
const modal = new bootstrap.Modal(modalEl);
|
|
modal.show();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|