oauth2: UI: Rework user dashboard UI

Separate the roles, resources and group information from the overview
page.

6 files changed, 176 insertions, 73 deletions

diff --git a/wqflask/wqflask/oauth2/routes.py b/wqflask/wqflask/oauth2/routes.py
index 33282dc1..ad0c080e 100644
--- a/wqflask/wqflask/oauth2/routes.py
+++ b/wqflask/wqflask/oauth2/routes.py
@@ -55,7 +55,7 @@ def oauth2_get(uri_path: str) -> Either:
     if resp.status_code == 200:
         return Right(resp.json())
 
-    return Left(resp.json())
+    return Left(resp)
 
 def oauth2_post(uri_path: str, data: dict) -> Either:
     token = session.get("oauth2_token")
@@ -67,7 +67,11 @@ def oauth2_post(uri_path: str, data: dict) -> Either:
     if resp.status_code == 200:
         return Right(resp.json())
 
-    return Left(resp.json())
+    return Left(resp)
+
+def __request_error__(response):
+    app.logger.error(f"{response}: {response.url} [{response.status_code}]")
+    return render_template("oauth2/request_error.html", response=response)
 
 @oauth2.route("/login", methods=["GET", "POST"])
 def login():
@@ -166,10 +170,8 @@ def user_profile():
         scope = SCOPE, token=session.get("oauth2_token"))
 
     roles = oauth2_get("oauth2/user-roles").either(lambda x: "Error", lambda x: x)
-    resources = []
     return render_template(
-        "oauth2/view-user.html", user_details=user_details,
-        roles=roles, resources=resources)
+        "oauth2/view-user.html", user_details=user_details, roles=roles)
 
 @oauth2.route("/request-add-to-group", methods=["POST"])
 @require_oauth2
@@ -225,3 +227,27 @@ def group_join_or_create():
     groups = oauth2_get("oauth2/groups").either(
         lambda x: __raise_unimplemented__(), lambda x: x)
     return render_template("oauth2/group_join_or_create.html", groups=groups)
+
+@oauth2.route("/user-resources", methods=["GET"])
+def user_resources():
+    def __success__(resources):
+        return render_template("oauth2/resources.html", resources=resources)
+
+    return oauth2_get("oauth2/user-resources").either(
+        __request_error__, __success__)
+
+@oauth2.route("/user-roles", methods=["GET"])
+def user_roles():
+    def __success__(roles):
+        return render_template("oauth2/roles.html", roles=roles)
+
+    return oauth2_get("oauth2/user-roles").either(
+        __request_error__, __success__)
+
+@oauth2.route("/user-group", methods=["GET"])
+def user_group():
+    def __success__(group):
+        return render_template("oauth2/group.html", group=group)
+
+    return oauth2_get("oauth2/user-group").either(
+        __request_error__, __success__)
diff --git a/wqflask/wqflask/templates/oauth2/profile_nav.html b/wqflask/wqflask/templates/oauth2/profile_nav.html
new file mode 100644
index 00000000..7ec7691b
--- /dev/null
+++ b/wqflask/wqflask/templates/oauth2/profile_nav.html
@@ -0,0 +1,35 @@
+{%macro profile_nav(calling_page)%}
+
+<ul class="nav nav-pills">
+
+  <li role="presentation"
+      {%if calling_page == "dashboard"%}
+      class="active"
+      {%endif%}>
+    <a href="{{url_for('oauth2.user_profile')}}">Dashboard</a>
+  </li>
+
+  <li role="presentation"
+      {%if calling_page == "group"%}
+      class="active"
+      {%endif%}>
+    <a href="{{url_for('oauth2.user_group')}}">Group</a>
+  </li>
+
+  <li role="presentation"
+      {%if calling_page == "roles"%}
+      class="active"
+      {%endif%}>
+    <a href="{{url_for('oauth2.user_roles')}}">Roles</a>
+  </li>
+
+  <li role="presentation"
+      {%if calling_page == "resources"%}
+      class="active"
+      {%endif%}>
+    <a href="{{url_for('oauth2.user_resources')}}">Resources</a>
+  </li>
+
+</ul>
+
+{%endmacro%}
diff --git a/wqflask/wqflask/templates/oauth2/request_error.html b/wqflask/wqflask/templates/oauth2/request_error.html
new file mode 100644
index 00000000..35842e68
--- /dev/null
+++ b/wqflask/wqflask/templates/oauth2/request_error.html
@@ -0,0 +1,31 @@
+{%extends "base.html"%}
+{%from "oauth2/profile_nav.html" import profile_nav%}
+{%block title%}View User{%endblock%}
+{%block content%}
+<div class="container" style="min-width: 1250px;">
+  {{profile_nav()}}
+  <h3>ERROR</h3>
+
+  {{flash_me()}}
+
+  {{response}}
+
+  <div class="container-fluid">
+
+    <div class="row">
+      <dl>
+	<dt>Error code</dt>
+	<dd>{{response.status}}[{{response.status_code}}]</dd>
+
+	<dt>URI</dt>
+	<dd>{{response.url}}</dd>
+
+	<dt>Content Type</dt>
+	<dd>{{response.content_type}}</dd>
+      </dl>
+    </div>
+
+  </div>
+
+</div>
+{%endblock%}
diff --git a/wqflask/wqflask/templates/oauth2/resources.html b/wqflask/wqflask/templates/oauth2/resources.html
new file mode 100644
index 00000000..38f851e6
--- /dev/null
+++ b/wqflask/wqflask/templates/oauth2/resources.html
@@ -0,0 +1,31 @@
+{%extends "base.html"%}
+{%from "oauth2/profile_nav.html" import profile_nav%}
+{%block title%}View User{%endblock%}
+{%block content%}
+<div class="container" style="min-width: 1250px;">
+  {{profile_nav("dashboard")}}
+  <h3>Resources</h3>
+
+  {{flash_me()}}
+
+  {{resources}}
+
+  <div class="container-fluid">
+
+    <div class="row">
+      {%for resource in resources %}
+      {{role}}
+      {%else%}
+      <p>
+	<span class="glyphicon glyphicon-warning-sign"></span>&nbsp;
+	<span class="text-warning">
+	  The user has no access to any resource.
+	</span>
+      </p>
+      {%endfor%}
+    </div>
+
+  </div>
+
+</div>
+{%endblock%}
diff --git a/wqflask/wqflask/templates/oauth2/roles.html b/wqflask/wqflask/templates/oauth2/roles.html
new file mode 100644
index 00000000..5086ed39
--- /dev/null
+++ b/wqflask/wqflask/templates/oauth2/roles.html
@@ -0,0 +1,26 @@
+{%extends "base.html"%}
+{%from "oauth2/profile_nav.html" import profile_nav%}
+{%block title%}View User{%endblock%}
+{%block content%}
+<div class="container" style="min-width: 1250px;">
+  {{profile_nav("roles")}}
+  <h3>Roles</h3>
+
+  {{flash_me()}}
+
+  <div class="container-fluid">
+    <div class="row">
+      {%for role in roles %}
+      {{role}}
+      {%else%}
+      <p>
+	<span class="glyphicon glyphicon-warning-sign"></span>&nbsp;
+	<span class="text-warning">No roles attached to this user</span>
+      </p>
+      {%endfor%}
+    </div>
+
+  </div>
+
+</div>
+{%endblock%}
diff --git a/wqflask/wqflask/templates/oauth2/view-user.html b/wqflask/wqflask/templates/oauth2/view-user.html
index a617c66e..7365b35b 100644
--- a/wqflask/wqflask/templates/oauth2/view-user.html
+++ b/wqflask/wqflask/templates/oauth2/view-user.html
@@ -1,84 +1,38 @@
 {%extends "base.html"%}
