@things-factory/auth-ui 7.0.0-alpha.8 → 7.0.0

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OAuth2DecisionErrorPage = class OAuth2DecisionErrorPage extends LitElement {
@@ -33,7 +33,7 @@ let OAuth2DecisionErrorPage = class OAuth2DecisionErrorPage extends LitElement {
         <input name="state" type="text" value="${this.req.state}" hidden />
         <input name="email" type="text" value="${this.user.email}" hidden />
 
-        <mwc-button raised @click="${() => history.back()}">Move back</mwc-button>
+        <md-elevated-button raised @click="${() => history.back()}">Move back</md-elevated-button>
       </form>
     `;
     }

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,sBAAsB,CAAA;AAE7B,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;;qCAE3B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;;KAEpD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,YAAY;;QAClB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC5B,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;SAC5E;IACH,CAAC;CACF,CAAA;AA1CC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4DAAyB;AACpD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AANlD,uBAAuB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GACjC,uBAAuB,CA2C5B","sourcesContent":["import '@material/mwc-button'\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        <mwc-button raised @click=\"${() => history.back()}\">Move back</mwc-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,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"]}

package/dist-client/entries/oauth2/oauth2-decision-page.d.ts

@@ -1,2 +1,2 @@
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import '../../components/role-selector';

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
+import '@material/web/button/elevated-button.js';
 import '../../components/role-selector';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
@@ -7,6 +7,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { ButtonContainerStyles } from '@operato/styles';
 let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
     constructor() {
         super(...arguments);
@@ -54,9 +55,9 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
 
       <role-selector .roleCategory="${this.domain.name}" .roles="${this.roles}"></role-selector>
 
-      <div buttons>
-        <mwc-button @click="${() => this.decision(true)}" raised label="Allow"></mwc-button>
-        <mwc-button @click="${() => this.decision(false)}" raised danger label="Deny"></mwc-button>
+      <div class="button-container">
+        <md-elevated-button @click="${() => this.decision(true)}" raised label="Allow"></md-elevated-button>
+        <md-elevated-button @click="${() => this.decision(false)}" raised danger label="Deny"></md-elevated-button>
       </div>
     `;
     }
@@ -130,57 +131,57 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
         return this.roleSelector.selectedRoles();
     }
 };
-OAuth2DecisionPage.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
+OAuth2DecisionPage.styles = [
+    ButtonContainerStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
 
-      border: 1px solid var(--primary-color);
-      margin: var(--margin-default);
-      padding: var(--padding-default);
-      font: normal 15px var(--theme-font);
-      color: var(--secondary-color);
-    }
-    [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(--padding-default);
-    }
-    input {
-      border: var(--border-dark-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);
-      text-transform: var(--label-text-transform);
-    }
-    [buttons] {
-      margin: 0;
-      padding: var(--padding-default);
-      background-color: rgba(var(--primary-color-rgb), 0.2);
-    }
-    mwc-button {
-      margin-right: var(--padding-narrow);
-    }
-    [danger] {
-      --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-    }
-  `;
+        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/mwc-button'\nimport '../../components/role-selector'\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'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      border: 1px solid var(--primary-color);\n      margin: var(--margin-default);\n      padding: var(--padding-default);\n      font: normal 15px var(--theme-font);\n      color: var(--secondary-color);\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    [field] {\n      display: flex;\n      flex-direction: column;\n      padding-bottom: var(--padding-default);\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      min-width: 250px;\n      font: var(--input-font);\n    }\n    label {\n      display: flex;\n      flex-direction: column;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-transform: var(--label-text-transform);\n    }\n    [buttons] {\n      margin: 0;\n      padding: var(--padding-default);\n      background-color: rgba(var(--primary-color-rgb), 0.2);\n    }\n    mwc-button {\n      margin-right: var(--padding-narrow);\n    }\n    [danger] {\n      --mdc-theme-primary: var(--mdc-danger-button-primary-color);\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 buttons>\n        <mwc-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></mwc-button>\n        <mwc-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></mwc-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":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../../components/role-selector'\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.d.ts

@@ -1,5 +1,6 @@
-import '@material/mwc-icon-button';
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/elevated-button.js';
 import { LitElement } from 'lit';
 declare const HomePage_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class HomePage extends HomePage_base {
@@ -12,9 +13,9 @@ export declare class HomePage extends HomePage_base {
     firstInput: HTMLInputElement;
     firstUpdated(): void;
     get applicationMeta(): {
-        icon?: string | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
+        icon?: string;
+        title?: string;
+        description?: string;
     };
 }
 export {};

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

@@ -1,8 +1,10 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon-button';
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/elevated-button.js';
 import { css, html, LitElement } from 'lit';
 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() {
@@ -11,8 +13,15 @@ let HomePage = class HomePage extends localize(i18next)(LitElement) {
         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 `
