"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[6510],{6510:(e,i,t)=>{t.r(i);var a=t(50493),n=t(28362),o=t.n(n),r=t(16682),l=t(94430),d=t(56765),p=t(28120);const c=["SELLERCRAFT","XILNEX","MMS","XERO","OTHERS"];var s=t(27805),u=t(77675),v=t(51266);let b=class extends((0,p.$)(u.h)(u.B4)){get context(){return{title:{icon:"apps",text:this.application.name}}}render(){var e=this.application||{};return l.dy`
      <div>
        <h2><mwc-icon>apps</mwc-icon>&nbsp;${e.name}</h2>
        <p page-description>${e.description}</p>
      </div>

      <div icon>
        <img src=${e.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=${e.name} />
              </div>

              <div field grid-span>
                <label for="description">description</label>
                <input id="description" type="text" name="description" .value=${e.description} />
              </div>

              <div field grid-span>
                <label for="email">contact email</label>
                <input id="email" type="text" name="email" .value=${e.email} />
              </div>

              <div field grid-span>
                <label for="type-selector">type</label>
                <select id="type-selector" name="type">
                  ${c.map((i=>l.dy`<option value="${e.type}" ?selected="${i===e.type}">${i}</option>`))}
                </select>
              </div>

              <div field grid-span>
                <label for="url">application URL</label>
                <input id="url" type="text" name="url" .value=${e.url} />
              </div>

              <div field grid-span>
                <label for="icon">icon</label>
                <input id="icon" type="text" name="icon" .value=${e.icon} />
              </div>

              <div field grid-span>
                <label for="redirect-url">redirect URL</label>
                <input id="redirect-url" type="text" name="redirectUrl" .value=${e.redirectUrl} />
              </div>

              <div field grid-span>
                <label for="webhook">webhook</label>
                <input id="webhook" type="text" name="webhook" .value=${e.webhook} />
              </div>

              <div field grid-span>
                <label for="available-scopes">available-scopes</label>
                <input id="available-scopes" type="text" .value=${e.availableScopes} readonly />
              </div>

              <div field grid-span>
                <label for="auth-url">auth URL</label>
                <input id="auth-url" type="text" .value=${e.authUrl} readonly />
                <mwc-button
                  dense
                  unelevated
                  button-in-field
                  clipboard-copy
                  @click=${e=>e.preventDefault()}
                  label="copy"
                ></mwc-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=${e.accessTokenUrl} readonly />
                <mwc-button
                  dense
                  unelevated
                  button-in-field
                  clipboard-copy
                  @click=${e=>e.preventDefault()}
                  label="copy"
                ></mwc-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=${e.appKey} readonly />
                <mwc-button
                  dense
                  unelevated
                  button-in-field
                  clipboard-copy
                  @click=${e=>e.preventDefault()}
                  label="copy"
                ></mwc-button>
              </div>

              <div field grid-span>
                <label for="app-secret">appSecret</label>
                <input id="app-secret" type="text" .value=${e.appSecret} readonly />
                <mwc-button
                  dense
                  unelevated
                  button-in-field
                  clipboard-copy
                  @click=${e=>e.preventDefault()}
                  label="copy"
                ></mwc-button>
              </div>
            </div>
          </fieldset>
        </div>

        <div class="button-container">
          <mwc-button raised danger label="delete this app" @click=${this.deleteApplication.bind(this)}></mwc-button>
          <mwc-button raised label="update" @click=${this.updateApplication.bind(this)}></mwc-button>
          <mwc-button outlined label="generate new secret"></mwc-button>
        </div>
      </form>
    `}firstUpdated(){this.clipboard=new(o())(this.copybuttons,{target:e=>e.parentElement.querySelector("input")})}async pageUpdated(e,i,t){this.active&&await this.fetchApplication()}async fetchApplication(){const e=await s.Lp.query({query:r.ZP`
        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=e.data.application}async updateApplication(e){e.preventDefault();const i=this.renderRoot.querySelector("form"),t=new FormData(i),a=Array.from(t.entries()).reduce(((e,[i,t])=>(e[i]=t,e)),{}),n=this.lifecycle.resourceId,o=await s.Lp.mutate({mutation:r.ZP`
        mutation ($id: String!, $patch: ApplicationPatch!) {
          updateApplication(id: $id, patch: $patch) {
            id
            name
            description
            email
            url
            icon
            redirectUrl
            webhook
            appKey
            appSecret
            type
          }
        }
      `,variables:{id:n,patch:a}});o.errors?v.error("update fail"):(this.application=Object.assign(Object.assign({},this.application),o.data.updateApplication),v.log("update sucess"))}async deleteApplication(e){e.preventDefault();const i=this.lifecycle.resourceId;(await s.Lp.mutate({mutation:r.ZP`
        mutation ($id: String!) {
          deleteApplication(id: $id)
        }
      `,variables:{id:i}})).data.deleteApplication?(v.log("delete sucess"),(0,u.c4)("applications")):v.error("delete fail")}};b.styles=[l.iv`
      :host {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        position: relative;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);
      }
      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%;
      }
      label {
        font: var(--label-font);
        color: var(--label-color);
        text-transform: var(--label-text-transform);
      }
      input,
      select {
        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,
      button {
        outline: none;
      }
      form {
        max-width: var(--content-container-max-width);
      }
      [fieldset-container] {
        background-color: var(--theme-white-color);
        margin: var(--margin-wide) 0 var(--margin-default) 0;
        padding: var(--padding-default);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
      }
      [fieldset-container] fieldset {
        margin: 0;
        margin-top: -15px;
      }
      fieldset {
        border-radius: var(--border-radius);
        border: var(--border-dark-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-in-field] {
        position: absolute;
        top: 24px;
        right: 4px;
      }
      [input-hint] {
        font: var(--input-hint-font);
        color: var(--input-hint-color);
      }
      [danger] {
        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
      }
      .button-container {
        margin-top: var(--margin-wide);
        text-align: right;
      }
      .button-container mwc-button {
        margin-left: var(--margin-narrow);
      }
      @media screen and (max-width: 480px) {
        [field] {
          grid-column: span 2;
        }
      }
    `],(0,a.gn)([(0,d.Cb)({type:Object}),(0,a.w6)("design:type",Object)],b.prototype,"application",void 0),(0,a.gn)([(0,d.Kt)("[clipboard-copy]"),(0,a.w6)("design:type",Object)],b.prototype,"copybuttons",void 0),b=(0,a.gn)([(0,d.Mo)("application-page")],b)}}]);