lib/super_settings/application/scripts.js in super_settings-0.0.0.rc1 vs lib/super_settings/application/scripts.js in super_settings-0.0.1.rc1

@@ -43,20 +43,14 @@
       });
       element.innerHTML = arrayHTML;
     } else if (setting.value_type === "datetime") {
       try {
         const datetime = new Date(Date.parse(setting.value));
-        element.innerText = datetime.toUTCString().replace("GMT", "UTC");
+        element.innerText = dateFormatter().format(datetime);
       } catch (e) {
         element.innerText = "" + setting.value
       }
-    } else if (setting.value_type === "secret") {
-      let placeholder = "••••••••••••••••••••••••";
-      if (!setting.encrypted) {
-        placeholder += '<br><span class="text-danger">not encrypted</span>'
-      }
-      element.innerHTML = placeholder;
     } else {
       element.innerText = "" + setting.value
     }
   }
 
@@ -163,12 +157,12 @@
         element.value = setting.value;
       }
     } else if (setting.value_type === "datetime") {
       try {
         const datetime = new Date(Date.parse(setting.value));
-        const isoDate = `${datetime.getUTCFullYear()}-${padTimeVal(datetime.getUTCMonth() + 1)}-${padTimeVal(datetime.getUTCDate())}`;
-        const isoTime = `${padTimeVal(datetime.getUTCHours())}:${padTimeVal(datetime.getUTCMinutes())}:${padTimeVal(datetime.getUTCSeconds())}`;
+        const isoDate = `${datetime.getFullYear()}-${padTimeVal(datetime.getMonth() + 1)}-${padTimeVal(datetime.getDate())}`;
+        const isoTime = `${padTimeVal(datetime.getHours())}:${padTimeVal(datetime.getMinutes())}:${padTimeVal(datetime.getSeconds())}`;
         element.querySelector('input[type="date"]').value = isoDate;
         element.querySelector('input[type="time"]').value = isoTime;
         element.querySelector(".js-setting-value").value = datetime.toUTCString().replace("GMT", "UTC");
       } catch(e) {
         // ignore bad date format
@@ -217,10 +211,16 @@
 
     if (setting.new_record) {
       row.dataset.newrecord = "true";
     }
 
+    const timezone = row.querySelector(".timezone");
+    if (timezone) {
+      tzName = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      timezone.innerText = tzName;
+    }
+
     return row
   }
 
   // Create a table row with form elements for creating a new setting.
   function newSettingRow() {
@@ -350,20 +350,32 @@
         });
       }, 3000);
     }
   }
 
+  function dateFormatter() {
+    return new Intl.DateTimeFormat(navigator.language, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short"
+    });
+  }
   // Render a setting's history in a table.
   function renderHistoryTable(parent, payload) {
     parent.innerHTML = document.querySelector("#setting-history-table").innerHTML.trim();
     parent.querySelector(".super-settings-history-key").innerText = payload.key;
     const tbody = parent.querySelector("tbody");
     let rowsHTML = "";
     payload.histories.forEach(function(history) {
-      const date = (new Date(Date.parse(history.created_at))).toUTCString().replace("GMT", "UTC");
+      const date = new Date(Date.parse(history.created_at));
+      const dateString = dateFormatter().format(date);
       const value = (payload.encrypted ? "<em>n/a</em>" : escapeHTML(history.value));
-      rowsHTML += `<tr><td class="super-settings-text-nowrap">${escapeHTML(date)}</td><td>${escapeHTML(history.changed_by)}</td><td>${value}</td></tr>`;
+      rowsHTML += `<tr><td class="super-settings-text-nowrap">${escapeHTML(dateString)}</td><td>${escapeHTML(history.changed_by)}</td><td>${value}</td></tr>`;
     });
     tbody.insertAdjacentHTML("beforeend", rowsHTML);
 
     if (payload.previous_page_params || payload.next_page_params) {
       let paginationHTML = `<div class="align-center">`;
@@ -514,11 +526,12 @@
     const dateValue = parentNode.querySelector(".js-date-input").value;
     let timeValue = parentNode.querySelector(".js-time-input").value;
     if (timeValue === "") {
       timeValue = "00:00:00";
     }
-    parentNode.querySelector(".js-setting-value").value = `${dateValue}T${timeValue}Z`
+    const date = new Date(Date.parse(dateValue + "T" + timeValue));
+    parentNode.querySelector(".js-setting-value").value = date.toISOString();
   }
 
   // Listener for the add setting button.
   function addSetting(event) {
     event.preventDefault();
@@ -627,10 +640,33 @@
       url += "?filter=" + escape(filter);
     }
     window.location = url;
   }
 
+  // Support integration into single page applications where OAuth2 access tokens are used.
+  // The access token can be passed either in the access_token query parameter per the
+  // OAuth2 standard, or in the URL hash. Passing it in the hash will prevent it from ever
+  // being sent to the backend and is a bit more secure since there's no chance a web server
+  // will accidentally log it with the request URL.
+  function storeAccessToken() {
+    let accessToken = null;
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("access_token")) {
+      accessToken = params.get("access_token");
+    }
+    if (window.location.hash.startsWith("#access_token=")) {
+      accessToken = window.location.hash.replace("#access_token=", "");
+    }
+    if (accessToken) {
+      window.sessionStorage.setItem("super_settings_access_token", accessToken);
+      const params = new URLSearchParams(window.location.search);
+      params.delete("access_token");
+      window.location.hash = null;
+      window.history.replaceState("", document.title, window.location.pathname + "?" + params.toString());
+    }
+  }
+
   // Attach event listener to one or more elements.
   function addListener(elements, event, handler) {
     if (elements.addEventListener) {
       elements = [elements];
     }
@@ -700,9 +736,11 @@
   }
 
   let activeSettings = [];
 
   docReady(function() {
+    storeAccessToken();
+
     addListener(document.querySelector("#filter"), "input", filterListener);
     addListener(document.querySelector("#add-setting"), "click", addSetting);
     addListener(document.querySelector("#discard-changes"), "click", refreshPage);
     addListener(document.querySelector("#save-settings"), "click", updateSettings);
     addListener(document.querySelector("#modal"), "click", closeModal);