fix(usermanager): UI improvements

- show groups in user detail view
- show DN in user detail view
- show DN in group list view

lumi2/static/css/bootstrap.css

@@ -4740,8 +4740,8 @@ textarea.form-control-lg {
 
 .list-group {
   --bs-list-group-color: #212529;
-  --bs-list-group-bg: #fff;
+  --bs-list-group-bg: #FCF7E3;
-  --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
+  --bs-list-group-border-color: rgba(121, 159, 147, 0.5);
   --bs-list-group-border-width: 2px;
   --bs-list-group-border-radius: 0.375rem;
   --bs-list-group-item-padding-x: 1rem;
@@ -4752,7 +4752,7 @@ textarea.form-control-lg {
   --bs-list-group-action-active-color: #3A3533;
   --bs-list-group-action-active-bg: #e9ecef;
   --bs-list-group-disabled-color: #6c757d;
-  --bs-list-group-disabled-bg: #fff;
+  --bs-list-group-disabled-bg: #FCF7E3;
   --bs-list-group-active-color: #fff;
   --bs-list-group-active-bg: #72BAB0;
   --bs-list-group-active-border-color: #72BAB0;

lumi2/templates/usermanager/group_list.html

@@ -15,19 +15,23 @@
     <table class="table table-hover">
         <thead>
             <tr>
-                <th scope="col">Group Name</th>
+                <th class="text-center" scope="col">Group Name</th>
-                <th scope="col">Number of Members</th>
+                <th class="text-center" scope="col">Number of Members</th>
+                <th class="text-muted text-center" scope="col">DN</th>
             </tr>
         </thead>
         <tbody>
             {% for group in groups | sort %}
             <tr class="clickable" onclick="window.location='{{ url_for('usermanager.group_update', groupname=group.groupname) }}'" style="cursor: pointer">
-                <th scope="row">
+                <th class="text-center" scope="row">
                     <a class="text-decoration-none fw-bold fs-4" href="{{ url_for('usermanager.group_update', groupname=group.groupname) }}">{{ group.groupname }}</a>
                 </th>
-                <td class="align-middle fs-5">
+                <td class="align-middle fs-5 text-center">
                     {{ group.members|length }}
                 </td>
+                <td class="align-middle fs-5 text-muted text-center">
+                    {{ group.get_dn() }}
+                </td>
             </tr>
             {% endfor %}
         </tbody>

lumi2/templates/usermanager/user_delete.html

@@ -14,7 +14,7 @@
     <div class="col-sm text-center align-self-center m-2">
         <ul class="list-group">
             {% for groupname in deleted_groups %}
-            <li class="list-group-item">{{ groupname }}</li>
+            <li class="list-group-item"><a href="{{ url_for('usermanager.group_update', groupname=groupname) }}">{{ groupname }}</a></li>
             {% endfor %}
         </ul>
     </div>

lumi2/templates/usermanager/user_view.html

@@ -10,6 +10,7 @@
         >
     </div>
     <div class="col-sm-4 vstack gap-1 align-self-center m-2">
+        <div class="text-muted"><b>DN:</b> {{ user.get_dn() }}</div>
         <div><b>Username:</b> {{ user.username }}</div>
         <div><b>Email:</b> {{ user.email }}</div>
         <div><b>First Name:</b> {{ user.first_name }}</div>
@@ -24,5 +25,17 @@
             href="{{ url_for('usermanager.user_delete', username=user.username) }}"
             role="button"><i class="bi-person-slash"></i> Delete</a>
     </div>
+    <div class="col-sm-12 text-center align-self-center m-2">
+        {% with groups = user.get_groups() %}
+        {% if groups %}
+        <p>Member of:</p>
+        {% for group in groups %}
+        <a class="btn btn-secondary" role="button" href="{{ url_for('usermanager.group_update', groupname=group.groupname) }}">{{ group.groupname }}</a>
+        {% endfor %}
+        {% else %}
+        <p class="text-muted">This user is not a member of any group.</p>
+        {% endif %}
+        {% endwith %}
+    </div>
 </div>
 {% endblock content %}

lumi2/usermodel.py

@@ -11,6 +11,7 @@ from PIL.JpegImagePlugin import JpegImageFile
 from flask import current_app
 
 from lumi2.exceptions import InvalidStringFormatException, InvalidImageException
+import lumi2.ldap as ldap
 
 class User:
     """Class model for a user.
@@ -428,6 +429,15 @@ class User:
         return f'/static/images/users/{self.username}/thumbnail.jpg'
 
 
+    def get_groups(self):
+        """Returns the set of groups which this user is a member of."""
+
+        conn = ldap.get_connection()
+        groups = ldap.get_groups_of_user(conn, self)
+        conn.unbind()
+        return groups
+
+
     def __eq__(self, other):
         return self.username == other.username
 

scss/bootstrap.scss

@@ -39,4 +39,8 @@ $border-color: #DEDABF;
 // Forms
 $input-border-color: #A49E68;
 
+// List groups
+$list-group-bg: $body-bg;
+$list-group-border-color: rgba($info, 0.5);
+
 @import "../node_modules/bootstrap/scss/bootstrap";