update samples for signin-widget 5.0

OKTA-349386 <<<Jenkins Check-In of Tested SHA: f317eee for [email protected]>>> Artifact: okta-auth-js
okta · Nov 30, 2020 · bd83f8c · bd83f8c
1 parent 51b0544
commit bd83f8c
Show file tree

Hide file tree

Showing 13 changed files with 389 additions and 92 deletions.
diff --git a/samples/generated/express-web-no-oidc/public/index.html b/samples/generated/express-web-no-oidc/public/index.html
@@ -2,6 +2,13 @@
   <head>
     <!-- app styles -->
     <style>
+      /* margin can cause issues in e2e tests, when the elements move slightly */
+      body, hr, pre {
+        margin: 0;
+      }
+      div {
+        padding: 4px;
+      }
       input {
         margin-bottom: 10px;
       }

diff --git a/samples/generated/express-web-with-oidc/public/index.html b/samples/generated/express-web-with-oidc/public/index.html
@@ -2,6 +2,13 @@
   <head>
     <!-- app styles -->
     <style>
+      /* margin can cause issues in e2e tests, when the elements move slightly */
+      body, hr, pre {
+        margin: 0;
+      }
+      div {
+        padding: 4px;
+      }
       input {
         margin-bottom: 10px;
       }

diff --git a/samples/generated/static-spa/public/app.js b/samples/generated/static-spa/public/app.js
@@ -139,7 +139,7 @@ function renderUnauthenticated() {
 function handleLoginRedirect() {
   // The URL contains a code, `parseFromUrl` will exchange the code for tokens
   return authClient.token.parseFromUrl().then(function (res) {
-    endAuthFlow(res); // save tokens
+    endAuthFlow(res.tokens); // save tokens
   }).catch(function(error) {
     showError(error);
   });
@@ -181,13 +181,13 @@ function beginAuthFlow() {
   }
 }
 
-function endAuthFlow(res) {
+function endAuthFlow(tokens) {
   // parseFromUrl clears location.search. There may also be a leftover "error" param from the auth flow.
   // Replace state with the canonical app uri so the page can be reloaded cleanly.
   history.replaceState(null, '', config.appUri);
 
   // Store tokens. This will update the auth state and we will re-render
-  authClient.tokenManager.setTokens(res.tokens);
+  authClient.tokenManager.setTokens(tokens);
 }
 
 function showRedirectButton() {
@@ -206,23 +206,17 @@ function showSigninWidget() {
       }
     });
 
-    signIn.renderEl({
-        el: '#signin-widget'
-      },
-      function success(res) {
-        console.log('login success', res);
-
-        if (res.status === 'SUCCESS') {
-          // Hide login UI
-          document.getElementById('flow-widget').style.display = 'none';
-          signIn.remove();
-          endAuthFlow(res);
-        }
-      },
-      function error(err) {
-        console.log('login error', err);
-      }
-    );
+    signIn.showSignInToGetTokens({
+      el: '#signin-widget'
+    })
+    .then(function(tokens) {
+      document.getElementById('flow-widget').style.display = 'none';
+      signIn.remove();
+      endAuthFlow(tokens);
+    })
+    .catch(function(error) {
+      console.log('login error', error);
+    });
 
     document.getElementById('flow-widget').style.display = 'block'; // show login UI
 }

diff --git a/samples/generated/static-spa/public/index.html b/samples/generated/static-spa/public/index.html
@@ -7,11 +7,18 @@
     <script src="/okta-auth-js.min.js" type="text/javascript"></script>
 
     <!-- okta-signin-widget assets are avilable on CDN -->
-    <script src="https://global.oktacdn.com/okta-signin-widget/4.4.4/js/okta-sign-in.min.js" type="text/javascript"></script>
-    <link href="https://global.oktacdn.com/okta-signin-widget/4.4.4/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
+    <script src="https://global.oktacdn.com/okta-signin-widget/5.0.0/js/okta-sign-in.min.js" type="text/javascript"></script>
+    <link href="https://global.oktacdn.com/okta-signin-widget/5.0.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
 
     <!-- app styles -->
     <style>
+      /* margin can cause issues in e2e tests, when the elements move slightly */
+      body, hr, pre {
+        margin: 0;
+      }
+      div {
+        padding: 4px;
+      }
       input {
         margin-bottom: 10px;
       }
@@ -25,11 +32,12 @@
     </style>
   </head>
   <body>
-
-    <!-- the href will be changed to config.appUri -->
-    <a id="home-link" href="/">Return Home</a>&nbsp;|&nbsp;
-    <!-- if the URL does not contain valid params a form will be shown -->
-    <a id="options-link" href="/">Change options</a>
+    <div id="nav">
+      <!-- the href will be changed to config.appUri -->
+      <a id="home-link" href="/">Return Home</a>&nbsp;|&nbsp;
+      <!-- if the URL does not contain valid params a form will be shown -->
+      <a id="options-link" href="/">Change options</a>
+    </div>
     <div id="error" style="color: red; padding-top: 20px"></div>
     <hr/>
     <!-- config is loaded from URL query parameters. This form sets params in the URL using the GET method-->
