@things-factory/auth-ui 10.1.17 → 10.1.18

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

@@ -1,384 +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 { APPLICATION_TYPES } from '../../constants/application.js';
-import { client } from '@operato/graphql';
-import { i18next } from '@operato/i18n';
-import { navigate, PageView } from '@operato/shell';
-import '../../components/secret-field.js';
-let Application = class Application 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: 'apps',
-                text: this.application.name
-            }
-        };
-    }
-    render() {
-        var app = this.application || {};
-        return html `
-      <div>
-        <h2><md-icon>apps</md-icon>&nbsp;${app.name}</h2>
-        <p page-description>${app.description}</p>
-      </div>
-
-      <div icon>
-        <img src=${app.icon} />
-      </div>
-
-      <form>
-        <div fieldset-container>
-          <fieldset>
-            <legend>application</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="name">app name</label>
-                <input id="name" type="text" name="name" .value=${app.name} />
-              </div>
-
-              <div field grid-span>
-                <label for="description">description</label>
-                <input id="description" type="text" name="description" .value=${app.description} />
-              </div>
-
-              <div field grid-span>
-                <label for="email">contact email</label>
-                <input id="email" type="text" name="email" .value=${app.email} />
-              </div>
-
-              <div field grid-span>
-                <label for="type-selector">type</label>
-                <select id="type-selector" name="type">
-                  ${APPLICATION_TYPES.map(type => html `<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`)}
-                </select>
-              </div>
-
-              <div field grid-span>
-                <label for="url">application URL</label>
-                <input id="url" type="text" name="url" .value=${app.url} />
-              </div>
-
-              <div field grid-span>
-                <label for="icon">icon</label>
-                <input id="icon" type="text" name="icon" .value=${app.icon} />
-              </div>
-
-              <div field grid-span>
-                <label for="redirect-url">redirect URL</label>
-                <input id="redirect-url" type="text" name="redirectUrl" .value=${app.redirectUrl} />
-              </div>
-
-              <div field grid-span>
-                <label for="webhook">webhook</label>
-                <input id="webhook" type="text" name="webhook" .value=${app.webhook} />
-              </div>
-
-              <div field grid-span>
-                <label for="available-scopes">available-scopes</label>
-                <input id="available-scopes" type="text" .value=${app.availableScopes} readonly />
-              </div>
-
-              <div field grid-span>
-                <label for="auth-url">auth URL</label>
-                <input id="auth-url" type="text" .value=${app.authUrl} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-                The endpoint for authorization server. This is used to get the authorization code.
-              </div>
-
-              <div field grid-span>
-                <label for="access-token-url">access token URL</label>
-                <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-                The endpoint for authentication server. This is used to exchange the authorization code for an access
-                token.
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div fieldset-container>
-          <fieldset>
-            <legend>credentials</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="app-key">appKey</label>
-                <input id="app-key" type="text" .value=${app.appKey} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-              </div>
-
-              <!--
-                appKey above stays a plain field: it is the client identifier, meant to be
-                read and quoted. appSecret is the other half — it carries its own
-                @privilege for security:query, and it is the value an integration signs
-                with. It was printed in the open from the moment the page loaded.
-              -->
-              <div field grid-span>
-                <label for="app-secret">${i18next.t('field.client-secret')}</label>
-                <secret-field id="app-secret" .value=${app.appSecret || ''}></secret-field>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div class="button-container">
-          <button danger @click=${this.deleteApplication.bind(this)}>
-            <md-icon>delete_forever</md-icon>delete this app
-          </button>
-          <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
-          <button><md-icon>passkey</md-icon>generate new secret</button>
-        </div>
-      </form>
-    `;
-    }
-    firstUpdated() {
-        this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input'))
-        });
-    }
-    async pageUpdated(changes, lifecycle, before) {
-        if (this.active) {
-            await this.fetchApplication();
-        }
-    }
-    async fetchApplication() {
-        const response = await client.query({ query: gql `
-        query ($id: String!) {           application(id: $id) {             id
-            name
-            description
-            email
-            url
-            icon
-            redirectUrl
-            authUrl
-            accessTokenUrl
-            webhook
-            availableScopes
-            appKey
-            appSecret
-            type
- }
- }
-      `,
-            variables: { id: this.lifecycle.resourceId
-            }
-        });
-        this.application = response.data.application;
-    }
-    async updateApplication(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: ApplicationPatch!) {           updateApplication(id: $id, patch: $patch) {             id
-            name
-            description
-            email
-            url
-            icon
-            redirectUrl
-            webhook
-            appKey
-            appSecret
-            type
- }
- }
-      `,
-            variables: { id,
-                patch
-            }
-        });
-        if (response.errors) {
-            console.error('update fail');
-        }
-        else {
-            this.application = { ...this.application, ...response.data.updateApplication };
-            console.log('update sucess');
-        }
-    }
-    async deleteApplication(e) {
-        e.preventDefault();
-        const id = this.lifecycle.resourceId;
-        const response = await client.mutate({ mutation: gql `
-        mutation ($id: String!) {           deleteApplication(id: $id)
- }
-      `,
-            variables: { id
-            }
-        });
-        const result = response.data.deleteApplication;
-        if (result) {
-            console.log('delete sucess');
-            navigate('applications');
-        }
-        else {
-            console.error('delete fail');
-        }
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], Application.prototype, "application", void 0);
-__decorate([
-    queryAll('[clipboard-copy]'),
-    __metadata("design:type", Object)
-], Application.prototype, "copybuttons", void 0);
-Application = __decorate([
-    customElement('application-page')
-], Application);
-//# sourceMappingURL=application.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { APPLICATION_TYPES } from '../../constants/application.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\n\nimport '../../components/secret-field.js'\n\n@customElement('application-page')\nclass Application 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 }) application: any\n  @queryAll('[clipboard-copy]') copybuttons\n  private clipboard?: Clipboard\n\n  get context() {     return {       title: {         icon: 'apps',\n        text: this.application.name\n }\n }\n }\n\n  render() {     var app = this.application || {}\n\n    return html`\n      <div>\n        <h2><md-icon>apps</md-icon>&nbsp;${app.name}</h2>\n        <p page-description>${app.description}</p>\n      </div>\n\n      <div icon>\n        <img src=${app.icon} />\n      </div>\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>application</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"name\">app name</label>\n                <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"description\">description</label>\n                <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"email\">contact email</label>\n                <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"type-selector\">type</label>\n                <select id=\"type-selector\" name=\"type\">\n                  ${APPLICATION_TYPES.map(\n                    type =>\n                      html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`\n                  )}\n                </select>\n              </div>\n\n              <div field grid-span>\n                <label for=\"url\">application URL</label>\n                <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"icon\">icon</label>\n                <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"redirect-url\">redirect URL</label>\n                <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"webhook\">webhook</label>\n                <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n              </div>\n\n              <div field grid-span>\n                <label for=\"available-scopes\">available-scopes</label>\n                <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"auth-url\">auth URL</label>\n                <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                The endpoint for authorization server. This is used to get the authorization code.\n              </div>\n\n              <div field grid-span>\n                <label for=\"access-token-url\">access token URL</label>\n                <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                The endpoint for authentication server. This is used to exchange the authorization code for an access\n                token.\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>credentials</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"app-key\">appKey</label>\n                <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n              </div>\n\n              <!--\n                appKey above stays a plain field: it is the client identifier, meant to be\n                read and quoted. appSecret is the other half — it carries its own\n                @privilege for security:query, and it is the value an integration signs\n                with. It was printed in the open from the moment the page loaded.\n              -->\n              <div field grid-span>\n                <label for=\"app-secret\">${i18next.t('field.client-secret')}</label>\n                <secret-field id=\"app-secret\" .value=${app.appSecret || ''}></secret-field>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div class=\"button-container\">\n          <button danger @click=${this.deleteApplication.bind(this)}>\n            <md-icon>delete_forever</md-icon>delete this app\n          </button>\n          <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>\n          <button><md-icon>passkey</md-icon>generate new secret</button>\n        </div>\n      </form>\n    `\n }\n\n  firstUpdated() {     this.clipboard = new Clipboard(this.copybuttons, {       target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n  async pageUpdated(changes, lifecycle, before) {     if (this.active) {       await this.fetchApplication()\n }\n }\n\n  async fetchApplication() {     const response = await client.query({       query: gql`\n        query ($id: String!) {           application(id: $id) {             id\n            name\n            description\n            email\n            url\n            icon\n            redirectUrl\n            authUrl\n            accessTokenUrl\n            webhook\n            availableScopes\n            appKey\n            appSecret\n            type\n }\n }\n      `,\n      variables: {         id: this.lifecycle.resourceId\n }\n })\n\n    this.application = response.data.application\n }\n\n  async updateApplication(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: ApplicationPatch!) {           updateApplication(id: $id, patch: $patch) {             id\n            name\n            description\n            email\n            url\n            icon\n            redirectUrl\n            webhook\n            appKey\n            appSecret\n            type\n }\n }\n      `,\n      variables: {         id,\n        patch\n }\n })\n\n    if (response.errors) {       console.error('update fail')\n } else {       this.application = { ...this.application, ...response.data.updateApplication }\n      console.log('update sucess')\n }\n }\n\n  async deleteApplication(e) {     e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($id: String!) {           deleteApplication(id: $id)\n }\n      `,\n      variables: {         id\n }\n })\n\n    const result = response.data.deleteApplication\n    if (result) {       console.log('delete sucess')\n      navigate('applications')\n } else {       console.error('delete fail')\n }\n }\n}\n"]}

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

