projects / lantea.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 213947e)
implement logging into the new Lantea backend
authorRobert Kaiser <kairo@kairo.at>
Sun, 17 Sep 2017 23:46:10 +0000 (01:46 +0200)
committerRobert Kaiser <kairo@kairo.at>
Sun, 17 Sep 2017 23:46:10 +0000 (01:46 +0200)
auth-done.html [deleted file] patch | blob | blame | history
index.html patch | blob | blame | history
js/ui.js patch | blob | blame | history
login.html [new file with mode: 0644] patch | blob
manifest.appcache patch | blob | blame | history
style/lantea.css patch | blob | blame | history

diff --git a/auth-done.html b/auth-done.html
deleted file mode 100644 (file)
index 88db9f1..0000000
--- a/auth-done.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html><head></head>
-    <body>
-        <script>
-            opener.authComplete(window.location.href);
-            window.close();
-        </script>
-    </body>
-</html>
diff --git a/index.html b/index.html
index fd1dbe56974cc0e89bbf8f55fb161f44d110fa27..53ace7dc36866523373db9f498b9c64a4bc16025 100644 (file)
--- a/index.html
+++ b/index.html
@@ -39,6 +39,12 @@
 <input type="button" id="clearTrackButton" value="Clear"
        onclick="clearTrack();">
 </p>
 <input type="button" id="clearTrackButton" value="Clear"
        onclick="clearTrack();">
 </p>
+<p class="loginbox">
+<button type="button" id="loginbtn" class="hidden">Sign in</button>
+<span id="logindesc" class="hidden">to enable uploads</span>
+<span id="username" class="hidden"></span>
+<button type="button" id="logoutbtn" class="hidden">Log out</button>
+</p>
 <p>
 <input type="checkbox" id="trackCheckbox"
        onchange="setTracking(this);">
 <p>
 <input type="checkbox" id="trackCheckbox"
        onchange="setTracking(this);">
diff --git a/js/ui.js b/js/ui.js
index 8dc3f78407b926d7494fe90a744c6d7a3ead45be..5d631ced9a183e556043ebd99b4eb751e9760d84 100644 (file)
--- a/js/ui.js
+++ b/js/ui.js
@@ -12,6 +12,8 @@ var gUIHideCountdown = 0;
 var gWaitCounter = 0;
 var gTrackUpdateInterval;
 var gAction, gActionLabel;
 var gWaitCounter = 0;
 var gTrackUpdateInterval;
 var gAction, gActionLabel;
