@things-factory/auth-ui 10.1.16 → 10.1.18

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

@@ -1,392 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/web/icon/icon.js';
-import Clipboard from 'clipboard';
-import gql from 'graphql-tag';
-import { css, html } from 'lit';
-import { customElement, property, queryAll } from 'lit/decorators.js';
-import { asyncReplace } from 'lit/directives/async-replace.js';
-import { client } from '@operato/graphql';
-import { navigate, PageView } from '@operato/shell';
-import { parseJwt, sleep } from '@operato/utils';
-import { i18next } from '@operato/i18n';
-let Appliance = class Appliance extends PageView {
-    static { this.styles = [
-        css `
-      :host {         display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        position: relative;
-
-        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);
- }
-
-      [icon] {         position: absolute;
-        top: 10px;
-        right: 10px;
-        max-width: 80px;
- }
-
-      [icon] img {         max-width: 100%;
-        max-height: 100%;
- }
-
-      [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;
- }
-
-      [button-primary]:hover {         background-color: var(--button-primary-active-background-color);
-        box-shadow: var(--button-active-box-shadow);
- }
-
-      [fieldset-container] {         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 {
-          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
-          color: var(--input-field-color, var(--md-sys-color-on-surface));
-          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-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);
-        border-radius: var(--button-border-radius);
-        padding: var(--button-padding);
-        color: var(--button-color);
-        font: var(--button-font);
-        text-transform: var(--button-text-transform);
-
-        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
-        float: right;
-        text-decoration: none;
- }
-
-      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;
-        top: 12px;
-        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;
- }
- }
-    `
-    ]; }
-    get context() {
-        return { title: { icon: 'devices',
-                text: this.appliance.name
-            }
-        };
-    }
-    render() {
-        var appliance = this.appliance || {};
-        var accessTokenExp = this._accessTokenInfo?.exp;
-        return html `
-      <div>
-        <h2><md-icon>devices</md-icon>&nbsp;${appliance.name}</h2>
-        <p page-description>${appliance.description}</p>
-      </div>
-
-      <form>
-        <div fieldset-container>
-          <fieldset>
-            <legend>${i18next.t('text.appliance')}</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="name">${i18next.t('field.name')}</label>
-                <input id="name" type="text" name="name" .value=${appliance.name} />
-              </div>
-
-              <div field grid-span>
-                <label for="description">${i18next.t('field.description')}</label>
-                <input id="description" type="text" name="description" .value=${appliance.description} />
-              </div>
-
-              <div field>
-                <label for="brand">${i18next.t('field.brand')}</label>
-                <input id="brand" type="text" name="brand" .value=${appliance.brand} />
-              </div>
-
-              <div field>
-                <label for="serial-no">${i18next.t('field.serial-no')}</label>
-                <input id="serial-no" type="text" name="serialNo" .value=${appliance.serialNo} />
-              </div>
-
-              <div field>
-                <label for="model">${i18next.t('field.model')}</label>
-                <input id="model" type="text" name="model" .value=${appliance.model} />
-              </div>
-
-              <div field>
-                <label for="netmask">${i18next.t('field.netmask')}</label>
-                <input id="netmask" type="text" name="netmask" .value=${appliance.netmask} />
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div fieldset-container>
-          <fieldset>
-            <legend>${i18next.t('text.appliance credential')}</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="access-token">${i18next.t('label.access token')}</label>
-                <input id="access-token" type="text" .value=${appliance.accessToken} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
-                  ${i18next.t('button.copy')}
-                </button>
-                ${accessTokenExp
-            ? html `<div input-hint>
-                      ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :
-                      ${asyncReplace(this.expTimer(accessTokenExp))}
-                    </div>`
-            : html ``}
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>
-        <button @click=${this.generateApplianceSecret.bind(this)}>
-          ${i18next.t('button.generate new access token')}
-        </button>
-        <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>
-      </form>
-    `;
-    }
-    firstUpdated() {
-        this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input'))
-        });
-    }
-    updated(changes) {
-        if (changes.has('appliance')) {
-            const { accessToken } = this.appliance || {};
-            this.accessToken = accessToken;
-        }
-        if (changes.has('accessToken')) {
-            this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {};
-        }
-    }
-    async pageUpdated(changes, lifecycle, before) {
-        if (this.active) {
-            await this.fetchAppliance();
-        }
-    }
-    async fetchAppliance() {
-        const response = await client.query({ query: gql `
-        query ($id: String!) {           appliance(id: $id) {             id
-            name
-            description
-            serialNo
-            brand
-            model
-            netmask
-            accessToken
- }
- }
-      `,
-            variables: { id: this.lifecycle.resourceId
-            }
-        });
-        this.appliance = response.data.appliance;
-    }
-    async updateAppliance(e) {
-        e.preventDefault();
-        const form = this.renderRoot.querySelector('form');
-        const formData = new FormData(form);
-        const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {
-            patch[key] = value;
-            return patch;
-        }, {});
-        const id = this.lifecycle.resourceId;
-        const response = await client.mutate({ mutation: gql `
-        mutation ($id: String!, $patch: AppliancePatch!) {           updateAppliance(id: $id, patch: $patch) {             id
-            name
-            description
-            serialNo
-            brand
-            model
-            netmask
-            accessToken
- }
- }
-      `,
-            variables: { id,
-                patch
-            }
-        });
-        if (response.errors) {
-            console.error('update fail');
-        }
-        else {
-            this.appliance = response.data.updateAppliance;
-            console.log('update sucess');
-        }
-    }
-    async deleteAppliance(e) {
-        e.preventDefault();
-        const id = this.lifecycle.resourceId;
-        const response = await client.mutate({ mutation: gql `
-        mutation ($id: String!) {           deleteAppliance(id: $id)
- }
-      `,
-            variables: { id
-            }
-        });
-        if (response.errors) {
-            console.error('delete fail');
-        }
-        else {
-            navigate('appliance-home');
-        }
-    }
-    async generateApplianceSecret(e) {
-        e.preventDefault();
-        const id = this.lifecycle.resourceId;
-        const response = await client.mutate({ mutation: gql `
-        mutation ($id: String!) {           generateApplianceSecret(id: $id) {             id
-            name
-            description
-            serialNo
-            brand
-            model
-            netmask
-            accessToken
- }
- }
-      `,
-            variables: { id
-            }
-        });
-        if (response.errors) {
-            console.error('generate-appliance-secret fail');
-        }
-        else {
-            this.appliance = response.data.generateApplianceSecret;
-            console.log('generate-appliance-secret sucess');
-        }
-    }
-    async *expTimer(exp) {
-        const DAY = 24 * 60 * 60;
-        const HOUR = 60 * 60;
-        const MIN = 60;
-        while (this.active) {
-            var remain = Math.floor(Number(exp) - Date.now() / 1000);
-            const days = Math.floor(remain / DAY);
-            remain -= days * DAY;
-            const hours = Math.floor(remain / HOUR);
-            remain -= hours * HOUR;
-            const mins = Math.floor(remain / MIN);
-            const secs = remain - mins * MIN;
-            yield i18next.t('text.remaining time', { days, hours, mins, secs });
-            await sleep(1000);
-        }
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], Appliance.prototype, "appliance", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Appliance.prototype, "accessToken", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], Appliance.prototype, "_accessTokenInfo", void 0);
-__decorate([
-    queryAll('[clipboard-copy]'),
-    __metadata("design:type", Object)
-], Appliance.prototype, "copybuttons", void 0);
-Appliance = __decorate([
-    customElement('appliance-page')
-], Appliance);
-//# sourceMappingURL=appliance.js.map

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

