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

package/dist-client/pages/appliance/appliance.js

@@ -1,4 +1,5 @@
 import { __asyncGenerator, __await, __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import Clipboard from 'clipboard';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
@@ -24,7 +25,7 @@ let Appliance = class Appliance extends connect(store)(PageView) {
         var accessTokenExp = (_a = this._accessTokenInfo) === null || _a === void 0 ? void 0 : _a.exp;
         return html `
       <div>
-        <h2><mwc-icon>devices</mwc-icon>&nbsp;${appliance.name}</h2>
+        <h2><md-icon>devices</md-icon>&nbsp;${appliance.name}</h2>
         <p page-description>${appliance.description}</p>
       </div>
 
@@ -252,79 +253,131 @@ Appliance.styles = [
         display: flex;
         flex-direction: column;
         overflow-y: auto;
+        position: relative;
 
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
 
-      label {
-        font: var(--label-font);
-        color: var(--label-color);
-        text-transform: var(--label-text-transform);
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        max-width: 80px;
       }
-      input {
-        border: var(--border-dark-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
 
-        flex: 1;
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
       }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
+
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+
+        text-decoration: none;
       }
-      form {
-        max-width: var(--content-container-max-width);
+
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
       }
+
       [fieldset-container] {
-        background-color: var(--theme-white-color);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        background-color: var(--md-sys-color-surface);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+
+        input,
+        select {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+
       button,
+      input[type='submit'],
       [button-in-field] {
         background-color: var(--button-background-color);
         border: var(--button-border);
@@ -334,14 +387,17 @@ Appliance.styles = [
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }
-      button:hover {
+
+      button:hover,
+      input[type='submit']:hover {
         border: var(--button-activ-border);
         box-shadow: var(--button-active-box-shadow);
       }
+
       [button-in-field] {
         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
@@ -349,10 +405,12 @@ Appliance.styles = [
         right: 0;
         max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;

package/dist-client/pages/appliance/appliance.js.map

@@ -1 +1 @@
-{"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\nimport { i18next } from '@operato/i18n'\n\n@customElement('appliance-page')\nclass Appliance extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n      }\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      label {\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        font: var(--input-font);\n\n        flex: 1;\n      }\n      select:focus,\n      input:focus,\n      button {\n        outline: none;\n      }\n      form {\n        max-width: var(--content-container-max-width);\n      }\n      [fieldset-container] {\n        background-color: var(--theme-white-color);\n        margin: var(--margin-wide) 0 var(--margin-default) 0;\n        padding: var(--padding-default);\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n      }\n      [fieldset-container] fieldset {\n        margin: 0;\n        margin-top: -15px;\n      }\n      fieldset {\n        border-radius: var(--border-radius);\n        border: var(--border-dark-color);\n        margin: var(--fieldset-margin);\n        padding: var(--fieldset-padding);\n      }\n      legend {\n        padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n      }\n      [field-2column] {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n      }\n      [field] {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n      [grid-span] {\n        grid-column: span 2;\n      }\n      button,\n      [button-in-field] {\n        background-color: var(--button-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        padding: var(--button-padding);\n        color: var(--button-color);\n        font: var(--button-font);\n        text-transform: var(--button-text-transform);\n\n        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);\n        float: right;\n        text-decoration: none;\n      }\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n      [button-in-field] {\n        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n        position: absolute;\n        top: 12px;\n        right: 0;\n        max-height: 36px;\n      }\n      [input-hint] {\n        font: var(--input-hint-font);\n        color: var(--input-hint-color);\n      }\n      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) appliance: any\n  @property({ type: String }) accessToken?: string\n  @property({ type: Object }) _accessTokenInfo: any\n\n  @queryAll('[clipboard-copy]') copybuttons\n\n  private clipboard?: Clipboard\n\n  get context() {\n    return {\n      title: {\n        icon: 'devices',\n        text: this.appliance.name\n      }\n    }\n  }\n\n  render() {\n    var appliance = this.appliance || {}\n    var accessTokenExp = this._accessTokenInfo?.exp\n\n    return html`\n      <div>\n        <h2><mwc-icon>devices</mwc-icon>&nbsp;${appliance.name}</h2>\n        <p page-description>${appliance.description}</p>\n      </div>\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>${i18next.t('text.appliance')}</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"name\">${i18next.t('field.name')}</label>\n                <input id=\"name\" type=\"text\" name=\"name\" .value=${appliance.name} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"description\">${i18next.t('field.description')}</label>\n                <input id=\"description\" type=\"text\" name=\"description\" .value=${appliance.description} />\n              </div>\n\n              <div field>\n                <label for=\"brand\">${i18next.t('field.brand')}</label>\n                <input id=\"brand\" type=\"text\" name=\"brand\" .value=${appliance.brand} />\n              </div>\n\n              <div field>\n                <label for=\"serial-no\">${i18next.t('field.serial-no')}</label>\n                <input id=\"serial-no\" type=\"text\" name=\"serialNo\" .value=${appliance.serialNo} />\n              </div>\n\n              <div field>\n                <label for=\"model\">${i18next.t('field.model')}</label>\n                <input id=\"model\" type=\"text\" name=\"model\" .value=${appliance.model} />\n              </div>\n\n              <div field>\n                <label for=\"netmask\">${i18next.t('field.netmask')}</label>\n                <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask} />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>${i18next.t('text.appliance credential')}</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"access-token\">${i18next.t('label.access token')}</label>\n                <input id=\"access-token\" type=\"text\" .value=${appliance.accessToken} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>\n                  ${i18next.t('button.copy')}\n                </button>\n                ${accessTokenExp\n                  ? html`<div input-hint>\n                      ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(accessTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>\n        <button @click=${this.generateApplianceSecret.bind(this)}>\n          ${i18next.t('button.generate new access token')}\n        </button>\n        <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    this.clipboard = new Clipboard(this.copybuttons, {\n      target: (trigger => trigger.parentElement.querySelector('input')) as any\n    })\n  }\n\n  updated(changes) {\n    /*\n     * If this page properties are changed, this callback will be invoked.\n     * This callback will be called back only when this page is activated.\n     */\n    if (changes.has('appliance')) {\n      const { accessToken } = this.appliance || {}\n      this.accessToken = accessToken\n    }\n\n    if (changes.has('accessToken')) {\n      this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n    }\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      await this.fetchAppliance()\n    }\n  }\n\n  async fetchAppliance() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          appliance(id: $id) {\n            id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n          }\n        }\n      `,\n      variables: {\n        id: this.lifecycle.resourceId\n      }\n    })\n\n    this.appliance = response.data.appliance\n  }\n\n  async updateAppliance(e) {\n    e.preventDefault()\n\n    const form = this.renderRoot.querySelector('form') as HTMLFormElement\n    const formData = new FormData(form)\n\n    const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n      patch[key] = value\n      return patch\n    }, {})\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!, $patch: AppliancePatch!) {\n          updateAppliance(id: $id, patch: $patch) {\n            id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n          }\n        }\n      `,\n      variables: {\n        id,\n        patch\n      }\n    })\n\n    if (response.errors) {\n      console.error('update fail')\n    } else {\n      this.appliance = response.data.updateAppliance\n      console.log('update sucess')\n    }\n  }\n\n  async deleteAppliance(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          deleteAppliance(id: $id)\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    if (response.errors) {\n      console.error('delete fail')\n    } else {\n      navigate('appliance-home')\n    }\n  }\n\n  async generateApplianceSecret(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          generateApplianceSecret(id: $id) {\n            id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    if (response.errors) {\n      console.error('generate-appliance-secret fail')\n    } else {\n      this.appliance = response.data.generateApplianceSecret\n      console.log('generate-appliance-secret sucess')\n    }\n  }\n\n  async *expTimer(exp) {\n    const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {\n      var remain = Math.floor(Number(exp) - Date.now() / 1000)\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield i18next.t('text.remaining time', { days, hours, mins, secs })\n\n      await sleep(1000)\n    }\n  }\n}\n"]}
+{"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\nimport { i18next } from '@operato/i18n'\n\n@customElement('appliance-page')\nclass Appliance extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n        position: relative;\n\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      [icon] {\n        position: absolute;\n        top: 10px;\n        right: 10px;\n        max-width: 80px;\n      }\n\n      [icon] img {\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      [button-primary] {\n        background-color: var(--button-primary-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        margin: var(--button-margin);\n        padding: var(--button-primary-padding);\n        color: var(--button-primary-color);\n        font: var(--button-primary-font);\n        text-transform: var(--button-text-transform);\n\n        text-decoration: none;\n      }\n\n      [button-primary]:hover {\n        background-color: var(--button-primary-active-background-color);\n        box-shadow: var(--button-active-box-shadow);\n      }\n\n      [fieldset-container] {\n        background-color: var(--md-sys-color-surface);\n        margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n        padding: var(--spacing-medium);\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n\n        label {\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        input,\n        select {\n          border: var(--border-dim-color);\n          border-radius: var(--border-radius);\n          margin: var(--input-margin);\n          padding: var(--input-padding);\n          font: var(--input-font);\n\n          flex: 1;\n        }\n\n        select:focus,\n        input:focus,\n        button {\n          outline: none;\n        }\n\n        form {\n          max-width: var(--content-container-max-width);\n        }\n      }\n\n      [fieldset-container] fieldset {\n        margin: 0;\n        margin-top: -15px;\n      }\n\n      fieldset {\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        margin: var(--fieldset-margin);\n        padding: var(--fieldset-padding);\n      }\n\n      legend {\n        padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n      }\n\n      [field-2column] {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      [grid-span] {\n        grid-column: span 2;\n      }\n\n      button {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-small);\n      }\n\n      button,\n      input[type='submit'],\n      [button-in-field] {\n        background-color: var(--button-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        padding: var(--button-padding);\n        color: var(--button-color);\n        font: var(--button-font);\n        text-transform: var(--button-text-transform);\n\n        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n        float: right;\n        text-decoration: none;\n      }\n\n      button:hover,\n      input[type='submit']:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n\n      [button-in-field] {\n        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n        position: absolute;\n        top: 12px;\n        right: 0;\n        max-height: 36px;\n      }\n\n      [input-hint] {\n        font: var(--input-hint-font);\n        color: var(--input-hint-color);\n      }\n\n      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) appliance: any\n  @property({ type: String }) accessToken?: string\n  @property({ type: Object }) _accessTokenInfo: any\n\n  @queryAll('[clipboard-copy]') copybuttons\n\n  private clipboard?: Clipboard\n\n  get context() {\n    return {\n      title: {\n        icon: 'devices',\n        text: this.appliance.name\n      }\n    }\n  }\n\n  render() {\n    var appliance = this.appliance || {}\n    var accessTokenExp = this._accessTokenInfo?.exp\n\n    return html`\n      <div>\n        <h2><md-icon>devices</md-icon>&nbsp;${appliance.name}</h2>\n        <p page-description>${appliance.description}</p>\n      </div>\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>${i18next.t('text.appliance')}</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"name\">${i18next.t('field.name')}</label>\n                <input id=\"name\" type=\"text\" name=\"name\" .value=${appliance.name} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"description\">${i18next.t('field.description')}</label>\n                <input id=\"description\" type=\"text\" name=\"description\" .value=${appliance.description} />\n              </div>\n\n              <div field>\n                <label for=\"brand\">${i18next.t('field.brand')}</label>\n                <input id=\"brand\" type=\"text\" name=\"brand\" .value=${appliance.brand} />\n              </div>\n\n              <div field>\n                <label for=\"serial-no\">${i18next.t('field.serial-no')}</label>\n                <input id=\"serial-no\" type=\"text\" name=\"serialNo\" .value=${appliance.serialNo} />\n              </div>\n\n              <div field>\n                <label for=\"model\">${i18next.t('field.model')}</label>\n                <input id=\"model\" type=\"text\" name=\"model\" .value=${appliance.model} />\n              </div>\n\n              <div field>\n                <label for=\"netmask\">${i18next.t('field.netmask')}</label>\n                <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask} />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>${i18next.t('text.appliance credential')}</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"access-token\">${i18next.t('label.access token')}</label>\n                <input id=\"access-token\" type=\"text\" .value=${appliance.accessToken} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>\n                  ${i18next.t('button.copy')}\n                </button>\n                ${accessTokenExp\n                  ? html`<div input-hint>\n                      ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(accessTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>\n        <button @click=${this.generateApplianceSecret.bind(this)}>\n          ${i18next.t('button.generate new access token')}\n        </button>\n        <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    this.clipboard = new Clipboard(this.copybuttons, {\n      target: (trigger => trigger.parentElement.querySelector('input')) as any\n    })\n  }\n\n  updated(changes) {\n    /*\n     * If this page properties are changed, this callback will be invoked.\n     * This callback will be called back only when this page is activated.\n     */\n    if (changes.has('appliance')) {\n      const { accessToken } = this.appliance || {}\n      this.accessToken = accessToken\n    }\n\n    if (changes.has('accessToken')) {\n      this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n    }\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      await this.fetchAppliance()\n    }\n  }\n\n  async fetchAppliance() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          appliance(id: $id) {\n            id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n          }\n        }\n      `,\n      variables: {\n        id: this.lifecycle.resourceId\n      }\n    })\n\n    this.appliance = response.data.appliance\n  }\n\n  async updateAppliance(e) {\n    e.preventDefault()\n\n    const form = this.renderRoot.querySelector('form') as HTMLFormElement\n    const formData = new FormData(form)\n\n    const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n      patch[key] = value\n      return patch\n    }, {})\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!, $patch: AppliancePatch!) {\n          updateAppliance(id: $id, patch: $patch) {\n            id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n          }\n        }\n      `,\n      variables: {\n        id,\n        patch\n      }\n    })\n\n    if (response.errors) {\n      console.error('update fail')\n    } else {\n      this.appliance = response.data.updateAppliance\n      console.log('update sucess')\n    }\n  }\n\n  async deleteAppliance(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          deleteAppliance(id: $id)\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    if (response.errors) {\n      console.error('delete fail')\n    } else {\n      navigate('appliance-home')\n    }\n  }\n\n  async generateApplianceSecret(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          generateApplianceSecret(id: $id) {\n            id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    if (response.errors) {\n      console.error('generate-appliance-secret fail')\n    } else {\n      this.appliance = response.data.generateApplianceSecret\n      console.log('generate-appliance-secret sucess')\n    }\n  }\n\n  async *expTimer(exp) {\n    const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {\n      var remain = Math.floor(Number(exp) - Date.now() / 1000)\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield i18next.t('text.remaining time', { days, hours, mins, secs })\n\n      await sleep(1000)\n    }\n  }\n}\n"]}

