npm - @things-factory/auth-ui - Versions diffs - 7.0.1-alpha.105 → 7.0.1-alpha.106 - Mend

@things-factory/auth-ui 7.0.1-alpha.105 → 7.0.1-alpha.106

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 (67) hide show

package/dist-client/pages/application/application.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { APPLICATION_TYPES } from '../../constants/application'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('application-page')\nclass Application extends connect(store)(PageView) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n }\n h2 {\n display: flex;\n align-items: center;\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input,\n select {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: 9px;\n font: var(--input-font);\n flex: 1;\n }\n select:focus,\n input:focus,\n form {\n max-width: var(--content-container-max-width);\n }\n [fieldset-container] {\n background-color: var(--theme-white-color);\n margin: var(--margin-wide) 0 var(--margin-default) 0;\n padding: var(--padding-default);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n }\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dark-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n [grid-span] {\n grid-column: span 2;\n }\n [button-in-field] {\n position: absolute;\n top: 16px;\n right: 2px;\n padding: 0;\n border-radius: 0;\n }\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n [danger] {\n --md-theme-primary: var(--md-danger-button-primary-color);\n }\n\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @queryAll('[clipboard-copy]') copybuttons\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'apps',\n text: this.application.name\n }\n }\n }\n\n render() {\n var app = this.application \|\| {}\n\n return html`\n <div>\n <h2><md-icon>apps</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n <div icon>\n <img src=${app.icon} />\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">app name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n </div>\n\n <div field grid-span>\n <label for=\"type-selector\">type</label>\n <select id=\"type-selector\" name=\"type\">\n ${APPLICATION_TYPES.map(\n type =>\n html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`\n )}\n </select>\n </div>\n\n <div field grid-span>\n <label for=\"url\">application URL</label>\n <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirect URL</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n </div>\n\n <div field grid-span>\n <label for=\"webhook\">webhook</label>\n <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n </div>\n\n <div field grid-span>\n <label for=\"available-scopes\">available-scopes</label>\n <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"auth-url\">auth URL</label>\n <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n The endpoint for authorization server. This is used to get the authorization code.\n </div>\n\n <div field grid-span>\n <label for=\"access-token-url\">access token URL</label>\n <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n The endpoint for authentication server. This is used to exchange the authorization code for an access\n token.\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-key\">appKey</label>\n <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n </div>\n\n <div field grid-span>\n <label for=\"app-secret\">appSecret</label>\n <input id=\"app-secret\" type=\"text\" .value=${app.appSecret} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"button-container\">\n <button danger @click=${this.deleteApplication.bind(this)}>\n <md-icon>delete_forever</md-icon>delete this app\n </button>\n <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>\n <button><md-icon>passkey</md-icon>generate new secret</button>\n </div>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchApplication()\n }\n }\n\n async fetchApplication() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n application(id: $id) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n authUrl\n accessTokenUrl\n webhook\n availableScopes\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.application = response.data.application\n }\n\n async updateApplication(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: ApplicationPatch!) {\n updateApplication(id: $id, patch: $patch) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n webhook\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.application = { ...this.application, ...response.data.updateApplication }\n console.log('update sucess')\n }\n }\n\n async deleteApplication(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteApplication(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteApplication\n if (result) {\n console.log('delete sucess')\n navigate('applications')\n } else {\n console.error('delete fail')\n }\n }\n}\n"]}
1	+ {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { APPLICATION_TYPES } from '../../constants/application'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('application-page')\nclass Application extends connect(store)(PageView) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n }\n h2 {\n display: flex;\n align-items: center;\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input,\n select {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: 9px;\n font: var(--input-font);\n flex: 1;\n }\n select:focus,\n input:focus,\n form {\n max-width: var(--content-container-max-width);\n }\n [fieldset-container] {\n background-color: var(--md-sys-color-surface);\n margin: var(--margin-wide) 0 var(--margin-default) 0;\n padding: var(--padding-default);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n }\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dark-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n [grid-span] {\n grid-column: span 2;\n }\n [button-in-field] {\n position: absolute;\n top: 16px;\n right: 2px;\n padding: 0;\n border-radius: 0;\n }\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n [danger] {\n --md-theme-primary: var(--md-danger-button-primary-color);\n }\n\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @queryAll('[clipboard-copy]') copybuttons\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'apps',\n text: this.application.name\n }\n }\n }\n\n render() {\n var app = this.application \|\| {}\n\n return html`\n <div>\n <h2><md-icon>apps</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n <div icon>\n <img src=${app.icon} />\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">app name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n </div>\n\n <div field grid-span>\n <label for=\"type-selector\">type</label>\n <select id=\"type-selector\" name=\"type\">\n ${APPLICATION_TYPES.map(\n type =>\n html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`\n )}\n </select>\n </div>\n\n <div field grid-span>\n <label for=\"url\">application URL</label>\n <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirect URL</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n </div>\n\n <div field grid-span>\n <label for=\"webhook\">webhook</label>\n <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n </div>\n\n <div field grid-span>\n <label for=\"available-scopes\">available-scopes</label>\n <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"auth-url\">auth URL</label>\n <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n The endpoint for authorization server. This is used to get the authorization code.\n </div>\n\n <div field grid-span>\n <label for=\"access-token-url\">access token URL</label>\n <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n The endpoint for authentication server. This is used to exchange the authorization code for an access\n token.\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-key\">appKey</label>\n <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n </div>\n\n <div field grid-span>\n <label for=\"app-secret\">appSecret</label>\n <input id=\"app-secret\" type=\"text\" .value=${app.appSecret} readonly />\n <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}\n >copy</md-text-button\n >\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"button-container\">\n <button danger @click=${this.deleteApplication.bind(this)}>\n <md-icon>delete_forever</md-icon>delete this app\n </button>\n <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>\n <button><md-icon>passkey</md-icon>generate new secret</button>\n </div>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchApplication()\n }\n }\n\n async fetchApplication() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n application(id: $id) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n authUrl\n accessTokenUrl\n webhook\n availableScopes\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.application = response.data.application\n }\n\n async updateApplication(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: ApplicationPatch!) {\n updateApplication(id: $id, patch: $patch) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n webhook\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.application = { ...this.application, ...response.data.updateApplication }\n console.log('update sucess')\n }\n }\n\n async deleteApplication(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteApplication(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteApplication\n if (result) {\n console.log('delete sucess')\n navigate('applications')\n } else {\n console.error('delete fail')\n }\n }\n}\n"]}

