quay/static/directives/credentials-dialog.html

<div class="credentials-dialog-element">
  <div class="modal fade co-dialog wider">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body" ng-show="credentials.loading">
          <div class="cor-loader"></div>
        </div>
        <div class="co-tab-modal-body" ng-show="!credentials.loading">
          <cor-tab-panel orientation="vertical" cor-cookie-tabs="quay.credentialsTab">
            <!-- Tabs -->
            <cor-tabs>
              <cor-tab tab-active="true" tab-id="cred-secret">
                <i class="fa" ng-class="entityIcon"></i> {{ secretTitle }}
              </cor-tab>

              <cor-tab tab-id="cred-kubernetes">
                <i class="fa kubernetes-icon icon"></i> Kubernetes Secret
              </cor-tab>

              <cor-tab tab-id="cred-rkt">
                <i class="fa rocket-icon icon"></i> rkt Configuration
              </cor-tab>

              <cor-tab tab-id="cred-docker">
                <i class="fa docker-icon icon"></i> Docker Login
              </cor-tab>

              <cor-tab tab-id="cred-docker-config">
                <i class="fa docker-icon icon"></i> Docker Configuration
              </cor-tab>

              <cor-tab tab-id="cred-mesos" quay-show="isDownloadSupported()">
                <i class="fa mesos-icon icon"></i> Mesos Credentials
              </cor-tab>
            </cor-tabs>

            <!-- Tab contents -->
            <cor-tab-content>
              <h3 class="dialog-title-header">
                  <div class="dialog-title">Credentials for {{ credentials.title || credentials.username }}</div>
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              </h3>

              <cor-tab-pane id="cred-secret">
                <label>Username & {{ secretTitle }}:</label>
                  <div class="conjoined-box-wrapper">
                      <div class="copy-box conjoined-box-top" value="credentials.username"></div>
                      <div class="copy-box conjoined-box-bottom" value="credentials.password"></div>
                  </div>

                <div ng-transclude/>
              </cor-tab-pane>

              <cor-tab-pane id="cred-kubernetes">
                <label>Step 1: Download secret</label>
                <div class="action-text">First, download the Kubernetes pull secret for the {{ entityTitle }}:</div>
                <ul class="action-bar">
                  <li><a ng-click="downloadFile(getKubernetesFile(credentials))" ng-if="isDownloadSupported()"><i class="fa fa-download"></i> Download {{ getKubernetesFilename(credentials) }}</li></a>
                  <li><a ng-click="viewFile(k8s)"><i class="fa fa-code"></i> View {{ getKubernetesFilename(credentials) }}</li></a>
                </ul>

                <textarea class="form-control viewing-file" ng-if="k8s.viewingFile" readonly>{{ getKubernetesFile(credentials).contents }}</textarea>

                <label>Step 2: Submit</label>
                <div class="action-text">Second, submit the secret to the cluster using this command:</div>
                <div class="copy-box" value="'kubectl create -f ' + getKubernetesFilename(credentials) + ' --namespace=NAMESPACEHERE'"></div>

                <label>Step 3: Update Kubernetes configuration</label>
                  <div class="action-text">
                    Finally, <a href="http://kubernetes.io/docs/user-guide/images/#specifying-imagepullsecrets-on-a-pod" ng-safenewtab>add a reference to the secret to your Kuberenetes pod config</a> via an <code>imagePullSecrets</code> field. For example:

                    <pre>
apiVersion: v1
kind: Pod
metadata:
  name: somepod
  namespace: all