package/dist-client/pages/appliance/home.d.ts

@@ -1 +1,2 @@
-export {};
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';

package/dist-client/pages/appliance/home.js

@@ -1,4 +1,6 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -25,7 +27,7 @@ let Appliances = class Appliances extends connect(store)(PageView) {
           What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building
           for. The appliance type can’t be changed after it’s created.
         </p>
-        <mwc-button raised @click=${e => navigate('appliance-register')} label="register new appliance"></mwc-button>
+        <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>
       </div>
 
       <table>
@@ -77,17 +79,28 @@ let Appliances = class Appliances extends connect(store)(PageView) {
 Appliances.styles = [
     css `
       :host {
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
 
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
+        float: right;
+        margin-top: var(--spacing-medium);
+        text-transform: capitalize;
+      }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
@@ -96,18 +109,22 @@ Appliances.styles = [
 
       table {
         width: 100%;
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -118,29 +135,33 @@ Appliances.styles = [
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
-        color: var(--secondary-text-color);
+        color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
 
         display: block;
         text-decoration: none;
       }
+
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }
 
       @media screen and (max-width: 480px) {
         :host {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
         }
       }
     `

package/dist-client/pages/appliance/home.js.map

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAAjD;;QAyE6B,eAAU,GAAU,EAAE,CAAA;IAwEnD,CAAC;IAtEC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,gBAAgB;SACvB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAEtC,OAAO,IAAI,CAAA;;;;;;;oCAOqB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;;;;;;;;;;UAU7D,UAAU,CAAC,GAAG,CACd,SAAS,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGD,aAAa,SAAS,CAAC,EAAE,EAAE,IAAI,SAAS,CAAC,IAAI;kBACrD,SAAS,CAAC,WAAW;;;;;;WAM5B,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW;QACf,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,UAAU,GAAG,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,CAAA;SACvD;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;OAWT;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;SAChC;IACH,CAAC;;AA/IM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoEF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAuB;AAzE7C,UAAU;IADf,aAAa,CAAC,gBAAgB,CAAC;GAC1B,UAAU,CAiJf","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('appliance-home')\nclass Appliances extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n\n        overflow: auto;\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      table {\n        width: 100%;\n        margin: var(--margin-wide) 0;\n        border-collapse: collapse;\n      }\n      tr {\n        background-color: var(--tr-background-color);\n      }\n      tr:nth-child(odd) {\n        background-color: var(--tr-background-odd-color);\n      }\n      tr:hover {\n        background-color: var(--tr-background-hover-color);\n      }\n      th {\n        border-top: var(--th-border-top);\n        border-bottom: var(--td-border-bottom);\n        padding: var(--th-padding);\n\n        font: var(--th-font);\n        color: var(--th-color);\n        text-transform: var(--th-text-transform);\n        text-align: left;\n      }\n      td {\n        padding: var(--td-padding);\n        border-bottom: var(--td-border-bottom);\n        font: var(--td-font);\n        color: var(--td-color);\n      }\n      td a {\n        color: var(--secondary-text-color);\n        font: bold 16px var(--theme-font);\n\n        display: block;\n        text-decoration: none;\n      }\n      .text-align-center {\n        text-align: center;\n      }\n      .text-align-right {\n        text-align: right;\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          padding: var(--padding-default);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) appliances: any[] = []\n\n  get context() {\n    return {\n      title: `appliance home`,\n      help: 'auth/appliance'\n    }\n  }\n\n  render() {\n    var appliances = this.appliances || []\n\n    return html`\n      <div>\n        <h2>Registered Appliances</h2>\n        <p page-description>\n          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building\n          for. The appliance type can’t be changed after it’s created.\n        </p>\n        <mwc-button raised @click=${e => navigate('appliance-register')} label=\"register new appliance\"></mwc-button>\n      </div>\n\n      <table>\n        <tr>\n          <th>appliance name</th>\n          <th>API health</th>\n          <th>Installs</th>\n          <th>status</th>\n        </tr>\n        ${appliances.map(\n          appliance => html`\n            <tr>\n              <td>\n                <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>\n                ${appliance.description}\n              </td>\n              <td>OK</td>\n              <td class=\"text-align-center\">1</td>\n              <td>draft</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  async pageUpdated() {\n    if (this.active) {\n      this.appliances = (await this.fetchAppliances()).items\n    }\n  }\n\n  async fetchAppliances() {\n    const response = await client.query({\n      query: gql`\n        query {\n          appliances {\n            items {\n              id\n              name\n              description\n            }\n            total\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      return response.data.appliances\n    }\n  }\n}\n"]}
+{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAAjD;;QA4F6B,eAAU,GAAU,EAAE,CAAA;IAwEnD,CAAC;IAtEC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,gBAAgB;SACvB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAEtC,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;;;;;;;;;;UAU9D,UAAU,CAAC,GAAG,CACd,SAAS,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGD,aAAa,SAAS,CAAC,EAAE,EAAE,IAAI,SAAS,CAAC,IAAI;kBACrD,SAAS,CAAC,WAAW;;;;;;WAM5B,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW;QACf,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,GAAG,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,CAAA;QACxD,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;OAWT;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACrB,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;QACjC,CAAC;IACH,CAAC;;AAlKM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFF;CACF,AAzFY,CAyFZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAuB;AA5F7C,UAAU;IADf,aAAa,CAAC,gBAAgB,CAAC;GAC1B,UAAU,CAoKf","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('appliance-home')\nclass Appliances extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n\n        overflow: auto;\n      }\n\n      md-elevated-button {\n        text-transform: capitalize;\n      }\n\n      md-outlined-button {\n        float: right;\n        margin-top: var(--spacing-medium);\n        text-transform: capitalize;\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      table {\n        width: 100%;\n        margin: var(--spacing-large) 0;\n        border-collapse: collapse;\n      }\n\n      tr {\n        background-color: var(--tr-background-color);\n      }\n\n      tr:nth-child(odd) {\n        background-color: var(--tr-background-odd-color);\n      }\n\n      tr:hover {\n        background-color: var(--tr-background-hover-color);\n      }\n\n      th {\n        border-top: var(--th-border-top);\n        border-bottom: var(--td-border-bottom);\n        padding: var(--th-padding);\n\n        font: var(--th-font);\n        color: var(--th-color);\n        text-transform: var(--th-text-transform);\n        text-align: left;\n      }\n\n      td {\n        padding: var(--td-padding);\n        border-bottom: var(--td-border-bottom);\n        font: var(--td-font);\n        color: var(--td-color);\n      }\n\n      td a {\n        color: var(--md-sys-color-primary);\n        font: bold 16px var(--theme-font);\n\n        display: block;\n        text-decoration: none;\n      }\n\n      .text-align-center {\n        text-align: center;\n      }\n\n      .text-align-right {\n        text-align: right;\n      }\n\n      @media screen and (max-width: 480px) {\n        :host {\n          padding: var(--spacing-medium);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) appliances: any[] = []\n\n  get context() {\n    return {\n      title: `appliance home`,\n      help: 'auth/appliance'\n    }\n  }\n\n  render() {\n    var appliances = this.appliances || []\n\n    return html`\n      <div>\n        <h2>Registered Appliances</h2>\n        <p page-description>\n          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building\n          for. The appliance type can’t be changed after it’s created.\n        </p>\n        <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>\n      </div>\n\n      <table>\n        <tr>\n          <th>appliance name</th>\n          <th>API health</th>\n          <th>Installs</th>\n          <th>status</th>\n        </tr>\n        ${appliances.map(\n          appliance => html`\n            <tr>\n              <td>\n                <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>\n                ${appliance.description}\n              </td>\n              <td>OK</td>\n              <td class=\"text-align-center\">1</td>\n              <td>draft</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  async pageUpdated() {\n    if (this.active) {\n      this.appliances = (await this.fetchAppliances()).items\n    }\n  }\n\n  async fetchAppliances() {\n    const response = await client.query({\n      query: gql`\n        query {\n          appliances {\n            items {\n              id\n              name\n              description\n            }\n            total\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      return response.data.appliances\n    }\n  }\n}\n"]}

package/dist-client/pages/appliance/register.js

@@ -10,8 +10,8 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
         return [
             css `
         :host {
-          background-color: var(--main-section-background-color);
-          padding: var(--padding-wide);
+          background-color: var(--md-sys-color-background);
+          padding: var(--spacing-large);
 
           display: flex;
           flex-direction: column;
@@ -32,8 +32,8 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
         }
 
         [form-container] {
-          background-color: var(--theme-white-color);
-          padding: var(--padding-wide);
+          background-color: var(--md-sys-color-surface);
+          padding: var(--spacing-large);
           border-radius: var(--border-radius);
           box-shadow: var(--box-shadow);
           min-width: 60%;
@@ -43,11 +43,11 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
         }
         label {
           font: var(--label-font);
-          color: var(--label-color);
+          color: var(--label-color, var(--md-sys-color-on-surface));
           text-transform: var(--label-text-transform);
         }
         input {
-          border: var(--border-dark-color);
+          border: var(--border-dim-color);
           border-radius: var(--border-radius);
           margin: var(--input-margin);
           padding: var(--input-padding);
@@ -128,7 +128,7 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
               <input id="netmask" type="text" name="netmask" />
             </div>
 
-            <mwc-button grid-span @click=${this.createAppliance.bind(this)} raised label="register"></mwc-button>
+            <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>
           </div>
         </form>
       </div>

package/dist-client/pages/appliance/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/appliance/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IACtD,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyEF;SACF,CAAA;IACH,CAAC;IAMD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,wBAAwB;YAC/B,IAAI,EAAE,gBAAgB;SACvB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqC4B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAIrE,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,CAAC;QACrB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAClF,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,OAAO,SAAS,CAAA;QAClB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,SAAS;aACV;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;SAC9B;aAAM;YACL,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;YAC3C,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;SAC5B;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QACpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;SAClB;IACH,CAAC;CACF,CAAA;AA7FC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE1C;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;AAlFjC,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,CA6KtB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends connect(store)(PageView) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          background-color: var(--main-section-background-color);\n          padding: var(--padding-wide);\n\n          display: flex;\n          flex-direction: column;\n\n          align-items: center;\n\n          overflow: auto;\n        }\n        h2 {\n          margin: var(--title-margin);\n          font: var(--title-font);\n          color: var(--title-text-color);\n        }\n        [page-description] {\n          margin: var(--page-description-margin);\n          font: var(--page-description-font);\n          color: var(--page-description-color);\n        }\n\n        [form-container] {\n          background-color: var(--theme-white-color);\n          padding: var(--padding-wide);\n          border-radius: var(--border-radius);\n          box-shadow: var(--box-shadow);\n          min-width: 60%;\n          max-width: var(--input-container-max-width);\n          position: relative;\n          clear: both;\n        }\n        label {\n          font: var(--label-font);\n          color: var(--label-color);\n          text-transform: var(--label-text-transform);\n        }\n        input {\n          border: var(--border-dark-color);\n          border-radius: var(--border-radius);\n          margin: var(--input-margin);\n          padding: var(--input-padding);\n          font: var(--input-font);\n\n          flex: 1;\n        }\n        select:focus,\n        input:focus {\n          outline: none;\n        }\n        [field-2column] {\n          display: grid;\n          grid-template-columns: 1fr 1fr;\n          grid-gap: 15px;\n          max-width: var(--content-container-max-width);\n        }\n        [field] {\n          display: flex;\n          flex-direction: column;\n        }\n        [grid-span] {\n          grid-column: span 2;\n        }\n        @media screen and (max-width: 480px) {\n          [form-container] {\n            position: initial;\n            width: 100%;\n          }\n          [field] {\n            grid-column: span 2;\n          }\n        }\n      `\n    ]\n  }\n\n  @property({ type: Object }) appliance: any\n\n  @query('form') form!: HTMLFormElement\n\n  get context() {\n    return {\n      title: `appliance registration`,\n      help: 'auth/appliance'\n    }\n  }\n\n  render() {\n    return html`\n      <h2>Register new appliance</h2>\n      <p page-description>You can register new appliance here</p>\n\n      <div form-container>\n        <form>\n          <div field-2column>\n            <div field grid-span>\n              <label for=\"name\">name</label>\n              <input id=\"name\" type=\"text\" name=\"name\" />\n            </div>\n\n            <div field grid-span>\n              <label for=\"description\">description</label>\n              <input id=\"description\" type=\"text\" name=\"description\" />\n            </div>\n\n            <div field>\n              <label for=\"brand\">brand</label>\n              <input id=\"brand\" type=\"text\" name=\"brand\" />\n            </div>\n\n            <div field>\n              <label for=\"serial-no\">serial #</label>\n              <input id=\"serial-no\" type=\"text\" name=\"serialNo\" />\n            </div>\n\n            <div field>\n              <label for=\"model\">model</label>\n              <input id=\"model\" type=\"text\" name=\"model\" />\n            </div>\n\n            <div field>\n              <label for=\"netmask\">netmask</label>\n              <input id=\"netmask\" type=\"text\" name=\"netmask\" />\n            </div>\n\n            <mwc-button grid-span @click=${this.createAppliance.bind(this)} raised label=\"register\"></mwc-button>\n          </div>\n        </form>\n      </div>\n    `\n  }\n\n  async createAppliance(e) {\n    e.preventDefault()\n\n    const form = this.renderRoot.querySelector('form') as HTMLFormElement\n    const formData = new FormData(form)\n\n    const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {\n      appliance[key] = value\n      return appliance\n    }, {})\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($appliance: NewAppliance!) {\n          createAppliance(appliance: $appliance) {\n            id\n          }\n        }\n      `,\n      variables: {\n        appliance\n      }\n    })\n\n    if (response.errors) {\n      console.log('creation fail.')\n    } else {\n      const id = response.data.createAppliance.id\n      navigate(`appliance/${id}`)\n    }\n  }\n\n  pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.form.reset()\n    }\n  }\n}\n"]}
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/appliance/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IACtD,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyEF;SACF,CAAA;IACH,CAAC;IAMD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,wBAAwB;YAC/B,IAAI,EAAE,gBAAgB;SACvB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAqCoC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI7E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,CAAC;QACrB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAClF,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,OAAO,SAAS,CAAA;QAClB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,SAAS;aACV;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YACpB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;YAC3C,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QACpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QACnB,CAAC;IACH,CAAC;CACF,CAAA;AA7F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE3B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;AAlFjC,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,CA6KtB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends connect(store)(PageView) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          background-color: var(--md-sys-color-background);\n          padding: var(--spacing-large);\n\n          display: flex;\n          flex-direction: column;\n\n          align-items: center;\n\n          overflow: auto;\n        }\n        h2 {\n          margin: var(--title-margin);\n          font: var(--title-font);\n          color: var(--title-text-color);\n        }\n        [page-description] {\n          margin: var(--page-description-margin);\n          font: var(--page-description-font);\n          color: var(--page-description-color);\n        }\n\n        [form-container] {\n          background-color: var(--md-sys-color-surface);\n          padding: var(--spacing-large);\n          border-radius: var(--border-radius);\n          box-shadow: var(--box-shadow);\n          min-width: 60%;\n          max-width: var(--input-container-max-width);\n          position: relative;\n          clear: both;\n        }\n        label {\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        input {\n          border: var(--border-dim-color);\n          border-radius: var(--border-radius);\n          margin: var(--input-margin);\n          padding: var(--input-padding);\n          font: var(--input-font);\n\n          flex: 1;\n        }\n        select:focus,\n        input:focus {\n          outline: none;\n        }\n        [field-2column] {\n          display: grid;\n          grid-template-columns: 1fr 1fr;\n          grid-gap: 15px;\n          max-width: var(--content-container-max-width);\n        }\n        [field] {\n          display: flex;\n          flex-direction: column;\n        }\n        [grid-span] {\n          grid-column: span 2;\n        }\n        @media screen and (max-width: 480px) {\n          [form-container] {\n            position: initial;\n            width: 100%;\n          }\n          [field] {\n            grid-column: span 2;\n          }\n        }\n      `\n    ]\n  }\n\n  @property({ type: Object }) appliance: any\n\n  @query('form') form!: HTMLFormElement\n\n  get context() {\n    return {\n      title: `appliance registration`,\n      help: 'auth/appliance'\n    }\n  }\n\n  render() {\n    return html`\n      <h2>Register new appliance</h2>\n      <p page-description>You can register new appliance here</p>\n\n      <div form-container>\n        <form>\n          <div field-2column>\n            <div field grid-span>\n              <label for=\"name\">name</label>\n              <input id=\"name\" type=\"text\" name=\"name\" />\n            </div>\n\n            <div field grid-span>\n              <label for=\"description\">description</label>\n              <input id=\"description\" type=\"text\" name=\"description\" />\n            </div>\n\n            <div field>\n              <label for=\"brand\">brand</label>\n              <input id=\"brand\" type=\"text\" name=\"brand\" />\n            </div>\n\n            <div field>\n              <label for=\"serial-no\">serial #</label>\n              <input id=\"serial-no\" type=\"text\" name=\"serialNo\" />\n            </div>\n\n            <div field>\n              <label for=\"model\">model</label>\n              <input id=\"model\" type=\"text\" name=\"model\" />\n            </div>\n\n            <div field>\n              <label for=\"netmask\">netmask</label>\n              <input id=\"netmask\" type=\"text\" name=\"netmask\" />\n            </div>\n\n            <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>\n          </div>\n        </form>\n      </div>\n    `\n  }\n\n  async createAppliance(e) {\n    e.preventDefault()\n\n    const form = this.renderRoot.querySelector('form') as HTMLFormElement\n    const formData = new FormData(form)\n\n    const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {\n      appliance[key] = value\n      return appliance\n    }, {})\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($appliance: NewAppliance!) {\n          createAppliance(appliance: $appliance) {\n            id\n          }\n        }\n      `,\n      variables: {\n        appliance\n      }\n    })\n\n    if (response.errors) {\n      console.log('creation fail.')\n    } else {\n      const id = response.data.createAppliance.id\n      navigate(`appliance/${id}`)\n    }\n  }\n\n  pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.form.reset()\n    }\n  }\n}\n"]}

package/dist-client/pages/application/application.d.ts

@@ -1 +1 @@
-export {};
+import '@material/web/icon/icon.js';