@things-factory/auth-ui 9.0.0-beta.8 → 9.0.0

package/dist-client/entries/auth/result.js

@@ -7,65 +7,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { isSafari } from '@operato/utils';
 let AuthResult = class AuthResult extends localize(i18next)(LitElement) {
-    updated(changed) {
-        if (changed.has('data')) {
-            this.message = this.data.message;
-            this.resultType = this.data.resultType || 'congratulations';
-        }
-    }
-    render() {
-        var { icon, title, description } = this.applicationMeta;
-        return html `
-      <div class="wrap ${this.resultType}">
-        <div class="auth-brand">
-          <img src=${icon} />
-          <strong class="name">${title}</strong>
-          <span class="welcome-msg">${description}</span>
-        </div>
-
-        <div id="message-area">
-          <h1>${this.message || ''}</h1>
-
-          <!--description message container-->
-          <p></p>
-        </div>
-        <div id="button-area">
-          <md-elevated-button
-            @click=${e => {
-            window.location.replace('/auth/signin');
-        }}
-          >
-            <md-icon slot="icon">home</md-icon>
-            ${i18next.t('button.go to home')}
-          </md-elevated-button>
-        </div>
-
-        ${isSafari()
-            ? html ``
-            : html `
-              <div class="lottie-container">
-                <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
-              </div>
-            `}
-      </div>
-    `;
-    }
-    get applicationMeta() {
-        if (!this._applicationMeta) {
-            var iconLink = document.querySelector('link[rel="application-icon"]');
-            var titleMeta = document.querySelector('meta[name="application-name"]');
-            var descriptionMeta = document.querySelector('meta[name="application-description"]');
-            this._applicationMeta = {
-                icon: iconLink === null || iconLink === void 0 ? void 0 : iconLink.href,
-                title: titleMeta ? titleMeta.content : 'Things Factory',
-                description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-            };
-        }
-        return this._applicationMeta;
-    }
-};
-AuthResult.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: flex;
         width: 100vw;
