discourse-custom-wizard/assets/javascripts/discourse/templates/admin-wizards-api-show.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=(action "save") class="btn-primary" disabled=saveDisabled}}

    {{#if showRemove}}
      {{d-button action=(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}}
      {{#if authorizing}}
        {{loading-spinner size="small"}}
      {{else}}
        {{#if authErrorMessage}}
          <span>{{authErrorMessage}}</span>
        {{/if}}
      {{/if}}
      {{d-button label="admin.wizard.api.auth.btn"
                 action=(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 showRedirectUri}}
      <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}}

    <div class="control-group auth-type">
      <label>{{i18n "admin.wizard.api.auth.type"}}</label>
      <div class="controls">
        {{combo-box
          value=api.authType
          content=authorizationTypes
          onChange=(action (mut api.authType))
          options=(hash
            none="admin.wizard.api.auth.type_none"
          )}}
      </div>
    </div>

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

      <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.key")}}
              {{input value=param.value placeholder=(i18n "admin.wizard.value")}}
              {{d-button action=(action "removeParam") actionParam=param icon="times"}}
            </div>
          {{/each}}
          {{d-button label="admin.wizard.api.auth.params.new" icon="plus" action=(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>

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

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

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

      <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=(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-">
                <div class="top">
                  {{input value=endpoint.name
                          placeholder=(i18n "admin.wizard.api.endpoint.name")}}
                  {{input value=endpoint.url
                          placeholder=(i18n "admin.wizard.api.endpoint.url")
                          class="endpoint-url"}}
                  {{d-button action=(action "removeEndpoint")
                             actionParam=endpoint
                             icon="times"
                             class="remove-endpoint"}}
                </div>
                <div class="bottom">
                  {{combo-box
                    content=endpointMethods
                    value=endpoint.method
                    onChange=(action (mut endpoint.method))
                    options=(hash
                      none="admin.wizard.api.endpoint.method"
                    )}}
                  {{combo-box
                    content=contentTypes
                    value=endpoint.content_type
                    onChange=(action (mut endpoint.content_type))
                    options=(hash
                      none="admin.wizard.api.endpoint.content_type"
                    )}}
                  {{multi-select
                    value=endpoint.success_codes
                    content=successCodes
                    onChange=(action (mut endpoint.success_codes))
                    options=(hash
                      none="admin.wizard.api.endpoint.success_codes"
                    )}}
                </div>
              </div>
            </div>
          </li>
        {{/each}}
      </ul>
    </div>
  {{/if}}
</div>

<div class="wizard-header">
  {{i18n "admin.wizard.api.log.label"}}
  {{d-button action=(action "clearLogs")
             icon="trash-alt"
             class="clear-logs"}}
</div>

<div class="wizard-api-log">
  <div class="log-list">
    <table class="wizard-api-log-table">
      <thead>
        <th>Datetime</th>
        <th>User</th>
        <th>Status</th>
        <th>URL</th>
        <th>Error</th>
      </thead>
      <tbody>
        {{#each api.log as |logentry|}}
          <tr>
            <td>{{logentry.time}}</td>
            <td class="user-image">
              <div class="user-image-inner">
                <a href={{logentry.userpath}} data-user-card={{logentry.username}}>{{avatar logentry imageSize="large"}}</a>
              </div>
            </td>
            <td>{{logentry.status}}</td>
            <td>{{logentry.url}}</td>
            <td>{{logentry.error}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</div>