"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[1499],{21499:(e,t,i)=>{i.r(t),i.d(t,{Oauth2ClientRegister:()=>p});var n=i(50493),r=i(16682),a=i(94430),o=i(56765),l=i(28120),d=i(27805),c=i(37077),s=i(77675);let p=class extends((0,l.$)(s.h)(s.B4)){get context(){return{title:"oauth2 client registration"}}render(){return a.dy`
      <h2>Register new oauth2 client</h2>
      <p page-description>You can register new oauth2 client here</p>

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

      <form>
        <div field-2column>
          <div field grid-span>
            <label for="name">name</label>
            <input type="text" id="name" name="name" />
          </div>

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

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

          <div field grid-span>
            <label for="client-id">client id</label>
            <input type="text" id="client-id" name="clientId" />
            The client identifier issued to the client during the application registration process.
          </div>

          <div field grid-span>
            <label for="client-secret">client secret</label>
            <input type="text" id="client-secret" name="clientSecret" />
            The client secret issued to the client during the application registration process.
          </div>
        </div>

        <mwc-button raised @click=${this.createOauth2Client.bind(this)}>register</mwc-button>
      </form>
    `}async createOauth2Client(e){e.preventDefault();const t=new FormData(this.form),i=Array.from(t.entries()).reduce(((e,[t,i])=>(e[t]=i,e)),{}),n=await d.Lp.mutate({mutation:r.ZP`
        mutation ($oauth2Client: NewOauth2Client!) {
          createOauth2Client(oauth2Client: $oauth2Client) {
            id
          }
        }
      `,variables:{oauth2Client:i}});if(n.errors)(0,c.h4)({level:"error",message:"create oauth2 client fail"});else{const e=n.data.createOauth2Client.id;(0,s.c4)(`oauth2-client/${e}`)}}async pageUpdated(e,t,i){this.active&&this.form.reset()}};p.styles=[a.iv`
      :host {
        display: flex;
        flex-direction: column;
        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%;
      }

      :host * {
        display: block;
      }
      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 {
        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) {
        [field] {
          grid-column: span 2;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],p.prototype,"application",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],p.prototype,"_icon",void 0),(0,n.gn)([(0,o.IO)("form"),(0,n.w6)("design:type",HTMLFormElement)],p.prototype,"form",void 0),p=(0,n.gn)([(0,o.Mo)("oauth2-client-register")],p)}}]);