@@ -174,7 +117,64 @@ AuthResult.styles = [
         }
       }
     `
-];
+    ]; }
+    updated(changed) {
+        if (changed.has('data')) {
+            this.message = this.data.message;
+            this.resultType = this.data.resultType || 'congratulations';
+        }
+    }
+    render() {
+        var { icon, title, description } = this.applicationMeta;
+        return html `
+      <div class="wrap ${this.resultType}">
+        <div class="auth-brand">
+          <img src=${icon} />
+          <strong class="name">${title}</strong>
+          <span class="welcome-msg">${description}</span>
+        </div>
+
+        <div id="message-area">
+          <h1>${this.message || ''}</h1>
+
+          <!--description message container-->
+          <p></p>
+        </div>
+        <div id="button-area">
+          <md-elevated-button
+            @click=${e => {
+            window.location.replace('/auth/signin');
+        }}
+          >
+            <md-icon slot="icon">home</md-icon>
+            ${i18next.t('button.go to home')}
+          </md-elevated-button>
+        </div>
+
+        ${isSafari()
+            ? html ``
+            : html `
+              <div class="lottie-container">
+                <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
+              </div>
+            `}
+      </div>
+    `;
+    }
+    get applicationMeta() {
+        if (!this._applicationMeta) {
+            var iconLink = document.querySelector('link[rel="application-icon"]');
+            var titleMeta = document.querySelector('meta[name="application-name"]');
+            var descriptionMeta = document.querySelector('meta[name="application-description"]');
+            this._applicationMeta = {
+                icon: iconLink?.href,
+                title: titleMeta ? titleMeta.content : 'Things Factory',
+                description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
+            };
+        }
+        return this._applicationMeta;
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/entries/auth/result.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAuH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;QAC7D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAlLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4GF;CACF,AA9GY,CA8GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAnHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoLtB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n      }\n      .wrap {\n        display: block;\n        width: 450px;\n        min-width: 350px;\n        margin: 0 auto;\n        text-align: center;\n      }\n      .auth-brand {\n        color: #fff;\n      }\n      .auth-brand img {\n        margin: 15% auto 5px auto;\n        width: 100px;\n        border: 3px solid var(--md-sys-color-on-primary);\n        border-radius: 25px;\n        box-shadow: var(--box-shadow);\n      }\n      .name {\n        display: block;\n        font: var(--auth-brand-name);\n        text-shadow: var(--auth-brand-name-shadow);\n      }\n      h1 {\n        margin: 50px 0 0 0;\n        padding: 0;\n        font-size: 24px;\n        color: var(--auth-title-color, var(--md-sys-color-on-primary));\n      }\n      p {\n        margin: 0;\n        padding: var(--auth-description-padding);\n        font: var(--auth-description-font);\n        color: var(--auth-description-color, var(--md-sys-color-on-secondary));\n      }\n      :host *:focus {\n        outline: none;\n      }\n      .user {\n        background: url(/assets/images/icon-profile.png) center top no-repeat;\n        margin: var(--profile-icon-margin);\n        padding: 180px 20px 20px 20px;\n        color: var(--md-sys-color-secondary);\n        font: var(--header-bar-title);\n        text-align: center;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n\n      #button-area {\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        padding-top: 10px;\n      }\n\n      md-elevated-button {\n        --md-button-horizontal-padding: var(--spacing-medium);\n        --md-button-ink-color: var(--md-sys-color-primary);\n      }\n\n      .lottie-container {\n        width: 100%;\n        height: 300px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n      .lottie-container lottie-player {\n        position: absolute;\n        bottom: -6%;\n        width: 100%;\n        height: auto;\n      }\n\n      @media (max-width: 450px) {\n        .wrap {\n          width: 85%;\n          min-width: 320px;\n          padding-bottom: 100px;\n        }\n        .auth-form {\n          grid-template-columns: 1fr;\n        }\n        .auth-brand img {\n          margin: 12% auto 5px auto;\n          width: 75px;\n        }\n        .lottie-container {\n          overflow: hidden;\n          height: 200px;\n          pointer-events: none;\n        }\n        .lottie-container lottie-player {\n          width: 1200px;\n          left: -30%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: String }) resultType?: string\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.message = this.data.message\n      this.resultType = this.data.resultType || 'congratulations'\n    }\n  }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"wrap ${this.resultType}\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div id=\"message-area\">\n          <h1>${this.message || ''}</h1>\n\n          <!--description message container-->\n          <p></p>\n        </div>\n        <div id=\"button-area\">\n          <md-elevated-button\n            @click=${e => {\n              window.location.replace('/auth/signin')\n            }}\n          >\n            <md-icon slot=\"icon\">home</md-icon>\n            ${i18next.t('button.go to home')}\n          </md-elevated-button>\n        </div>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACpD,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4GF;KACF,AA9GY,CA8GZ;IAQD,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;QAC7D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,EAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAlE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAnHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoLtB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n      }\n      .wrap {\n        display: block;\n        width: 450px;\n        min-width: 350px;\n        margin: 0 auto;\n        text-align: center;\n      }\n      .auth-brand {\n        color: #fff;\n      }\n      .auth-brand img {\n        margin: 15% auto 5px auto;\n        width: 100px;\n        border: 3px solid var(--md-sys-color-on-primary);\n        border-radius: 25px;\n        box-shadow: var(--box-shadow);\n      }\n      .name {\n        display: block;\n        font: var(--auth-brand-name);\n        text-shadow: var(--auth-brand-name-shadow);\n      }\n      h1 {\n        margin: 50px 0 0 0;\n        padding: 0;\n        font-size: 24px;\n        color: var(--auth-title-color, var(--md-sys-color-on-primary));\n      }\n      p {\n        margin: 0;\n        padding: var(--auth-description-padding);\n        font: var(--auth-description-font);\n        color: var(--auth-description-color, var(--md-sys-color-on-secondary));\n      }\n      :host *:focus {\n        outline: none;\n      }\n      .user {\n        background: url(/assets/images/icon-profile.png) center top no-repeat;\n        margin: var(--profile-icon-margin);\n        padding: 180px 20px 20px 20px;\n        color: var(--md-sys-color-secondary);\n        font: var(--header-bar-title);\n        text-align: center;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n\n      #button-area {\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        padding-top: 10px;\n      }\n\n      md-elevated-button {\n        --md-button-horizontal-padding: var(--spacing-medium);\n        --md-button-ink-color: var(--md-sys-color-primary);\n      }\n\n      .lottie-container {\n        width: 100%;\n        height: 300px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n      .lottie-container lottie-player {\n        position: absolute;\n        bottom: -6%;\n        width: 100%;\n        height: auto;\n      }\n\n      @media (max-width: 450px) {\n        .wrap {\n          width: 85%;\n          min-width: 320px;\n          padding-bottom: 100px;\n        }\n        .auth-form {\n          grid-template-columns: 1fr;\n        }\n        .auth-brand img {\n          margin: 12% auto 5px auto;\n          width: 75px;\n        }\n        .lottie-container {\n          overflow: hidden;\n          height: 200px;\n          pointer-events: none;\n        }\n        .lottie-container lottie-player {\n          width: 1200px;\n          left: -30%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: String }) resultType?: string\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.message = this.data.message\n      this.resultType = this.data.resultType || 'congratulations'\n    }\n  }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"wrap ${this.resultType}\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div id=\"message-area\">\n          <h1>${this.message || ''}</h1>\n\n          <!--description message container-->\n          <p></p>\n        </div>\n        <div id=\"button-area\">\n          <md-elevated-button\n            @click=${e => {\n              window.location.replace('/auth/signin')\n            }}\n          >\n            <md-icon slot=\"icon\">home</md-icon>\n            ${i18next.t('button.go to home')}\n          </md-elevated-button>\n        </div>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

package/dist-client/entries/oauth2/oauth2-decision-error-page.js

@@ -38,13 +38,12 @@ let OAuth2DecisionErrorPage = class OAuth2DecisionErrorPage extends LitElement {
     `;
     }
     updated(changedProps) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (changedProps.has('data')) {
-            this.user = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.oauth2) === null || _b === void 0 ? void 0 : _b.user) || this.user;
-            this.domain = ((_c = this.data) === null || _c === void 0 ? void 0 : _c.domain) || this.domain;
-            this.req = ((_e = (_d = this.data) === null || _d === void 0 ? void 0 : _d.oauth2) === null || _e === void 0 ? void 0 : _e.req) || this.req;
-            this.redirectURI = ((_g = (_f = this.data) === null || _f === void 0 ? void 0 : _f.oauth2) === null || _g === void 0 ? void 0 : _g.redirectURI) || this.redirectURI;
-            this.transactionID = ((_j = (_h = this.data) === null || _h === void 0 ? void 0 : _h.oauth2) === null || _j === void 0 ? void 0 : _j.transactionID) || this.transactionID;
+            this.user = this.data?.oauth2?.user || this.user;
+            this.domain = this.data?.domain || this.domain;
+            this.req = this.data?.oauth2?.req || this.req;
+            this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI;
+            this.transactionID = this.data?.oauth2?.transactionID || this.transactionID;
         }
     }
 };