package/dist-client/pages/application/register.js CHANGED Viewed

@@ -142,7 +142,7 @@ ApplicationRegister.styles = [
       }
       [form-container] {
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         padding: var(--padding-wide);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);

package/dist-client/pages/application/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/application/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAqGxD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,0BAA0B;YACjC,IAAI,EAAE,kBAAkB;SACzB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;QAQP,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,KAAK;;WAExB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2BiD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;mDAQhD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI/E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACtF,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACxB,OAAO,WAAW,CAAA;QACpB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,WAAW;aACZ;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;SAC9B;aAAM;YACL,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAA;YAC7C,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;SAC9B;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QACpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;SAClB;IACH,CAAC;;AAvMM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAiB;AAE5C;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;iDAAA;AAErC;IAAC,KAAK,EAAE;;kDAAe;AAnGnB,mBAAmB;IADxB,aAAa,CAAC,sBAAsB,CAAC;GAChC,mBAAmB,CAyMxB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('application-register')\nclass ApplicationRegister extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n\n position: relative;\n\n overflow: auto;\n }\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n img[pagedeco] {\n width: 150px;\n margin: 0 var(--margin-wide);\n float: left;\n position: relative;\n top: -20px;\n }\n\n [form-container] {\n background-color: var(--~~theme~~-~~white~~-color);\n padding: var(--padding-wide);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n max-width: var(--input-container-max-width);\n position: relative;\n top: -50px;\n clear: both;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus {\n outline: none;\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n }\n [grid-span] {\n grid-column: span 2;\n }\n @media screen and (max-width: 480px) {\n img[pagedeco] {\n display: none;\n }\n [form-container] {\n position: initial;\n }\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n\n @query('form') form!: HTMLFormElement\n\n @state() _icon?: string\n\n get context() {\n return {\n title: `application registration`,\n help: 'auth/application'\n }\n }\n\n render() {\n return html`\n <img src=\"/assets/images/image-api.png\" pagedeco />\n <h2>Register new application</h2>\n <p page-description>\n You can register new application here.<br />\n What type of app are you building? Choose the app type that best suits the audience you’re building for.\n </p>\n\n ${this._icon\n ? html`\n <div icon>\n <img src=${this._icon} />\n </div>\n `\n : html``}\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field grid-span>\n <label for=\"app-url\">application url</label>\n <input id=\"app-url\" type=\"text\" name=\"url\" />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirectUrl</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">application icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" />\n </div>\n\n <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>\n </div>\n </form>\n </div>\n `\n }\n\n async createApplication(e) {\n e.preventDefault()\n\n const formData = new FormData(this.form)\n\n const application = Array.from(formData.entries()).reduce((application, [key, value]) => {\n application[key] = value\n return application\n }, {})\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($application: NewApplication!) {\n createApplication(application: $application) {\n id\n }\n }\n `,\n variables: {\n application\n }\n })\n\n if (response.errors) {\n console.log('creation fail.')\n } else {\n const id = response.data.createApplication.id\n navigate(`application/${id}`)\n }\n }\n\n pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.form.reset()\n }\n }\n}\n"]}
1	+ {"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/application/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAqGxD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,0BAA0B;YACjC,IAAI,EAAE,kBAAkB;SACzB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;QAQP,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,KAAK;;WAExB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2BiD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;mDAQhD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI/E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACtF,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACxB,OAAO,WAAW,CAAA;QACpB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,WAAW;aACZ;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;SAC9B;aAAM;YACL,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAA;YAC7C,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;SAC9B;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QACpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;SAClB;IACH,CAAC;;AAvMM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAiB;AAE5C;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;iDAAA;AAErC;IAAC,KAAK,EAAE;;kDAAe;AAnGnB,mBAAmB;IADxB,aAAa,CAAC,sBAAsB,CAAC;GAChC,mBAAmB,CAyMxB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('application-register')\nclass ApplicationRegister extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n\n position: relative;\n\n overflow: auto;\n }\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n img[pagedeco] {\n width: 150px;\n margin: 0 var(--margin-wide);\n float: left;\n position: relative;\n top: -20px;\n }\n\n [form-container] {\n background-color: var(--md-sys-color-surface);\n padding: var(--padding-wide);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n max-width: var(--input-container-max-width);\n position: relative;\n top: -50px;\n clear: both;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus {\n outline: none;\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n }\n [grid-span] {\n grid-column: span 2;\n }\n @media screen and (max-width: 480px) {\n img[pagedeco] {\n display: none;\n }\n [form-container] {\n position: initial;\n }\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n\n @query('form') form!: HTMLFormElement\n\n @state() _icon?: string\n\n get context() {\n return {\n title: `application registration`,\n help: 'auth/application'\n }\n }\n\n render() {\n return html`\n <img src=\"/assets/images/image-api.png\" pagedeco />\n <h2>Register new application</h2>\n <p page-description>\n You can register new application here.<br />\n What type of app are you building? Choose the app type that best suits the audience you’re building for.\n </p>\n\n ${this._icon\n ? html`\n <div icon>\n <img src=${this._icon} />\n </div>\n `\n : html``}\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field grid-span>\n <label for=\"app-url\">application url</label>\n <input id=\"app-url\" type=\"text\" name=\"url\" />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirectUrl</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">application icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" />\n </div>\n\n <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>\n </div>\n </form>\n </div>\n `\n }\n\n async createApplication(e) {\n e.preventDefault()\n\n const formData = new FormData(this.form)\n\n const application = Array.from(formData.entries()).reduce((application, [key, value]) => {\n application[key] = value\n return application\n }, {})\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($application: NewApplication!) {\n createApplication(application: $application) {\n id\n }\n }\n `,\n variables: {\n application\n }\n })\n\n if (response.errors) {\n console.log('creation fail.')\n } else {\n const id = response.data.createApplication.id\n navigate(`application/${id}`)\n }\n }\n\n pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.form.reset()\n }\n }\n}\n"]}

package/dist-client/themes/auth-theme.css CHANGED Viewed

@@ -1,6 +1,6 @@
 body {
   /* login page style*/
-  --auth-background: var(--primary-color);
+  --auth-background: var(--md-sys-color-primary);
   --auth-brand-name: bold 20px var(--theme-font);
   --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   --auth-brand-welcome-msg: normal 12px var(--theme-font);
@@ -16,7 +16,7 @@ body {
   --auth-input-border-light: 1px solid var(--opacity-light-color);
   --auth-input-color: var(--theme-white-color);
-  --auth-button-background-color: var(--theme-white-color);
+  --auth-button-background-color: var(--md-sys-color-surface-variant);
   --auth-button-background-focus-color: var(--status-success-color);
   --auth-button-font: bold 20px var(--theme-font);
   --auth-button-padding: 9px 12px 7px 12px;
@@ -44,7 +44,7 @@ body {
   /* domain select page style*/
   --checkin-background-color: var(--md-sys-color-background);
   --checkin-header-height: 45px;
-  --checkin-header-background-color: var(--primary-color);
+  --checkin-header-background-color: var(--md-sys-color-primary);
   --checkin-header-title-font: bold 19px var(--theme-font);
   --checkin-header-title-color: var(--theme-white-color);
   --checkin-wrap-max-width: 500px;