@@ -1 +0,0 @@
-{"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 { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\nimport { i18next } from '@operato/i18n'\n\n@customElement('appliance-page')\nclass Appliance extends PageView {   static styles = [\n    css`\n      :host {         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 {         margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n }\n\n      [page-description] {         margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n }\n\n      [icon] {         position: absolute;\n        top: 10px;\n        right: 10px;\n        max-width: 80px;\n }\n\n      [icon] img {         max-width: 100%;\n        max-height: 100%;\n }\n\n      [button-primary] {         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 {         background-color: var(--button-primary-active-background-color);\n        box-shadow: var(--button-active-box-shadow);\n }\n\n      [fieldset-container] {         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 {           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          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n          color: var(--input-field-color, var(--md-sys-color-on-surface));\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 {           outline: none;\n }\n\n        form {           max-width: var(--content-container-max-width);\n }\n }\n\n      [fieldset-container] fieldset {         margin: 0;\n        margin-top: -15px;\n }\n\n      fieldset {         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 {         padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n }\n\n      [field-2column] {         display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n }\n\n      [field] {         display: flex;\n        flex-direction: column;\n        position: relative;\n }\n\n      [grid-span] {         grid-column: span 2;\n }\n\n      button {         display: flex;\n        align-items: center;\n        gap: var(--spacing-small);\n }\n\n      button,\n      input[type='submit'],\n      [button-in-field] {         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 {         border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n }\n\n      [button-in-field] {         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] {         font: var(--input-hint-font);\n        color: var(--input-hint-color);\n }\n\n      @media screen and (max-width: 480px) {         [field] {           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() {     return {       title: {         icon: 'devices',\n        text: this.appliance.name\n }\n }\n }\n\n  render() {     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() {     this.clipboard = new Clipboard(this.copybuttons, {       target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n  updated(changes) {     /*\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')) {       const { accessToken } = this.appliance || {}\n      this.accessToken = accessToken\n }\n\n    if (changes.has('accessToken')) {       this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n  async pageUpdated(changes, lifecycle, before) {     if (this.active) {       await this.fetchAppliance()\n }\n }\n\n  async fetchAppliance() {     const response = await client.query({       query: gql`\n        query ($id: String!) {           appliance(id: $id) {             id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n }\n }\n      `,\n      variables: {         id: this.lifecycle.resourceId\n }\n })\n\n    this.appliance = response.data.appliance\n }\n\n  async updateAppliance(e) {     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]) => {       patch[key] = value\n      return patch\n }, {})\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!, $patch: AppliancePatch!) {           updateAppliance(id: $id, patch: $patch) {             id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n }\n }\n      `,\n      variables: {         id,\n        patch\n }\n })\n\n    if (response.errors) {       console.error('update fail')\n } else {       this.appliance = response.data.updateAppliance\n      console.log('update sucess')\n }\n }\n\n  async deleteAppliance(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           deleteAppliance(id: $id)\n }\n      `,\n      variables: {         id\n }\n })\n\n    if (response.errors) {       console.error('delete fail')\n } else {       navigate('appliance-home')\n }\n }\n\n  async generateApplianceSecret(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           generateApplianceSecret(id: $id) {             id\n            name\n            description\n            serialNo\n            brand\n            model\n            netmask\n            accessToken\n }\n }\n      `,\n      variables: {         id\n }\n })\n\n    if (response.errors) {       console.error('generate-appliance-secret fail')\n } else {       this.appliance = response.data.generateApplianceSecret\n      console.log('generate-appliance-secret sucess')\n }\n }\n\n  async *expTimer(exp) {     const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {       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/register.js

@@ -1,166 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import gql from 'graphql-tag';
-import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
-import { navigate, PageView } from '@operato/shell';
-let ApplianceRegister = class ApplianceRegister extends PageView {
-    static get styles() {
-        return [
-            css `
-        :host {           background-color: var(--md-sys-color-background);
-          padding: var(--spacing-large);
-
-          display: flex;
-          flex-direction: column;
-
-          align-items: center;
-
-          overflow: auto;
- }
-        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);
- }
-
-        [form-container] {           background-color: var(--md-sys-color-surface);
-          padding: var(--spacing-large);
-          border-radius: var(--border-radius);
-          box-shadow: var(--box-shadow);
-          min-width: 60%;
-          max-width: var(--input-container-max-width);
-          position: relative;
-          clear: both;
- }
-        label {           font: var(--label-font);
-          color: var(--label-color, var(--md-sys-color-on-surface));
-          text-transform: var(--label-text-transform);
- }
-        input {
-          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
-          color: var(--input-field-color, var(--md-sys-color-on-surface));
-          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 {           outline: none;
- }
-        [field-2column] {           display: grid;
-          grid-template-columns: 1fr 1fr;
-          grid-gap: 15px;
-          max-width: var(--content-container-max-width);
- }
-        [field] {           display: flex;
-          flex-direction: column;
- }
-        [grid-span] {           grid-column: span 2;
- }
-        @media screen and (max-width: 480px) {           [form-container] {             position: initial;
-            width: 100%;
- }
-          [field] {             grid-column: span 2;
- }
- }
-      `
-        ];
-    }
-    get context() {
-        return { title: `appliance registration`,
-            help: 'auth/appliance'
-        };
-    }
-    render() {
-        return html `
-      <h2>Register new appliance</h2>
-      <p page-description>You can register new appliance here</p>
-
-      <div form-container>
-        <form>
-          <div field-2column>
-            <div field grid-span>
-              <label for="name">name</label>
-              <input id="name" type="text" name="name" />
-            </div>
-
-            <div field grid-span>
-              <label for="description">description</label>
-              <input id="description" type="text" name="description" />
-            </div>
-
-            <div field>
-              <label for="brand">brand</label>
-              <input id="brand" type="text" name="brand" />
-            </div>
-
-            <div field>
-              <label for="serial-no">serial #</label>
-              <input id="serial-no" type="text" name="serialNo" />
-            </div>
-
-            <div field>
-              <label for="model">model</label>
-              <input id="model" type="text" name="model" />
-            </div>
-
-            <div field>
-              <label for="netmask">netmask</label>
-              <input id="netmask" type="text" name="netmask" />
-            </div>
-
-            <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>
-          </div>
-        </form>
-      </div>
-    `;
-    }
-    async createAppliance(e) {
-        e.preventDefault();
-        const form = this.renderRoot.querySelector('form');
-        const formData = new FormData(form);
-        const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {
-            appliance[key] = value;
-            return appliance;
-        }, {});
-        const response = await client.mutate({ mutation: gql `
-        mutation ($appliance: NewAppliance!) {           createAppliance(appliance: $appliance) {             id
- }
- }
-      `,
-            variables: { appliance
-            }
-        });
-        if (response.errors) {
-            console.log('creation fail.');
-        }
-        else {
-            const id = response.data.createAppliance.id;
-            navigate(`appliance/${id}`);
-        }
-    }
-    pageUpdated(changes, lifecycle, before) {
-        if (this.active) {
-            this.form.reset();
-        }
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], ApplianceRegister.prototype, "appliance", void 0);
-__decorate([
-    query('form'),
-    __metadata("design:type", HTMLFormElement)
-], ApplianceRegister.prototype, "form", void 0);
-ApplianceRegister = __decorate([
-    customElement('appliance-register')
-], ApplianceRegister);
-//# sourceMappingURL=register.js.map

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