package/dist-client/entries/oauth2/oauth2-decision-error-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth2-decision-error-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-error-page.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAC8B,SAAI,GAAQ,EAAE,CAAA;QACd,SAAI,GAAQ,EAAE,CAAA;QACd,WAAM,GAAQ,EAAE,CAAA;QAChB,QAAG,GAAQ,EAAE,CAAA;QACb,gBAAW,GAAW,EAAE,CAAA;QACxB,kBAAa,GAAW,EAAE,CAAA;IAqCxD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,IAAI,CAAC,IAAI;;;;oBAIR,IAAI,CAAC,MAAM,CAAC,SAAS;mCACN,IAAI,CAAC,GAAG,CAAC,QAAQ;0BAC1B,IAAI,CAAC,WAAW;mBACvB,IAAI,CAAC,GAAG,CAAC,KAAK;;;8CAGa,IAAI,CAAC,aAAa;qDACX,IAAI,CAAC,MAAM,CAAC,SAAS;sCACpC,IAAI,CAAC,GAAG,CAAC,QAAQ;qCAClB,IAAI,CAAC,GAAG,CAAC,KAAK;iDACF,IAAI,CAAC,GAAG,CAAC,KAAK;iDACd,IAAI,CAAC,IAAI,CAAC,KAAK;;6CAEnB,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;;KAE5D,CAAA;IACH,CAAC;IAED,OAAO,CAAC,YAAY;;QAClB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,IAAI,KAAI,IAAI,CAAC,IAAI,CAAA;YAChD,IAAI,CAAC,MAAM,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,IAAI,CAAC,MAAM,CAAA;YAC9C,IAAI,CAAC,GAAG,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,GAAG,KAAI,IAAI,CAAC,GAAG,CAAA;YAC7C,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,WAAW,KAAI,IAAI,CAAC,WAAW,CAAA;YACrE,IAAI,CAAC,aAAa,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,aAAa,KAAI,IAAI,CAAC,aAAa,CAAA;QAC7E,CAAC;IACH,CAAC;CACF,CAAA;AA1C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AANlD,uBAAuB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GACjC,uBAAuB,CA2C5B","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('oauth2-decision-error')\nclass OAuth2DecisionErrorPage extends LitElement {\n  @property({ type: Object }) data: any = {}\n  @property({ type: Object }) user: any = {}\n  @property({ type: Object }) domain: any = {}\n  @property({ type: Object }) req: any = {}\n  @property({ type: String }) redirectURI: string = ''\n  @property({ type: String }) transactionID: string = ''\n\n  render() {\n    return html`\n      <h2>Application Binding Error</h2>\n\n      <p>Hi ${this.user.name}!</p>\n      <p><b>Application Not Found</b></p>\n      <p>You better check you give a correct client id (appKey)</p>\n\n      <p>Company: ${this.domain.subdomain}</p>\n      <p>Application Client ID : ${this.req.clientID}</p>\n      <p>Redirect URI : ${this.redirectURI}</p>\n      <p>State : ${this.req.state}</p>\n\n      <form>\n        <input name=\"transaction_id\" value=\"${this.transactionID}\" hidden />\n        <input name=\"subdomain\" type=\"text\" value=\"${this.domain.subdomain}\" hidden />\n        <input name=\"appKey\" value=\"${this.req.clientID}\" hidden />\n        <input name=\"scope\" value=\"${this.req.scope}\" hidden />\n        <input name=\"state\" type=\"text\" value=\"${this.req.state}\" hidden />\n        <input name=\"email\" type=\"text\" value=\"${this.user.email}\" hidden />\n\n        <md-elevated-button raised @click=\"${() => history.back()}\">Move back</md-elevated-button>\n      </form>\n    `\n  }\n\n  updated(changedProps) {\n    if (changedProps.has('data')) {\n      this.user = this.data?.oauth2?.user || this.user\n      this.domain = this.data?.domain || this.domain\n      this.req = this.data?.oauth2?.req || this.req\n      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n    }\n  }\n}\n"]}
+{"version":3,"file":"oauth2-decision-error-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-error-page.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAC8B,SAAI,GAAQ,EAAE,CAAA;QACd,SAAI,GAAQ,EAAE,CAAA;QACd,WAAM,GAAQ,EAAE,CAAA;QAChB,QAAG,GAAQ,EAAE,CAAA;QACb,gBAAW,GAAW,EAAE,CAAA;QACxB,kBAAa,GAAW,EAAE,CAAA;IAqCxD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,IAAI,CAAC,IAAI;;;;oBAIR,IAAI,CAAC,MAAM,CAAC,SAAS;mCACN,IAAI,CAAC,GAAG,CAAC,QAAQ;0BAC1B,IAAI,CAAC,WAAW;mBACvB,IAAI,CAAC,GAAG,CAAC,KAAK;;;8CAGa,IAAI,CAAC,aAAa;qDACX,IAAI,CAAC,MAAM,CAAC,SAAS;sCACpC,IAAI,CAAC,GAAG,CAAC,QAAQ;qCAClB,IAAI,CAAC,GAAG,CAAC,KAAK;iDACF,IAAI,CAAC,GAAG,CAAC,KAAK;iDACd,IAAI,CAAC,IAAI,CAAC,KAAK;;6CAEnB,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;;KAE5D,CAAA;IACH,CAAC;IAED,OAAO,CAAC,YAAY;QAClB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,CAAA;YAChD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAA;YAC9C,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAA;YAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,CAAA;YACrE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,IAAI,IAAI,CAAC,aAAa,CAAA;QAC7E,CAAC;IACH,CAAC;CACF,CAAA;AA1C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AANlD,uBAAuB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GACjC,uBAAuB,CA2C5B","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('oauth2-decision-error')\nclass OAuth2DecisionErrorPage extends LitElement {\n  @property({ type: Object }) data: any = {}\n  @property({ type: Object }) user: any = {}\n  @property({ type: Object }) domain: any = {}\n  @property({ type: Object }) req: any = {}\n  @property({ type: String }) redirectURI: string = ''\n  @property({ type: String }) transactionID: string = ''\n\n  render() {\n    return html`\n      <h2>Application Binding Error</h2>\n\n      <p>Hi ${this.user.name}!</p>\n      <p><b>Application Not Found</b></p>\n      <p>You better check you give a correct client id (appKey)</p>\n\n      <p>Company: ${this.domain.subdomain}</p>\n      <p>Application Client ID : ${this.req.clientID}</p>\n      <p>Redirect URI : ${this.redirectURI}</p>\n      <p>State : ${this.req.state}</p>\n\n      <form>\n        <input name=\"transaction_id\" value=\"${this.transactionID}\" hidden />\n        <input name=\"subdomain\" type=\"text\" value=\"${this.domain.subdomain}\" hidden />\n        <input name=\"appKey\" value=\"${this.req.clientID}\" hidden />\n        <input name=\"scope\" value=\"${this.req.scope}\" hidden />\n        <input name=\"state\" type=\"text\" value=\"${this.req.state}\" hidden />\n        <input name=\"email\" type=\"text\" value=\"${this.user.email}\" hidden />\n\n        <md-elevated-button raised @click=\"${() => history.back()}\">Move back</md-elevated-button>\n      </form>\n    `\n  }\n\n  updated(changedProps) {\n    if (changedProps.has('data')) {\n      this.user = this.data?.oauth2?.user || this.user\n      this.domain = this.data?.domain || this.domain\n      this.req = this.data?.oauth2?.req || this.req\n      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n    }\n  }\n}\n"]}

