From cbfcafbb18f6c53ef97723b0e837dd19e2fb1f37 Mon Sep 17 00:00:00 2001
From: Julian Lobbes <julian.lobbes@protonmail.com>
Date: Sat, 3 Dec 2022 21:40:05 +0100
Subject: [PATCH] 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               |  6 +++---
 lumi2/templates/usermanager/group_list.html  | 12 ++++++++----
 lumi2/templates/usermanager/user_delete.html |  2 +-
 lumi2/templates/usermanager/user_view.html   | 13 +++++++++++++
 lumi2/usermodel.py                           | 10 ++++++++++
 scss/bootstrap.scss                          |  4 ++++
 6 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/lumi2/static/css/bootstrap.css b/lumi2/static/css/bootstrap.css
index 2f7c0e2..8d1b34d 100644
--- a/lumi2/static/css/bootstrap.css
+++ b/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-border-color: rgba(0, 0, 0, 0.125);
+  --bs-list-group-bg: #FCF7E3;
+  --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;
diff --git a/lumi2/templates/usermanager/group_list.html b/lumi2/templates/usermanager/group_list.html
index baa04fc..8cb0e32 100644
--- a/lumi2/templates/usermanager/group_list.html
+++ b/lumi2/templates/usermanager/group_list.html
@@ -15,19 +15,23 @@
     <table class="table table-hover">
         <thead>
             <tr>
-                <th scope="col">Group Name</th>
-                <th scope="col">Number of Members</th>
+                <th class="text-center" scope="col">Group Name</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>
diff --git a/lumi2/templates/usermanager/user_delete.html b/lumi2/templates/usermanager/user_delete.html
index bd52327..0d0d35c 100644
--- a/lumi2/templates/usermanager/user_delete.html
+++ b/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>
diff --git a/lumi2/templates/usermanager/user_view.html b/lumi2/templates/usermanager/user_view.html
index 1e713f1..34abb9d 100644
--- a/lumi2/templates/usermanager/user_view.html
+++ b/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 %}
diff --git a/lumi2/usermodel.py b/lumi2/usermodel.py
index 626c0a2..7b3712c 100644
--- a/lumi2/usermodel.py
+++ b/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
 
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 978516a..44fe431 100644
--- a/scss/bootstrap.scss
+++ b/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";