From c56dc39193909062d25e3270d9ab0ec3467a47ee Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Fri, 19 Jul 2024 10:22:31 -0500
Subject: Fix styling: Use bootstrap styling.

---
 gn_auth/templates/admin/register-client.html    | 99 ++++++++++++++-----------
 gn_auth/templates/admin/view-oauth2-client.html | 66 ++++++++++-------
 2 files changed, 94 insertions(+), 71 deletions(-)

(limited to 'gn_auth/templates/admin')

diff --git a/gn_auth/templates/admin/register-client.html b/gn_auth/templates/admin/register-client.html
index 20d7aa2..5e24148 100644
--- a/gn_auth/templates/admin/register-client.html
+++ b/gn_auth/templates/admin/register-client.html
@@ -9,59 +9,72 @@
 
 <form method="POST" action="{{url_for('oauth2.admin.register_client')}}">
 
-  <fieldset>
-    <legend>Select client scope</legend>
-
+  <legend>Select client scope</legend>
+  <div class="form-group">
     {%for scp in scope%}
-    <input name="scope[]" id="chk-{{scp}}"type="checkbox" value="{{scp}}"
-	   {%if scp=="profile"%}checked="checked"{%endif%} />
-    <label for="chk-{{scp}}">{{scp}}</label><br />
+    <div class="checkbox">
+      <label for="chk-{{scp}}">
+        <input name="scope[]" id="chk-{{scp}}"type="checkbox" value="{{scp}}"
+	       {%if scp=="profile"%}checked="checked"{%endif%} />
+        {{scp}}
+      </label>
+    </div>
     {%endfor%}
+  </div>
 
-  </fieldset>
-
-  <fieldset>
-    <legend>Basic OAuth2 client information</legend>
-
-    
-    <label for="txt-client-name">Client name</label>
-    <input name="client_name" type="text" id="txt-client-name"
+  <legend>Basic OAuth2 client information</legend>
+  <div class="form-group">
+    <label for="txt-client-name" class="form-label">Client name</label>
+    <input name="client_name"
+           type="text"
+           id="txt-client-name"
+           class="form-control"
 	   required="required" />
-    <br /><br />
+  </div>
 
-    <label for="txt-redirect-uri">Redirect URI</label>
-    <input name="redirect_uri" type="text" id="txt-redirect-uri"
+  <div class="form-group">
+    <label for="txt-redirect-uri" class="form-label">Redirect URI</label>
+    <input name="redirect_uri"
+           type="text"
+           id="txt-redirect-uri"
+           class="form-control"
 	   required="required" />
-    <br /><br />
+  </div>
 
-    <label for="txt-other-redirect-uris">
-      Other redirect URIs (Enter one URI per line)</label>
-    <br />
-    <textarea name="other_redirect_uris" id="txt-other-redirect-uris"
+  <div class="form-group">
+    <label for="txt-other-redirect-uris" class="form-label">
+      Other redirect URIs</label>
+    <div class="form-text text-muted">Enter one URI per line</div>
+    <textarea name="other_redirect_uris"
+              id="txt-other-redirect-uris"
 	      cols="80" rows="10"
+              class="form-control"
 	      title="Enter one URI per line."></textarea>
-    <br /><br />
-    <fieldset>
-      <legend>Supported grant types</legend>
-      {%for granttype in granttypes%}
-      <input name="grants[]"
-	     type="checkbox"
-	     value="{{granttype.value}}"
-	     id="chk-{{granttype.name.lower().replace(' ', '-')}}"
-	     checked="checked" />
+  </div>
+
+  <div class="form-group">
+    <legend>Supported grant types</legend>
+    {%for granttype in granttypes%}
+    <div class="checkbox">
       <label for="chk-{{granttype.name.lower().replace(' ', '-')}}">
+        <input name="grants[]"
+	       type="checkbox"
+	       value="{{granttype.value}}"
+	       id="chk-{{granttype.name.lower().replace(' ', '-')}}"
+	       checked="checked" />
         {{granttype.name}}
       </label>
-      <br /><br />
-      {%endfor%}
-    </fieldset>
-  </fieldset>
-
-  <fieldset>
-    <legend>User information</legend>
+    </div>
+    {%endfor%}
+  </div>
 
-    <p>The user to register this client for</p>
-    <select name="user" required="required">
+  <legend>User information</legend>
+  <div class="form-group">
+    <label for="select-user">The user to register this client for</label>
+    <select id="select-user"
+            name="user"
+            class="form-control"
+            required="required">
       {%for user in users%}
       <option value="{{user.user_id}}"
 	      {%if user.user_id==current_user.user_id%}
@@ -69,8 +82,8 @@
 	      {%endif%}>{{user.name}} ({{user.email}})</option>
       {%endfor%}
     </select>