@@ -93,9 +101,13 @@
       <b>Access Token</b><div id="accessToken"></div><hr/>
     </div>
     <hr/>
-    <b>Config</b><pre><code id="config"></code></pre>
+    <div id="config-section">
+      <b>Config</b><pre><code id="config"></code></pre>
+    </div>
     <hr/>
-    <b>Auth state</b><pre><code id="authState"></code></pre>
+    <div id="authState-section">
+      <b>Auth state</b><pre><code id="authState"></code></pre>
+    </div>
     <!-- loading -->
     <div id="loading" style="display: none">
       Loading...

diff --git a/samples/generated/webpack-spa/public/index.html b/samples/generated/webpack-spa/public/index.html
@@ -5,6 +5,13 @@
 
     <!-- app styles -->
     <style>
+      /* margin can cause issues in e2e tests, when the elements move slightly */
+      body, hr, pre {
+        margin: 0;
+      }
+      div {
+        padding: 4px;
+      }
       input {
         margin-bottom: 10px;
       }
@@ -18,11 +25,12 @@
     </style>
   </head>
   <body>
-
-    <!-- the href will be changed to config.appUri -->
-    <a id="home-link" href="/">Return Home</a>&nbsp;|&nbsp;
-    <!-- if the URL does not contain valid params a form will be shown -->
-    <a id="options-link" href="/">Change options</a>
+    <div id="nav">
+      <!-- the href will be changed to config.appUri -->
+      <a id="home-link" href="/">Return Home</a>&nbsp;|&nbsp;
+      <!-- if the URL does not contain valid params a form will be shown -->
+      <a id="options-link" href="/">Change options</a>
+    </div>
     <div id="error" style="color: red; padding-top: 20px"></div>
     <hr/>
     <!-- config is loaded from URL query parameters. This form sets params in the URL using the GET method-->
@@ -86,9 +94,13 @@
       <b>Access Token</b><div id="accessToken"></div><hr/>
     </div>
     <hr/>
-    <b>Config</b><pre><code id="config"></code></pre>
+    <div id="config-section">
+      <b>Config</b><pre><code id="config"></code></pre>
+    </div>
     <hr/>
-    <b>Auth state</b><pre><code id="authState"></code></pre>
+    <div id="authState-section">
+      <b>Auth state</b><pre><code id="authState"></code></pre>
+    </div>
     <!-- loading -->
     <div id="loading" style="display: none">
       Loading...

diff --git a/samples/generated/webpack-spa/src/index.js b/samples/generated/webpack-spa/src/index.js
@@ -138,7 +138,7 @@ function renderUnauthenticated() {
 function handleLoginRedirect() {
   // The URL contains a code, `parseFromUrl` will exchange the code for tokens
   return authClient.token.parseFromUrl().then(function (res) {
-    endAuthFlow(res); // save tokens
+    endAuthFlow(res.tokens); // save tokens
   }).catch(function(error) {
     showError(error);
   });
@@ -180,13 +180,13 @@ function beginAuthFlow() {
   }
 }
 
-function endAuthFlow(res) {
+function endAuthFlow(tokens) {
   // parseFromUrl clears location.search. There may also be a leftover "error" param from the auth flow.
   // Replace state with the canonical app uri so the page can be reloaded cleanly.
   history.replaceState(null, '', config.appUri);
 
   // Store tokens. This will update the auth state and we will re-render
-  authClient.tokenManager.setTokens(res.tokens);
+  authClient.tokenManager.setTokens(tokens);
 }
 
 function showRedirectButton() {
@@ -205,23 +205,17 @@ function showSigninWidget() {
       }
     });
 
-    signIn.renderEl({
-        el: '#signin-widget'
-      },
-      function success(res) {
-        console.log('login success', res);
-
-        if (res.status === 'SUCCESS') {
-          // Hide login UI
-          document.getElementById('flow-widget').style.display = 'none';
-          signIn.remove();
-          endAuthFlow(res);
-        }
-      },
-      function error(err) {
-        console.log('login error', err);
-      }
-    );
+    signIn.showSignInToGetTokens({
+      el: '#signin-widget'
+    })
+    .then(function(tokens) {
+      document.getElementById('flow-widget').style.display = 'none';
+      signIn.remove();
+      endAuthFlow(tokens);
+    })
+    .catch(function(error) {
+      console.log('login error', error);
+    });
 
     document.getElementById('flow-widget').style.display = 'block'; // show login UI
 }