+{%from "oauth2/profile_nav.html" import profile_nav%}
 {%block title%}View User{%endblock%}
 {%block content%}
 <div class="container" style="min-width: 1250px;">
+  {{profile_nav("dashboard")}}
   <h3>View User</h3>
 
   {{flash_me()}}
 
   <div class="container-fluid">
     <div class="row">
-      <div class="panel panel-primary col-md-3">
-	<div class="panel-heading"><h3>User Details</h3></div>
-	<div class="panel-body">
-	  {%if user_details%}
-	  <p><strong>Name</strong>: {{user_details.name}}</p>
-	  <p><strong>E-Mail</strong>: {{user_details.email}}</p>
-	  {%if user_details.group%}
-	  <p><strong>Group</strong>:{{user_details.group.group_name}}</p>
-	  {%else%}
-	  <p>
-	    <span class="glyphicon glyphicon-warning-sign text-warning"></span>
-	    &nbsp;
-	    <span class="text-warning">User is not a member of a group.</span>
-	  </p>
+      {%if user_details%}
+      <p><strong>Name</strong>: {{user_details.name}}</p>
+      <p><strong>E-Mail</strong>: {{user_details.email}}</p>
+      {%if user_details.group%}
+      <p><strong>Group</strong>:{{user_details.group.group_name}}</p>
+      {%else%}
+      <p>
+	<span class="glyphicon glyphicon-warning-sign text-warning"></span>
+	&nbsp;
+	<span class="text-warning">User is not a member of a group.</span>
+      </p>
 
-	  <p><a href="{{url_for('oauth2.group_join_or_create')}}"
-		class="btn btn-primary"
-		title="Join an existing group, or create your own group">
-	      Join or Create group
-	  </a></p>
-	  {%endif%}
-	  {%else%}
-	  <p class="text-warning">No details found.</p>
-	  {%endif%}
-	</div>
-	<div class="panel-footer"></div>
-      </div>
+      <p><a href="{{url_for('oauth2.group_join_or_create')}}"
+	    class="btn btn-primary"
+	    title="Join an existing group, or create your own group">
+	  Join or Create group
+      </a></p>
+      {%endif%}
+      {%else%}
+      <p class="text-warning">No details found.</p>
+      {%endif%}
     </div>
-  </div>
 
-  <div class="container-fluid">
-    <div class="row">
-      <div class="panel panel-primary col-md-3">
-	<div class="panel-heading"><h3>Resources</h3></div>
-	<div class="panel-body">
-	  <p>The user has access to the following resources:</p>
-	  {%for resource in resources %}
-	  {{role}}
-	  {%else%}
-	  <p>
-	    <span class="glyphicon glyphicon-warning-sign"></span>&nbsp;
-	    <span class="text-warning">
-	      The user has no access to any resource.
-	    </span>
-	  </p>
-	  {%endfor%}
-	</div>
-	<div class="panel-footer"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-fluid">
-    <div class="row">
-      <div class="panel panel-primary col-md-3">
-	<div class="panel-heading">
-	  <h3>Other Roles</h3>
-	</div>
-	<div class="panel-body">
-	  {%for role in roles %}
-	  {{role}}
-	  {%else%}
-	  <p>
-	    <span class="glyphicon glyphicon-warning-sign"></span>&nbsp;
-	    <span class="text-warning">No roles attached to this user</span>
-	  </p>
-	  {%endfor%}
-	</div>
-	<div class="panel-footer"></div>
-      </div>
-    </div>
   </div>
 
 </div>