From f930fe33ce0d922ba8255b31b133046e8babde65 Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <yann.esposito@gmail.com>
Date: Tue, 13 Feb 2018 17:56:05 +0100
Subject: [PATCH] better interaction for demos

---
 brutalist.css |   3 +-
 login.html    | 128 ++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 100 insertions(+), 31 deletions(-)

diff --git a/brutalist.css b/brutalist.css
index e7c7599..f2ac238 100644
--- a/brutalist.css
+++ b/brutalist.css
@@ -35,8 +35,7 @@ code,pre {
 
 pre { padding: 1em;
       border: solid 2px;
-      font-size: 0.7em;
-      box-shadow: 8px 8px 0; }
+      font-size: 0.7em;}
 
 .button {
     display: inline-block;
diff --git a/login.html b/login.html
index 732867b..aa00e91 100644
--- a/login.html
+++ b/login.html
@@ -29,38 +29,108 @@
         <h1>Yolo App login page</h1>
         <p>Authorization process done!</p>
         <a href="/index.html">← go back to main page</a>
-        <h2>Tokens</h2>
-        <pre id="token" class="code">Retrive tokens...</pre>
-        <h2>Decoded Code:</h2>
-        <pre class="code"><script>document.write(JSON.stringify(jwt,null,2));</script></pre>
-        <h2>decoded from the code:</h2>
+        <h2>Code</h2>
+        <p>The code is generated by the Authentication server and send back
+            to the client via the resource's owner user-agent</p>
+        <p>For us, it is a JWT:</p>
         <pre class="code"><script>document.write(params.code);</script></pre>
+        <p>Which once decoded is:</p>
+        <pre class="code"><script>document.write(JSON.stringify(jwt,null,2));</script></pre>
+        <h2>Tokens</h2>
+        <p> Now the server need to retrieve an access-token and a refresh-token
+            using that code.</p>
+        <p>To achieve that the client will make a call to <code>/token</code>
+            using a basic auth creds</p>
+        <p>You have about 10 mins to retrieve them</p>
+        <div class="button"
+             onclick="getTokensFromCode();">
+            Get Access &amp; Refresh Tokens from Code
+        </div>
+        <h3>Response from <code>/token</code></h3>
+        <pre id="token" class="code">Nothing yet.</pre>
+        <h3>decoded access-token</h3>
+        <pre id="access-token" class="code">Nothing yet.</pre>
+        <h3>decoded refresh-token</h3>
+        <pre id="refresh-token" class="code">Nothing yet.</pre>
+        <h2>Getting new access token without user interaction</h2>
+        <p> The access tokens are the only tokens which are able to talk to the
+        Visibility API.</p>
+        <p>Access tokens live a short time (about 10 min to 1 hour)</p>
+        <p>This is why the client must require a new access token using its
+            <em>refresh token</em>.
+            That is just making another call to <code>/token</code>
+            But with different parameters.
+        <div class="button"
+             onclick="getAccessToken();">
+            Get Access Tokens from Refresh Token
+        </div>
+        <pre id="refreshed" class="code">Nothing yet.</pre>
+        <pre id="refreshed-access-token" class="code">Nothing yet.</pre>
         <script>
-         var tokparams={
-             "code":params.code
-             , "redirect_uri":"http://localhost:9999/login.html"
-             , "scope":"ctia iroh-collect"
-             , "client_id":"localtest"
-             , "grant_type":"authorization_code"
+         var refreshToken="";
+         var getTokensFromCode = function() {
+             var tokparams={
+                 "code":params.code
+                 , "redirect_uri":"http://localhost:9999/login.html"
+                 , "scope":"ctia iroh-collect"
+                 , "client_id":"localtest"
+                 , "grant_type":"authorization_code"
+             };
+             var onTokenError = function(jqXHR,textStatus,errorThrown){
+                 $('#token').html(errorThrown + " status: " + jqXHR.status
+                                + "\n---\n"
+                                + JSON.stringify(jqXHR.responseJSON,null,2));}
+             var onTokenSuccess = function(data,textStatus,jqXHR) {
+                 $("#token").html(data
+                                + "\n---\n"
+                                + JSON.stringify(jqXHR.responseJSON,null,2));
+
+                 $("#access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,null,2) );
+                 $("#refresh-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.refresh_token).payload,null,2) );
+
+                 refreshToken=jqXHR.responseJSON.refresh_token;
+             }
+             $.ajax({
+                 type: "POST"
+                 , beforeSend: function(request) {request.setRequestHeader("Authorization","Basic localpass")}
+                 , success: onTokenSuccess
+                 , error: onTokenError
+                 , url: "http://localhost:9001/iroh/oauth2/token"
+                 , data: tokparams
+                 , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+                 , crossDomain: true
+             });
+         };
+
+         var getAccessToken = function() {
+             var tokparams={
+                 "refresh_token":refreshToken
+                 , "scope":"ctia iroh-collect"
+                 , "client_id":"localtest"
+                 , "grant_type":"refresh_token"
+             };
+             var onTokenError = function(jqXHR,textStatus,errorThrown){
+                 $('#refreshed').html(errorThrown + " status: " + jqXHR.status
+                                + "\n---\n"
+                                + JSON.stringify(jqXHR.responseJSON,null,2))}
+             var onTokenSuccess = function(data,textStatus,jqXHR) {
+                 $("#refreshed").html(data
+                                + "\n---\n"
+                                + JSON.stringify(jqXHR.responseJSON,null,2));
+
+                 $("#refreshed-access-token").html( JSON.stringify(jwtDecode(jqXHR.responseJSON.access_token).payload,null,2) );
+             }
+             $.ajax({
+                 type: "POST"
+                 , beforeSend: function(request) {request.setRequestHeader("Authorization","Basic localpass")}
+                 , success: onTokenSuccess
+                 , error: onTokenError
+                 , url: "http://localhost:9001/iroh/oauth2/token"
+                 , data: tokparams
+                 , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+                 , crossDomain: true
+             });
          };
-         var onTokenError = function(jqXHR,textStatus,errorThrown){
-             $('#token').html(errorThrown + " status: " + jqXHR.status
-                            + "\n---\n"
-                            + JSON.stringify(jqXHR.responseJSON,null,2))}
-         var onTokenSuccess = function(data,textStatus,jqXHR) {
-             $("#token").html(data
-                            + "\n---\n"
-                            + JSON.stringify(jqXHR.responseJSON,null,2));}
-         $.ajax({
-             type: "POST"
-             , beforeSend: function(request) {request.setRequestHeader("Authorization","Basic localpass")}
-             , success: onTokenSuccess
-             , error: onTokenError
-             , url: "http://localhost:9001/iroh/oauth2/token"
-             , data: tokparams
-             , contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
-             , crossDomain: true
-         });
         </script>
     </body>
 </html>