-  </fieldset>
-  
-  <input type="submit" value="register client" />
+  </div>
+
+  <input type="submit" value="register client" class="btn btn-primary" />
 </form>
 {%endblock%}
diff --git a/gn_auth/templates/admin/view-oauth2-client.html b/gn_auth/templates/admin/view-oauth2-client.html
index 415873d..6da8291 100644
--- a/gn_auth/templates/admin/view-oauth2-client.html
+++ b/gn_auth/templates/admin/view-oauth2-client.html
@@ -13,58 +13,66 @@
 {%set client = client.value%}
 <form method="POST" action="{{url_for('oauth2.admin.edit_client')}}">
   <legend>View/Edit Oauth2 Client</legend>
+
   <input type="hidden" name="client_id" value="{{client.client_id}}" />
   <input type="hidden" name="client_name" value="{{client.client_metadata.client_name}}" />
+
   <div>
-    <p><strong>Client ID: <strong> {{client.client_id}}</p>
-    <p><strong>Client Name: <strong> {{client.client_metadata.client_name}}</p>
+    <p><strong>Client ID: </strong> {{client.client_id}}</p>
+    <p><strong>Client Name: </strong> {{client.client_metadata.client_name}}</p>
   </div>
-  <fieldset>
+
+  <div class="form-group">
     <legend>Scope</legend>
     {%for scp in scope%}
-    <input name="scope[]" id="chk:{{scp}}" type="checkbox" value="{{scp}}"
-	   {%if scp in client.client_metadata.scope%}
-	   checked="checked"
-	   {%endif%} />
-    <label for="chk:{{scp}}">{{scp}}</label><br />
+    <div class="checkbox">
+      <label for="chk:{{scp}}">
+        <input name="scope[]" id="chk:{{scp}}" type="checkbox" value="{{scp}}"
+	       {%if scp in client.client_metadata.scope%}
+	       checked="checked"
+	       {%endif%} />
+        {{scp}}</label><br />
+    </div>
     {%endfor%}
-  </fieldset>
+  </div>
 
-  <fieldset>
+  <div class="form-group">
     <legend>Redirect URIs</legend>
-    <label for="txt-redirect-uri">Default Redirect URI</label>
+    <label for="txt-redirect-uri" class="form-label">Default Redirect URI</label>
     <br />
-    <input type="text" name="redirect_uri" id="txt-redirect-uri"
+    <input type="text"
+           name="redirect_uri"
+           id="txt-redirect-uri"
 	   value="{{client.client_metadata.default_redirect_uri}}"
 	   required="required"
            class="form-control" />
-    <br /><br />
+  </div>
 
-    <label for="txta:other-redirect-uris">Other Redirect URIs</label>
-    <br />
+  <div class="form-group">
+    <label for="txta:other-redirect-uris"
+           class="form-label">Other Redirect URIs</label>
     <textarea id="txta:other-redirect-uris"
 	      name="other_redirect_uris"
 	      cols="80" rows="10"
+              class="form-control"
 	      title="Enter one URI per line."
 	      >{{"\r\n".join(client.client_metadata.redirect_uris)}}</textarea>
-  </fieldset>
+  </div>
 
-  <fieldset>
+  <div class="form-group">
     <legend>Grants</legend>
-      {%for granttype in granttypes%}
-      <input name="grants[]"
-	     type="checkbox"
-	     value="{{granttype.value}}"
-	     id="chk-{{granttype.name.lower().replace(' ', '-')}}"
-             {%if granttype.value in client.client_metadata.grant_types%}
-	     checked="checked"
-             {%endif%} />
+    {%for granttype in granttypes%}
+    <div class="checkbox">
       <label for="chk-{{granttype.name.lower().replace(' ', '-')}}">
+        <input name="grants[]"
+	       type="checkbox"
+	       value="{{granttype.value}}"
+	       id="chk-{{granttype.name.lower().replace(' ', '-')}}"
+               {%if granttype.value in client.client_metadata.grant_types%}
+	       checked="checked"
+               {%endif%} />
         {{granttype.name}}
       </label>
-      <br /><br />
-      {%endfor%}
-  </fieldset>
 
   <input type="submit" class="btn btn-primary" value="update client" />
 </form>
@@ -106,6 +114,7 @@
         There are no registered SSL keys for this client.
       </td>
     </tr>
+    </div>
     {%endfor%}
   </tbody>
 </table>
@@ -122,6 +131,7 @@
               class="form-control"
               rows="10"></textarea>
   </fieldset>
+  </div>
 
   <br />
   <input type="submit" class="btn btn-primary" value="register key" />
-- 
cgit v1.2.3