package/dist-client/entries/oauth2/oauth2-decision-page.js

@@ -20,6 +20,57 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
         this.transactionID = '';
         this.roles = [];
     }
+    static { this.styles = [
+        ButtonContainerStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        border: 1px solid var(--md-sys-color-primary);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        font: normal 15px var(--theme-font);
+        color: var(--md-sys-color-secondary);
+      }
+
+      [field-2column] {
+        border-radius: var(--border-radius);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 5px 15px;
+        clear: both;
+        max-width: var(--input-container-max-width);
+      }
+
+      [field] {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: var(--spacing-medium);
+      }
+
+      input {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        min-width: 250px;
+        font: var(--input-font);
+      }
+
+      label {
+        display: flex;
+        flex-direction: column;
+        font: var(--label-font);
+        color: var(--label-color, var(--md-sys-color-on-surface));
+        text-transform: var(--label-text-transform);
+      }
+
+      md-elevated-button {
+        margin-right: var(--spacing-small);
+      }
+    `
+    ]; }
     render() {
         return html `
       <h2>Application Binding</h2>
@@ -65,18 +116,16 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
         this.fetchMyRoles();
     }
     updated(changedProps) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (changedProps.has('data')) {
-            this.user = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.oauth2) === null || _b === void 0 ? void 0 : _b.user) || this.user;
-            this.client = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.oauth2) === null || _d === void 0 ? void 0 : _d.client) || this.client;
-            this.domain = ((_e = this.data) === null || _e === void 0 ? void 0 : _e.domain) || this.domain;
-            this.req = ((_g = (_f = this.data) === null || _f === void 0 ? void 0 : _f.oauth2) === null || _g === void 0 ? void 0 : _g.req) || this.req;
-            this.redirectURI = ((_j = (_h = this.data) === null || _h === void 0 ? void 0 : _h.oauth2) === null || _j === void 0 ? void 0 : _j.redirectURI) || this.redirectURI;
-            this.transactionID = ((_l = (_k = this.data) === null || _k === void 0 ? void 0 : _k.oauth2) === null || _l === void 0 ? void 0 : _l.transactionID) || this.transactionID;
+            this.user = this.data?.oauth2?.user || this.user;
+            this.client = this.data?.oauth2?.client || this.client;
+            this.domain = this.data?.domain || this.domain;
+            this.req = this.data?.oauth2?.req || this.req;
+            this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI;
+            this.transactionID = this.data?.oauth2?.transactionID || this.transactionID;
         }
     }
     async fetchMyRoles() {
-        var _a;
         const response = await client.query({
             query: gql `
         query myRoles {
@@ -88,13 +137,13 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
         }
       `
         });
-        if (!((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!response.errors?.length) {
             this.roles = response.data.myRoles;
         }
     }
     async decision(allowOrCancel) {
         const selectedRoles = this.selectedRoles();
-        if (allowOrCancel && !(selectedRoles === null || selectedRoles === void 0 ? void 0 : selectedRoles.length)) {
+        if (allowOrCancel && !selectedRoles?.length) {
             await OxPrompt.open({
                 title: i18next.t('title.nothing selected'),
                 text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),
@@ -131,57 +180,6 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
         return this.roleSelector.selectedRoles();
     }
 };
-OAuth2DecisionPage.styles = [
-    ButtonContainerStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-primary);
-        margin: var(--spacing-medium);
-        padding: var(--spacing-medium);
-        font: normal 15px var(--theme-font);
-        color: var(--md-sys-color-secondary);
-      }
-
-      [field-2column] {
-        border-radius: var(--border-radius);
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 5px 15px;
-        clear: both;
-        max-width: var(--input-container-max-width);
-      }
-
-      [field] {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: var(--spacing-medium);
-      }
-
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        min-width: 250px;
-        font: var(--input-font);
-      }
-
-      label {
-        display: flex;
-        flex-direction: column;
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-
-      md-elevated-button {
-        margin-right: var(--spacing-small);
-      }
-    `
-];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/entries/oauth2/oauth2-decision-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../../components/role-selector.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        border: 1px solid var(--md-sys-color-primary);\n        margin: var(--spacing-medium);\n        padding: var(--spacing-medium);\n        font: normal 15px var(--theme-font);\n        color: var(--md-sys-color-secondary);\n      }\n\n      [field-2column] {\n        border-radius: var(--border-radius);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 5px 15px;\n        clear: both;\n        max-width: var(--input-container-max-width);\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n        padding-bottom: var(--spacing-medium);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        min-width: 250px;\n        font: var(--input-font);\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      md-elevated-button {\n        margin-right: var(--spacing-small);\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any = {}\n  @property({ type: Object }) user: any = {}\n  @property({ type: Object }) client: any = {}\n  @property({ type: Object }) domain: any = {}\n  @property({ type: Object }) req: any = {}\n  @property({ type: String }) redirectURI: string = ''\n  @property({ type: String }) transactionID: string = ''\n  @property({ type: Array }) roles: any[] = []\n\n  @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n  render() {\n    return html`\n      <h2>Application Binding</h2>\n      <p>Hi ${this.user.name}!</p>\n      <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n      <p>Do you approve?</p>\n\n      <form field-2column>\n        <div field>\n          <label\n            >${i18next.t('label.company')}\n            <input readonly value=\"${this.domain.subdomain}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.client-id')}\n            <input readonly value=\"${this.req.clientID}\" />\n          </label>\n        </div>\n\n        <div field>\n          <label\n            >${i18next.t('label.redirect_uri')}\n            <input readonly value=\"${this.redirectURI}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.state')}\n            <input readonly value=\"${this.req.state}\" />\n          </label>\n        </div>\n      </form>\n\n      <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></md-elevated-button>\n        <md-elevated-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></md-elevated-button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.fetchMyRoles()\n  }\n\n  updated(changedProps) {\n    if (changedProps.has('data')) {\n      this.user = this.data?.oauth2?.user || this.user\n      this.client = this.data?.oauth2?.client || this.client\n      this.domain = this.data?.domain || this.domain\n      this.req = this.data?.oauth2?.req || this.req\n      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n    }\n  }\n\n  async fetchMyRoles() {\n    const response = await client.query({\n      query: gql`\n        query myRoles {\n          myRoles {\n            id\n            name\n            description\n          }\n        }\n      `\n    })\n\n    if (!response.errors?.length) {\n      this.roles = response.data.myRoles\n    }\n  }\n\n  async decision(allowOrCancel) {\n    const selectedRoles = this.selectedRoles()\n    if (allowOrCancel && !selectedRoles?.length) {\n      await OxPrompt.open({\n        title: i18next.t('title.nothing selected'),\n        text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      return\n    }\n\n    let data: any = {\n      transaction_id: this.transactionID,\n      subdomain: this.domain.subdomain,\n      appKey: this.req.clientID,\n      state: this.req.state,\n      email: this.user.email,\n      scopes: selectedRoles\n    }\n    if (!allowOrCancel) {\n      data.cancel = 'Deny'\n    }\n\n    const response = await fetch('/oauth/decision', {\n      method: 'POST',\n      mode: 'cors',\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json'\n      },\n      redirect: 'follow',\n      body: JSON.stringify(data)\n    })\n\n    if (response.redirected) {\n      location.href = response.url\n    }\n  }\n\n  selectedRoles() {\n    return this.roleSelector.selectedRoles()\n  }\n}\n"]}
+{"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,mCAAmC,CAAA;AAE1C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAGvD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAqD8B,SAAI,GAAQ,EAAE,CAAA;QACd,SAAI,GAAQ,EAAE,CAAA;QACd,WAAM,GAAQ,EAAE,CAAA;QAChB,WAAM,GAAQ,EAAE,CAAA;QAChB,QAAG,GAAQ,EAAE,CAAA;QACb,gBAAW,GAAW,EAAE,CAAA;QACxB,kBAAa,GAAW,EAAE,CAAA;QAC3B,UAAK,GAAU,EAAE,CAAA;IA0H9C,CAAC;aArLQ,WAAM,GAAG;QACd,qBAAqB;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CF;KACF,AAlDY,CAkDZ;IAaD,MAAM;QACJ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,IAAI,CAAC,IAAI;eACb,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;eAMhB,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;qCACJ,IAAI,CAAC,MAAM,CAAC,SAAS;;;;eAI3C,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;qCACN,IAAI,CAAC,GAAG,CAAC,QAAQ;;;;;;eAMvC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;qCACT,IAAI,CAAC,WAAW;;;;eAItC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;qCACF,IAAI,CAAC,GAAG,CAAC,KAAK;;;;;sCAKb,IAAI,CAAC,MAAM,CAAC,IAAI,aAAa,IAAI,CAAC,KAAK;;;sCAGvC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;sCACzB,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;KAE3D,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,OAAO,CAAC,YAAY;QAClB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,CAAA;YAChD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAA;YACtD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAA;YAC9C,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAA;YAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,CAAA;YACrE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,IAAI,IAAI,CAAC,aAAa,CAAA;QAC7E,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQT;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAA;QACpC,CAAC;IACH,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,aAAa;QAC1B,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QAC1C,IAAI,aAAa,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;YAC5C,MAAM,QAAQ,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;gBAC1C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,sCAAsC,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC;gBACvF,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;aACrD,CAAC,CAAA;YAEF,OAAM;QACR,CAAC;QAED,IAAI,IAAI,GAAQ;YACd,cAAc,EAAE,IAAI,CAAC,aAAa;YAClC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS;YAChC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ;YACzB,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK;YACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK;YACtB,MAAM,EAAE,aAAa;SACtB,CAAA;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,iBAAiB,EAAE;YAC9C,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,SAAS;YACtB,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;aACnC;YACD,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SAC3B,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,CAAA;IAC1C,CAAC;;AAhI2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAA2B;AAC3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iDAAkB;AAEpB;IAAvB,KAAK,CAAC,eAAe,CAAC;;wDAA4D;AA9D/E,kBAAkB;IADvB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,kBAAkB,CAsLvB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../../components/role-selector.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        border: 1px solid var(--md-sys-color-primary);\n        margin: var(--spacing-medium);\n        padding: var(--spacing-medium);\n        font: normal 15px var(--theme-font);\n        color: var(--md-sys-color-secondary);\n      }\n\n      [field-2column] {\n        border-radius: var(--border-radius);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 5px 15px;\n        clear: both;\n        max-width: var(--input-container-max-width);\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n        padding-bottom: var(--spacing-medium);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        min-width: 250px;\n        font: var(--input-font);\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      md-elevated-button {\n        margin-right: var(--spacing-small);\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any = {}\n  @property({ type: Object }) user: any = {}\n  @property({ type: Object }) client: any = {}\n  @property({ type: Object }) domain: any = {}\n  @property({ type: Object }) req: any = {}\n  @property({ type: String }) redirectURI: string = ''\n  @property({ type: String }) transactionID: string = ''\n  @property({ type: Array }) roles: any[] = []\n\n  @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n  render() {\n    return html`\n      <h2>Application Binding</h2>\n      <p>Hi ${this.user.name}!</p>\n      <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n      <p>Do you approve?</p>\n\n      <form field-2column>\n        <div field>\n          <label\n            >${i18next.t('label.company')}\n            <input readonly value=\"${this.domain.subdomain}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.client-id')}\n            <input readonly value=\"${this.req.clientID}\" />\n          </label>\n        </div>\n\n        <div field>\n          <label\n            >${i18next.t('label.redirect_uri')}\n            <input readonly value=\"${this.redirectURI}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.state')}\n            <input readonly value=\"${this.req.state}\" />\n          </label>\n        </div>\n      </form>\n\n      <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></md-elevated-button>\n        <md-elevated-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></md-elevated-button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.fetchMyRoles()\n  }\n\n  updated(changedProps) {\n    if (changedProps.has('data')) {\n      this.user = this.data?.oauth2?.user || this.user\n      this.client = this.data?.oauth2?.client || this.client\n      this.domain = this.data?.domain || this.domain\n      this.req = this.data?.oauth2?.req || this.req\n      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n    }\n  }\n\n  async fetchMyRoles() {\n    const response = await client.query({\n      query: gql`\n        query myRoles {\n          myRoles {\n            id\n            name\n            description\n          }\n        }\n      `\n    })\n\n    if (!response.errors?.length) {\n      this.roles = response.data.myRoles\n    }\n  }\n\n  async decision(allowOrCancel) {\n    const selectedRoles = this.selectedRoles()\n    if (allowOrCancel && !selectedRoles?.length) {\n      await OxPrompt.open({\n        title: i18next.t('title.nothing selected'),\n        text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      return\n    }\n\n    let data: any = {\n      transaction_id: this.transactionID,\n      subdomain: this.domain.subdomain,\n      appKey: this.req.clientID,\n      state: this.req.state,\n      email: this.user.email,\n      scopes: selectedRoles\n    }\n    if (!allowOrCancel) {\n      data.cancel = 'Deny'\n    }\n\n    const response = await fetch('/oauth/decision', {\n      method: 'POST',\n      mode: 'cors',\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json'\n      },\n      redirect: 'follow',\n      body: JSON.stringify(data)\n    })\n\n    if (response.redirected) {\n      location.href = response.url\n    }\n  }\n\n  selectedRoles() {\n    return this.roleSelector.selectedRoles()\n  }\n}\n"]}

