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

<div class="wizard-api-header">
  <div class="service">
    {{input value=api.service placeholder=(i18n 'admin.wizard.api.service')}}
  </div>

  <div class='buttons'>
    {{#if savingApi}}
      {{loading-spinner size="small"}}
    {{/if}}
    {{d-button label="admin.wizard.api.save" action="save" class="btn-primary"}}
    {{d-button action="removeApi" label="admin.wizard.api.remove"}}
  </div>
</div>

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

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

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

    <div class="control-group">
      <div class="control-label">
        <span>{{i18n 'admin.wizard.api.redirect_uri'}}</span>
        <span>{{api.redirectUri}}</span>
      </div>
    </div>

    <div class="control-group">
      <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>

    <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.token_url'}}</label>
      <div class="controls">
        {{input value=api.tokenUrl}}
      </div>
    </div>

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

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

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

    <div class="actions">
      {{d-button label="admin.wizard.api.authorize" action="authorize"}}
    </div>
  </div>

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

    <div class="authorization">
      {{#if api.authorized}}
        <span class="authorization-indicator authorized"></span>
        <span>{{i18n "admin.wizard.api.authorized"}}</span>
      {{else}}
        <span class="authorization-indicator not-authorized"></span>
        <span>{{i18n "admin.wizard.api.not_authorized"}}</span>
      {{/if}}
    </div>
    <div class="control-group">
      <label>Access Token:</label>
      <div class="controls">
        {{api.accessToken}}
      </div>
    </div>

    <div class="control-group">
      <label>Expires At:</label>
      <div class="controls">
        {{api.tokenExpiresAt}}
      </div>
    </div>

    <div class="control-group">
      <label>Refresh At:</label>
      <div class="controls">
        {{api.tokenRefreshAt}}
      </div>
    </div>

    <div class="control-group">
      <label>Refresh Token:</label>
      <div class="controls">
        {{api.refreshToken}}
      </div>
    </div>

    <div class="control-group">
      <label>Code:</label>
      <div class="controls">
        {{api.code}}
      </div>
    </div>
  </div>
</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'}}

  <div class="endpoint-list">
    <ul>
      {{#each api.endpoints as |endpoint|}}
        <li>
          <div class="endpoint">
            {{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>
        </li>
      {{/each}}
    </ul>
  </div>
</div>