-      <mwc-icon-button home icon="home" @click=${e => (window.location.href = '/')}></mwc-icon-button>
-      <mwc-button signin dense @click=${e => (window.location.href = '/auth/signin')}>sign in</mwc-button>
+      <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 />
@@ -21,14 +30,13 @@ let HomePage = class HomePage extends localize(i18next)(LitElement) {
       </div>
 
       <div ticket>
-        <div brand><img src=${icon} /></div>
+        <div brand><img src=${ifDefined(icon)} /></div>
         <div content>
-          <form action="/auth/join" accept-charset="utf-8" name="join" method="POST">
+          <form action="/auth/join" accept-charset="utf-8" name="join" method="post">
             <fieldset>
               <legend>${title} invitation ticket</legend>
               <input type="text" name="email" placeholder="Enter your email address" />
               <input type="submit" value="join now" />
-              <!-- help this button, pls <mwc-button raised label="join now"></mwc-button> -->
             </fieldset>
           </form>
         </div>
@@ -61,25 +69,41 @@ HomePage.styles = [
         position: relative;
       }
 
-      [home] {
+      .signin {
         position: absolute;
-        left: 20px;
+        right: 20px;
         top: 10px;
-        font-size: 2em;
-        color: var(--primary-color);
+        display: inline-block;
+        padding: 12px 24px;
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        border: none;
+        border-radius: 4px;
+        text-align: center;
+        text-decoration: none;
+        transition:
+          background-color 0.3s,
+          transform 0.3s;
       }
 
-      [signin] {
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        font-size: 2em;
+      .signin:hover {
+        color: var(--md-sys-color-tertiary-container);
+        background-color: var(--md-sys-color-on-tertiary-container);
+        transform: translateY(-2px);
+      }
+
+      .signin:active {
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+        transform: translateY(0);
       }
 
       [message] {
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-secondary-container);
         padding: 60px 50px 0 50px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         text-align: center;
         font-size: 20px;
       }
@@ -112,16 +136,16 @@ HomePage.styles = [
         align-items: center;
         border-radius: 12px;
         overflow: hidden;
-        background-color: var(--primary-color);
+        background-color: var(--md-sys-color-primary);
         box-shadow: var(--box-shadow);
-        border-right: 3px dotted var(--main-section-background-color);
+        border-right: 3px dotted var(--md-sys-color-secondary-container);
         text-align: center;
       }
 
       [ticket] [content] {
         border-radius: 12px;
-        background-color: var(--theme-white-color);
-        padding: var(--padding-default) var(--padding-wide);
+        background-color: var(--md-sys-color-tertiary-container);
+        padding: var(--spacing-medium) var(--spacing-large);
         box-shadow: var(--box-shadow);
       }
 
@@ -133,16 +157,16 @@ HomePage.styles = [
 
       legend {
         margin: 0;
-        padding: var(--padding-narrow) 0 var(--padding-default) 0;
+        padding: var(--spacing-small) 0 var(--spacing-medium) 0;
         font-weight: bold;
         color: var(--legend-color);
         text-transform: uppercase;
       }
 
       input {
-        border: var(--border-dark-color);
+        border: var(--md-sys-color-outline);
         border-radius: var(--border-radius);
-        padding: var(--input-padding);
+        padding: var(--spacing-medium);
         font: var(--input-font);
       }
 
@@ -185,7 +209,7 @@ HomePage.styles = [
           border: 0;
         }
         [content] {
-          border: 1px solid var(--primary-color);
+          border: 1px solid var(--md-sys-color-primary);
         }
 
         fieldset {
@@ -193,10 +217,10 @@ HomePage.styles = [
         }
         input[type='text'] {
           width: calc(100% - 20px);
-          margin: var(--margin-narrow) 0 var(--margin-default) 0;
+          margin: var(--spacing-small) 0 var(--spacing-medium) 0;
           text-align: center;
         }
-        fieldset mwc-button {
+        fieldset md-text-button {
           width: 100%;
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/entries/public/home.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAE7B,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,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAG1C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA4JzD,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,YAAY,KAAK,mBAAmB,CAAA;QACpE,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,iCAAiC,CAAA;QAC3E,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,wEAAwE,CAAA;QAElH,OAAO,IAAI,CAAA;iDACkC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;wCAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,cAAc,CAAC;;;kBAGlE,OAAO,aAAa,YAAY;UACxC,YAAY;;;;;8BAKQ,IAAI;;;;wBAIV,KAAK;;;;;;;;KAQxB,CAAA;IACH,CAAC;IAID,YAAY;QACV,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,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;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAlNM,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiJF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;yCAAiB;AAC7D;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAAsB;AAClE;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAAsB;AAqClE;IAAC,KAAK,CAAC,kBAAkB,CAAC;8BAAc,gBAAgB;4CAAA;AA7L7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoNpB;SApNY,QAAQ","sourcesContent":["import '@material/mwc-icon-button'\nimport '@material/mwc-button'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.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      [home] {\n        position: absolute;\n        left: 20px;\n        top: 10px;\n        font-size: 2em;\n        color: var(--primary-color);\n      }\n\n      [signin] {\n        position: absolute;\n        right: 20px;\n        top: 20px;\n        font-size: 2em;\n      }\n\n      [message] {\n        background-color: var(--main-section-background-color);\n        padding: 60px 50px 0 50px;\n        color: var(--secondary-color);\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(--primary-color);\n        box-shadow: var(--box-shadow);\n        border-right: 3px dotted var(--main-section-background-color);\n        text-align: center;\n      }\n\n      [ticket] [content] {\n        border-radius: 12px;\n        background-color: var(--theme-white-color);\n        padding: var(--padding-default) var(--padding-wide);\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(--padding-narrow) 0 var(--padding-default) 0;\n        font-weight: bold;\n        color: var(--legend-color);\n        text-transform: uppercase;\n      }\n\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        padding: var(--input-padding);\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(--primary-color);\n        }\n\n        fieldset {\n          text-align: center;\n        }\n        input[type='text'] {\n          width: calc(100% - 20px);\n          margin: var(--margin-narrow) 0 var(--margin-default) 0;\n          text-align: center;\n        }\n        fieldset mwc-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      <mwc-icon-button home icon=\"home\" @click=${e => (window.location.href = '/')}></mwc-icon-button>\n      <mwc-button signin dense @click=${e => (window.location.href = '/auth/signin')}>sign in</mwc-button>\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=${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=\"text\" name=\"email\" placeholder=\"Enter your email address\" />\n              <input type=\"submit\" value=\"join now\" />\n              <!-- help this button, pls <mwc-button raised label=\"join now\"></mwc-button> -->\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    `\n  }\n\n  @query('input[type=text]') 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=\"text\" 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=text]') 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"]}

package/dist-client/index.d.ts

@@ -1,6 +1,15 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 export * from './components/role-selector.js';
 export * from './components/domain-switch.js';
 export * from './components/invite-user.js';
-export declare function setAuthManagementMenus(): Promise<void>;
+export type AuthManagementMenuOptions = {
+    role?: boolean;
+    appliance?: boolean;
+    application?: boolean;
+    user?: boolean;
+    authProvider?: boolean;
+    domain?: boolean;
+    attribute?: boolean;
+};
+export declare function setAuthManagementMenus(options?: any): Promise<void>;