spec:
  containers:
    - name: web
      image: {{ Config.SERVER_HOSTNAME }}/{{ getNamespace(credentials) }}/somerepo
  <code style="font-weight: bold;">
  imagePullSecrets:
    - name: {{ getKubernetesSecretName(credentials) }}</code></pre>
                  </div>
              </cor-tab-pane>

              <cor-tab-pane id="cred-mesos">
                <label>Step 1: Download credentials bundle</label>
                <div class="action-text">First, download the Docker credentials file as a bundle:</div>
                <ul class="action-bar">
                  <li><a ng-click="downloadFile(getMesosFile(credentials))" ng-if="isDownloadSupported()"><i class="fa fa-download"></i> Download {{ getMesosFilename(credentials) }}</li></a>
                </ul>

                <label>Step 2: Copy credentials bundle</label>
                <div class="action-text">
                  Second, copy the credentials bundle file <strong>{{ getMesosFilename(credentials) }}</strong>
                  into a location accessible to Mesos:
                </div>
                <div class="copy-box" value="'cp ' + getMesosFilename(credentials) + ' /etc/'"></div>

                <label>Step 3: Update Mesos configuration</label>
                <div class="action-text">
                  Finally, <a href="https://mesosphere.github.io/marathon/docs/native-docker-private-registry.html" ng-safenewtab>add a reference to the bundle to your Mesos config</a> via a <code>uris</code> field. For example:

                  <pre>
{
  "id": "/some/name/or/id",
  "cpus": 1,
  "mem": 1024,
  "instances": 1,
  "container": {
    "type": "DOCKER",
    "docker": {
      "image": "{{ Config.SERVER_HOSTNAME }}/{{ getNamespace(credentials) }}/somerepo",
      "network": "HOST"
    }
  },
  <code style="font-weight: bold;">
  "uris":  [
      "file:///etc/{{ getMesosFilename(credentials) }}"
  ]</code>
}</pre>
                </div>
              </cor-tab-pane>

              <cor-tab-pane id="cred-rkt">
                <label>Step 1: Download credentials config</label>
                <div class="action-text">First, download the rkt credentials file for the {{ entityTitle }}:</div>
                <ul class="action-bar">
                  <li><a ng-click="downloadFile(getRktFile(credentials))" ng-if="isDownloadSupported()"><i class="fa fa-download"></i> Download {{ getRktFilename(credentials) }}</li></a>
                  <li><a ng-click="viewFile(rkt)"><i class="fa fa-code"></i> View {{ getRktFilename(credentials) }}</li></a>
                </ul>

                <textarea class="form-control viewing-file" ng-if="rkt.viewingFile" readonly>{{ getRktFile(credentials).contents }}</textarea>

                <label>Step 2: Write to disk</label>
                <div class="action-text">Second, place the file in the rkt configuration directory:</div>
                <div class="copy-box" value="'mv ' + getRktFilename(credentials) + ' /etc/rkt/auth.d/'"></div>
              </cor-tab-pane>

              <cor-tab-pane id="cred-docker">
                <label>Run docker login</label>
                <div class="action-text">Enter the following command on the command line:</div>
                <div class="copy-box" value="getDockerLogin(credentials)"></div>
              </cor-tab-pane>

              <cor-tab-pane id="cred-docker-config">
                <label>Step 1: Download credentials config</label>
                <div class="action-text">First, download the Docker credentials file for the {{ entityTitle }}:</div>
                <ul class="action-bar">
                  <li><a ng-click="downloadFile(getDockerFile(credentials))" ng-if="isDownloadSupported()"><i class="fa fa-download"></i> Download {{ getDockerFilename(credentials) }}</li></a>
                  <li><a ng-click="viewFile(docker)"><i class="fa fa-code"></i> View {{ getDockerFilename(credentials) }}</li></a>
                </ul>

                <textarea class="form-control viewing-file" ng-if="docker.viewingFile" readonly>{{ getDockerFile(credentials).contents }}</textarea>

                <label>Step 2: Write to disk</label>
                <div class="action-text">Second, place the file in the Docker configuration directory. <strong>Note:</strong> This will <strong>overwrite</strong> existing credentials:</div>
                <div class="copy-box" value="'mv ' + getDockerFilename(credentials) + ' ~/.docker/config.json'"></div>
              </cor-tab-pane>
            </cor-tab-content>
          </cor-tab-panel>
        </div><!-- /.co-tab-modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>