@@ -1,246 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import gql from 'graphql-tag';
-import { css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
-import { i18next, localize } from '@operato/i18n';
-import { navigate, PageView } from '@operato/shell';
-import { FormFieldStyles } from '@operato/styles';
-import { filledValues, missingRequired } from '../../utils/form-values.js';
-let ApplicationRegister = class ApplicationRegister extends localize(i18next)(PageView) {
-    constructor() {
-        super(...arguments);
-        /** Required fields the person has not filled in yet. Empty until they press register. */
-        this.missing = [];
-        /** The mutation was refused. The link already said why; this says the press landed. */
-        this.failed = false;
-    }
-    static { this.styles = [
-        FormFieldStyles,
-        css `
-      :host {         background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-
-        position: relative;
-
-        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);
- }
-      [field-error],
-      [form-error] {         color: var(--md-sys-color-error);
-        font: var(--input-hint-font, inherit);
-        margin-top: var(--spacing-tiny, 2px);
- }
-
-      input[invalid] {         border-color: var(--md-sys-color-error);
- }
-
-      [icon] {         position: absolute;
-        top: 10px;
-        right: 10px;
-
-        max-width: 80px;
- }
-      [icon] img {         max-width: 100%;
-        max-height: 100%;
- }
-
-      img[pagedeco] {         width: 150px;
-        margin: 0 var(--spacing-large);
-        float: left;
-        position: relative;
-        top: -20px;
- }
-
-      [form-container] {         background-color: var(--md-sys-color-surface);
-        padding: var(--spacing-large);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        max-width: var(--input-container-max-width);
-        position: relative;
-        top: -50px;
-        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;
- }
-      [field] {         display: flex;
-        flex-direction: column;
- }
-      [grid-span] {         grid-column: span 2;
- }
-      @media screen and (max-width: 480px) {         img[pagedeco] {           display: none;
- }
-        [form-container] {           position: initial;
- }
-        [field] {           grid-column: span 2;
- }
- }
-    `
-    ]; }
-    get context() {
-        return { title: `application registration`,
-            help: 'auth/application'
-        };
-    }
-    render() {
-        return html `
-      <img src="/assets/images/image-api.png" pagedeco />
-      <h2>${i18next.t('text.register new application')}</h2>
-      <p page-description>${i18next.t('text.an application signs in on its own behalf')}</p>
-
-      ${this._icon
-            ? html `
-            <div icon>
-              <img src=${this._icon} />
-            </div>
-          `
-            : html ``}
-
-      <div form-container>
-        <form>
-          <div field-2column>
-            <div field grid-span>
-              <label for="name">${i18next.t('field.name')}</label>
-              <input id="name" type="text" name="name" required ?invalid=${this.missing.includes('name')} />
-              ${this.missing.includes('name')
-            ? html `<div field-error>${i18next.t('text.this field is required')}</div>`
-            : ''}
-            </div>
-
-            <div field grid-span>
-              <label for="description">${i18next.t('field.description')}</label>
-              <input id="description" type="text" name="description" />
-            </div>
-
-            <div field grid-span>
-              <label for="app-url">${i18next.t('field.application url')}</label>
-              <input id="app-url" type="url" name="url" />
-            </div>
-
-            <div field grid-span>
-              <label for="redirect-url">${i18next.t('field.redirect url')}</label>
-              <input id="redirect-url" type="url" name="redirectUrl" />
-            </div>
-
-            <div field grid-span>
-              <label for="icon">${i18next.t('field.application icon')}</label>
-              <input id="icon" type="url" name="icon" @change=${e => (this._icon = e.target.value)} />
-            </div>
-
-            <div field grid-span>
-              <!-- type=email so the browser checks the shape the server's scalar will check. -->
-              <label for="email">${i18next.t('field.contact email')}</label>
-              <input id="email" type="email" name="email" />
-            </div>
-
-            ${this.failed ? html `<div form-error grid-span>${i18next.t('text.could not register')}</div>` : ''}
-
-            <button grid-span type="submit" @click=${this.createApplication.bind(this)}>
-              ${i18next.t('button.register')}
-            </button>
-          </div>
-        </form>
-      </div>
-    `;
-    }
-    async createApplication(e) {
-        e.preventDefault();
-        const formData = new FormData(this.form);
-        /*
-          `name` is the only field NewApplication declares non-null. The list comes from the
-          schema rather than from taste — requiring more here would invent a rule the product
-          does not have, and the person would be stopped by this screen alone.
-        */
-        const missing = missingRequired(formData, ['name']);
-        if (missing.length) {
-            this.missing = missing;
-            return;
-        }
-        this.missing = [];
-        /*
-          This used to send every input, including the untouched ones, each as an empty string.
-          `NewApplication.email` is a GraphQLEmailAddress and rejects '' — so registering without
-          a contact email failed, on a field the schema marks optional, and the screen printed
-          "creation fail." to the console where nobody would see it.
-    
-          `filledValues` leaves an empty field out instead, which is what optional means on the
-          wire.
-        */
-        const application = filledValues(formData);
-        const response = await client.mutate({ mutation: gql `
-        mutation ($application: NewApplication!) {           createApplication(application: $application) {             id
- }
- }
-      `,
-            variables: { application
-            }
-        });
-        if (response.errors) {
-            /*
-              The shared client link already raises a notify event carrying the server's reason, so
-              the person sees what went wrong. What was missing is that the screen stayed silent
-              and looked idle — the form is still filled in, and nothing said the press had landed.
-            */
-            this.failed = true;
-            return;
-        }
-        this.failed = false;
-        navigate(`application/${response.data.createApplication.id}`);
-    }
-    pageUpdated(changes, lifecycle, before) {
-        if (this.active) {
-            this.form.reset();
-        }
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], ApplicationRegister.prototype, "application", void 0);
-__decorate([
-    query('form'),
-    __metadata("design:type", HTMLFormElement)
-], ApplicationRegister.prototype, "form", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], ApplicationRegister.prototype, "_icon", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], ApplicationRegister.prototype, "missing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], ApplicationRegister.prototype, "failed", void 0);
-ApplicationRegister = __decorate([
-    customElement('application-register')
-], ApplicationRegister);
-//# sourceMappingURL=register.js.map