@things-factory/auth-ui 10.1.17 → 10.1.18

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

@@ -1 +0,0 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/application/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,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAG1E,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAA7D;;QAgGE,yFAAyF;QAChF,YAAO,GAAa,EAAE,CAAA;QAE/B,uFAAuF;QAC9E,WAAM,GAAY,KAAK,CAAA;IA2HlC,CAAC;aA/NwE,WAAM,GAAG;QAC9E,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqFF;KACF,AAxF4E,CAwF5E;IAcD,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,0BAA0B;YAChE,IAAI,EAAE,kBAAkB;SAC5B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,OAAO,IAAI,CAAA;;YAEhB,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;4BAC1B,OAAO,CAAC,CAAC,CAAC,gDAAgD,CAAC;;QAE/E,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,KAAK;;WAExB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;kCAMkB,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;2EACkB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;gBACxF,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA,oBAAoB,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,QAAQ;YAC1E,CAAC,CAAC,EAAE;;;;yCAIqB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;;qCAKlC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;;;0CAK7B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;;;;kCAKvC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;gEACL,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;mCAK/D,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;cAIrD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;qDAEzD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;gBACtE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;;;;;KAKvC,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,iBAAiB,CAAC,CAAC;QAAQ,CAAC,CAAC,cAAc,EAAE,CAAA;QAEjD,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC;;;;UAIE;QACF,MAAM,OAAO,GAAG,eAAe,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;QAEnD,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;YACtB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QAEjB;;;;;;;;UAQE;QACF,MAAM,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;QAE1C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,EAAQ,QAAQ,EAAE,GAAG,CAAA;;;;OAIvD;YACD,SAAS,EAAE,EAAU,WAAW;aACpC;SACA,CAAC,CAAA;QAEC,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YACpB;;;;cAIE;YACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;YAClB,OAAM;QACX,CAAC;QAEE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,QAAQ,CAAC,eAAe,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,EAAE,CAAC,CAAA;IAChE,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;;AApI4B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAiB;AAE7B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;iDAAA;AAE5B;IAAR,KAAK,EAAE;;kDAAe;AAGd;IAAR,KAAK,EAAE;;oDAAuB;AAGtB;IAAR,KAAK,EAAE;;mDAAwB;AApG5B,mBAAmB;IADxB,aAAa,CAAC,sBAAsB,CAAC;GAChC,mBAAmB,CA+NxB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { FormFieldStyles } from '@operato/styles'\n\nimport { filledValues, missingRequired } from '../../utils/form-values.js'\n\n@customElement('application-register')\nclass ApplicationRegister extends localize(i18next)(PageView) {   static styles = [\n    FormFieldStyles,\n    css`\n      :host {         background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n\n        position: relative;\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      [field-error],\n      [form-error] {         color: var(--md-sys-color-error);\n        font: var(--input-hint-font, inherit);\n        margin-top: var(--spacing-tiny, 2px);\n }\n\n      input[invalid] {         border-color: var(--md-sys-color-error);\n }\n\n      [icon] {         position: absolute;\n        top: 10px;\n        right: 10px;\n\n        max-width: 80px;\n }\n      [icon] img {         max-width: 100%;\n        max-height: 100%;\n }\n\n      img[pagedeco] {         width: 150px;\n        margin: 0 var(--spacing-large);\n        float: left;\n        position: relative;\n        top: -20px;\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        max-width: var(--input-container-max-width);\n        position: relative;\n        top: -50px;\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 }\n      [field] {         display: flex;\n        flex-direction: column;\n }\n      [grid-span] {         grid-column: span 2;\n }\n      @media screen and (max-width: 480px) {         img[pagedeco] {           display: none;\n }\n        [form-container] {           position: initial;\n }\n        [field] {           grid-column: span 2;\n }\n }\n    `\n  ]\n\n  @property({ type: Object }) application: any\n\n  @query('form') form!: HTMLFormElement\n\n  @state() _icon?: string\n\n  /** Required fields the person has not filled in yet. Empty until they press register. */\n  @state() missing: string[] = []\n\n  /** The mutation was refused. The link already said why; this says the press landed. */\n  @state() failed: boolean = false\n\n  get context() {     return {       title: `application registration`,\n      help: 'auth/application'\n }\n }\n\n  render() {     return html`\n      <img src=\"/assets/images/image-api.png\" pagedeco />\n      <h2>${i18next.t('text.register new application')}</h2>\n      <p page-description>${i18next.t('text.an application signs in on its own behalf')}</p>\n\n      ${this._icon\n        ? html`\n            <div icon>\n              <img src=${this._icon} />\n            </div>\n          `\n        : html``}\n\n      <div form-container>\n        <form>\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\" required ?invalid=${this.missing.includes('name')} />\n              ${this.missing.includes('name')\n                ? html`<div field-error>${i18next.t('text.this field is required')}</div>`\n                : ''}\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\" />\n            </div>\n\n            <div field grid-span>\n              <label for=\"app-url\">${i18next.t('field.application url')}</label>\n              <input id=\"app-url\" type=\"url\" name=\"url\" />\n            </div>\n\n            <div field grid-span>\n              <label for=\"redirect-url\">${i18next.t('field.redirect url')}</label>\n              <input id=\"redirect-url\" type=\"url\" name=\"redirectUrl\" />\n            </div>\n\n            <div field grid-span>\n              <label for=\"icon\">${i18next.t('field.application icon')}</label>\n              <input id=\"icon\" type=\"url\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\n            </div>\n\n            <div field grid-span>\n              <!-- type=email so the browser checks the shape the server's scalar will check. -->\n              <label for=\"email\">${i18next.t('field.contact email')}</label>\n              <input id=\"email\" type=\"email\" name=\"email\" />\n            </div>\n\n            ${this.failed ? html`<div form-error grid-span>${i18next.t('text.could not register')}</div>` : ''}\n\n            <button grid-span type=\"submit\" @click=${this.createApplication.bind(this)}>\n              ${i18next.t('button.register')}\n            </button>\n          </div>\n        </form>\n      </div>\n    `\n }\n\n  async createApplication(e) {     e.preventDefault()\n\n    const formData = new FormData(this.form)\n\n    /*\n      `name` is the only field NewApplication declares non-null. The list comes from the\n      schema rather than from taste — requiring more here would invent a rule the product\n      does not have, and the person would be stopped by this screen alone.\n    */\n    const missing = missingRequired(formData, ['name'])\n\n    if (missing.length) {\n      this.missing = missing\n      return\n    }\n\n    this.missing = []\n\n    /*\n      This used to send every input, including the untouched ones, each as an empty string.\n      `NewApplication.email` is a GraphQLEmailAddress and rejects '' — so registering without\n      a contact email failed, on a field the schema marks optional, and the screen printed\n      \"creation fail.\" to the console where nobody would see it.\n\n      `filledValues` leaves an empty field out instead, which is what optional means on the\n      wire.\n    */\n    const application = filledValues(formData)\n\n    const response = await client.mutate({       mutation: gql`\n        mutation ($application: NewApplication!) {           createApplication(application: $application) {             id\n }\n }\n      `,\n      variables: {         application\n }\n })\n\n    if (response.errors) {\n      /*\n        The shared client link already raises a notify event carrying the server's reason, so\n        the person sees what went wrong. What was missing is that the screen stayed silent\n        and looked idle — the form is still filled in, and nothing said the press had landed.\n      */\n      this.failed = true\n      return\n }\n\n    this.failed = false\n    navigate(`application/${response.data.createApplication.id}`)\n }\n\n  pageUpdated(changes, lifecycle, before) {     if (this.active) {       this.form.reset()\n }\n }\n}\n"]}