+var gBackendURL = "https://backend.lantea.kairo.at";
+var gAuthClientID = "lantea";
 var gOSMAPIURL = "https://api.openstreetmap.org/";
 var gOSMOAuthData = {
     oauth_consumer_key: "6jjWwlbhGqyYeCdlFE1lTGG6IRGOv1yKpFxkcq2z",
 var gOSMAPIURL = "https://api.openstreetmap.org/";
 var gOSMOAuthData = {
     oauth_consumer_key: "6jjWwlbhGqyYeCdlFE1lTGG6IRGOv1yKpFxkcq2z",
@@ -21,6 +23,11 @@ var gOSMOAuthData = {
 }
 
 window.onload = function() {
 }
 
 window.onload = function() {
+  if (/\/login\.html/.test(window.location)) {
+    // If we are in the login window, call a function to complete the process and don't do anything else here.
+    completeLoginWindow();
+    return;
+  }
   gAction = document.getElementById("action");
   gActionLabel = document.getElementById("actionlabel");
 
   gAction = document.getElementById("action");
   gActionLabel = document.getElementById("actionlabel");
 
@@ -54,10 +61,29 @@ window.onload = function() {
     document.getElementById("saveTrackButton").classList.add("debugHide");
   }
 
     document.getElementById("saveTrackButton").classList.add("debugHide");
   }
 
-  // Without OAuth, the login data is useless
-  //document.getElementById("uploadSettingsArea").classList.remove("debugHide");
-  // As login data is useless for now, always enable upload button
-  document.getElementById("uploadTrackButton").disabled = false;
+  // Set backend URL in a way that it works for testing on localhost as well as
+  // both the lantea.kairo.at and lantea-dev.kairo.at deployments.
+  if (window.location.host == "localhost") {
+    gBackendURL = window.location.protocol + '//' + window.location.host + "/lantea-backend/";
+  }
+  else {
+    gBackendURL = window.location.protocol + '//' + "backend." + window.location.host + "/";
+  }
+  // Make sure to use a different login client ID for the -dev setup.
+  if (/\-dev\./.test(window.location.host)) {
+    gAuthClientID += "-dev";
+  }
+
+  // Set up the login area.
+  document.getElementById("loginbtn").onclick = startLogin;
+  document.getElementById("logoutbtn").onclick = doLogout;
+  prepareLoginButton(function() {
+    // Anything that needs the backend should only be triggered from in here.
+    // That makes sure that the first call the the backend is oauth_state and no other is running in parallel.
+    // If we call multiple backend methods at once and no session is open, we create multiple sessions, which calls for confusion later on.
+
+    // Call any UI preparation that needs the backend.
+  });
 
   if (gDebug) {
     // Note that GPX upload returns an error 500 on the dev API right now.
 
   if (gDebug) {
     // Note that GPX upload returns an error 500 on the dev API right now.
@@ -97,6 +123,114 @@ window.onresize = function() {
   gMap.resizeAndDraw();
 }
 
   gMap.resizeAndDraw();
 }
 
+function startLogin() {
+  var authURL = authData["url"] + "authorize?response_type=code&client_id=" + gAuthClientID + "&scope=email" +
+                "&state=" + authData["state"] + "&redirect_uri=" + encodeURIComponent(getRedirectURI());
+  if (window.open(authURL, "KaiRoAuth", 'height=450,width=600')) {
+    console.log("Sign In window open.");
+  }
+  else {
+    console.log("Opening Sign In window failed.");
+  }
+}
+
+function getRedirectURI() {
+  return window.location.protocol + '//' + window.location.host + window.location.pathname + "login.html";
+}
+
+function doLogout() {
+  fetchBackend("logout", "GET", null,
+     function(aResult, aStatus) {
+        if (aStatus < 400) {
+          prepareLoginButton();
+        }
+        else {
+          console.log("Backend issue trying to log out.");
+        }
+      },
+      {}
+  );
+}
+
+function prepareLoginButton(aCallback) {
+  fetchBackend("oauth_state", "GET", null,
+      function(aResult, aStatus) {
+        if (aStatus == 200) {
+          if (aResult["logged_in"]) {
+            userData = {
+              "email": aResult["email"],
+              "permissions": aResult["permissions"],
+            };
+            authData = null;
+            displayLogin();
+          }
+          else {
+            authData = {"state": aResult["state"], "url": aResult["url"]};
+            userData = null;
+            displayLogout();
+          }
+        }
+        else {
+          console.log("Backend issue fetching OAuth state.");
+        }
+        if (aCallback) { aCallback(); }
+      },
+      {}
+  );
+}
+
+function completeLoginWindow() {
+  if (window.opener) {
+    window.opener.finishLogin(getParameterByName("code"), getParameterByName("state"));
+    window.close();
+  }
+  else {
+    document.getElementById("logininfo").textContent = "You have called this document outside of the login flow, which is not supported.";
+  }
+}
+
+function finishLogin(aCode, aState) {
+  if (aState == authData["state"]) {
+    fetchBackend("login?code=" + aCode + "&state=" + aState + "&redirect_uri=" + encodeURIComponent(getRedirectURI()), "GET", null,
+        function(aResult, aStatus) {
+          if (aStatus == 200) {
+            userData = {
+              "email": aResult["email"],
+              "permissions": aResult["permissions"],
+            };
+            displayLogin();
+          }
+          else {
+            console.log("Login error " + aStatus + ": " + aResult["message"]);
+            prepareLoginButton();
+          }
+        },
+        {}
+    );
+  }
+  else {
+    console.log("Login state did not match, not continuing with login.");
+  }
+}
+
+function displayLogin() {
+  document.getElementById("loginbtn").classList.add("hidden");
+  document.getElementById("logindesc").classList.add("hidden");
+  document.getElementById("username").classList.remove("hidden");
+  document.getElementById("username").textContent = userData.email;
+  document.getElementById("uploadTrackButton").disabled = false;
+  document.getElementById("logoutbtn").classList.remove("hidden");
+}
+
+function displayLogout() {
+  document.getElementById("logoutbtn").classList.add("hidden");
+  document.getElementById("username").classList.add("hidden");
+  document.getElementById("username").textContent = "";
+  document.getElementById("uploadTrackButton").disabled = true;
+  document.getElementById("loginbtn").classList.remove("hidden");
+  document.getElementById("logindesc").classList.remove("hidden");
+}
+
 function initDB(aEvent) {
   // Open DB.
   if (aEvent)
 function initDB(aEvent) {
   // Open DB.
   if (aEvent)
@@ -608,3 +742,37 @@ var gTrackStore = {
     }
   }
 };
     }
   }
 };