@@ -1 +0,0 @@
-{"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,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ;IAAK,MAAM,KAAK,MAAM;QAAS,OAAO;YACxE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+DF;SACF,CAAA;IACJ,CAAC;IAMA,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,wBAAwB;YAC9D,IAAI,EAAE,gBAAgB;SAC1B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAqCuB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI7E,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,eAAe,CAAC,CAAC;QAAQ,CAAC,CAAC,cAAc,EAAE,CAAA;QAE/C,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;YAAS,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACjH,OAAO,SAAS,CAAA;QACrB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,EAAQ,QAAQ,EAAE,GAAG,CAAA;;;;OAIvD;YACD,SAAS,EAAE,EAAU,SAAS;aAClC;SACA,CAAC,CAAA;QAEC,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC7D,CAAC;aAAM,CAAC;YAAO,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;YACrD,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;QAChC,CAAC;IACD,CAAC;IAEA,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QACzF,CAAC;IACD,CAAC;CACD,CAAA;AAhF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE3B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;AAtEjC,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,CAoJtB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends PageView {   static get styles() {     return [\n      css`\n        :host {           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 {           margin: var(--title-margin);\n          font: var(--title-font);\n          color: var(--title-text-color);\n }\n        [page-description] {           margin: var(--page-description-margin);\n          font: var(--page-description-font);\n          color: var(--page-description-color);\n }\n\n        [form-container] {           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 {           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          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n          color: var(--input-field-color, var(--md-sys-color-on-surface));\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 {           outline: none;\n }\n        [field-2column] {           display: grid;\n          grid-template-columns: 1fr 1fr;\n          grid-gap: 15px;\n          max-width: var(--content-container-max-width);\n }\n        [field] {           display: flex;\n          flex-direction: column;\n }\n        [grid-span] {           grid-column: span 2;\n }\n        @media screen and (max-width: 480px) {           [form-container] {             position: initial;\n            width: 100%;\n }\n          [field] {             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() {     return {       title: `appliance registration`,\n      help: 'auth/appliance'\n }\n }\n\n  render() {     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) {     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]) => {       appliance[key] = value\n      return appliance\n }, {})\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($appliance: NewAppliance!) {           createAppliance(appliance: $appliance) {             id\n }\n }\n      `,\n      variables: {         appliance\n }\n })\n\n    if (response.errors) {       console.log('creation fail.')\n } else {       const id = response.data.createAppliance.id\n      navigate(`appliance/${id}`)\n }\n }\n\n  pageUpdated(changes, lifecycle, before) {     if (this.active) {       this.form.reset()\n }\n }\n}\n"]}

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

@@ -1 +0,0 @@
-import '@material/web/icon/icon.js';