From 3b142f08f55d71fd3df6307420f46b1c0ba2bddb Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Tue, 31 Jan 2023 14:12:41 +0300
Subject: oauth2: Display members in groups page. Rework UI.

---
 wqflask/wqflask/oauth2/groups.py            |  22 ++++--
 wqflask/wqflask/templates/oauth2/group.html | 103 ++++++++++++++++++++--------
 2 files changed, 92 insertions(+), 33 deletions(-)

diff --git a/wqflask/wqflask/oauth2/groups.py b/wqflask/wqflask/oauth2/groups.py
index eab0049c..e04f6ef8 100644
--- a/wqflask/wqflask/oauth2/groups.py
+++ b/wqflask/wqflask/oauth2/groups.py
@@ -10,8 +10,23 @@ groups = Blueprint("group", __name__)
 
 @groups.route("/", methods=["GET"])
 def user_group():
+    """Get the user's group."""
+    def __process_error__(error):
+        if error.status_code == 404:
+            return {
+                "error": "NotFoundError",
+                "error_message": ("Requested endpoint was not found on the "
+                                  "API server.")
+            }
+        return error.json()
+
     def __success__(group):
-        return render_template("oauth2/group.html", group=group)
+        return oauth2_get(f"oauth2/group-users/{group['group_id']}").either(
+            lambda error: render_template(
+                "oauth2/group.html", group=group,
+                user_error=__process_error__(error)),
+            lambda users: render_template(
+                "oauth2/group.html", group=group, users=users))
 
     return oauth2_get("oauth2/user-group").either(
         request_error, __success__)
@@ -51,8 +66,3 @@ def delete_group(group_id):
 def edit_group(group_id):
     """Edit the user's group."""
     return "WOULD EDIT GROUP."
-
-@groups.route("/<uuid:group_id>/users/list", methods=["GET", "POST"])
-@require_oauth2
-def list_group_users(group_id):
-    return "WOULD LIST GROUP USERS."
diff --git a/wqflask/wqflask/templates/oauth2/group.html b/wqflask/wqflask/templates/oauth2/group.html
index 1475b10d..8db5b0d9 100644
--- a/wqflask/wqflask/templates/oauth2/group.html
+++ b/wqflask/wqflask/templates/oauth2/group.html
@@ -4,43 +4,92 @@
 {%block content%}
 <div class="container" style="min-width: 1250px;">
   {{profile_nav("group")}}
-  <h3>User's Group</h3>
 
   {{flash_me()}}
 
   <div class="container-fluid">
     <div class="row">
-      <dl>
+      <table class="table">
+	<caption>Group Information</caption>
+	<thead>
+	  <tr>
+	    <th>Name</th>
+	    <th colspan="2" style="text-align: center;">Metadata</th>
+	    <th colspan="2" style="text-align: center;">Actions</th>
+	  </tr>
+	</thead>
 
-	<dt>Name</dt> <dd>{{group.group_name}}</dd>
+	<tbody>
+	  <tr>
+	    <td rowspan="{{group.group_metadata.items() | count + 1}}">
+	      {{group.group_name}}
+	    </td>
+	    <td><strong>Key</strong></td>
+	    <td><strong>Value</strong></td>
+	    <td rowspan="{{group.group_metadata.items() | count + 1}}"
+		style="text-align: center;">
+	      <a href="{{url_for('oauth2.group.edit_group', group_id=group.group_id)}}"
+		 class="btn btn-info" title="Edit group information">Edit</a>
+	    </td>
+	    <td rowspan="{{group.group_metadata.items() | count + 1}}"
+		style="text-align: center;">
+	      <a href="{{url_for('oauth2.group.edit_group', group_id=group.group_id)}}"
+		 class="btn btn-danger" title="Delete this group">Delete</a>
+	    </td>
+	  </tr>
 
-	{%for key,value in group.group_metadata.items()%}
-	<dt>{{key.split("_") | map('capitalize') | join(" ")}}</dt>
-	<dd>{{value}}</dd>
-	{%endfor%}
-      </dl>
-    </div>
+	  {%for key,val in group.group_metadata.items()%}
+	  <tr>
+	    <td>{{key.split("_") | map("capitalize") | join(" ")}}</td>
+	    <td>{{val}}</td>
+	  </tr>
+	  {%endfor%}
 
-    <div class="row">
-      <form action="{{url_for('oauth2.group.edit_group', group_id=group.group_id)}}"
-	    method="POST" style="display: inline">
-	<input type="hidden" name="group_id" value="{{group.group_id}}">
-	<input type="submit" class="btn btn-info" value="Edit" />
-      </form>
-
-      <form action="{{url_for('oauth2.group.edit_group', group_id=group.group_id)}}"
-	    method="POST" style="display: inline">
-	<input type="hidden" name="group_id" value="{{group.group_id}}">
-	<input type="submit" class="btn btn-danger" value="Delete" />
-      </form>
+	</tbody>
+      </table>
     </div>
+  </div>
 
-    {%if group%}
-    <div class="row" style="padding-top: 0.5em;">
-      <a href="{{url_for('oauth2.group.list_group_users', group_id=group.group_id)}}"
-	 class="btn btn-info">Group Users</a>
-    </div>
-    {%endif%}
+  <div class="container-fluid">
+
+    <table class="table">
+      <caption>Group Users</caption>
+      <thead>
+	<tr>
+	  <th>Name</th>
+	  <th>Email</th>
+	  <th>Actions</th>
+	</tr>
+      </thead>
+
+      <tbody>
+	{%for user in users%}
+	<tr>
+	  <td>{{user.name}}</td>
+	  <td>{{user.email}}</td>
+	  <td>
+	    <a href="url_for('oauth2.group.remove_user', user_id=user.user_id)"
+	       title="Remove this user from being a member of this group."
+	       class="btn btn-danger">Remove</a>
+	  </td>
+	</tr>
+	{%else%}
+	<tr>
+	  <td colspan="3">
+	    {%if user_error is defined%}
+	    <span class="glyphicon glyphicon-exclamation-sign text-danger">
+	    </span>
+	    &nbsp;
+	    <strong class="text-danger">{{user_error.error}}</strong>
+	    {{user_error.error_message}}
+	    {%else%}
+	    No users found for this group
+	    {%endif%}
+	  </td>
+	</tr>
+	{%endfor%}
+      </tbody>
+    </table>
 
   </div>
 
-- 
cgit v1.2.3