+
+function fetchBackend(aEndpoint, aMethod, aSendData, aCallback, aCallbackForwards) {
+  var XHR = new XMLHttpRequest();
+  XHR.onreadystatechange = function() {
+    if (XHR.readyState == 4) {
+      // State says we are fully loaded.
+      var result = {};
+      if (XHR.getResponseHeader("Content-Type") == "application/json") {
+        // Got a JSON object, see if we have success.
+        result = JSON.parse(XHR.responseText);
+      }
+      else {
+        result = XHR.responseText;
+      }
+      aCallback(result, XHR.status, aCallbackForwards);
+    }
+  };
+  XHR.open(aMethod, gBackendURL + aEndpoint, true);
+  //XHR.setRequestHeader("Accept", "application/json");
+  try {
+    XHR.send(aSendData); // Send actual form data.
+  }
+  catch (e) {
+    aCallback(e, 500, aCallbackForwards);
+  }
+}
+
+function getParameterByName(aName) {
+  // from http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+  name = aName.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+      results = regex.exec(location.search);
+  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
diff --git a/login.html b/login.html
new file mode 100644 (file)
index 0000000..35f5ec4
--- /dev/null
+++ b/login.html
@@ -0,0 +1,28 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   - You can obtain one at http://mozilla.org/MPL/2.0/.  -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
+       https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <title>Filmingsites Login</title>
+  <script src="js/ui.js"></script>
+  <script src="js/piwik.js" async="" defer=""></script>
+  <link rel="stylesheet" href="style/lantea.css">
+  <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
+</head>
+<body>
+<header>
+<noscript><p><img src="/piwik/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
+<h1>Lantea Login</h1>
+</header>
+
+<main id="logininfo">
+This window should close in a second.
+</main>
+</body>
+</html>
diff --git a/manifest.appcache b/manifest.appcache
index 27fc3386bda7b3fb3bbfd6c01059720f40fd54ea..f553e251e50477d34f1ab72dda843e0c1bfa80a8 100644 (file)
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
 CACHE MANIFEST
 
-# 2016-09-04
+# 2017-09-17
 index.html
 auth-done.html
 manifest.webapp
 index.html
 auth-done.html
 manifest.webapp
diff --git a/style/lantea.css b/style/lantea.css
index f1785fdddd4e187758d116e7796381f108aaf81e..c13f814ff6929ea376ed7b86f1966edce76082a9 100644 (file)
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -12,6 +12,10 @@ h1 {
   display: none;
 }
 
   display: none;
 }
 
+.hidden {
+  display: none;
+}
+
 #dialogArea,
 .overlayArea {
   position: absolute;
 #dialogArea,
 .overlayArea {
   position: absolute;
@@ -24,6 +28,7 @@ h1 {
 .overlayArea.hidden {
   opacity: 0;
   transition-duration: 1s;
 .overlayArea.hidden {
   opacity: 0;
   transition-duration: 1s;
+  display: block;
 }
 
 #dialogArea:-moz-system-metric(touch-enabled),
 }
 
 #dialogArea:-moz-system-metric(touch-enabled),
@@ -33,11 +38,14 @@ h1 {
 }
 
 #dialogArea input[type="button"],
 }
 
 #dialogArea input[type="button"],
+#dialogArea button,
 #dialogArea input[type="text"],
 #dialogArea select,
 .overlayArea input[type="button"],
 #dialogArea input[type="text"],
 #dialogArea select,
 .overlayArea input[type="button"],
+.overlayArea button,
 .overlayArea select,
 .menuDrawer input[type="button"],
 .overlayArea select,
 .menuDrawer input[type="button"],
+.menuDrawer button,
 .menuDrawer select {
   font-size: inherit;
 }
 .menuDrawer select {
   font-size: inherit;
 }
@@ -209,7 +217,8 @@ h1 {
 }
 
 /* Custom button design */
 }
 
 /* Custom button design */
-.menuDrawer input[type="button"] {
+.menuDrawer input[type="button"],
+.menuDrawer button {
   text-align: center;
   vertical-align: middle;
   background-image: none;
   text-align: center;
   vertical-align: middle;
   background-image: none;
@@ -220,12 +229,21 @@ h1 {
   border-radius: 3px;
 }
 
   border-radius: 3px;
 }
 
-.menuDrawer input[type="button"]:hover {
+.menuDrawer input[type="button"]:disabled,
+.menuDrawer button:disabled {
+  background-color: rgba(204, 204, 204, .1);
+  color: rgba(204, 204, 204, .5);
+  border: 1px solid rgba(255, 255, 255, .5);
+}
+
+.menuDrawer input[type="button"]:not(:disabled):hover,
+.menuDrawer button:not(:disabled):hover {
   background-color: rgba(204, 204, 204, .4);
   border: 1px solid #FFFFFF;
 }
 
   background-color: rgba(204, 204, 204, .4);
   border: 1px solid #FFFFFF;
 }
 
-.menuDrawer input[type="button"]:active {
+.menuDrawer input[type="button"]:not(:disabled):active,
+.menuDrawer button:not(:disabled):active {
   background-color: rgba(204, 204, 255, .3);
   color: #FFCCAA;
   padding-top: 2px;
   background-color: rgba(204, 204, 255, .3);
   color: #FFCCAA;
   padding-top: 2px;
@@ -324,6 +342,7 @@ h1 {
 
 #copyright.hidden {
   opacity: 0;
 
 #copyright.hidden {
   opacity: 0;
+  display: block;
 }
 
 #dialogArea {
 }
 
 #dialogArea {
@@ -342,6 +361,7 @@ h1 {
 
 #dialogArea.hidden {
   top: -100%;
 
 #dialogArea.hidden {
   top: -100%;
+  display: block;
 }
 
 .dialogTitle {
 }
 
 .dialogTitle {
Lantea Maps web app - display maps and record (GPS) tracks