fix(oauth2): Show access token validity period on account details page

Author: andris9

lib/account.js

@@ -242,7 +242,7 @@ class Account {
                             break;
                         }
                         result[key] = value;
-                        for (let subKey of ['created', 'expires']) {
+                        for (let subKey of ['created', 'expires', 'generated']) {
                             if (result[key][subKey]) {
                                 let dateVal = /^[0-9]+$/.test(result[key][subKey]) ? Number(result[key][subKey]) : result[key][subKey];
                                 let date = new Date(dateVal);
@@ -386,12 +386,14 @@ class Account {
                             }
                         }
 
-                        if (
-                            accountData[key].expires &&
-                            typeof accountData[key].expires === 'object' &&
-                            accountData[key].expires.toString() !== 'Invalid Date'
-                        ) {
-                            connectData.expires = accountData[key].expires.toISOString();
+                        for (let subKey of ['created', 'expires', 'generated']) {
+                            if (
+                                accountData[key][subKey] &&
+                                typeof accountData[key][subKey] === 'object' &&
+                                accountData[key][subKey].toString() !== 'Invalid Date'
+                            ) {
+                                connectData[subKey] = accountData[key][subKey].toISOString();
+                            }
                         }
 
                         result[key] = JSON.stringify(connectData);
@@ -2095,13 +2097,17 @@ class Account {
                 throw new Error('Failed to renew token');
             }
 
+            let now = new Date();
+
             let updates = {
                 accessToken: r.access_token,
-                expires: new Date(Date.now() + r.expires_in * 1000).toISOString()
+                expires: new Date(now.getTime() + r.expires_in * 1000).toISOString(),
+                generated: now.toISOString()
             };
 
             if (r.refresh_token) {
                 updates.refreshToken = r.refresh_token;
+                updates.refreshTokenGenerated = now.toISOString();
             }
 
             if (r.scope) {

lib/routes-ui.js

@@ -526,6 +526,7 @@ function formatAccountData(account) {
             .filter(entry => entry);
 
         account.oauth2.expiresStr = account.oauth2.expires ? account.oauth2.expires.toISOString() : false;
+        account.oauth2.generatedStr = account.oauth2.generated ? account.oauth2.generated.toISOString() : false;
     }
 
     return account;

static/js/app.js

@@ -172,6 +172,16 @@ document.addEventListener('DOMContentLoaded', () => {
     updateRelativeTimes();
     setInterval(updateRelativeTimes, 15 * 1000);
 
+    for (let t of document.querySelectorAll('.local-time')) {
+        let date = new Date(t.dataset.time);
+        t.textContent = new Intl.DateTimeFormat().format(date);
+    }
+
+    for (let t of document.querySelectorAll('.local-date-time')) {
+        let date = new Date(t.dataset.time);
+        t.textContent = new Intl.DateTimeFormat(undefined, { timeStyle: 'medium', dateStyle: 'short' }).format(date);
+    }
+
     let clip = new ClipboardJS('.copy-btn');
     if (!clip) {
         console.log('Can not set up clipboard');

views/accounts/account.hbs

@@ -254,6 +254,22 @@
             </dd>
             {{/if}}
 
+            {{#if account.oauth2.expiresStr}}
+            <dt class="col-sm-3">Access token validity</dt>
+            <dd class="col-sm-9">
+
+                {{#if account.oauth2.generatedStr}}
+                <span class="local-date-time code-link" data-time="{{account.oauth2.generatedStr}}"
+                    title="{{account.oauth2.generatedStr}}"></span> &mdash;
+                {{else}}
+                To
+                {{/if}}
+
+                <span class="local-date-time code-link" data-time="{{account.oauth2.expiresStr}}"
+                    title="{{account.oauth2.expiresStr}}"></span>
+            </dd>
+            {{/if}}
+
         </dl>
 
     </div>