package/dist-client/entries/public/home.js

@@ -7,63 +7,8 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { i18next, localize } from '@operato/i18n';
 let HomePage = class HomePage extends localize(i18next)(LitElement) {
-    render() {
-        var { icon, title } = this.applicationMeta;
-        const tagline = this.tagline || `Join the ${title} Business Program`;
-        const explanation1 = this.explanation1 || 'Create your free account today.';
-        const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.';
-        return html `
-      <a
-        class="signin"
-        @click=${e => {
-            e.preventDefault();
-            window.location.href = '/auth/signin';
-        }}
-      >
-        ${i18next.t('button.sign_in')}</a
-      >
-
-      <div message>
-        <strong>${tagline}</strong> ${explanation1} <br />
-        ${explanation2}
-        <img src="/assets/images/invitation.png" />
-      </div>
-
-      <div ticket>
-        <div brand><img src=${ifDefined(icon)} /></div>
-        <div content>
-          <form action="/auth/join" accept-charset="utf-8" name="join" method="post">
-            <fieldset>
-              <legend>${title} invitation ticket</legend>
-              <input type="email" name="email" placeholder="Enter your email address" />
-              <input type="submit" value="join now" />
-            </fieldset>
-          </form>
-        </div>
-      </div>
-    `;
-    }
-    firstUpdated() {
-        setTimeout(() => {
-            this.firstInput.focus();
-        }, 100);
-    }
-    get applicationMeta() {
-        if (!this._applicationMeta) {
-            var iconLink = document.querySelector('link[rel="application-icon"]');
-            var titleMeta = document.querySelector('meta[name="application-name"]');
-            var descriptionMeta = document.querySelector('meta[name="application-description"]');
-            this._applicationMeta = {
-                icon: iconLink === null || iconLink === void 0 ? void 0 : iconLink.href,
-                title: titleMeta ? titleMeta.content : 'Things Factory',
-                description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-            };
-        }
-        return this._applicationMeta;
-    }
-};
-HomePage.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: block;
         position: relative;
