quay/static/directives/request-service-key-dialog.html

<div class="request-service-key-dialog-element">
  <!-- Modal message dialog -->
  <div class="co-dialog modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-show="!working">&times;</button>
            <h4 class="modal-title">Create key for service {{ requestKeyInfo.service }}</h4>
          </div>

          <div class="modal-body" ng-show="working">
            <div class="cor-loader"></div>
          </div>

          <div class="modal-body" ng-show="!working">
            <!-- Step 0 -->
            <div ng-show="step == 0">
              <table class="co-option-table">
                <tr>
                  <td><input type="radio" id="automaticKey" ng-model="requestKind" value="automatic"></td>
                  <td>
                    <label for="automaticKey">Have the service provide a key</label>
                    <div class="help-text">Recommended for <code>{{ requestKeyInfo.service }}</code> installations where the single instance is setup now.</div>
                  </td>
                </tr>
                <tr>
                  <td><input type="radio" id="presharedKey" ng-model="requestKind" value="preshared"></td>
                  <td>
                     <label for="presharedKey">Generate shared key</label>
                     <div class="help-text">Recommended for <code>{{ requestKeyInfo.service }}</code> installations where the instances are dynamically started.</div>
                  </td>
                </tr>
              </table>
            </div>

            <!-- Step 1 (automatic) -->
            <div ng-show="step == 1 && requestKind == 'automatic'" style="text-align: center">
              <div style="margin-top: 20px;">
                Please start the <code>{{ requestKeyInfo.service }}</code> service now, configured for <a href="https://github.com/coreos/jwtproxy#autogenerated-private-key" ng-safenewtab>autogenerated private key</a>. The key approval process will continue automatically once the service connects to Quay.
              </div>
              <div style="margin-top: 20px;">
                 Waiting for service to connect
              </div>
              <div style="margin-top: 10px; margin-bottom: 20px;">
                <div class="cor-loader-inline"></div>
              </div>
            </div>

            <!-- Step 2 (automatic) -->
            <div ng-show="step == 2 && requestKind == 'automatic'" style="text-align: center">
              A key for service <code>{{ requestKeyInfo.service }}</code> has been automatically generated, approved and saved in the service's keystore.
            </div>

            <!-- Step 1 (generate) -->
            <div ng-show="step == 1 && requestKind == 'preshared'">
              <form name="createForm" ng-submit="createPresharedKey()">
                <table class="co-form-table">
                  <tr>
                    <td><label for="create-key-name">Key Name:</label></td>
                    <td>
                      <input class="form-control" name="create-key-name" type="text" ng-model="preshared.name" placeholder="Friendly Key Name">
                      <span class="co-help-text">
                        A friendly name for the key for later reference.
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td><label for="create-key-expiration">Expiration date (optional):</label></td>
                    <td>
                      <span class="datetime-picker" datetime="preshared.expiration"></span>
                      <span class="co-help-text">
                        The date and time that the key expires. If left blank, the key will never expire.
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td><label for="create-key-notes">Approval Notes (optional):</label></td>
                    <td>
                      <markdown-input content="preshared.notes" 
                                      can-write="true" 
                                      (content-changed)="updateNotes($event.content)" 
                                      field-title="notes"></markdown-input>
                      <span class="co-help-text">
                        Optional notes for additional human-readable information about why the key was created.
                      </span>
                    </td>
                  </tr>
                </table>
              </form>
            </div>

            <!-- Step 2 (generate) -->
            <div ng-show="step == 2 && requestKind == 'preshared'">
              <div class="co-alert co-alert-warning">
                The following key has been generated for service <code>{{ requestKeyInfo.service }}</code>.
                <br><br>
                Please copy the key's ID and copy/download the key's private contents and place it in the directory with the service's configuration.
                <br><br>
                <strong>Once this dialog is closed this private key will not be accessible anywhere else!</strong>
              </div>

              <label>Key ID:</label>
              <div class="copy-box" value="createdKey.kid"></div>

              <label>Private Key (PEM):</label>
              <textarea class="key-display form-control" onclick="this.focus();this.select()" readonly>{{ createdKey.private_key }}</textarea>
            </div>
          </div>
          <div class="modal-footer" ng-show="!working">
            <button type="button" class="btn btn-primary" ng-show="step == 1 && requestKind == 'preshared'"
                    ng-disabled="createForm.$invalid"
                    ng-click="createPresharedKey()">
              Generate Key
            </button>

            <button type="button" class="btn btn-primary" ng-show="step == 0 && requestKind == 'preshared'"
                    ng-click="showGenerate()">
              Continue
            </button>

            <button type="button" class="btn btn-primary" ng-show="step == 0 && requestKind == 'automatic'"
                    ng-click="startApproval()">
              Start Approval
            </button>

            <button type="button" class="btn btn-primary" ng-click="downloadPrivateKey(createdKey)" ng-if="createdKey && isDownloadSupported()">
              <i class="fa fa-download"></i> Download Private Key
            </button>

            <button type="button" class="btn btn-default" data-dismiss="modal" ng-show="step == 2">Close</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-show="step != 2">Cancel</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</div>