From 14f073af864e7d9d94babe2bf094f3079331bb34 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 3 Jul 2023 11:20:34 +0300
Subject: Spruce up UI

Make UI somewhat consistent with the GN2 UI.
---
 gn3/auth/authorisation/users/admin/views.py  |  4 ++--
 gn3/static/css/styles.css                    | 16 ++++++++++++++++
 gn3/templates/admin/dashboard.html           |  4 ++--
 gn3/templates/admin/list-oauth2-clients.html | 14 ++++++++------
 gn3/templates/admin/login.html               | 18 +++++++++---------
 gn3/templates/admin/register-client.html     |  4 ++--
 gn3/templates/admin/registered-client.html   |  4 ++--
 gn3/templates/admin/view-oauth2-client.html  |  4 ++--
 gn3/templates/base.html                      |  9 ++++++++-
 9 files changed, 51 insertions(+), 26 deletions(-)
 create mode 100644 gn3/static/css/styles.css

diff --git a/gn3/auth/authorisation/users/admin/views.py b/gn3/auth/authorisation/users/admin/views.py
index ca4be5f..c9f1887 100644
--- a/gn3/auth/authorisation/users/admin/views.py
+++ b/gn3/auth/authorisation/users/admin/views.py
@@ -189,7 +189,7 @@ def edit_client():
     the_client = with_db_connection(partial(
         oauth2_client, client_id=uuid.UUID(form["client_id"])))
     if the_client.is_nothing():
