Update to open Provider Select popup as fallback

dmitrizagidulin · dmitrizagidulin · commit 5a2c43159182 · 2017-01-19T11:11:18.000-05:00
diff --git a/demo/index.html b/demo/index.html
@@ -17,9 +17,8 @@
     <h3>Solid Auth Demo Page</h3>
   </div>
   <div class="demo-section" style="width: 100%;">
-    <p>Login Option 1: Login on the same page (in iframe), allow main window
-      redirect.</p>
-    <iframe id="solidLogin" src="login_iframe_inline.html" seamless style="width: 100%; border: none; margin-top: 1em;"></iframe>
+    <p>Login, invoked by itself, will open a default Provider Select popup window.</p>
+    <button type="button" id="login" class="btn btn-primary btn-md">Login</button>
   </div>
   <div class="demo-section">
     <h5>App body</h5>
@@ -60,9 +59,8 @@ <h5>App body</h5>
 
   // Using a standard "document loaded" event listener
   //  (equivalent to jQuery's $(document).ready())
-  // Trigger a login() check on page load, in case user is logged in already
+  // Trigger a currentUser() check on page load, in case user is logged in already
   document.addEventListener('DOMContentLoaded', function () {
-    window.addEventListener('message', onMessage)
     init()
     SolidClient.currentUser()
       .then(function (webId) {
@@ -97,15 +95,24 @@ <h5>App body</h5>
   function init () {
     initButton('getRootAcl', getRootAcl)
     initButton('logoutBtn', logout)
+    initButton('login', login)
   }
+
   function initButton(id, action) {
     document.getElementById(id).addEventListener('click', action)
   }
+
+  function login () {
+    SolidClient.login()
+  }
+
   function loginSuccess (webId) {
     console.log('onLoginSuccess() callback! webId: ', webId)
     hide('noWebId')
     show('logoutDiv')
-    setField('webId', webId)
+    if (webId) {
+      setField('webId', webId)
+    }
     show('getRootAclDiv')
   }
 
diff --git a/demo/login_iframe_inline.html b/demo/login_iframe_inline.html
@@ -4,72 +4,59 @@
   <meta charset="utf-8">
   <meta http-equiv="Content-type" content="text/html;charset=utf-8">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
-  <script type="text/javascript">
-    var parent, pageUrl
-    window.addEventListener('load', function () { init() });
 
-    function init () {
-      parent = window.parent
-//      console.log('Frame parent: ', parent)
-      pageUrl = parent.window.location.href
-//      console.log('Parent url: ', pageUrl)
-//      console.log('Parent origin: ', parent.window.location.origin)
-//      console.log('iFrame origin: ', window.location.origin)
-//      var pageOrigin = opener.location.origin;
-//      opener.postMessage(pageUrl, pageOrigin);
-      initEvents()
-    }
-    function initButton(id, action) {
-      document.getElementById(id).addEventListener('click', action)
-    }
-    function initEvents () {
-      initButton('local_provider',
-        function () { selectProvider('https://ldnode.local:8443') })
-      initButton('db_provider',
-        function () { selectProvider('https://databox2.com') })
-    }
-    function selectProvider (providerUri) {
-      console.log('Provider selected: ', providerUri)
-      var message = {
-        event_type: 'providerSelected',
-        value: providerUri
-      }
-      parent.postMessage(message, parent.window.location.origin)
-    }
-    function setField (id, value) {
-      var field = document.getElementById(id)
-      if (field) {
-        field.innerHTML = value
-      }
-    }
-    function hide (id) {
-      document.getElementById(id).className = 'hidden'
-    }
-    function show (id) {
-      var div = document.getElementById(id)
-      div.className = div.className.replace('hidden', '')
-    }
-  </script>
 </head>
 <body>
 <div class="container">
   <div class="row">
-    <div class="col-sm-2"><strong>Provider:</strong></div>
-    <div class="col-sm-2">
-      <button type="button" class="btn btn-xs btn-primary" id="db_provider">
-        databox2.com
-      </button>
+    <div class="col-xs-12 text-center" style="margin-top: 3em;">
+      Login with:
     </div>
-    <div class="col-sm-2">
-      <button type="button" class="btn btn-xs btn-default" id="local_provider">
-        localhost
+  </div>
+  <div class="row">
+    <div class="col-xs-12 text-center" style="padding-top: 2em;">
+      <button type="button" class="btn btn-md btn-primary" id="dbProvider">
+        databox2.com
       </button>
     </div>
-    <div class="col-sm-6">
-      or custom:
-      <input type="text" id="custom_provider" value="" placeholder="databox.me" />
+  </div>
+  <div class="row">
+    <div class="col-xs-12 text-center" style="padding-top: 2em;">
+      or custom:<br />
+      <input type="text" id="customProviderUri" value="https://" placeholder="databox.me" />
+      <button type="button" class="btn btn-md" id="customProvider">Go</button>
     </div>
   </div>
 </div>
+<script type="text/javascript">
+  window.addEventListener('load', function () { init() });
+
+  function init () {
+    initEvents()
+  }
+  function initButton(id, action) {
+    document.getElementById(id).addEventListener('click', action)
+  }
+  function initEvents () {
+    initButton('dbProvider',
+      function () { selectProvider('https://databox2.com') })
+    initButton('customProvider',
+      function () {
+        var defaultValue = 'https://'
+        var customUri = document.getElementById('customProviderUri')
+        if (customUri && customUri.value !== defaultValue) {
+          selectProvider(customUri.value)
+        }
+      })
+  }
+  function selectProvider (providerUri) {
+    console.log('Provider selected: ', providerUri)
+    var message = {
+      event_type: 'providerSelected',
+      value: providerUri
+    }
+    opener.postMessage(message, opener.window.location.origin)
+  }
+</script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "npm run build-lib",
-    "build-dist": "webpack --progress --colors --optimize-occurrence-order --optimize-dedupe",
+    "build-dist": "webpack --progress --colors --optimize-occurrence-order --optimize-dedupe --optimize-minimize",
     "build-lib": "babel src -d lib",
     "dist": "npm run build && npm run build-dist",
     "karma": "./node_modules/.bin/karma start",
diff --git a/src/index.js b/src/index.js
@@ -65,6 +65,9 @@ class ClientAuthOIDC {
     return window.location.href
   }
 
+  /**
+   * @return {Promise<string>} Resolves to current user's WebID URI
+   */
   currentUser () {
     if (this.webId) {
       return Promise.resolve(this.webId)
@@ -177,13 +180,19 @@ class ClientAuthOIDC {
   login (providerUri) {
     this.clearCurrentUser()
     let selectProvider = this.selectProvider.bind(this)
-    let loadOrRegisterClient = this.loadOrRegisterClient.bind(this)
-    let validateOrSendAuthRequest = this.validateOrSendAuthRequest.bind(this)
 
     return Promise.resolve(providerUri)
       .then(selectProvider)
-      .then(loadOrRegisterClient)
-      .then(validateOrSendAuthRequest)
+      .then(selectedProviderUri => {
+        if (selectedProviderUri) {
+          return this.loadOrRegisterClient(selectedProviderUri)
+        }
+      })
+      .then(client => {
+        if (client) {
+          return this.validateOrSendAuthRequest(client)
+        }
+      })
   }
 
   clearCurrentUser () {
@@ -247,9 +256,16 @@ class ClientAuthOIDC {
   }
 
   providerFromUI () {
-    console.log('No state param, getting provider from UI')
-    this.initEventListeners(window)
-    // Get the provider from the UI somehow
+    console.log('Getting provider from default popup UI')
+    this.initEventListeners(this.window)
+
+    if (!this.selectProviderWindow) {
+      this.selectProviderWindow = this.window.open('login_iframe_inline.html',
+        'selectProviderWindow', 'menubar=no,resizable=yes,width=300,height=300')
+    }
+    if (this.selectProviderWindow) {
+      this.selectProviderWindow.focus()
+    }
   }
 
   /**
@@ -268,7 +284,8 @@ class ClientAuthOIDC {
    * @param uri {string}
    */
   redirectTo (uri) {
-    this.window.location = uri
+    this.window.location.href = uri
+    return false
   }
 
   /**
@@ -288,7 +305,7 @@ class ClientAuthOIDC {
         }
         this.saveProviderByState(state, providerUri)
         if (this.method === REDIRECT) {
-          this.redirectTo(authUri)
+          return this.redirectTo(authUri)
         }
       })
   }
@@ -407,7 +424,10 @@ class ClientAuthOIDC {
     if (!event || !event.data) { return }
     switch (event.data.event_type) {
       case 'providerSelected':
-        console.log('Provider selected: ', event.data.value)
+        let providerUri = event.data.value
+        console.log('Provider selected: ', providerUri)
+        this.login(providerUri)
+        this.selectProviderWindow.close()
         break
       default:
         console.error('onMessage - unknown event type: ', event)
diff --git a/test/unit/auth-test.js b/test/unit/auth-test.js
@@ -334,7 +334,7 @@ describe('SolidAuthOIDC', () => {
           // ensure providerUri was saved
           expect(auth.loadProvider(state)).to.equal(providerUri)
           // ensure the redirect happened
-          expect(auth.window.location).to.equal(authUri)
+          expect(auth.currentLocation()).to.equal(authUri)
           done()
         })
         .catch(err => { console.error(err.message) })
