From 4e672750712064a02ed014691b16017665f67434 Mon Sep 17 00:00:00 2001
From: Son NK <son@imac-de-son.home>
Date: Tue, 30 Jul 2019 12:38:40 +0200
Subject: [PATCH] provide oauth2 urls in app detail page, improve UI

---
 .../templates/developer/client_detail.html    | 55 +++++++++++++++--
 .../steps/step-authorization-flow.html        | 59 ++++++++++++++-----
 2 files changed, 95 insertions(+), 19 deletions(-)

diff --git a/app/developer/templates/developer/client_detail.html b/app/developer/templates/developer/client_detail.html
index 6b43af71..00aeb29e 100644
--- a/app/developer/templates/developer/client_detail.html
+++ b/app/developer/templates/developer/client_detail.html
@@ -13,14 +13,15 @@
 
       <h3>App Info</h3>
       <div class="form-group">
-        <label class="form-label">App Name</label>
+        <label class="form-label">Display Name</label>
         {{ form.name(class="form-control", value=client.name) }}
         {{ render_field_errors(form.name) }}
       </div>
 
       <div class="form-group">
-        <label class="form-label">Website Url</label>
-        {{ form.home_url(class="form-control", type="url", value=client.home_url or "") }}
+        <label class="form-label">Website URL</label>
+        {{ form.home_url(class="form-control", type="url", value=client.home_url or "",
+          placeholder="https://mywebsite.com") }}
         {{ render_field_errors(form.home_url) }}
       </div>
 
@@ -68,6 +69,52 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="form-label">Authorization endpoint</label>
+
+        <div class="input-group mt-2">
+          <input type="text" disabled value="https://app.simplelogin.io/oauth2/authorize" class="form-control">
+          <span class="input-group-append">
+          <button
+              data-clipboard-text="https://app.simplelogin.io/oauth2/authorize"
+              class="clipboard btn btn-primary" type="button">
+            <i class="fe fe-clipboard"></i>
+          </button>
+        </span>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">Token endpoint</label>
+
+        <div class="input-group mt-2">
+          <input type="text" disabled value="https://app.simplelogin.io/oauth2/token" class="form-control">
+          <span class="input-group-append">
+          <button
+              data-clipboard-text="https://app.simplelogin.io/oauth2/token"
+              class="clipboard btn btn-primary" type="button">
+            <i class="fe fe-clipboard"></i>
+          </button>
+        </span>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">UserInfo endpoint</label>
+
+        <div class="input-group mt-2">
+          <input type="text" disabled value="https://app.simplelogin.io/oauth2/userinfo" class="form-control">
+          <span class="input-group-append">
+          <button
+              data-clipboard-text="https://app.simplelogin.io/oauth2/userinfo"
+              class="clipboard btn btn-primary" type="button">
+            <i class="fe fe-clipboard"></i>
+          </button>
+        </span>
+        </div>
+
+      </div>
+
       <div class="form-group">
         <label class="form-label">Authorized URIs</label>
 
@@ -89,7 +136,7 @@
         </div>
 
 
-        <button type="button" id="create-new-uri" class="mt-2 btn btn-outline-secondary">Add new uri</button>
+        <button type="button" id="create-new-uri" class="mt-2 btn btn-secondary">Add new uri</button>
       </div>
       <hr>
       <button type="submit" class="btn btn-primary btn-lg">Update</button>
diff --git a/app/developer/templates/developer/steps/step-authorization-flow.html b/app/developer/templates/developer/steps/step-authorization-flow.html
index 920f4628..5dd2bd2e 100644
--- a/app/developer/templates/developer/steps/step-authorization-flow.html
+++ b/app/developer/templates/developer/steps/step-authorization-flow.html
@@ -27,24 +27,53 @@
 
     <p>And if you already know this flow, here are the OAuth2 endpoints:</p>
 
-    <p>
-      Authorization endpoint:
-      <b>https://app.simplelogin.io/oauth2/authorize</b>
-      <i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/authorize"></i>
-    </p>
+    <div class="form-group">
+      <label class="form-label">Authorization endpoint</label>
 
-    <p>
-      Token endpoint:
-      <b>https://app.simplelogin.io/oauth2/token</b>
-      <i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/token"></i>
-    </p>
+      <div class="input-group mt-2">
+        <input type="text" disabled value="https://app.simplelogin.io/oauth2/authorize" class="form-control">
+        <span class="input-group-append">
+          <button
+              data-clipboard-text="https://app.simplelogin.io/oauth2/authorize"
+              class="clipboard btn btn-primary" type="button">
+            <i class="fe fe-clipboard"></i>
+          </button>
+        </span>
+      </div>
+    </div>
 
-    <p>
-      UserInfo endpoint:
-      <b>https://app.simplelogin.io/oauth2/userinfo</b>
-      <i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/userinfo"></i>
-    </p>
+    <div class="form-group">
+      <label class="form-label">Token endpoint</label>
 
+      <div class="input-group mt-2">
+        <input type="text" disabled value="https://app.simplelogin.io/oauth2/token" class="form-control">
+        <span class="input-group-append">
+          <button
+              data-clipboard-text="https://app.simplelogin.io/oauth2/token"
+              class="clipboard btn btn-primary" type="button">
+            <i class="fe fe-clipboard"></i>
+          </button>
+        </span>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label">UserInfo endpoint</label>
+
+      <div class="input-group mt-2">
+        <input type="text" disabled value="https://app.simplelogin.io/oauth2/userinfo" class="form-control">
+        <span class="input-group-append">
+          <button
+              data-clipboard-text="https://app.simplelogin.io/oauth2/userinfo"
+              class="clipboard btn btn-primary" type="button">
+            <i class="fe fe-clipboard"></i>
+          </button>
+        </span>
+      </div>
+
+    </div>
+
+    <hr>
     Please find below your OAuth Client-Id and Client-Secret that are needed for the <em>Authorization Code Flow</em>:
     <br>