include visibility settings in the user preferences page

core/templates/core/base/notifications.jinja

@@ -1,14 +1,11 @@
 <div id="quick-notifications"
      x-data="{
              messages: [
-             {% if messages %}
-               {% for message in messages %}
-                 {
-                 tag: '{{ message.tags }}',
-                 text: '{{ message }}',
-                 },
-               {% endfor %}
-             {% endif %}
+             {%- for message in messages -%}
+               {%- if not message.extra_tags -%}
+                 { tag: '{{ message.tags }}', text: '{{ message }}' },
+               {%- endif -%}
+             {%- endfor -%}
              ]
              }"
      @quick-notification-add="(e) => messages.push(e?.detail)"

core/templates/core/fragment/user_visibility.jinja

@@ -0,0 +1,33 @@
+<form
+  hx-post="{{ url("core:user_visibility_fragment", user_id=form.instance.id) }}"
+  hx-disabled-elt="find input[type='submit']"
+  hx-swap="outerHTML" x-data="{ isViewable: {{ form.is_viewable.value()|tojson }} }"
+>
+  {% for message in messages %}
+    {% if message.extra_tags=="visibility" %}
+      <div class="alert alert-success">
+        {{ message }}
+      </div>
+    {% endif %}
+  {% endfor %}
+  {% csrf_token %}
+  {{ form.non_field_errors() }}
+  <fieldset class="form-group">
+    {{ form.is_viewable|add_attr("x-model=isViewable") }}
+    {{ form.is_viewable.label_tag() }}
+    <span class="helptext">{{ form.is_viewable.help_text }}</span>
+    {{ form.is_viewable.errors }}
+  </fieldset>
+  <fieldset class="form-group" x-show="!isViewable">
+    {{ form.whitelisted_users.as_field_group() }}
+  </fieldset>
+  <fieldset class="form-group" x-show="isViewable">
+    {{ form.show_my_stats }}
+    {{ form.show_my_stats.label_tag() }}
+    <span class="helptext">
+      {{ form.show_my_stats.help_text }}
+    </span>
+    {{ form.show_my_stats.errors }}
+  </fieldset>
+  <input type="submit" class="btn btn-blue" value="{% trans %}Save{% endtrans %}">
+</form>

core/templates/core/user_edit.jinja

@@ -147,18 +147,7 @@
       {%- endfor -%}
     </div>
 
-    {# Checkboxes #}
-    <div class="profile-visible">
-      <div class="row">
-        {{ form.is_viewable }}
-        {{ form.is_viewable.label_tag() }}
-      </div>
-      <span class="helptext">
-        {{ form.is_viewable.help_text }}
-      </span>
-    </div>
     <div class="final-actions">
-
       {%- if form.instance == user -%}
         <p>
           <a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
@@ -170,7 +159,6 @@
           </a>
         </p>
       {%- endif -%}
-
       <p>
         <input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
       </p>

core/templates/core/user_preferences.jinja

@@ -1,7 +1,13 @@
 {% extends "core/base.jinja" %}
 
+{%- block additional_js -%}
+  <script type="module" src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
+{%- endblock -%}
+
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('user/user_preferences.scss') }}">
+  <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
+  <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
 {%- endblock -%}
 
 {% block title %}
@@ -11,30 +17,22 @@
 {% block content %}
   <div class="main">
     <h2>{% trans %}Preferences{% endtrans %}</h2>
-    <h3>{% trans %}General{% endtrans %}</h3>
-    <form class="form form-general" action="" method="post" enctype="multipart/form-data">
+    <br />
+    <h3>{% trans %}Notifications{% endtrans %}</h3>
+    <form action="" method="post" enctype="multipart/form-data">
       {% csrf_token %}
-      {{ form.as_p() }}
-      <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
+      <div class="form form-general">
+        {{ form.as_p() }}
+      </div>
+      <input class="btn btn-blue" type="submit" value="{% trans %}Save{% endtrans %}" />
     </form>
 
-    <h3>{% trans %}Trombi{% endtrans %}</h3>
-
-    {% if trombi_form %}
-      <form class="form form-trombi" action="{{ url('trombi:user_tools') }}" method="post" enctype="multipart/form-data">
-        {% csrf_token %}
-        {{ trombi_form.as_p() }}
-        <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
-      </form>
-
-    {% else %}
-      <p>{% trans trombi=profile.trombi_user.trombi %}You already choose to be in that Trombi: {{ trombi }}.{% endtrans %}
-        <br />
-        <a href="{{ url('trombi:user_tools') }}">{% trans %}Go to my Trombi tools{% endtrans %}</a>
-      </p>
-    {% endif %}
+    <br />
+    <h3>{% trans %}Visibility{% endtrans %}</h3>
 
+    {{ user_visibility_fragment }}
 
+    <br />
     {% if student_card_fragment %}
       <h3>{% trans %}Student card{% endtrans %}</h3>
       {{ student_card_fragment }}
@@ -43,5 +41,21 @@
           add a student card yourself, you'll need a NFC reader. We store the UID of the card which is 14 characters long.{% endtrans %}
       </p>
     {% endif %}
+
+    <br />
+    <h3>{% trans %}Trombi{% endtrans %}</h3>
+
+    {% if trombi_form %}
+      <form action="{{ url('trombi:user_tools') }}" method="post" enctype="multipart/form-data">
+        {% csrf_token %}
+        {{ trombi_form.as_p() }}
+        <input class="btn btn-blue" type="submit" value="{% trans %}Save{% endtrans %}" />
+      </form>
+    {% else %}
+      <p>{% trans trombi=profile.trombi_user.trombi %}You already choose to be in that Trombi: {{ trombi }}.{% endtrans %}
+        <br />
+        <a href="{{ url('trombi:user_tools') }}">{% trans %}Go to my Trombi tools{% endtrans %}</a>
+      </p>
+    {% endif %}
   </div>
 {% endblock %}