@commercetools-frontend/mc-dev-authentication 21.23.7 → 21.23.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-frontend-mc-dev-authentication.cjs.dev.js +2 -2
  2. package/dist/commercetools-frontend-mc-dev-authentication.cjs.prod.js +2 -2
  3. package/dist/commercetools-frontend-mc-dev-authentication.esm.js +2 -2
  4. package/package.json +3 -3
package/dist/commercetools-frontend-mc-dev-authentication.cjs.dev.js CHANGED
@@ -29,7 +29,7 @@ function logoutRoute(response) {
29
29
  }
30
30
 
31
31
  var pages$1 = {
32
- "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n <div class=\"info\">\n <small>\n Note that Single Sign On is not supported at the moment for the\n development login page. If you are interested in this functionality,\n let us know and open a\n <a\n href=\"https://github.com/commercetools/merchant-center-application-kit/issues/new/choose\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >support issue</a\n >.\n </small>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
32
+ "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
33
33
  "logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
34
34
  };
35
35
 
@@ -100,7 +100,7 @@ function createMcDevAuthenticationMiddleware(applicationConfig) {
100
100
 
101
101
  // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
102
102
  var pages = {
103
- "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n <div class=\"info\">\n <small>\n Note that Single Sign On is not supported at the moment for the\n development login page. If you are interested in this functionality,\n let us know and open a\n <a\n href=\"https://github.com/commercetools/merchant-center-application-kit/issues/new/choose\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >support issue</a\n >.\n </small>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
103
+ "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
104
104
  "logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
105
105
  };
106
106
 
package/dist/commercetools-frontend-mc-dev-authentication.cjs.prod.js CHANGED
@@ -29,7 +29,7 @@ function logoutRoute(response) {
29
29
  }
30
30
 
31
31
  var pages$1 = {
32
- "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n <div class=\"info\">\n <small>\n Note that Single Sign On is not supported at the moment for the\n development login page. If you are interested in this functionality,\n let us know and open a\n <a\n href=\"https://github.com/commercetools/merchant-center-application-kit/issues/new/choose\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >support issue</a\n >.\n </small>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
32
+ "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
33
33
  "logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
34
34
  };
35
35
 
@@ -100,7 +100,7 @@ function createMcDevAuthenticationMiddleware(applicationConfig) {
100
100
 
101
101
  // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
102
102
  var pages = {
103
- "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n <div class=\"info\">\n <small>\n Note that Single Sign On is not supported at the moment for the\n development login page. If you are interested in this functionality,\n let us know and open a\n <a\n href=\"https://github.com/commercetools/merchant-center-application-kit/issues/new/choose\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >support issue</a\n >.\n </small>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
103
+ "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
104
104
  "logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
105
105
  };
106
106
 
package/dist/commercetools-frontend-mc-dev-authentication.esm.js CHANGED
@@ -17,7 +17,7 @@ function logoutRoute(response) {
17
17
  }
18
18
 
19
19
  var pages$1 = {
20
- "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n <div class=\"info\">\n <small>\n Note that Single Sign On is not supported at the moment for the\n development login page. If you are interested in this functionality,\n let us know and open a\n <a\n href=\"https://github.com/commercetools/merchant-center-application-kit/issues/new/choose\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >support issue</a\n >.\n </small>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
20
+ "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
21
21
  "logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
22
22
  };
23
23
 
@@ -88,7 +88,7 @@ function createMcDevAuthenticationMiddleware(applicationConfig) {
88
88
 
89
89
  // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
90
90
  var pages = {
91
- "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n <div class=\"info\">\n <small>\n Note that Single Sign On is not supported at the moment for the\n development login page. If you are interested in this functionality,\n let us know and open a\n <a\n href=\"https://github.com/commercetools/merchant-center-application-kit/issues/new/choose\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >support issue</a\n >.\n </small>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
91
+ "loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
92
92
  "logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
93
93
  };
94
94
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/mc-dev-authentication",
3
- "version": "21.23.7",
3
+ "version": "21.23.9",
4
4
  "description": "Authentication views when running webpack-dev-server in development mode",
5
5
  "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
6
6
  "repository": {
@@ -28,11 +28,11 @@
28
28
  "@babel/runtime-corejs3": "^7.20.13"
29
29
  },
30
30
  "devDependencies": {
31
- "@commercetools-frontend/application-config": "21.23.7",
31
+ "@commercetools-frontend/application-config": "21.23.9",
32
32
  "@tsconfig/node16": "^1.0.3",
33
33
  "express": "4.18.2"
34
34
  },
35
35
  "engines": {
36
- "node": ">=14"
36
+ "node": "14.x || >=16.0.0"
37
37
  }
38
38
  }