Reorder templates

apps/member/templates/member/add_members.html

@@ -0,0 +1,72 @@
+{% extends "member/noteowner_detail.html" %}
+{% load crispy_forms_tags %}
+{% load static %}
+{% load i18n %}
+{% load pretty_money %}
+
+{% block profile_info %}
+{% include "member/club_info.html" %}
+{% endblock %}
+
+{% block profile_content %}
+    {% if additional_fee_renewal %}
+        <div class="alert alert-warning">
+            {% if renewal %}
+                {% blocktrans trimmed with clubs=clubs_renewal|join:", " pretty_fee=additional_fee_renewal|pretty_money %}
+                    The user is not a member of the club·s {{ clubs }}. An additional fee of {{ pretty_fee }}
+                    will be charged to renew automatically the membership in this/these club·s.
+                {% endblocktrans %}
+            {% else %}
+                {% blocktrans trimmed with clubs=clubs_renewal|join:", " pretty_fee=additional_fee_renewal|pretty_money %}
+                    This club has parents {{ clubs }}. An additional fee of {{ pretty_fee }}
+                    will be charged to adhere automatically to this/these club·s.
+                {% endblocktrans %}
+            {% endif %}
+        </div>
+    {% endif %}
+
+    <form method="post" action="">
+        {% csrf_token %}
+        {{ form|crispy }}
+        <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+    </form>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        function autocompleted(user) {
+            $("#id_last_name").val(user.last_name);
+            $("#id_first_name").val(user.first_name);
+            $.getJSON("/api/members/profile/" + user.id + "/", function(profile) {
+                let fee = profile.paid ? {{ club.membership_fee_paid }} : {{ club.membership_fee_unpaid }};
+                $("#id_credit_amount").val((fee / 100).toFixed(2));
+            });
+        }
+
+        soge_field = $("#id_soge");
+
+        function fillFields() {
+            let checked = soge_field.is(':checked');
+            if (!checked) {
+                $("input").attr('disabled', false);
+                $("#id_user").attr('disabled', true);
+                $("select").attr('disabled', false);
+                return;
+            }
+
+            let credit_type = $("#id_credit_type");
+            credit_type.attr('disabled', true);
+            credit_type.val(4);
+
+            let credit_amount = $("#id_credit_amount");
+            credit_amount.attr('disabled', true);
+            credit_amount.val('{{ total_fee }}');
+
+            let bank = $("#id_bank");
+            bank.attr('disabled', true);
+            bank.val('Société générale');
+        }
+
+        soge_field.change(fillFields);
+    </script>
+{% endblock %}

apps/member/templates/member/alias_update.html

@@ -0,0 +1,12 @@
+{% load django_tables2 crispy_forms_tags i18n %}
+<div class="d-flex justify-content-center">
+    <input id="alias_input" type="text" value=""/>
+    <button id="alias_submit" class="btn btn-primary mx-2" onclick="create_alias( {{ object.note.pk }} )" type="submit">
+        {% trans "Add alias" %}
+    </button>
+</div>
+<div class="card bg-light shadow">
+    <div class="card-body">
+        {% render_table aliases %}
+    </div>
+</div>

apps/member/templates/member/autocomplete_model.html

@@ -0,0 +1,14 @@
+{% load i18n %}
+
+<input type="hidden" name="{{ widget.name }}" {% if widget.attrs.model_pk %}value="{{ widget.attrs.model_pk }}"{% endif %} id="{{ widget.attrs.id }}_pk">
+<input type="text"
+   {% if widget.value != None and widget.value != "" %}value="{{ widget.value }}"{% endif %}
+   name="{{ widget.name }}_name" autocomplete="off"
+    {% for name, value in widget.attrs.items %}
+        {% ifnotequal value False %}{{ name }}{% ifnotequal value True %}="{{ value|stringformat:'s' }}"{% endifnotequal %}{% endifnotequal %}
+    {% endfor %}>
+    {% if widget.resetable %}
+        <a id="{{ widget.attrs.id }}_reset" class="btn btn-light autocomplete-reset{% if not widget.value %} d-none{% endif %}">{% trans "Reset" %}</a>
+    {% endif %}
+<ul class="list-group list-group-flush" id="{{ widget.attrs.id }}_list">
+</ul>

