discourse-custom-wizard/assets/javascripts/discourse/templates/admin-wizards-api.hbs

<div class="wizard-api-header page">
  <div class='buttons'>
    {{#if updating}}
      {{loading-spinner size="small"}}
    {{else}}
      {{#if responseIcon}}
        {{d-icon responseIcon}}
      {{/if}}
    {{/if}}

    {{d-button label="admin.wizard.api.save" action="save" class="btn-primary" disabled=saveDisabled}}

    {{#if showRemove}}
      {{d-button action="remove" label="admin.wizard.api.remove"}}
    {{/if}}

    {{#if error}}
      <div class="error">
        {{error}}
      </div>
    {{/if}}
  </div>

  <div class="wizard-header">
    {{#if api.isNew}}
      {{i18n 'admin.wizard.api.new'}}
    {{else}}
      {{api.title}}
    {{/if}}
  </div>

  <div class="metadata">
    <div class="title">
      <label>{{i18n 'admin.wizard.api.title'}}</label>
      {{input value=api.title placeholder=(i18n 'admin.wizard.api.title_placeholder')}}
    </div>

    <div class="name">
      <label>{{i18n 'admin.wizard.api.name'}}</label>
      {{#if api.isNew}}
        {{input value=api.name placeholder=(i18n 'admin.wizard.api.name_placeholder')}}
      {{else}}
        {{api.name}}
      {{/if}}
    </div>
  </div>
</div>

<div class="wizard-api-header">
  <div class="buttons">
    {{#if isOauth}}
      {{d-button label="admin.wizard.api.auth.btn"
                 action="authorize"
                 disabled=authDisabled
                 class="btn-primary"}}
    {{/if}}
  </div>

  <div class="wizard-header">
    {{i18n 'admin.wizard.api.auth.label'}}
  </div>
</div>

<div class="wizard-api-authentication">
  <div class="settings">

    <div class="wizard-header medium">
      {{i18n 'admin.wizard.api.auth.settings'}}
    </div>

    {{#if isOauth}}
      {{#if api.name}}
        <div class="control-group redirect-uri">
          <div class="control-label">
            <label>{{i18n 'admin.wizard.api.auth.redirect_uri'}}</label>
            <div class="controls">
              {{api.redirectUri}}
            </div>
          </div>
        </div>
      {{/if}}
    {{/if}}

    <div class="control-group auth-type">
      <label>{{i18n 'admin.wizard.api.auth.type'}}</label>
      <div class="controls">
        {{combo-box value=api.authType content=authorizationTypes none='admin.wizard.api.auth.type_none'}}
      </div>
    </div>

    {{#if isOauth}}
      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.url'}}</label>
        <div class="controls">
          {{input value=api.authUrl}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.token_url'}}</label>
        <div class="controls">
          {{input value=api.tokenUrl}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.client_id'}}</label>
        <div class="controls">
          {{input value=api.clientId}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.client_secret'}}</label>
        <div class="controls">
          {{input value=api.clientSecret}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.params.label'}}</label>
        <div class="controls">
          {{#each api.authParams as |param|}}
            <div class="param">
              {{input value=param.key placeholder=(i18n 'admin.wizard.api.auth.params.key')}}
              {{input value=param.value placeholder=(i18n 'admin.wizard.api.auth.params.value')}}
              {{d-button action='removeParam' actionParam=param icon='times'}}
            </div>
          {{/each}}
          {{d-button label='admin.wizard.api.auth.params.new' icon='plus' action='addParam'}}
        </div>
      </div>
    {{/if}}

    {{#if isBasicAuth}}
      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.username'}}</label>
        <div class="controls">
          {{input value=api.username}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.auth.password'}}</label>
        <div class="controls">
          {{input value=api.password}}
        </div>
      </div>
    {{/if}}
  </div>

  {{#if isOauth}}
    <div class="status">
      <div class="authorization">
        {{#if api.authorized}}
          <span class="authorization-indicator authorized"></span>
          <span>{{i18n "admin.wizard.api.status.authorized"}}</span>
        {{else}}
          <span class="authorization-indicator not-authorized"></span>
          <span>{{i18n "admin.wizard.api.status.not_authorized"}}</span>
        {{/if}}
      </div>

      <div class="wizard-header medium">
        {{i18n 'admin.wizard.api.status.label'}}
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.status.code'}}</label>
        <div class="controls">
          {{api.code}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.status.access_token'}}</label>
        <div class="controls">
          {{api.accessToken}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.status.refresh_token'}}</label>
        <div class="controls">
          {{api.refreshToken}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.status.expires_at'}}</label>
        <div class="controls">
          {{api.tokenExpiresAt}}
        </div>
      </div>

      <div class="control-group">
        <label>{{i18n 'admin.wizard.api.status.refresh_at'}}</label>
        <div class="controls">
          {{api.tokenRefreshAt}}
        </div>
      </div>
    </div>
  {{/if}}
</div>

<div class="wizard-header">
  {{i18n 'admin.wizard.api.endpoint.label'}}
</div>

<div class="wizard-api-endpoints">
  {{d-button action='addEndpoint' label='admin.wizard.api.endpoint.add' icon='plus'}}

  {{#if api.endpoints}}
    <div class="endpoint-list">
      <ul>
        {{#each api.endpoints as |endpoint|}}
          <li>
            <div class="endpoint">
              <div class="endpoint-">
                {{input value=endpoint.name
                        placeholder=(i18n 'admin.wizard.api.endpoint.name')}}
                {{combo-box content=endpointMethods
                            value=endpoint.method
                            none="admin.wizard.api.endpoint.method"}}
                {{input value=endpoint.url
                        placeholder=(i18n 'admin.wizard.api.endpoint.url')
                        class='endpoint-url'}}
                {{d-button action='removeEndpoint'
                           actionParam=endpoint
                           icon='times'
                           class='remove-endpoint'}}
              </div>
            </div>
          </li>
        {{/each}}
      </ul>
    </div>
  {{/if}}
</div>