-        flash("No such client.", "alert-error")
+        flash("No such client.", "alert-danger")
         return redirect(url_for("oauth2.admin.list_clients"))
     the_client = the_client.value
     client_metadata = {
@@ -220,7 +220,7 @@ def delete_client():
     the_client = with_db_connection(partial(
         oauth2_client, client_id=uuid.UUID(form["client_id"])))
     if the_client.is_nothing():
-        flash("No such client.", "alert-error")
+        flash("No such client.", "alert-danger")
         return redirect(url_for("oauth2.admin.list_clients"))
     the_client = the_client.value
     with_db_connection(partial(_delete_client, client=the_client))
diff --git a/gn3/static/css/styles.css b/gn3/static/css/styles.css
new file mode 100644
index 0000000..692c43d
--- /dev/null
+++ b/gn3/static/css/styles.css
@@ -0,0 +1,16 @@
+h1 {
+    color: white;
+    background: #369;
+    text-align: center;
+    padding: 0.1em 0 0.1em 0;
+}
+
+.btn {
+    text-transform: capitalize;
+}
+
+table thead th, table tfoot th {
+    border-right: 1px solid white;
+    color: white;
+    background: #369;
+}
diff --git a/gn3/templates/admin/dashboard.html b/gn3/templates/admin/dashboard.html
index 52fb7d3..7798022 100644
--- a/gn3/templates/admin/dashboard.html
+++ b/gn3/templates/admin/dashboard.html
@@ -2,11 +2,11 @@
 
 {%block title%}Genenetwork3: Admin Dashboard{%endblock%}
 
+{%block pagetitle%}Admin Dashboard{%endblock%}
+
 {%block content%}
 {{flash_messages()}}
 
-<h1>Genenetwork3: Admin Dashboard</h1>
-
 <ul class="nav">
   <li>
     <a href="{{url_for('oauth2.admin.register_client')}}"
diff --git a/gn3/templates/admin/list-oauth2-clients.html b/gn3/templates/admin/list-oauth2-clients.html
index 030c2e9..0104f0d 100644
--- a/gn3/templates/admin/list-oauth2-clients.html
+++ b/gn3/templates/admin/list-oauth2-clients.html
@@ -2,12 +2,12 @@
 
 {%block title%}Genenetwork3: OAuth2 Clients{%endblock%}
 
+{%block pagetitle%}OAuth2 Clients{%endblock%}
+
 {%block content%}
 {{flash_messages()}}
 
-<h1>Genenetwork3: OAuth2 Clients</h1>
-
-<table>
+<table class="table table-hover table-striped cell-border no-footer">
   <caption>List of registered OAuth2 clients</caption>
   <thead>
     <tr>
@@ -15,7 +15,7 @@
       <th>Client Name</th>
       <th>Default Redirect URI</th>
       <th>Owner</th>
-      <th>Actions</th>
+      <th colspan="2">Actions</th>
     </tr>
   </thead>
 
@@ -28,7 +28,8 @@
       <td>{{client.user.name}} ({{client.user.email}})</td>
       <td>
 	<a href="{{url_for('oauth2.admin.view_client', client_id=client.client_id)}}"
-	   title"View/Edit client {{client.client_metadata.client_name}}">
+	   title"View/Edit client {{client.client_metadata.client_name}}"
+	   class="btn btn-info">
 	  View/Edit
 	</a>
       </td>
@@ -38,7 +39,8 @@
 	      method="POST">
 	  <input type="hidden" name="client_id" value="{{client.client_id}}" />
 	  <input type="submit" value="Delete"
-		 title"Delete client {{client.client_metadata.client_name}}" />
+		 title"Delete client {{client.client_metadata.client_name}}"
+		 class="btn btn-danger" />
 	</form>
       </td>
     </tr>
diff --git a/gn3/templates/admin/login.html b/gn3/templates/admin/login.html
index cf46009..ac217ab 100644
--- a/gn3/templates/admin/login.html
+++ b/gn3/templates/admin/login.html
@@ -2,11 +2,11 @@
 
 {%block title%}Log in to Genenetwork3{%endblock%}
 
+{%block pagetitle%}Admin Log In{%endblock%}
+
 {%block content%}
 {{flash_messages()}}
 
-<h1>Genenetwork3: Admin Log In</h1>
-
 <form method="POST" action="{{url_for('oauth2.admin.login')}}">
 
   <fieldset>
@@ -14,19 +14,19 @@
 
     <input name="next_uri" type="hidden" value={{next_uri}}>
 
-    <fieldset>
-      <label for="txt:email">Email Address</label>
+    <fieldset class="form-group">
+      <label for="txt:email" class="form-label">Email Address</label>
       <input name="email" type="email" id="txt:email" required="required"
-	     placeholder="your@email.address" />
+	     placeholder="your@email.address" class="form-control" />
     </fieldset>
 
-    <fieldset>
-      <label for="txt:password">Password</label>
+    <fieldset class="form-group">
+      <label for="txt:password" class="form-label">Password</label>
       <input name="password" type="password" id="txt:password"
-	     required="required" />
+	     required="required" class="form-control" />
     </fieldset>
   </fieldset>
   
-  <input type="submit" value="log in" />
+  <input type="submit" value="log in" class="btn btn-primary" />
 </form>
 {%endblock%}
diff --git a/gn3/templates/admin/register-client.html b/gn3/templates/admin/register-client.html
index 3058aee..daac977 100644
--- a/gn3/templates/admin/register-client.html
+++ b/gn3/templates/admin/register-client.html
@@ -2,11 +2,11 @@
 
 {%block title%}Genenetwork3: Register OAuth2 Client{%endblock%}
 
+{%block pagetitle%}Register OAuth2 Client{%endblock%}
+
 {%block content%}
 {{flash_messages()}}
 
-<h1>Genenetwork3: Register OAuth2 Client</h1>
-
 <form method="POST" action="{{url_for('oauth2.admin.register_client')}}">
 
   <fieldset>
diff --git a/gn3/templates/admin/registered-client.html b/gn3/templates/admin/registered-client.html
index 2fc3990..5c46f4d 100644
--- a/gn3/templates/admin/registered-client.html
+++ b/gn3/templates/admin/registered-client.html
@@ -2,11 +2,11 @@
 
 {%block title%}Genenetwork3: Register OAuth2 Client{%endblock%}
 
+{%block pagetitle%}Register OAuth2 Client{%endblock%}
+
 {%block content%}
 {{flash_messages()}}
 
-<h1>Genenetwork3: Register OAuth2 Client</h1>
-
 <p>Client has been registered successfully.</p>
 
 <p>Please save the following client details somewhere. There is no way to
diff --git a/gn3/templates/admin/view-oauth2-client.html b/gn3/templates/admin/view-oauth2-client.html
index d5d4b2b..b90428d 100644
--- a/gn3/templates/admin/view-oauth2-client.html
+++ b/gn3/templates/admin/view-oauth2-client.html
@@ -2,11 +2,11 @@
 
 {%block title%}Genenetwork3: View OAuth2 Client{%endblock%}
 
+{%block pagetitle%}View OAuth2 Client{%endblock%}
+
 {%block content%}
 {{flash_messages()}}
 
-<h1>Genenetwork3: View OAuth2 Client</h1>
-
 {%if client.is_nothing()%}
 <p>No such client</p>
 {%else%}
diff --git a/gn3/templates/base.html b/gn3/templates/base.html
index c1070ed..db08545 100644
--- a/gn3/templates/base.html
+++ b/gn3/templates/base.html
@@ -7,11 +7,18 @@
 
     <title>Genenetwork 3: {%block title%}{%endblock%}</title>
 
+    <link rel="stylesheet" type="text/css"
+	  href="https://genenetwork.org/static/new/css/bootstrap-custom.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/styles.css" />
     {%block css%}{%endblock%}
   </head>
 
   <body>
-    {%block content%}{%endblock%}
+    <h1>Genenetwork3: {%block pagetitle%}{%endblock%}</h1>
+
+    <div class="container">
+      {%block content%}{%endblock%}
+    </div>
     {%block js%}{%endblock%}
   <body>
 </html>
-- 
cgit v1.2.3