apps/member/templates/member/club_alias.html

@@ -0,0 +1,10 @@
+{% extends "member/club_detail.html" %}
+{% load i18n static pretty_money django_tables2 crispy_forms_tags %}
+
+{% block profile_content %}
+{% include "member/alias_update.html" %}
+{% endblock %}
+
+{% block extrajavascript %}
+<script src="/static/js/alias.js"></script>
+{% endblock%}

apps/member/templates/member/club_detail.html

@@ -0,0 +1,18 @@
+{% extends "member/noteowner_detail.html" %}
+
+{% block profile_info %}
+{% include "member/club_info.html" %}
+{% endblock %}
+
+{% block profile_content %}
+{% include "member/club_tables.html" %}
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        function refreshHistory() {
+            $("#history_list").load("{% url 'member:club_detail' pk=object.pk %} #history_list");
+            $("#profile_infos").load("{% url 'member:club_detail' pk=object.pk %} #profile_infos");
+        }
+    </script>
+{% endblock %}

apps/member/templates/member/club_form.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+{% load static %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+{% block content %}
+<form method="post">
+{% csrf_token %}
+{{form|crispy}}
+<button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+</form>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        require_memberships_obj = $("#id_require_memberships");
+
+        if (!require_memberships_obj.is(":checked")) {
+            $("#div_id_membership_fee_paid").toggle();
+            $("#div_id_membership_fee_unpaid").toggle();
+            $("#div_id_membership_duration").toggle();
+            $("#div_id_membership_start").toggle();
+            $("#div_id_membership_end").toggle();
+        }
+
+        require_memberships_obj.change(function () {
+            $("#div_id_membership_fee_paid").toggle();
+            $("#div_id_membership_fee_unpaid").toggle();
+            $("#div_id_membership_duration").toggle();
+            $("#div_id_membership_start").toggle();
+            $("#div_id_membership_end").toggle();
+        });
+    </script>
+{% endblock %}

apps/member/templates/member/club_info.html

@@ -0,0 +1,75 @@
+{% load i18n static pretty_money perms %}
+<div class="card bg-light shadow">
+    <div class="card-header text-center">
+        <h4> Club {{ club.name }} </h4>
+    </div>
+    <div class="card-top text-center">
+        <a  href="{% url 'member:club_update_pic' club.pk  %}">
+            <img src="{{ club.note.display_image.url }}" class="img-thumbnail mt-2" >
+        </a>
+    </div>
+    <div class="card-body" id="profile_infos">
+        <dl class="row">
+            <dt class="col-xl-6">{% trans 'name'|capfirst %}</dt>
+            <dd class="col-xl-6">{{ club.name }}</dd>
+
+            {% if club.parent_club %}
+                <dt class="col-xl-6"><a href="{% url 'member:club_detail' club.parent_club.pk %}">{% trans 'Club Parent'|capfirst %}</a></dt>
+                <dd class="col-xl-6"> {{ club.parent_club.name }}</dd>
+            {% endif %}
+
+            {% if club.require_memberships %}
+                {% if club.membership_start %}
+                    <dt class="col-xl-6">{% trans 'membership start'|capfirst %}</dt>
+                    <dd class="col-xl-6">{{ club.membership_start }}</dd>
+                {% endif %}
+
+                {% if club.membership_end %}
+                    <dt class="col-xl-6">{% trans 'membership end'|capfirst %}</dt>
+                    <dd class="col-xl-6">{{ club.membership_end }}</dd>
+                {% endif %}
+
+                {% if club.membership_duration %}
+                    <dt class="col-xl-6">{% trans 'membership duration'|capfirst %}</dt>
+                    <dd class="col-xl-6">{{ club.membership_duration }} {% trans "days" %}</dd>
+                {% endif %}
+
+                {% if club.membership_fee_paid == club.membership_fee_unpaid %}
+                    <dt class="col-xl-6">{% trans 'membership fee'|capfirst %}</dt>
+                    <dd class="col-xl-6">{{ club.membership_fee_paid|pretty_money }}</dd>
+                {% else %}
+                    <dt class="col-xl-6">{% trans 'membership fee (paid students)'|capfirst %}</dt>
+                    <dd class="col-xl-6">{{ club.membership_fee_paid|pretty_money }}</dd>
+
+                    <dt class="col-xl-6">{% trans 'membership fee (unpaid students)'|capfirst %}</dt>
+                    <dd class="col-xl-6">{{ club.membership_fee_unpaid|pretty_money }}</dd>
+                {% endif %}
+            {% endif %}
+
+            {% if "note.view_note"|has_perm:club.note %}
+                <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
+                <dd class="col-xl-6">{{ club.note.balance | pretty_money }}</dd>
+            {% endif %}
+            
+            <dt class="col-xl-6"><a href="{% url 'member:club_alias' club.pk %}">{% trans 'aliases'|capfirst %}</a></dt>
+            <dd class="col-xl-6 text-truncate">{{ club.note.alias_set.all|join:", " }}</dd>
+
+            <dt class="col-xl-4">{% trans 'email'|capfirst %}</dt>
+            <dd class="col-xl-8"><a href="mailto:{{ club.email }}">{{ club.email }}</a></dd>
+        </dl>
+    </div>
+    {% if not club.weiclub %}
+        <div class="card-footer text-center">
+            {% if can_add_members %}
+                <a class="btn btn-primary btn-sm my-1" href="{% url 'member:club_add_member' club_pk=club.pk %}" data-turbolinks="false"> {% trans "Add member" %}</a>
+            {% endif %}
+            {% if ".change_"|has_perm:club %}
+                <a class="btn btn-primary btn-sm my-1" href="{% url 'member:club_update' pk=club.pk %}" data-turbolinks="false"> {% trans "Edit" %}</a>
+            {% endif %}
+            {% url 'member:club_detail' club.pk as club_detail_url %}
+            {%if request.path_info != club_detail_url %}
+                <a class="btn btn-primary btn-sm my-1" href="{{ club_detail_url }}">{% trans 'View Profile' %}</a>
+            {% endif %}
+        </div>
+    {% endif %}
+</div>

apps/member/templates/member/club_list.html

@@ -0,0 +1,56 @@
+{% extends "base.html" %}
+{% load render_table from django_tables2 %}
+{% load i18n %}
+{% block content %}
+<div class="row justify-content-center mb-4">
+    <div class="col-md-10 text-center">
+        <input class="form-control mx-auto w-25" type="text" id="search_field"/>
+        <hr>
+        <a class="btn btn-primary text-center my-4" href="{% url 'member:club_create' %}" data-turbolinks="false">{% trans "Create club" %}</a>
+    </div>
+</div>
+<div class="row justify-content-center">   
+    <div class="col-md-10">
+        <div class="card card-border shadow">
+            <div class="card-header text-center">
+                <h5> {% trans "Club listing" %}</h5>
+            </div>
+            <div class="card-body px-0 py-0" id="club_table">
+                {% render_table table %}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+{% block extrajavascript %}
+<script type="text/javascript">
+    $(document).ready(function() {
+        let old_pattern = null;
+        let searchbar_obj = $("#search_field");
+        var timer_on = false;
+        var timer;
+
+        function reloadTable() {
+            let pattern = searchbar_obj.val();
+            $("#club_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #club_table", init);
+        }
+
+        searchbar_obj.keyup(function() {
+            if (timer_on)
+                clearTimeout(timer);
+            timer_on = true;
+            setTimeout(reloadTable, 0);
+        });
+
+        function init() {
+            $(".table-row").click(function() {
+                window.document.location = $(this).data("href");
+                timer_on = false;
+            });
+        }
+
+        init();
+    });
+</script>
+{% endblock %}

apps/member/templates/member/club_members.html

@@ -0,0 +1,69 @@
+{% extends "member/noteowner_detail.html" %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+
+{% block profile_info %}
+    {% include "member/club_info.html" %}
+{% endblock %}
+
+{% block profile_content %}
+    <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note ...">
+    <div class="form-group">
+        <div class="form-check">
+            <label class="form-check-label" for="only_active">
+                <input type="checkbox" class="checkboxinput form-check-input" id="only_active"
+                       {% if only_active %}checked{% endif %}>
+                {% trans "Display only active memberships" %}
+            </label>
+        </div>
+    </div>
+    <div id="div_id_roles" class="form-group">
+        <label for="id_roles" class="col-form-label">{% trans "Filter roles:" %}</label>
+        <div class="">
+            <select name="roles" class="selectmultiple form-control" id="roles" multiple="">
+                {% for role in applicable_roles %}
+                    <option value="{{ role.id }}" selected>{{ role.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+    </div>
+    <hr>
+
+    <div id="memberships_table">
+        {% if table.data %}
+            {% render_table table %}
+        {% else %}
+            <div class="alert alert-warning">
+                {% trans "There is no membership found with this pattern." %}
+            </div>
+        {% endif %}
+    </div>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script type="text/javascript">
+        $(document).ready(function () {
+            let searchbar_obj = $("#searchbar");
+            let only_active_obj = $("#only_active");
+            let roles_obj = $("#roles");
+
+            function reloadTable() {
+                let pattern = searchbar_obj.val();
+
+                let roles = [];
+                $("#roles option:selected").each(function() {
+                    roles.push($(this).val());
+                });
+                let roles_str = roles.join(',');
+
+                $("#memberships_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20")
+                    + "&only_active=" + (only_active_obj.is(':checked') ? '1' : '0')
+                    + "&roles=" + roles_str + " #memberships_table");
+            }
+
+            searchbar_obj.keyup(reloadTable);
+            only_active_obj.change(reloadTable);
+            roles_obj.change(reloadTable);
+        });
+    </script>
+{% endblock %}

apps/member/templates/member/club_picture_update.html

@@ -0,0 +1,6 @@
+{% extends "member/club_detail.html" %}
+{% load i18n static pretty_money django_tables2 crispy_forms_tags %}
+
+{% block profile_content%}
+{% include "member/picture_update.html" %}
+{% endblock%}

apps/member/templates/member/club_tables.html

@@ -0,0 +1,42 @@
+{% load render_table from django_tables2 %}
+{% load i18n %}
+{% load perms %}
+
+{% if managers.data %}
+    <div class="card">
+        <div class="card-header position-relative" id="clubListHeading">
+            <a class="font-weight-bold">
+                <i class="fa fa-users"></i> {% trans "Club managers" %}
+            </a>
+        </div>
+        {% render_table managers %}
+    </div>
+
+    <hr>
+{% endif %}
+
+{% if member_list.data %}
+    <div class="card">
+        <div class="card-header position-relative" id="clubListHeading">
+            <a class="stretched-link font-weight-bold" href="{% url 'member:club_members' pk=club.pk %}">
+                <i class="fa fa-users"></i> {% trans "Club members" %}
+            </a>
+        </div>
+        {% render_table member_list %}
+    </div>
+
+    <hr>
+{% endif %}
+
+{% if history_list.data %}
+    <div class="card">
+        <div class="card-header position-relative" id="historyListHeading">
+            <a class="stretched-link font-weight-bold" {% if "note.view_note"|has_perm:club.note %} href="{% url 'note:transactions' pk=club.note.pk %}" {% endif %}>
+                <i class="fa fa-euro"></i> {% trans "Transaction history" %}
+            </a>
+        </div>
+        <div id="history_list">
+            {% render_table history_list %}
+        </div>
+    </div>
+{% endif %}

apps/member/templates/member/manage_auth_tokens.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+{% load i18n static pretty_money django_tables2 %}
+
+{% block content %}
+    <div class="alert alert-info">
+    <h4>À quoi sert un jeton d'authentification ?</h4>
+
+    Un jeton vous permet de vous connecter à <a href="/api/">l'API de la Note Kfet</a>.<br />
+    Il suffit pour cela d'ajouter en en-tête de vos requêtes <code>Authorization: Token &lt;TOKEN&gt;</code>
+    pour pouvoir vous identifier.<br /><br />
+
+    Une documentation de l'API arrivera ultérieurement.
+    </div>
+
+    <div class="alert alert-info">
+        <strong>{%trans  'Token' %} :</strong>
+        {% if 'show' in request.GET %}
+            {{ token.key }} (<a href="?">cacher</a>)
+        {% else %}
+            <em>caché</em> (<a href="?show">montrer</a>)
+        {% endif %}
+        <br />
+        <strong>{%trans  'Created' %} :</strong> {{ token.created }}
+    </div>
+
+    <div class="alert alert-warning">
+        <strong>Attention :</strong> regénérer le jeton va révoquer tout accès autorisé à l'API via ce jeton !
+    </div>
+
+    <a href="?regenerate">
+        <button class="btn btn-primary">{% trans 'Regenerate token' %}</button>
+    </a>
+{% endblock %}

apps/member/templates/member/noteowner_detail.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% load static %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% load pretty_money %}
+
+{% block content %}
+<div class="row mt-4">
+    <div class="col-xl-4">
+        {% block profile_info %}
+        {% endblock %}
+    </div>
+    <div class="col-xl-8">
+        {% block profile_content %}
+        {% endblock %}
+    </div>
+</div>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        {% if object %}
+            function refreshHistory() {
+                $("#history_list").load("{% url 'member:user_detail' pk=object.pk %} #history_list");
+                $("#profile_infos").load("{% url 'member:user_detail' pk=object.pk %} #profile_infos");
+            }
+        {% endif %}
+    </script>
+{% endblock %}

apps/member/templates/member/picture_update.html

@@ -0,0 +1,95 @@
+{% load i18n crispy_forms_tags %}
+{% block profile_content %}
+<div class="text-center">
+<form method="post" enctype="multipart/form-data" id="formUpload">
+  {% csrf_token %}
+  {{ form |crispy }}
+</form>
+</div>
+<!-- MODAL TO CROP THE IMAGE -->
+<div class="modal fade" id="modalCrop">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
+        <img src="" id="modal-image" style="max-width: 100%;">
+      </div>
+      <div class="modal-footer">
+        <div class="btn-group pull-left" role="group">
+          <button type="button" class="btn btn-default" id="js-zoom-in">
+            <span class="glyphicon glyphicon-zoom-in"></span>
+          </button>
+          <button type="button" class="btn btn-default js-zoom-out">
+            <span class="glyphicon glyphicon-zoom-out"></span>
+          </button>
+        </div>
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
+        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block extracss %}
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css" rel="stylesheet">
+{% endblock %}
+
+{% block extrajavascript%}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.1/dist/jquery-cropper.min.js"></script>
+    <script>
+     $(function () {
+
+         /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
+         $("#id_image").change(function (e) {
+             if (this.files && this.files[0]) {
+                 var reader = new FileReader();
+                 reader.onload = function (e) {
+                     $("#modal-image").attr("src", e.target.result);
+                     $("#modalCrop").modal("show");
+                 }
+                 reader.readAsDataURL(this.files[0]);
+             }
+         });
+
+         /* SCRIPTS TO HANDLE THE CROPPER BOX */
+         var $image = $("#modal-image");
+         var cropBoxData;
+         var canvasData;
+         $("#modalCrop").on("shown.bs.modal", function () {
+             $image.cropper({
+                 viewMode: 1,
+                 aspectRatio: 1/1,
+                 minCropBoxWidth: 200,
+                 minCropBoxHeight: 200,
+                 ready: function () {
+                     $image.cropper("setCanvasData", canvasData);
+                     $image.cropper("setCropBoxData", cropBoxData);
+                 }
+             });
+         }).on("hidden.bs.modal", function () {
+             cropBoxData = $image.cropper("getCropBoxData");
+             canvasData = $image.cropper("getCanvasData");
+             $image.cropper("destroy");
+         });
+
+         $(".js-zoom-in").click(function () {
+             $image.cropper("zoom", 0.1);
+         });
+
+         $(".js-zoom-out").click(function () {
+             $image.cropper("zoom", -0.1);
+         });
+
+         /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
+         $(".js-crop-and-upload").click(function () {
+             var cropData = $image.cropper("getData");
+             $("#id_x").val(cropData["x"]);
+             $("#id_y").val(cropData["y"]);
+             $("#id_height").val(cropData["height"]);
+             $("#id_width").val(cropData["width"]);
+             $("#formUpload").submit();
+         });
+
+     });
+    </script>
+{% endblock %}

apps/member/templates/member/profile_alias.html

@@ -0,0 +1,10 @@
+{% extends "member/profile_detail.html" %}
+{% load i18n static pretty_money django_tables2 crispy_forms_tags %}
+
+{% block profile_content %}
+{% include "member/alias_update.html"%}
+{% endblock %}
+
+{% block extrajavascript %}
+<script src="/static/js/alias.js"></script>
+{% endblock%}

apps/member/templates/member/profile_detail.html

@@ -0,0 +1,18 @@
+{% extends "member/noteowner_detail.html" %}
+
+{% block profile_info %}
+{% include "member/profile_info.html" %}
+{% endblock %}
+
+{% block profile_content %}
+{% include "member/profile_tables.html" %}
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        function refreshHistory() {
+            $("#history_list").load("{% url 'member:user_detail' pk=user_object.pk %} #history_list");
+            $("#profile_infos").load("{% url 'member:user_detail' pk=user_object.pk %} #profile_infos");
+        }
+    </script>
+{% endblock %}

apps/member/templates/member/profile_info.html

@@ -0,0 +1,53 @@
+{% load i18n static pretty_money %}
+
+<div class="card bg-light shadow">
+    <div class="card-header text-center" >
+        <h4> {% trans "Account #" %}  {{ user_object.pk }}</h4>
+    </div>
+    <div class="card-top text-center">
+        <a  href="{% url 'member:user_update_pic' user_object.pk  %}">
+            <img src="{{ user_object.note.display_image.url }}" class="img-thumbnail mt-2" >
+        </a>
+    </div>
+    <div class="card-body" id="profile_infos">
+        <dl class="row">
+            <dt class="col-xl-6">{% trans 'name'|capfirst %}, {% trans 'first name' %}</dt>
+            <dd class="col-xl-6">{{ user_object.last_name }} {{ user_object.first_name }}</dd>
+
+            <dt class="col-xl-6">{% trans 'username'|capfirst %}</dt>
+            <dd class="col-xl-6">{{ user_object.username }}</dd>
+
+            {% if user_object.pk == user_object.pk %}
+                <dt class="col-xl-6">{% trans 'password'|capfirst %}</dt>
+                <dd class="col-xl-6">
+                    <a class="small" href="{% url 'password_change' %}">
+                        {% trans 'Change password' %}
+                    </a>
+                </dd>
+            {% endif %}
+
+            <dt class="col-xl-6">{% trans 'section'|capfirst %}</dt>
+            <dd class="col-xl-6">{{ user_object.profile.section }}</dd>
+
+            <dt class="col-xl-6">{% trans 'address'|capfirst %}</dt>
+            <dd class="col-xl-6">{{ user_object.profile.address }}</dd>
+
+            <dt class="col-xl-6">{% trans 'balance'|capfirst %}</dt>
+            <dd class="col-xl-6">{{ user_object.note.balance | pretty_money }}</dd>
+
+            <dt class="col-xl-6"> <a href="{% url 'member:user_alias' user_object.pk %}">{% trans 'aliases'|capfirst %}</a></dt>
+            <dd class="col-xl-6 text-truncate">{{ user_object.note.alias_set.all|join:", " }}</dd>
+        </dl>
+
+        {% if user_object.pk == user_object.pk %}
+        <a class="small" href="{% url 'member:auth_token' %}">{% trans 'Manage auth token' %}</a>
+        {% endif %}
+    </div>
+    <div class="card-footer text-center">
+        <a class="btn btn-primary btn-sm" href="{% url 'member:user_update_profile' user_object.pk %}">{% trans 'Update Profile' %}</a>
+        {% url 'member:user_detail' user_object.pk as user_profile_url %}
+        {%if request.path_info != user_profile_url %}
+        <a class="btn btn-primary btn-sm" href="{{ user_profile_url }}">{% trans 'View Profile' %}</a>
+        {% endif %}
+    </div>
+</div>

apps/member/templates/member/profile_picture_update.html

@@ -0,0 +1,6 @@
+{% extends "member/profile_detail.html" %}
+{% load i18n static pretty_money django_tables2 crispy_forms_tags %}
+
+{% block profile_content%}
+{% include "member/picture_update.html" %}
+{% endblock%}

apps/member/templates/member/profile_tables.html

@@ -0,0 +1,32 @@
+{% load render_table from django_tables2 %}
+{% load i18n %}
+{% load perms %}
+
+{% if not object.profile.email_confirmed and "member.change_profile_email_confirmed"|has_perm:user_object.profile %}
+    <div class="alert alert-warning">
+        {% trans "This user doesn't have confirmed his/her e-mail address." %}
+        <a href="{% url "registration:email_validation_resend" pk=user_object.pk %}">{% trans "Click here to resend a validation link." %}</a>
+    </div>
+{% endif %}
+
+<div class="card">
+    <div class="card-header position-relative" id="clubListHeading">
+        <a class="font-weight-bold">
+            <i class="fa fa-users"></i> {% trans "View my memberships" %}
+        </a>
+    </div>
+    {% render_table club_list %}
+</div>
+
+<hr>
+
+<div class="card">
+    <div class="card-header position-relative" id="historyListHeading">
+            <a class="stretched-link font-weight-bold" {% if "note.view_note"|has_perm:user_object.note %} href="{% url 'note:transactions' pk=user_object.note.pk %}" {% endif %}>
+            <i class="fa fa-euro"></i> {% trans "Transaction history" %}
+        </a>
+    </div>
+    <div id="history_list">
+        {% render_table history_list %}
+    </div>
+</div>

apps/member/templates/member/profile_update.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% load i18n crispy_forms_tags %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+
+{% block content %}
+<form method="post">
+    {% csrf_token %}
+    {{ form|crispy }}
+    {{ profile_form|crispy }}
+    <button class="btn btn-primary" type="submit">
+        {% trans "Save Changes" %}
+    </button>
+</form>
+{% endblock %}

apps/member/templates/member/user_list.html

@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+{% load render_table from django_tables2 %}
+{% load crispy_forms_tags %}
+{% load i18n %}
+{% load perms %}
+
+{% block content %}
+    <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note/section ...">
+
+    <hr>
+
+    <div id="user_table">
+        {% if table.data %}
+            {% render_table table %}
+        {% else %}
+            <div class="alert alert-warning">
+                {% trans "There is no user with this pattern." %}
+            </div>
+        {% endif %}
+    </div>
+
+    <hr>
+
+    {% if "member.change_profile_registration_valid"|has_perm:user %}
+        <a class="btn btn-block btn-secondary" href="{% url 'registration:future_user_list' %}">
+            <i class="fas fa-user-plus"></i> {% trans "Registrations" %}
+        </a>
+    {% endif %}
+{% endblock %}
+
+{% block extrajavascript %}
+<script type="text/javascript">
+    $(document).ready(function() {
+        let old_pattern = null;
+        let searchbar_obj = $("#searchbar");
+        var timer_on = false;
+        var timer;
+
+        function reloadTable() {
+            let pattern = searchbar_obj.val();
+
+            if (pattern === old_pattern || pattern === "")
+                return;
+
+            $("#user_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #user_table", init);
+        }
+
+        searchbar_obj.keyup(function() {
+            if (timer_on)
+                clearTimeout(timer);
+            timer_on = true;
+            setTimeout(reloadTable, 0);
+        });
+
+        function init() {
+            $(".table-row").click(function() {
+                window.document.location = $(this).data("href");
+                timer_on = false;
+            });
+
+            $("tr").each(function() {
+                $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function() {
+                    $(this).html($(this).text().replace(new RegExp(searchbar_obj.val(), 'i'), "<mark>$&</mark>"));
+                });
+            });
+        }
+
+        init();
+    });
+</script>
+{% endblock %}