"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[9016],{49016:(i,e,a)=>{a.r(e);var t=a(50493),r=a(16682),o=a(94430),n=a(56765),p=a(28120),d=a(27805),l=a(77675),c=a(51266);let s=class extends((0,p.$)(l.h)(l.B4)){get context(){return{title:"application registration",help:"auth/application"}}render(){return o.dy`
      <img src="/assets/images/image-api.png" pagedeco />
      <h2>Register new application</h2>
      <p page-description>
        You can register new application here.<br />
        What type of app are you building? Choose the app type that best suits the audience you’re building for.
      </p>

      ${this._icon?o.dy`
            <div icon>
              <img src=${this._icon} />
            </div>
          `:o.dy``}

      <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 grid-span>
              <label for="app-url">application url</label>
              <input id="app-url" type="text" name="url" />
            </div>

            <div field grid-span>
              <label for="redirect-url">redirectUrl</label>
              <input id="redirect-url" type="text" name="redirectUrl" />
            </div>

            <div field grid-span>
              <label for="icon">application icon</label>
              <input id="icon" type="text" name="icon" @change=${i=>this._icon=i.target.value} />
            </div>

            <div field grid-span>
              <label for="email">contact email</label>
              <input id="email" type="text" name="email" />
            </div>

            <mwc-button grid-span @click=${this.createApplication.bind(this)} raised label="register"></mwc-button>
          </div>
        </form>
      </div>
    `}async createApplication(i){i.preventDefault();const e=new FormData(this.form),a=Array.from(e.entries()).reduce(((i,[e,a])=>(i[e]=a,i)),{}),t=await d.Lp.mutate({mutation:r.ZP`
        mutation ($application: NewApplication!) {
          createApplication(application: $application) {
            id
          }
        }
      `,variables:{application:a}});if(t.errors)c.log("creation fail.");else{const i=t.data.createApplication.id;(0,l.c4)(`application/${i}`)}}pageUpdated(i,e,a){this.active&&this.form.reset()}};s.styles=[o.iv`
      :host {
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        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);
      }
      [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(--margin-wide);
        float: left;
        position: relative;
        top: -20px;
      }

      [form-container] {
        background-color: var(--theme-white-color);
        padding: var(--padding-wide);
        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);
        text-transform: var(--label-text-transform);
      }
      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;
      }
      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;
        }
      }
    `],(0,t.gn)([(0,n.Cb)({type:Object}),(0,t.w6)("design:type",Object)],s.prototype,"application",void 0),(0,t.gn)([(0,n.IO)("form"),(0,t.w6)("design:type",HTMLFormElement)],s.prototype,"form",void 0),(0,t.gn)([(0,n.SB)(),(0,t.w6)("design:type",String)],s.prototype,"_icon",void 0),s=(0,t.gn)([(0,n.Mo)("application-register")],s)}}]);