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

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

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

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

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

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

  <div class="metadata">
    <div class="title">
      <label>{{i18n "admin.wizard.api.title"}}</label>
      <Input
        @value={{this.api.title}}
        placeholder={{i18n "admin.wizard.api.title_placeholder"}}
      />
    </div>

    <div class="name {{this.nameClass}}">
      <label>{{i18n "admin.wizard.api.name"}}</label>
      {{#if this.api.isNew}}
        <Input
          @value={{this.api.name}}
          placeholder={{i18n "admin.wizard.api.name_placeholder"}}
        />
      {{else}}
        <span>{{this.api.name}}</span>
      {{/if}}
    </div>
  </div>
</div>

<div class="wizard-api-header">
  <div class="buttons">
    {{#if this.isOauth}}
      {{#if this.authorizing}}
        {{loading-spinner size="small"}}
      {{else}}
        {{#if this.authErrorMessage}}
          <span>{{this.authErrorMessage}}</span>
        {{/if}}
      {{/if}}
      {{d-button
        label="admin.wizard.api.auth.btn"
        action=(action "authorize")
        disabled=this.authDisabled
        class="btn-primary"
      }}
    {{/if}}
  </div>

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

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

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

    {{#if this.showRedirectUri}}
      <div class="control-group redirect-uri">
        <div class="control-label">
          <label>{{i18n "admin.wizard.api.auth.redirect_uri"}}</label>
          <div class="controls">
            {{this.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=this.api.authType
          content=this.authorizationTypes
          onChange=(action (mut this.api.authType))
          options=(hash none="admin.wizard.api.auth.type_none")
        }}
      </div>
    </div>

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

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

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

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

      <div class="control-group">
        <label>{{i18n "admin.wizard.api.auth.params.label"}}</label>
        <div class="controls">
          {{#each this.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 this.isBasicAuth}}
      <div class="control-group">
        <label>{{i18n "admin.wizard.api.auth.username"}}</label>
        <div class="controls">
          <Input @value={{this.api.username}} />
        </div>
      </div>

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

  {{#if this.isOauth}}
    <div class="status">
      <div class="authorization">
        {{#if this.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 small">
        {{i18n "admin.wizard.api.status.label"}}
      </div>

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

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

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

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

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

<div class="wizard-header medium">
  {{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 this.api.endpoints}}
    <div class="endpoint-list">
      <ul>
        {{#each this.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=this.endpointMethods
                    value=endpoint.method
                    onChange=(action (mut endpoint.method))
                    options=(hash none="admin.wizard.api.endpoint.method")
                  }}
                  {{combo-box
                    content=this.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=this.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 medium">
  {{i18n "admin.wizard.api.log.label"}}

  <div class="controls">
    {{d-button
      action=(action "clearLogs")
      class="clear-logs"
      label="admin.wizard.api.log.clear"
    }}
  </div>
</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 this.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="medium"}}</a>
              </div>
            </td>
            <td>{{logentry.status}}</td>
            <td>{{logentry.url}}</td>
            <td>{{logentry.error}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</div>