integreat_cms/cms/templates/settings/user_settings.html
{% extends "_base.html" %}
{% load i18n %}
{% block content %}
{% load static %}
{% load widget_tweaks %}
<h1 class="heading">
{% translate "My Account Settings" %}
</h1>
<div class="flex flex-wrap mt-4">
<div class="flex flex-wrap w-full xl:w-1/2 xl:pr-4">
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="flag" class="mr-2"></i> {% translate "My Language Preference" %}
</h3>
</div>
<div class="px-4 pb-4">
<form action="{% url 'i18n:set_language' %}" method="post" class="w-full">
{% csrf_token %}
<input name="next" type="hidden" value="{{ redirect_to }}" />
<label for="language">
{% translate "Choose language:" %}
</label>
<div class="mb-2">
{% translate "This setting only affects this device." %}
</div>
<select name="language">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% for language_slug, language_name in LANGUAGES %}
<option value="{{ language_slug }}"
{% if language_slug == LANGUAGE_CODE %}selected{% endif %}>
{{ language_slug|language_name_local }}
</option>
{% endfor %}
</select>
<button class="btn mt-4">
{% translate "Change language" %}
</button>
</form>
</div>
</div>
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="monitor" class="mr-2"></i> {% translate "Display preferences" %}
</h3>
</div>
<div class="p-4">
<form method="post">
{% csrf_token %}
{% render_field user_preferences_form.distribute_sidebar_boxes|add_error_class:"border-red-500" %}
<label class="inline"
for="{{ user_preferences_form.distribute_sidebar_boxes.id_for_label }}">
{{ user_preferences_form.distribute_sidebar_boxes.label }}
</label>
<div class="help-text">
{{ user_preferences_form.distribute_sidebar_boxes.help_text }}
</div>
<button name="submit_form" value="preferences_form" class="btn mt-4">
{% translate "Save preferences" %}
</button>
</form>
</div>
</div>
</div>
<div class="w-full xl:w-1/2">
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="mail" class="mr-2"></i> {% translate "My E-mail-address" %}
</h3>
</div>
<div class="px-4 pb-4">
<form method="post">
{% csrf_token %}
<label for="{{ user_email_form.email.id_for_label }}">
{{ user_email_form.email.label }}
</label>
{% render_field user_email_form.email|add_error_class:"border-red-500" %}
<button name="submit_form" value="email_form" class="btn mt-4">
{% translate "Change e-mail-address" %}
</button>
</form>
</div>
</div>
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="heading font-bold text-black">
<i icon-name="lock" class="mr-2"></i> {% translate "My Password" %}
</h3>
</div>
<div class="px-4 pb-4">
<form method="post">
{% csrf_token %}
<label for="{{ user_password_form.old_password.id_for_label }}"
class="font-bold block p-2 pt-0 cursor-pointer">
{{ user_password_form.old_password.label }}
</label>
{% render_field user_password_form.old_password|add_error_class:"border-red-500" %}
<label for="{{ user_password_form.new_password.id_for_label }}">
{{ user_password_form.new_password.label }}
</label>
{% render_field user_password_form.new_password|add_error_class:"border-red-500" %}
<label for="{{ user_password_form.new_password_confirm.id_for_label }}">
{{ user_password_form.new_password_confirm.label }}
</label>
{% translate "Enter my new password again here" as new_password_confirm_placeholder %}
{% render_field user_password_form.new_password_confirm|add_error_class:"border-red-500" placeholder=new_password_confirm_placeholder %}
<ul class="p-2">
{% for item in user_password_form.new_password.help_text %}
<li class="py-1">
{{ item }}
</li>
{% endfor %}
</ul>
<button name="submit_form" value="password_form" class="btn">
{% translate "Change password" %}
</button>
</form>
</div>
</div>
</div>
<div class="mb-4 rounded border border-solid border-blue-500 shadow-xl bg-white flex flex-wrap">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="heading font-bold text-black">
<i icon-name="shield" class="mr-2"></i> {% translate "My 2-Factor-Authentication methods" %}
</h3>
</div>
<div class="p-4">
{% translate "To further protect your account, you can add additional authentication methods (2-factor authentication)." %}
{% translate "The system currently supports the setup of FIDO2 keys and TOTP authentication via authenticator apps." %}
{% translate "Once you add a method, it will always be requested when logging in and potential attackers will have a harder time gaining control over your account." %}
</div>
<div class="w-full mb-4 rounded border border-solid border-grey-500 p-4">
<h4 class="heading font-bold">
<i icon-name="key" class="mr-2"></i>{% translate "FIDO2 keys" %}
</h4>
<div class="p-2">
{% translate "You can use your FIDO2 keys to secure your account." %}
{% translate "Once you added a key to your account you won't be able to log in without using the key." %}
<br />
{% translate "To make sure that you don't loose access to your account when you loose your FIDO2 key it is recommended to add multiple keys." %}
{% translate "Make sure to keep your keys at a secure place." %}
</div>
<div class="w-full p-4 table-listing">
<table class="w-full rounded border border-solid border-gray-200 shadow bg-white mb-4">
<thead>
<tr class="border-b border-solid border-gray-200">
<th class="text-sm text-left uppercase py-3 pl-4 pr-2 min">
{% translate "Key name" %}
</th>
<th class="text-sm text-left uppercase py-3 px-2 min">
{% translate "Last usage" %}
</th>
<th class="text-sm text-left uppercase py-3 px-2 min">
{% translate "Date added" %}
</th>
<th class="text-sm text-right uppercase py-3 pl-2 pr-4 min">
{% translate "Actions" %}
</th>
</tr>
</thead>
<tbody>
{% for key in keys %}
<tr>
<td class="pl-4">
{{ key.name }}
</td>
<td class="pl-2 whitespace-nowrap">
{{ key.last_usage }}
</td>
<td class="pl-2 whitespace-nowrap">
{{ key.created_at|date:"SHORT_DATE_FORMAT" }}
</td>
<td class="p-2 text-right">
<a class="btn btn-red"
href="{% spaceless %} {% if request.region %} {% url 'delete_fido_key' region_slug=request.region.slug key_id=key.id %} {% else %} {% url 'delete_fido_key' key_id=key.id %} {% endif %} {% endspaceless %}">
<i icon-name="trash-2" class="text-white"></i>
</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="6" class="px-4 py-3">
{% translate "No FIDO2 keys have been added yet." %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>
<a class="btn"
href="{% spaceless %} {% if request.region %} {% url 'register_new_fido_key' region_slug=request.region.slug %} {% else %} {% url 'register_new_fido_key' %} {% endif %} {% endspaceless %}">
{% translate "Add a new FIDO2 key" %}
</a>
</p>
</div>
</div>
<div class="w-full mb-4 rounded border border-solid border-grey-500 p-4">
<h4 class="heading font-bold">
<i icon-name="smartphone" class="mr-2"></i>{% translate "Authenticator app" %}
</h4>
<div class="p-2">
{% translate "You can use an authenticator application to secure your account with time-based one-time passwords (TOTP)." %}
{% translate "If you connect an authenticator with your account you will be asked to enter the shown digits on your smartphone to log into your account." %}
</div>
<div class="p-4">
{% if user.totp_key %}
<i icon-name="shield-check" class="mr-2"></i> {% translate "Active" %}
<a class="btn btn-red ml-2"
href="{% spaceless %} {% if request.region %} {% url 'delete_totp' region_slug=request.region.slug %} {% else %} {% url 'delete_totp' %} {% endif %} {% endspaceless %}">
{% translate "Disconnect" %}
</a>
{% else %}
<i icon-name="shield-off" class="mr-2"></i> {% translate "Inactive" %}
<a class="btn ml-2"
href="{% spaceless %} {% if request.region %} {% url 'register_totp' region_slug=request.region.slug %} {% else %} {% url 'register_totp' %} {% endif %} {% endspaceless %}">
{% translate "Register authenticator app" %}
</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock content %}