diff --git a/samples/package.json b/samples/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@okta/okta-auth-js": "*",
-    "@okta/okta-signin-widget": "*"
+    "@okta/okta-signin-widget": "^5.0.0"
   },
   "devDependencies": {
     "gulp": "^4.0.2",

diff --git a/samples/templates/partials/spa/app.js b/samples/templates/partials/spa/app.js
@@ -136,7 +136,7 @@ function renderUnauthenticated() {
 function handleLoginRedirect() {
   // The URL contains a code, `parseFromUrl` will exchange the code for tokens
   return authClient.token.parseFromUrl().then(function (res) {
-    endAuthFlow(res); // save tokens
+    endAuthFlow(res.tokens); // save tokens
   }).catch(function(error) {
     showError(error);
   });
@@ -182,13 +182,13 @@ function beginAuthFlow() {
   }
 }
 
-function endAuthFlow(res) {
+function endAuthFlow(tokens) {
   // parseFromUrl clears location.search. There may also be a leftover "error" param from the auth flow.
   // Replace state with the canonical app uri so the page can be reloaded cleanly.
   history.replaceState(null, '', config.appUri);
 
   // Store tokens. This will update the auth state and we will re-render
-  authClient.tokenManager.setTokens(res.tokens);
+  authClient.tokenManager.setTokens(tokens);
 }
 
 function showRedirectButton() {
@@ -208,23 +208,17 @@ function showSigninWidget() {
       }
     });
 
-    signIn.renderEl({
-        el: '#signin-widget'
-      },
-      function success(res) {
-        console.log('login success', res);
-
-        if (res.status === 'SUCCESS') {
-          // Hide login UI
-          document.getElementById('flow-widget').style.display = 'none';
-          signIn.remove();
-          endAuthFlow(res);
-        }
-      },
-      function error(err) {
-        console.log('login error', err);
-      }
-    );
+    signIn.showSignInToGetTokens({
+      el: '#signin-widget'
+    })
+    .then(function(tokens) {
+      document.getElementById('flow-widget').style.display = 'none';
+      signIn.remove();
+      endAuthFlow(tokens);
+    })
+    .catch(function(error) {
+      console.log('login error', error);
+    });
 
     document.getElementById('flow-widget').style.display = 'block'; // show login UI
 }

diff --git a/samples/templates/partials/spa/ui.html b/samples/templates/partials/spa/ui.html
@@ -1,8 +1,9 @@
-
-<!-- the href will be changed to config.appUri -->
-<a id="home-link" href="/">Return Home</a>&nbsp;|&nbsp;
-<!-- if the URL does not contain valid params a form will be shown -->
-<a id="options-link" href="/">Change options</a>
+<div id="nav">
+  <!-- the href will be changed to config.appUri -->
+  <a id="home-link" href="/">Return Home</a>&nbsp;|&nbsp;
+  <!-- if the URL does not contain valid params a form will be shown -->
+  <a id="options-link" href="/">Change options</a>
+</div>
 <div id="error" style="color: red; padding-top: 20px"></div>
 <hr/>
 <!-- config is loaded from URL query parameters. This form sets params in the URL using the GET method-->
@@ -42,9 +43,13 @@
   <b>Access Token</b><div id="accessToken"></div><hr/>
 </div>
 <hr/>
-<b>Config</b><pre><code id="config"></code></pre>
+<div id="config-section">
+  <b>Config</b><pre><code id="config"></code></pre>
+</div>
 <hr/>
-<b>Auth state</b><pre><code id="authState"></code></pre>
+<div id="authState-section">
+  <b>Auth state</b><pre><code id="authState"></code></pre>
+</div>
 <!-- loading -->
 <div id="loading" style="display: none">
   Loading...

diff --git a/samples/templates/partials/styles.html b/samples/templates/partials/styles.html
@@ -1,5 +1,12 @@
 <!-- app styles -->
 <style>
+  /* margin can cause issues in e2e tests, when the elements move slightly */
+  body, hr, pre {
+    margin: 0;
+  }
+  div {
+    padding: 4px;
+  }
   input {
     margin-bottom: 10px;
   }

diff --git a/test/e2e/package.json b/test/e2e/package.json
@@ -16,15 +16,15 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
-    "@wdio/cli": "^6.4.0",
-    "@wdio/local-runner": "^6.4.0",
-    "@wdio/mocha-framework": "^6.4.0",
-    "@wdio/sauce-service": "^6.4.0",
+    "@wdio/cli": "^6.6.0",
+    "@wdio/local-runner": "^6.6.0",
+    "@wdio/mocha-framework": "^6.6.0",
+    "@wdio/sauce-service": "^6.6.0",
     "@wdio/selenium-standalone-service": "^6.6.5",
-    "@wdio/spec-reporter": "^5.15.1",
+    "@wdio/spec-reporter": "^6.6.0",
     "chromedriver": "^85.0.0",
     "wait-on": "^3.3.0",
-    "wdio-chromedriver-service": "^6.0.3",
+    "wdio-chromedriver-service": "^6.0.4",
     "webpack": "^3.0.0"
   }
 }