Construct the Provider Select window via document.write()

dmitrizagidulin · dmitrizagidulin · commit 31e0f9e5b14d · 2017-03-15T16:33:27.000-04:00
diff --git a/demo/index.html b/demo/index.html
@@ -85,7 +85,7 @@ <h5>App body</h5>
   function loginTo (providerUri) {
     SolidClient.login(providerUri)
       .then(function (webId) {
-        loginSuccess(webId)
+        if (webId) { loginSuccess(webId) }
       })
       .catch(function (error) {
         console.error('Error logging in:', error)
diff --git a/src/index.js b/src/index.js
@@ -26,6 +26,7 @@
  */
 'use strict'
 const RelyingParty = require('oidc-rp')
+const providerSelectPopupSource = require('./provider-select-popup')
 
 // URI parameter types
 const HASH = 'hash'
@@ -172,9 +173,11 @@ class ClientAuthOIDC {
    * on page load (in case the user is already authenticated), as well as
    * triggered when the user initiates login explicitly (such as by pressing
    * a Login button, etc).
+   *
    * @param [providerUri] {string} Provider URI, result of a Provider Selection
    *   operation (that the app developer has provided). If `null`, the
    *   `selectProvider()` step will kick off its own UI for Provider Selection.
+   *
    * @return {Promise<string>} Resolves to the logged in user's WebID URI
    */
   login (providerUri) {
@@ -259,12 +262,18 @@ class ClientAuthOIDC {
     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) {
+      // Popup has already been opened
       this.selectProviderWindow.focus()
+    } else {
+      // Open a new Provider Select popup window
+      this.selectProviderWindow = this.window.open('',
+        'selectProviderWindow',
+        'menubar=no,resizable=yes,width=300,height=300'
+      )
+
+      this.selectProviderWindow.document.write(providerSelectPopupSource)
+      this.selectProviderWindow.document.close()
     }
   }
 
diff --git a/src/provider-select-popup.js b/src/provider-select-popup.js
@@ -0,0 +1,70 @@
+'use strict'
+
+module.exports = `<!doctype html>
+<html lang="en">
+<head>
+  <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" />
+
+</head>
+<body>
+<div class="container">
+  <div class="row">
+    <div class="col-xs-12 text-center" style="margin-top: 3em;">
+      Login with:
+    </div>
+  </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>
+  <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
+    }
+    console.log('opener.window.location: ', opener.window.location.href)
+
+    opener.postMessage(message, opener.window.location.origin)
+  }
+</script>
+</body>
+</html>
+`