@@ -225,7 +170,62 @@ HomePage.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        var { icon, title } = this.applicationMeta;
+        const tagline = this.tagline || `Join the ${title} Business Program`;
+        const explanation1 = this.explanation1 || 'Create your free account today.';
+        const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.';
+        return html `
+      <a
+        class="signin"
+        @click=${e => {
+            e.preventDefault();
+            window.location.href = '/auth/signin';
+        }}
+      >
+        ${i18next.t('button.sign_in')}</a
+      >
+
+      <div message>
+        <strong>${tagline}</strong> ${explanation1} <br />
+        ${explanation2}
+        <img src="/assets/images/invitation.png" />
+      </div>
+
+      <div ticket>
+        <div brand><img src=${ifDefined(icon)} /></div>
+        <div content>
+          <form action="/auth/join" accept-charset="utf-8" name="join" method="post">
+            <fieldset>
+              <legend>${title} invitation ticket</legend>
+              <input type="email" name="email" placeholder="Enter your email address" />
+              <input type="submit" value="join now" />
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        setTimeout(() => {
+            this.firstInput.focus();
+        }, 100);
+    }
+    get applicationMeta() {
+        if (!this._applicationMeta) {
+            var iconLink = document.querySelector('link[rel="application-icon"]');
+            var titleMeta = document.querySelector('meta[name="application-name"]');
+            var descriptionMeta = document.querySelector('meta[name="application-description"]');
+            this._applicationMeta = {
+                icon: iconLink?.href,
+                title: titleMeta ? titleMeta.content : 'Things Factory',
+                description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
+            };
+        }
+        return this._applicationMeta;
+    }
+};
 __decorate([
     property({ type: String, attribute: true }),
     __metadata("design:type", String)

package/dist-client/entries/public/home.js.map

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/entries/public/home.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('home-page')\nexport class HomePage extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      .signin {\n        position: absolute;\n        right: 20px;\n        top: 10px;\n        display: inline-block;\n        padding: 12px 24px;\n        font-size: 16px;\n        font-weight: bold;\n        color: var(--md-sys-color-on-tertiary-container);\n        background-color: var(--md-sys-color-tertiary-container);\n        border: none;\n        border-radius: 4px;\n        text-align: center;\n        text-decoration: none;\n        transition:\n          background-color 0.3s,\n          transform 0.3s;\n      }\n\n      .signin:hover {\n        color: var(--md-sys-color-tertiary-container);\n        background-color: var(--md-sys-color-on-tertiary-container);\n        transform: translateY(-2px);\n      }\n\n      .signin:active {\n        color: var(--md-sys-color-on-tertiary-container);\n        background-color: var(--md-sys-color-tertiary-container);\n        transform: translateY(0);\n      }\n\n      [message] {\n        background-color: var(--md-sys-color-secondary-container);\n        padding: 60px 50px 0 50px;\n        color: var(--md-sys-color-on-secondary-container);\n        text-align: center;\n        font-size: 20px;\n      }\n\n      [message] strong {\n        display: block;\n        font-size: 2.5rem;\n      }\n\n      [message] img {\n        width: 800px;\n        max-width: 90%;\n        display: block;\n        margin: auto;\n        margin-top: -15px;\n      }\n\n      [ticket] {\n        display: grid;\n        grid-template-columns: 96px 1fr;\n        width: 450px;\n        margin: auto;\n        margin-top: -20px;\n        margin-bottom: 60px;\n      }\n\n      [brand] {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-radius: 12px;\n        overflow: hidden;\n        background-color: var(--md-sys-color-primary);\n        box-shadow: var(--box-shadow);\n        border-right: 3px dotted var(--md-sys-color-secondary-container);\n        text-align: center;\n      }\n\n      [ticket] [content] {\n        border-radius: 12px;\n        background-color: var(--md-sys-color-tertiary-container);\n        padding: var(--spacing-medium) var(--spacing-large);\n        box-shadow: var(--box-shadow);\n      }\n\n      fieldset {\n        border: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      legend {\n        margin: 0;\n        padding: var(--spacing-small) 0 var(--spacing-medium) 0;\n        font-weight: bold;\n        color: var(--legend-color);\n        text-transform: uppercase;\n      }\n\n      input {\n        border: var(--md-sys-color-outline);\n        border-radius: var(--border-radius);\n        padding: var(--spacing-medium);\n        font: var(--input-font);\n      }\n\n      input[type='text'] {\n        min-width: 190px;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      @media screen and (max-width: 480px) {\n        [message] {\n          padding: 60px 10px 0 10px;\n          text-align: center;\n          font-size: 14px;\n        }\n        [message] strong {\n          margin-bottom: 15px;\n          font-size: 1.6rem;\n          line-height: 1.2em;\n        }\n        [message] img {\n          max-width: 100%;\n        }\n\n        legend {\n          padding: 0;\n        }\n\n        [ticket] {\n          display: grid;\n          grid-template-columns: 0 1fr;\n          width: 90%;\n          margin: auto;\n          margin-top: -15px;\n          margin-bottom: 60px;\n        }\n        [brand] {\n          border: 0;\n        }\n        [content] {\n          border: 1px solid var(--md-sys-color-primary);\n        }\n\n        fieldset {\n          text-align: center;\n        }\n        input[type='text'] {\n          width: calc(100% - 20px);\n          margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n          text-align: center;\n        }\n        fieldset md-text-button {\n          width: 100%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) tagline?: string\n  @property({ type: String, attribute: true }) explanation1?: string\n  @property({ type: String, attribute: true }) explanation2?: string\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  render() {\n    var { icon, title } = this.applicationMeta\n\n    const tagline = this.tagline || `Join the ${title} Business Program`\n    const explanation1 = this.explanation1 || 'Create your free account today.'\n    const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.'\n\n    return html`\n      <a\n        class=\"signin\"\n        @click=${e => {\n          e.preventDefault()\n          window.location.href = '/auth/signin'\n        }}\n      >\n        ${i18next.t('button.sign_in')}</a\n      >\n\n      <div message>\n        <strong>${tagline}</strong> ${explanation1} <br />\n        ${explanation2}\n        <img src=\"/assets/images/invitation.png\" />\n      </div>\n\n      <div ticket>\n        <div brand><img src=${ifDefined(icon)} /></div>\n        <div content>\n          <form action=\"/auth/join\" accept-charset=\"utf-8\" name=\"join\" method=\"post\">\n            <fieldset>\n              <legend>${title} invitation ticket</legend>\n              <input type=\"email\" name=\"email\" placeholder=\"Enter your email address\" />\n              <input type=\"submit\" value=\"join now\" />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    `\n  }\n\n  @query('input[type=email]') firstInput!: HTMLInputElement\n\n  firstUpdated() {\n    setTimeout(() => {\n      this.firstInput.focus()\n    }, 100)\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/entries/public/home.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('home-page')\nexport class HomePage extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      .signin {\n        position: absolute;\n        right: 20px;\n        top: 10px;\n        display: inline-block;\n        padding: 12px 24px;\n        font-size: 16px;\n        font-weight: bold;\n        color: var(--md-sys-color-on-tertiary-container);\n        background-color: var(--md-sys-color-tertiary-container);\n        border: none;\n        border-radius: 4px;\n        text-align: center;\n        text-decoration: none;\n        transition:\n          background-color 0.3s,\n          transform 0.3s;\n      }\n\n      .signin:hover {\n        color: var(--md-sys-color-tertiary-container);\n        background-color: var(--md-sys-color-on-tertiary-container);\n        transform: translateY(-2px);\n      }\n\n      .signin:active {\n        color: var(--md-sys-color-on-tertiary-container);\n        background-color: var(--md-sys-color-tertiary-container);\n        transform: translateY(0);\n      }\n\n      [message] {\n        background-color: var(--md-sys-color-secondary-container);\n        padding: 60px 50px 0 50px;\n        color: var(--md-sys-color-on-secondary-container);\n        text-align: center;\n        font-size: 20px;\n      }\n\n      [message] strong {\n        display: block;\n        font-size: 2.5rem;\n      }\n\n      [message] img {\n        width: 800px;\n        max-width: 90%;\n        display: block;\n        margin: auto;\n        margin-top: -15px;\n      }\n\n      [ticket] {\n        display: grid;\n        grid-template-columns: 96px 1fr;\n        width: 450px;\n        margin: auto;\n        margin-top: -20px;\n        margin-bottom: 60px;\n      }\n\n      [brand] {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-radius: 12px;\n        overflow: hidden;\n        background-color: var(--md-sys-color-primary);\n        box-shadow: var(--box-shadow);\n        border-right: 3px dotted var(--md-sys-color-secondary-container);\n        text-align: center;\n      }\n\n      [ticket] [content] {\n        border-radius: 12px;\n        background-color: var(--md-sys-color-tertiary-container);\n        padding: var(--spacing-medium) var(--spacing-large);\n        box-shadow: var(--box-shadow);\n      }\n\n      fieldset {\n        border: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      legend {\n        margin: 0;\n        padding: var(--spacing-small) 0 var(--spacing-medium) 0;\n        font-weight: bold;\n        color: var(--legend-color);\n        text-transform: uppercase;\n      }\n\n      input {\n        border: var(--md-sys-color-outline);\n        border-radius: var(--border-radius);\n        padding: var(--spacing-medium);\n        font: var(--input-font);\n      }\n\n      input[type='text'] {\n        min-width: 190px;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      @media screen and (max-width: 480px) {\n        [message] {\n          padding: 60px 10px 0 10px;\n          text-align: center;\n          font-size: 14px;\n        }\n        [message] strong {\n          margin-bottom: 15px;\n          font-size: 1.6rem;\n          line-height: 1.2em;\n        }\n        [message] img {\n          max-width: 100%;\n        }\n\n        legend {\n          padding: 0;\n        }\n\n        [ticket] {\n          display: grid;\n          grid-template-columns: 0 1fr;\n          width: 90%;\n          margin: auto;\n          margin-top: -15px;\n          margin-bottom: 60px;\n        }\n        [brand] {\n          border: 0;\n        }\n        [content] {\n          border: 1px solid var(--md-sys-color-primary);\n        }\n\n        fieldset {\n          text-align: center;\n        }\n        input[type='text'] {\n          width: calc(100% - 20px);\n          margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n          text-align: center;\n        }\n        fieldset md-text-button {\n          width: 100%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) tagline?: string\n  @property({ type: String, attribute: true }) explanation1?: string\n  @property({ type: String, attribute: true }) explanation2?: string\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  render() {\n    var { icon, title } = this.applicationMeta\n\n    const tagline = this.tagline || `Join the ${title} Business Program`\n    const explanation1 = this.explanation1 || 'Create your free account today.'\n    const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.'\n\n    return html`\n      <a\n        class=\"signin\"\n        @click=${e => {\n          e.preventDefault()\n          window.location.href = '/auth/signin'\n        }}\n      >\n        ${i18next.t('button.sign_in')}</a\n      >\n\n      <div message>\n        <strong>${tagline}</strong> ${explanation1} <br />\n        ${explanation2}\n        <img src=\"/assets/images/invitation.png\" />\n      </div>\n\n      <div ticket>\n        <div brand><img src=${ifDefined(icon)} /></div>\n        <div content>\n          <form action=\"/auth/join\" accept-charset=\"utf-8\" name=\"join\" method=\"post\">\n            <fieldset>\n              <legend>${title} invitation ticket</legend>\n              <input type=\"email\" name=\"email\" placeholder=\"Enter your email address\" />\n              <input type=\"submit\" value=\"join now\" />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    `\n  }\n\n  @query('input[type=email]') firstInput!: HTMLInputElement\n\n  firstUpdated() {\n    setTimeout(() => {\n      this.firstInput.focus()\n    }, 100)\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}