Merge branch 'master' into star

static/directives/application-manager.html

@@ -1,7 +1,7 @@
 <div class="application-manager-element">
   <div class="quay-spinner" ng-show="loading"></div>
 
-  <div class="container" ng-show="!loading">
+  <div class="cor-container" ng-show="!loading">
     <div class="side-controls">
       <span class="popup-input-button" placeholder="'Application Name'" submitted="createApplication(value)">
         <i class="fa fa-plus"></i> Create New Application

static/directives/config/config-bool-field.html

@@ -0,0 +1,5 @@
+<div class="config-bool-field-element">
+  <form name="fieldform" novalidate>
+    <input type="checkbox" ng-model="binding">
+  </form>
+</div>

static/directives/config/config-contact-field.html

@@ -0,0 +1,46 @@
+<div class="config-contact-field-element">
+  <table>
+  <tr>
+  <td>
+    <div class="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+        <span ng-switch="kind">
+          <span ng-switch-when="mailto"><i class="fa fa-envelope"></i>E-mail</span>
+          <span ng-switch-when="irc"><i class="fa fa-comment"></i>IRC</span>
+          <span ng-switch-when="tel"><i class="fa fa-phone"></i>Phone</span>
+          <span ng-switch-default><i class="fa fa-ticket"></i>URL</span>
+        </span>
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu">
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'mailto'">
+            <i class="fa fa-envelope"></i> E-mail
+          </a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'irc'">
+            <i class="fa fa-comment"></i> IRC
+          </a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'tel'">
+            <i class="fa fa-phone"></i> Telephone
+          </a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'http'">
+            <i class="fa fa-ticket"></i> URL
+          </a>
+        </li>
+      </ul>
+    </div>
+  </td>
+  <td>
+    <form>
+      <input class="form-control" placeholder="{{ getPlaceholder(kind) }}" ng-model="value">
+    </form>
+  </td>
+  </tr>
+  </table>
+</div>

static/directives/config/config-contacts-field.html

@@ -0,0 +1,4 @@
+<div class="config-contacts-field-element">
+    <div class="config-contact-field" binding="item.value" ng-repeat="item in items">
+    </div>
+</div>

static/directives/config/config-file-field.html

@@ -0,0 +1,10 @@
+<div class="config-file-field-element">
+  <span ng-show="uploadProgress == null">
+    <span ng-if="hasFile"><code>{{ filename }}</code></span>
+    <span class="nofile" ng-if="!hasFile"><code>{{ filename }}</code> not found in mounted config directory: </span>
+    <input type="file" ng-file-select="onFileSelect($files)">
+  </span>
+  <span ng-show="uploadProgress != null">
+    Uploading file as <strong>{{ filename }}</strong>... {{ uploadProgress }}%
+  </span>
+</div>

static/directives/config/config-list-field.html

@@ -0,0 +1,16 @@
+<div class="config-list-field-element">
+  <ul ng-show="binding && binding.length">
+    <li class="item" ng-repeat="item in binding">
+      <span class="item-title">{{ item }}</span>
+      <span class="item-delete">
+        <a href="javascript:void(0)" ng-click="removeItem(item)">Remove</a>
+      </span>
+    </li>
+  </ul>
+  <span class="empty" ng-if="!binding || binding.length == 0">No {{ itemTitle }}s defined</span>
+  <form class="form-control-container" ng-submit="addItem()">
+    <input type="text" class="form-control" placeholder="{{ placeholder }}"
+           ng-model="newItemName" style="display: inline-block">
+    <button class="btn btn-default" style="display: inline-block">Add</button>
+  </form>
+</div>

static/directives/config/config-numeric-field.html

@@ -0,0 +1,6 @@
+<div class="config-numeric-field-element">
+  <form name="fieldform" novalidate>
+    <input type="number" class="form-control" placeholder="{{ placeholder || '' }}"
+           ng-model="bindinginternal" ng-trim="false" ng-minlength="1" required>
+  </form>
+</div>

static/directives/config/config-parsed-field.html

@@ -0,0 +1 @@
+<div class="config-parsed-field-element"></div>

static/directives/config/config-setup-tool.html

@@ -0,0 +1,625 @@
+<div class="config-setup-tool-element">
+  <div class="cor-loader" ng-if="!config"></div>
+  <div ng-show="config && config['SUPER_USERS']">
+    <form id="configform" name="configform">
+
+    <!-- Basic Configuration -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-gears"></i> Basic Configuration
+      </div>
+      <div class="co-panel-body">
+        <table class="config-table">
+          <tr>
+            <td>Enterprise Logo URL:</td>
+            <td>
+              <span class="config-string-field" binding="config.ENTERPRISE_LOGO_URL"
+                    placeholder="http://example.com/logo.png"></span>
+              <div class="help-text">
+                Enter the full URL to your company's logo.
+              </div>
+            </td>
+            <td>
+              <img class="registry-logo-preview" ng-src="{{ config.ENTERPRISE_LOGO_URL }}">
+            </td>
+          </tr>
+          <tr>
+            <td class="non-input">Contact Information:</td>
+            <td colspan="2">
+              <span class="config-contacts-field" binding="config.CONTACT_INFO"></span>
+              <div class="help-text" style="margin-top: 10px;">
+                Information to show in the Contact Page. If none specified, CoreOS contact information
+                is displayed.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>User Creation:</td>
+            <td colspan="2">
+              <div class="co-checkbox">
+                <input id="ftuc" type="checkbox" ng-model="config.FEATURE_USER_CREATION">
+                <label for="ftuc">Enable Open User Creation</label>
+              </div>
+              <div class="help-text">
+                 If enabled, user accounts can be created by anyone.
+                 Users can always be created in the users panel under this superuser view.
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+    <!-- Server Configuration -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-cloud"></i> Server Configuration
+      </div>
+      <div class="co-panel-body">
+        <table class="config-table">
+          <tr>
+            <td>Server Hostname:</td>
+            <td>
+              <span class="config-string-field" binding="config.SERVER_HOSTNAME"
+                    placeholder="Hostname (and optional port if non-standard)"
+                    pattern="{{ HOSTNAME_REGEX }}"></span>
+              <div class="help-text">
+                 The HTTP host (and optionally the port number if a non-standard HTTP/HTTPS port) of the location
+                  where the registry will be accessible on the network
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>SSL:</td>
+            <td>
+              <div class="co-checkbox">
+                <input id="enable-ssl" type="checkbox" ng-model="config.PREFERRED_URL_SCHEME"
+                       ng-true-value="https" ng-false-value="http">
+                <label for="enable-ssl">Enable SSL</label>
+              </div>
+              <div class="help-text" style="margin-bottom: 10px">
+                 A valid SSL certificate and private key files are required to use this option.
+              </div>
+
+              <table class="config-table"  ng-if="config.PREFERRED_URL_SCHEME == 'https'">
+                <tr>
+                  <td class="non-input">Certificate:</td>
+                  <td>
+                    <span class="config-file-field" filename="ssl.cert"></span>
+                    <div class="help-text">
+                      The certificate must be in PEM format.
+                    </div
+                  </td>
+                </tr>
+                <tr>
+                  <td class="non-input">Private key:</td>
+                  <td>
+                    <span class="config-file-field" filename="ssl.key"></span>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+      </div>
+    </div>
+
+    <!-- Redis -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <img src="/static/img/redis-small.png"> redis
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+            <p>A <a href="http://redis.io" target="_blank">redis</a> key-value store is required for real-time events and build logs.</p>
+        </div>
+
+        <table class="config-table">
+          <tr>
+            <td>Redis Hostname:</td>
+            <td>
+              <span class="config-string-field" binding="mapped.redis.host"
+                    placeholder="The redis server hostname"
+                    pattern="{{ HOSTNAME_REGEX }}"
+                    validator="validateHostname(value)">></span>
+            </td>
+          </tr>
+          <tr>
+            <td>Redis port:</td>
+            <td>
+              <span class="config-numeric-field" binding="mapped.redis.port" default-value="6379"></span>
+              <div class="help-text">
+                Access to this port and hostname must be allowed from all hosts running
+                the enterprise registry
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>Redis password:</td>
+            <td>
+              <input class="form-control" type="password" ng-model="mapped.redis.password"
+                     placeholder="Optional password for connecting to redis">
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div> <!-- /Redis -->
+
+    <!-- Registry Storage -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-download"></i> Registry Storage
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+          <p>
+            Registry images can be stored either locally or in a remote storage system.
+            <strong>A remote storage system is required for high-avaliability systems.</strong>
+          </p>
+
+          <table class="config-table">
+            <tr>
+              <td class="non-input">Storage Engine:</td>
+              <td>
+                <select ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[0]">
+                  <option value="LocalStorage">Locally mounted directory</option>
+                  <option value="S3Storage">Amazon S3</option>
+                  <option value="GoogleCloudStorage">Google Cloud Storage</option>
+                  <option value="RadosGWStorage">Ceph Object Gateway (RADOS)</option>
+                </select>
+              </td>
+            </tr>
+
+            <!-- Fields -->
+            <tr ng-repeat="field in STORAGE_CONFIG_FIELDS[config.DISTRIBUTED_STORAGE_CONFIG.local[0]]">
+              <td>{{ field.title }}:</td>
+              <td>
+                <span class="config-string-field"
+                      binding="config.DISTRIBUTED_STORAGE_CONFIG.local[1][field.name]"
+                      placeholder="{{ field.placeholder }}"
+                      ng-if="field.kind == 'text'"></span>
+                <div class="co-checkbox" ng-if="field.kind == 'bool'">
+                  <input id="dsc-{{ field.name }}" type="checkbox"
+                         ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1][field.name]">
+                  <label for="dsc-{{ field.name }}">{{ field.placeholder }}</label>
+                </div>
+                <div class="help-text" ng-if="field.help_url">
+                  See <a href="{{ field.help_url }}" target="_blank">Documentation</a> for more information
+                </div>
+              </td>
+            </tr>
+          </table>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- E-mail -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-envelope"></i> E-mail
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+          <p>Valid e-mail server configuration is required for notification e-mails and the ability of
+          users to reset their passwords.</p>
+        </div>
+
+        <div class="co-checkbox">
+          <input id="ftmail" type="checkbox" ng-model="config.FEATURE_MAILING">
+          <label for="ftmail">Enable E-mails</label>
+        </div>
+
+        <table class="config-table" ng-if="config.FEATURE_MAILING">
+          <tr>
+            <td>SMTP Server:</td>
+            <td>
+              <span class="config-string-field" binding="config.MAIL_SERVER"
+                    placeholder="SMTP server for sending e-mail"
+                    pattern="{{ HOSTNAME_REGEX }}"
+                    validator="validateHostname(value)">></span>
+            </td>
+          </tr>
+          <tr>
+            <td>SMTP Server Port:</td>
+            <td>
+              <span class="config-numeric-field" binding="config.MAIL_PORT"
+                    default-value="587"></span>
+            </td>
+          </tr>
+          <tr>
+            <td>TLS:</td>
+            <td>
+              <div class="co-checkbox">
+                <input id="mut" type="checkbox" ng-model="config.MAIL_USE_TLS">
+                <label for="mut">Use TLS</label>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>Mail Sender:</td>
+            <td>
+              <input class="form-control" type="email" ng-model="config.DEFAULT_MAIL_SENDER"
+                     placeholder="E-mail address"></span>
+              <div class="help-text">
+                E-mail address from which all e-mails are sent. If not specified,
+                <code>support@quay.io</code> will be used.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>Authentication:</td>
+            <td>
+              <div class="co-checkbox">
+                <input id="uma" type="checkbox" ng-model="config.MAIL_USE_AUTH">
+                <label for="uma">Requires Authentication</label>
+              </div>
+
+              <table class="config-table" ng-if="config.MAIL_USE_AUTH">
+                <tr>
+                  <td>Username:</td>
+                  <td>
+                    <span class="config-string-field" binding="config.MAIL_USERNAME"
+                          placeholder="Username for authentication"></span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>Password:</td>
+                  <td>
+                    <input class="form-control" type="password"
+                          ng-model="config.MAIL_PASSWORD"
+                          placeholder="Password for authentication"></span>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+
+        </table>
+      </div>
+    </div> <!-- /E-mail -->
+
+    <!-- Authentication -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-users"></i> Authentication
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+          <p>
+            Authentication for the registry can be handled by either the registry itself or LDAP.
+            External authentication providers (such as GitHub) can be used on top of this choice.
+          </p>
+        </div>
+
+        <table class="config-table">
+          <tr>
+            <td class="non-input">Authentication:</td>
+            <td>
+              <select ng-model="config.AUTHENTICATION_TYPE">
+                <option value="Database">Local Database</option>
+                <option value="LDAP">LDAP</option>
+              </select>
+            </td>
+          </tr>
+        </table>
+
+
+        <table class="config-table" ng-if="config.AUTHENTICATION_TYPE == 'LDAP'">
+          <tr>
+            <td>LDAP URI:</td>
+            <td><span class="config-string-field" binding="config.LDAP_URI"></span></td>
+          </tr>
+          <tr>
+            <td>Administrator DN:</td>
+            <td><span class="config-string-field" binding="config.LDAP_ADMIN_DN"></span></td>
+          </tr>
+          <tr>
+            <td>Base DN:</td>
+            <td><span class="config-list-field" item-title="DN" binding="config.LDAP_BASE_DN"></span></td>
+          </tr>
+          <tr>
+            <td>Administrator Password:</td>
+            <td><span class="config-string-field" binding="config.LDAP_ADMIN_PASSWD"></span></td>
+          </tr>
+          <tr>
+            <td>E-mail Attribute:</td>
+            <td><span class="config-string-field" binding="config.LDAP_EMAIL_ATTR"></span></td>
+          </tr>
+          <tr>
+            <td>UID Attribute:</td>
+            <td><span class="config-string-field" binding="config.LDAP_UID_ATTR"></span></td>
+          </tr>
+          <tr>
+            <td>User RDN:</td>
+            <td><span class="config-list-field" item-title="RDN" binding="config.LDAP_USER_RDN"></span></td>
+          </tr>
+        </table>
+      </div>
+    </div> <!-- /Authentication -->
+
+    <!-- GitHub Authentication -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-github"></i> GitHub (Enterprise) Authentication
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+          <p>
+            If enabled, users can use GitHub or GitHub Enterprise to authenticate to the registry.
+          </p>
+          <p>
+            <strong>Note:</strong> A registered GitHub (Enterprise) OAuth application is required.
+            View instructions on how to
+            <a href="https://coreos.com/docs/enterprise-registry/github-app/" target="_blank">
+              Create an OAuth Application in GitHub
+            </a>
+          </p>
+        </div>
+
+        <div class="co-checkbox">
+          <input id="ftghl" type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">
+          <label for="ftghl">Enable GitHub Authentication</label>
+        </div>
+
+        <table class="config-table" ng-if="config.FEATURE_GITHUB_LOGIN">
+          <tr>
+            <td>GitHub:</td>
+            <td>
+              <select ng-model="mapped.GITHUB_LOGIN_KIND">
+                <option value="hosted">GitHub.com</option>
+                <option value="enterprise">GitHub Enterprise</option>
+              </select>
+            </td>
+          </tr>
+          <tr ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
+            <td>GitHub Endpoint:</td>
+            <td>
+              <span class="config-string-field"
+                    binding="config.GITHUB_LOGIN_CONFIG.GITHUB_ENDPOINT"
+                    placeholder="https://my.githubserver"
+                    pattern="{{ GITHUB_REGEX }}">
+              </span>
+              <div class="help-text">
+                The GitHub Enterprise endpoint. Must start with http:// or https://.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>OAuth Client ID:</td>
+            <td>
+              <span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_ID">
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>OAuth Client Secret:</td>
+            <td>
+              <span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_SECRET">
+              </span>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div> <!-- /GitHub Authentication -->
+
+    <!-- Google Authentication -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-google"></i> Google Authentication
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+          <p>
+            If enabled, users can use Google to authenticate to the registry.
+          </p>
+          <p>
+            <strong>Note:</strong> A registered Google OAuth application is required.
+            Visit the
+            <a href="https://console.developers.google.com" target="_blank">
+              Google Developer Console
+            </a>
+            to register an application.
+          </p>
+        </div>
+
+        <div class="co-checkbox">
+          <input id="ftgoa" type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">
+          <label for="ftgoa">Enable Google Authentication</label>
+        </div>
+
+        <table class="config-table" ng-if="config.FEATURE_GOOGLE_LOGIN">
+          <tr>
+            <td>OAuth Client ID:</td>
+            <td>
+              <span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_ID">
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>OAuth Client Secret:</td>
+            <td>
+              <span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_SECRET">
+              </span>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div> <!-- /Google Authentication -->
+
+    <!-- Build Support -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-tasks"></i> Dockerfile Build Support
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+           If enabled, users can submit Dockerfiles to be built and pushed by the Enterprise Registry.
+        </div>
+
+        <div class="co-checkbox">
+          <input id="ftbs" type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">
+          <label for="ftbs">Enable Dockerfile Build</label>
+        </div>
+
+        <div ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 10px">
+          <strong>Note: Build workers are required for this feature.</strong>
+           See <a href="https://coreos.com/docs/enterprise-registry/build-support/" target="_blank">Adding Build Workers</a> for instructions on how to setup build workers.
+        </div>
+      </div>
+    </div> <!-- /Build Support -->
+
+
+    <!-- GitHub Trigger -->
+    <div class="co-panel" ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
+      <div class="co-panel-heading">
+        <i class="fa fa-github"></i> GitHub (Enterprise) Build Triggers
+      </div>
+      <div class="co-panel-body">
+        <div class="description">
+          <p>
+            If enabled, users can setup GitHub or GitHub Enterprise triggers to invoke Registry builds.
+          </p>
+          <p>
+            <strong>Note:</strong> A registered GitHub (Enterprise) OAuth application (<strong>separate from GitHub Authentication</strong>) is required.
+            View instructions on how to
+            <a href="https://coreos.com/docs/enterprise-registry/github-app/" target="_blank">
+              Create an OAuth Application in GitHub
+            </a>
+          </p>
+        </div>
+
+        <div class="co-checkbox">
+          <input id="ftgb" type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">
+          <label for="ftgb">Enable GitHub Triggers</label>
+        </div>
+
+        <table class="config-table" ng-if="config.FEATURE_GITHUB_BUILD">
+          <tr>
+            <td>GitHub:</td>
+            <td>
+              <select ng-model="mapped.GITHUB_TRIGGER_KIND">
+                <option value="hosted">GitHub.com</option>
+                <option value="enterprise">GitHub Enterprise</option>
+              </select>
+            </td>
+          </tr>
+          <tr ng-if="mapped.GITHUB_TRIGGER_KIND == 'enterprise'">
+            <td>GitHub Endpoint:</td>
+            <td>
+              <span class="config-string-field"
+                    binding="config.GITHUB_TRIGGER_CONFIG.GITHUB_ENDPOINT"
+                    placeholder="https://my.githubserver"
+                    pattern="{{ GITHUB_REGEX }}">
+              </span>
+              <div class="help-text">
+                The GitHub Enterprise endpoint. Must start with http:// or https://.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>OAuth Client ID:</td>
+            <td>
+              <span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.CLIENT_ID">
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>OAuth Client Secret:</td>
+            <td>
+              <span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.CLIENT_SECRET">
+              </span>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div> <!-- /GitHub Trigger -->
+    </form>
+
+    <!-- Save Bar -->
+    <div class="cor-floating-bottom-bar">
+      <button class="btn" ng-class="mapped.$hasChanges ? 'btn-primary' : 'btn-success'"
+              ng-click="checkValidateAndSave()" ng-show="configform.$valid">
+        <i class="fa fa-lg" ng-class="mapped.$hasChanges ? 'fa-dot-circle-o' : 'fa-check-circle'"></i>
+        <span ng-if="mapped.$hasChanges">Save Configuration Changes</span>
+        <span ng-if="!mapped.$hasChanges">Configuration Saved</span>
+      </button>
+      <button class="btn btn-warning" ng-click="checkValidateAndSave()" ng-show="!configform.$valid"
+              ng-click="checkValidateAndSave()">
+        <i class="fa fa-lg fa-sort"></i>
+        {{ configform.$error['required'].length }} configuration field<span ng-show="configform.$error['required'].length != 1">s</span> remaining
+      </button>
+    </div>
+
+    <!-- Modal message dialog -->
+    <div class="modal co-dialog fade initial-setup-modal" id="validateAndSaveModal">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h4 class="modal-title">
+              Checking your settings
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="service-verification">
+              <div class="service-verification-row" ng-repeat="serviceInfo in validating">
+                <span class="quay-spinner" ng-show="serviceInfo.status == 'validating'"></span>
+                <i class="fa fa-lg fa-check-circle" ng-show="serviceInfo.status == 'success'"></i>
+                <i class="fa fa-lg fa-warning" ng-show="serviceInfo.status == 'error'"></i>
+                <span class="service-title">{{ serviceInfo.service.title }}</span>
+
+                <div class="service-verification-error" ng-show="serviceInfo.status == 'error'">{{ serviceInfo.errorMessage }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer: Saving configuration -->
+          <div class="modal-footer working" ng-show="savingConfiguration">
+            <span class="cor-loader-inline"></span> Saving Configuration...
+          </div>
+
+          <!-- Footer: Validating -->
+          <div class="modal-footer working"
+               ng-show="!savingConfiguration && validationStatus(validating) == 'validating'">
+            <span class="cor-loader-inline"></span> Validating settings...
+
+            <button class="btn btn-default" ng-click="cancelValidation()">
+              Stop Validating
+            </button>
+          </div>
+
+          <!-- Footer: Valid Config -->
+          <div class="modal-footer"
+               ng-show="!savingConfiguration && validationStatus(validating) == 'success'">
+            <span class="left-align">
+              <i class="fa fa-check"></i>
+              Configuration Validated
+            </span>
+
+            <button class="btn btn-primary"
+                    ng-click="saveConfiguration()"
+                    ng-disabled="savingConfiguration">
+                    <i class="fa fa-upload" style="margin-right: 10px;"></i>Save Configuration
+            </button>
+          </div>
+
+          <!-- Footer: Invalid Config -->
+          <div class="modal-footer"
+               ng-show="!savingConfiguration && validationStatus(validating) == 'failed'">
+            <span class="left-align">
+              <i class="fa fa-warning"></i>
+              Problem Detected
+            </span>
+
+            <button class="btn btn-default" data-dismiss="modal">
+              Continue Editing
+            </button>
+          </div>
+
+        </div><!-- /.modal-content -->
+      </div><!-- /.modal-dialog -->
+    </div><!-- /.modal -->
+
+  </div>
+</div>

static/directives/config/config-string-field.html

@@ -0,0 +1,10 @@
+<div class="config-string-field-element">
+  <form name="fieldform" novalidate>
+    <input type="text" class="form-control" placeholder="{{ placeholder || '' }}"
+           ng-model="binding" ng-trim="false" ng-minlength="1"
+           ng-pattern="getRegexp(pattern)" required>
+    <div class="alert alert-danger" ng-show="errorMessage">
+        {{ errorMessage }}
+    </div>
+  </form>
+</div>

static/directives/config/config-variable-field.html

@@ -0,0 +1,10 @@
+<div class="config-variable-field-element">
+  <div class="btn-group">    
+    <button type="button" class="btn btn-default"
+            ng-repeat="section in sections"
+            ng-click="setSection(section)"
+            ng-class="section == currentSection ? 'active' : ''">{{ section.title }}</button>
+  </div>
+
+  <span ng-transclude></span>
+</div>

static/directives/cor-floating-bottom-bar.html

@@ -0,0 +1,3 @@
+<div class="co-floating-bottom-bar">
+    <span ng-transclude/>
+</div>

static/directives/cor-loader-inline.html

@@ -0,0 +1,5 @@
+<div class="co-m-inline-loader co-an-fade-in-out">
+  <div class="co-m-loader-dot__one"></div>
+  <div class="co-m-loader-dot__two"></div>
+  <div class="co-m-loader-dot__three"></div>
+</div>

static/directives/cor-loader.html

@@ -0,0 +1,5 @@
+<div class="co-m-loader co-an-fade-in-out">
+  <div class="co-m-loader-dot__one"></div>
+  <div class="co-m-loader-dot__two"></div>
+  <div class="co-m-loader-dot__three"></div>
+</div>

static/directives/cor-log-box.html

@@ -0,0 +1,11 @@
+<div class="co-log-box-element">
+  <div id="co-log-viewer"  class="co-log-viewer" ng-if="logs">
+    <div class="quay-spinner" ng-if="!logs"></div>
+    <div class="co-log-container">
+      <div id="co-log-content" class="co-log-content">{{ logs }}</div>
+    </div>
+  </div>
+  <div class="co-log-viewer-new-logs" ng-show="hasNewLogs" ng-click="moveToBottom()">
+    New Logs <i class="fa fa-lg fa-arrow-circle-down"></i>
+  </div>
+</div>

static/directives/cor-option.html

@@ -0,0 +1,3 @@
+<li>
+    <a href="javascript:void(0)" ng-click="optionClick()" ng-transclude></a>
+</li>

static/directives/cor-options-menu.html

@@ -0,0 +1,6 @@
+<span class="co-options-menu">
+  <div class="dropdown" style="text-align: left;">
+    <i class="fa fa-gear fa-lg dropdown-toggle" data-toggle="dropdown" data-title="Options" bs-tooltip></i>
+    <ul class="dropdown-menu pull-right" ng-transclude></ul>
+  </div>
+</span>

static/directives/cor-step-bar.html

@@ -0,0 +1,3 @@
+<div class="co-step-bar">
+    <span class="transclude" ng-transclude/>
+</div>

static/directives/cor-step.html

@@ -0,0 +1,6 @@
+<span ng-class="text ? 'co-step-element text' : 'co-step-element icon'">
+  <span data-title="{{ title }}" bs-tooltip>
+      <span class="text" ng-if="text">{{ text }}</span>
+      <i class="fa fa-lg" ng-if="icon" ng-class="'fa-' + icon"></i>
+  </span>
+</span>

static/directives/cor-tab-content.html

@@ -0,0 +1 @@
+<div class="co-tab-content tab-content col-md-11" ng-transclude></div>

static/directives/cor-tab-panel.html

@@ -0,0 +1,3 @@
+<div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
+    <div class="co-tab-container" ng-transclude></div>
+</div>

static/directives/cor-tab.html

@@ -0,0 +1,11 @@
+<li ng-class="tabActive == 'true'  ? 'active' : ''">
+    <a href="javascript:void(0)" data-title="{{ tabTitle }}"
+                                 data-toggle="tab"
+                                 data-target="{{ tabTarget }}"
+                                 data-placement="right"
+                                 data-container="body"
+                                 ng-click="tabInit()"
+                                 bs-tooltip>
+        <span ng-transclude/>
+    </a>
+</li>

static/directives/cor-tabs.html

@@ -0,0 +1 @@
+<ul class="co-tabs col-md-1" ng-transclude></ul>

static/directives/cor-title-content.html

@@ -0,0 +1,3 @@
+<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
+  <h2 class="co-nav-title-content co-fx-text-shadow" ng-transclude></h2>
+</div>

static/directives/cor-title-link.html

@@ -0,0 +1 @@
+<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6" ng-transclude></div>

static/directives/cor-title.html

@@ -0,0 +1,2 @@
+<div class="co-nav-title" ng-transclude></div>
+

static/directives/create-external-notification-dialog.html

@@ -73,7 +73,7 @@
             <tr ng-if="currentMethod.fields.length"><td colspan="2"><hr></td></tr>
 
             <tr ng-repeat="field in currentMethod.fields">
-              <td valign="top">{{ field.title }}:</td>
+              <td valign="top" style="padding-top: 10px">{{ field.title }}:</td>
               <td>
                 <div ng-switch on="field.type">
                   <span ng-switch-when="email">
@@ -81,6 +81,9 @@
                   </span>
                   <input type="url" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="url" required>
                   <input type="text" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="string" required>
+                  <input type="text" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="regex" required
+                         ng-pattern="getPattern(field)"
+                         placeholder="{{ field.placeholder }}">
                   <div class="entity-search" namespace="repository.namespace"
                        placeholder="''"
                        current-entity="currentConfig[field.name]"

static/directives/dockerfile-build-dialog.html

@@ -15,7 +15,7 @@
           </div>
           <div class="dockerfile-build-form" repository="repository" upload-failed="handleBuildFailed(message)"
                build-started="handleBuildStarted(build)" build-failed="handleBuildFailed(message)" start-now="startCounter"
-               has-dockerfile="hasDockerfile" uploading="uploading" building="building"></div>
+               is-ready="hasDockerfile" uploading="uploading" building="building"></div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-primary" ng-click="startBuild()" ng-disabled="building || uploading || !hasDockerfile">Start Build</button>

static/directives/dockerfile-build-form.html

@@ -1,8 +1,8 @@
 <div class="dockerfile-build-form-element">
-  <div class="container" ng-show="building">
+  <div ng-show="building">
     <div class="quay-spinner"></div>
   </div>
-  <div class="container" ng-show="uploading">
+  <div ng-show="uploading">
     <span class="message">Uploading file {{ upload_file }}</span>
     <div class="progress progress-striped active">
       <div class="progress-bar"  role="progressbar" aria-valuenow="{{ upload_progress }}" aria-valuemin="0" aria-valuemax="100" style="{{ 'width: ' + upload_progress + '%' }}">
@@ -10,10 +10,45 @@
     </div>
   </div>
 
-  <div class="container" ng-show="!uploading && !building">
-    <div class="init-description">
-      Upload a <b>Dockerfile</b> or an archive (<code>.zip</code> or <code>.tar.gz</code>) containing a Dockerfile <b>in the root directory</b>
-    </div>
-    <input id="file-drop" class="file-drop" type="file" file-present="internal.hasDockerfile">
+  <div ng-show="!uploading && !building">
+    <table>
+      <tr>
+        <td style="vertical-align: middle;">Dockerfile or <code>.tar.gz</code> or <code>.zip</code>:</td>
+        <td><input id="file-drop" class="file-drop" type="file" file-present="internal.hasDockerfile">
+      </tr>
+      <tr>
+        <td></td>
+        <td>
+          <div class="help-text">If an archive, the Dockerfile must be at the root</div>
+        </td>
+      </tr>
+      <tr>
+        <td>Base Image Pull Credentials:</td>
+        <td>
+          <!-- Select credentials -->
+          <div class="btn-group btn-group-sm">
+            <button type="button" class="btn btn-default"
+                    ng-class="is_public ? 'active btn-info' : ''"
+                    ng-click="is_public = true">
+              None
+            </button>
+            <button type="button" class="btn btn-default"
+                    ng-class="is_public ? '' : 'active btn-info'"
+                    ng-click="is_public = false">
+              <i class="fa fa-wrench"></i>
+              Robot account
+            </button>
+          </div>
+
+          <!-- Robot Select -->
+          <div ng-show="!is_public" style="margin-top: 10px">
+            <div class="entity-search" namespace="repository.namespace"
+                 placeholder="'Select robot account for pulling...'"
+                 current-entity="pull_entity"
+                 allowed-entities="['robot']"></div>
+          </div>
+        </td>
+      </tr>
+    </table>
   </div>
 </div>

static/directives/header-bar.html

@@ -4,7 +4,7 @@
     ≡
   </button>
   <a class="navbar-brand" href="/" target="{{ appLinkTarget() }}">
-    <img id="quay-logo" src="/static/img/quay-logo.png">
+    <span id="quay-logo" ng-style="{'background-image': 'url(' + getEnterpriseLogo() + ')'}"></span>
   </a>
 </div>
 
@@ -19,8 +19,21 @@
     <li><a ng-href="{{ user.organizations.length ? '/organizations/' : '/tour/organizations/' }}" target="{{ appLinkTarget() }}" quay-section="organization">Organizations</a></li>
   </ul>
 
+  <!-- Phone -->
+  <ul class="nav navbar-nav navbar-right visible-xs" ng-switch on="user.anonymous">
+    <li ng-switch-when="false">
+      <a href="/user/" class="user-view" target="{{ appLinkTarget() }}">
+        <span class="avatar" size="32" hash="user.avatar"></span>
+        {{ user.username }}
+      </a>
+    </li>
+    <li ng-switch-default>
+      <a class="user-view" href="/signin/" target="{{ appLinkTarget() }}">Sign in</a>
+    </li>
+  </ul>
 
-  <ul class="nav navbar-nav navbar-right" ng-switch on="user.anonymous">
+  <!-- Normal -->
+  <ul class="nav navbar-nav navbar-right hidden-xs" ng-switch on="user.anonymous">
     <li>
       <form class="navbar-form navbar-left" role="search">
         <div class="form-group">

static/directives/loading-status.html

@@ -1,4 +1,4 @@
-<div class="container loading-status-element">
+<div class="loading-status-element">
   <div ng-show="hasError && !loading">
     <span ng-transclude></span>
   </div>

static/directives/logs-view.html

@@ -1,6 +1,6 @@
 <div class="logs-view-element">
 
-  <div class="container header">
+  <div class="header">
     <span class="header-text">
       <span ng-show="!performer">Usage Logs</span>
       <span class="entity-reference" entity="performer" ng-show="performer"></span>
@@ -20,9 +20,7 @@
     </span>
   </div>
 
-  <div ng-show="loading">
-    <div class="quay-spinner 3x"></div>
-  </div>
+  <div class="cor-loader-inline" ng-show="loading"></div>
   <div ng-show="!loading">
     <div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
       <svg style="width: 800px; height: 500px;"></svg>
@@ -56,7 +54,8 @@
           <td>
             <span class="log-performer" ng-if="log.metadata.oauth_token_application">
               <div>
-                <span class="application-reference" data-title="log.metadata.oauth_token_application"
+                <span class="application-reference"
+                      data-title="log.metadata.oauth_token_application"
                       client-id="log.metadata.oauth_token_application_id"></span>
               </div>
               <div style="text-align: center; font-size: 12px; color: #aaa; padding: 4px;">on behalf of</div>

static/directives/notification-view.html

@@ -1,5 +1,5 @@
 <div class="notification-view-element">
-  <div class="container" ng-click="showNotification();">
+  <div class="notification-content" ng-click="showNotification();">
     <div class="circle" ng-class="getClass(notification)"></div>
     <div class="message" ng-bind-html="getMessage(notification)"></div>
     <div class="orginfo" ng-if="notification.organization">

static/directives/plan-manager.html

@@ -31,11 +31,16 @@
        ng-show="!planLoading"></div>
 
   <!-- Plans Table -->
+  <div class="visible-xs" style="margin-top: 10px"></div>
+
   <table class="table table-hover plans-list-table" ng-show="!planLoading">
     <thead>
       <td>Plan</td>
-      <td>Private Repositories</td>
-      <td style="min-width: 64px">Price</td>
+      <td>
+        <span class="hidden-xs">Private Repositories</span>
+        <span class="visible-xs"><i class="fa fa-hdd-o"></i></span>
+      </td>
+      <td style="min-width: 64px"><span class="hidden-xs">Price</span><span class="visible-xs">$/mo</span></td>
       <td></td>
     </thead>
 

static/directives/plans-table.html

@@ -1,23 +1,41 @@
 <div class="plans-table-element">
-  <table class="table table-hover plans-table-table" ng-show="plans">
-    <thead>
-      <th>Plan</th>
-      <th>Private Repositories</th>
-      <th style="min-width: 85px">Price</th>
-      <th></th>
-    </thead>
+  <ul class="plans-table-list visible-xs">
+    <li ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
 
-    <tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
-      <td>{{ plan.title }}</td>
-      <td>{{ plan.privateRepos }}</td>
-      <td><div class="plan-price">${{ plan.price / 100 }}</div></td>
-      <td class="controls">
         <a class="btn" href="javascript:void(0)"
            ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
            ng-click="setPlan(plan)">
-          {{ currentPlan == plan ? 'Selected' : 'Choose' }}
+          {{ plan.title }}
         </a>
-      </td>
-    </tr>
-  </table>
+
+      <div class="plan-info">
+        ${{ plan.price / 100 }} / month -
+        {{ plan.privateRepos }} repositories
+      </div>
+    </li>
+  </ul>
+
+  <div class="hidden-xs">
+    <table class="table table-hover plans-table-table" ng-show="plans">
+      <thead>
+        <th>Plan</th>
+        <th>Private Repositories</th>
+        <th style="min-width: 85px">Price</th>
+        <th></th>
+      </thead>
+
+      <tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
+        <td>{{ plan.title }}</td>
+        <td>{{ plan.privateRepos }}</td>
+        <td><div class="plan-price">${{ plan.price / 100 }}</div></td>
+        <td class="controls">
+          <a class="btn" href="javascript:void(0)"
+             ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
+             ng-click="setPlan(plan)">
+            {{ currentPlan == plan ? 'Selected' : 'Choose' }}
+          </a>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>

static/directives/ps-usage-graph.html

@@ -0,0 +1,75 @@
+<div class="ps-usage-graph-element">
+  <!-- Build Charts -->
+  <div quay-show="Features.BUILD_SUPPORT">
+    <div class="alert alert-warning" ng-if="data.build && data.build.job_total == null">
+      Cannot load build system status. Please restart your container.
+    </div>
+    <div ng-if="data.build && data.build.job_total >= 0">
+      <div class="col-md-6 chart-col">
+        <h4>Build Queue</h4>
+        <h5>
+          Running Jobs: {{ data.build.running_total }} | Total Jobs: {{ data.build.job_total }}
+        </h5>
+        <div class="realtime-area-chart"
+             data="[data.build.job_total, data.build.running_total]"
+             labels="['Queued Build Jobs', 'Running Build Jobs']"
+             colors="['rgb(157, 194, 211)', 'rgb(56, 122, 163)']"
+             counter="counter"
+             minimum="-10"
+             maximum="auto"></div>
+      </div>
+
+      <div class="col-md-6 chart-col">
+        <h4>Local Build Workers</h4>
+        <h5>
+          Local Workers: {{ data.build.workers }} | Working: {{ data.build.running_local }}
+        </h5>
+        <div class="realtime-area-chart"
+             data="[data.build.job_total, data.build.workers, data.build.running_local]"
+             labels="['Queued Build Jobs', 'Build Workers (local)', 'Running Build Jobs (local)']"
+             colors="['rgb(157, 194, 211)', 'rgb(161, 208, 93)', 'rgb(210, 237, 130)']"
+             counter="counter"
+             minimum="-10"
+             maximum="auto"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- CPU, Memory and Network -->
+  <div class="col-md-4 chart-col">
+    <h4>CPU Usage %</h4>
+    <div class="realtime-line-chart" data="data.count.cpu" counter="counter"
+         label-template="CPU #{x} %"
+         minimum="-10" maximum="110"></div>
+  </div>
+
+  <div class="col-md-4 chart-col">
+    <h4>Process Count</h4>
+    <div class="realtime-line-chart" data="data.count.processes" counter="counter"
+         label-template="Process Count"></div>
+  </div>
+
+  <div class="col-md-4 chart-col">
+    <h4>Virtual Memory %</h4>
+    <div class="realtime-line-chart" data="data.count.virtual_mem[2]" counter="counter"
+         label-template="Virtual Memory %"
+         minimum="-10" maximum="110"></div>
+  </div>
+
+  <div class="col-md-4 chart-col">
+    <h4>Swap Memory</h4>
+    <div class="realtime-line-chart" data="data.count.swap_mem[3]" counter="counter"
+         label-template="Swap Memory %"></div>
+  </div>
+
+  <div class="col-md-4 chart-col">
+    <h4>Network Connections</h4>
+    <div class="realtime-line-chart" data="data.count.connections" counter="counter"
+         label-template="Network Connection Count"></div>
+  </div>
+
+  <div class="col-md-4 chart-col">
+    <h4>Network Usage (Bytes)</h4>
+    <div class="realtime-line-chart" data="data.count.network" labels="['Bytes In', 'Bytes Out']" counter="counter"></div>
+  </div>
+</div>

static/directives/realtime-area-chart.html

@@ -0,0 +1,6 @@
+<div class="realtime-area-chart-element">
+    <div ng-show="counter >= 1">
+        <div class="chart"></div>
+    </div>
+    <div class="cor-loader-inline" ng-if="counter < 1"></div>
+</div>

static/directives/realtime-line-chart.html

@@ -0,0 +1,6 @@
+<div class="realtime-line-chart-element">
+    <div ng-show="counter >= 1">
+        <div class="chart"></div>
+    </div>
+    <div class="cor-loader-inline" ng-if="counter < 1"></div>
+</div>

static/directives/robots-manager.html

@@ -2,7 +2,7 @@
   <div class="quay-spinner" ng-show="loading"></div>
   <div class="alert alert-info">Robot accounts allow for delegating access in multiple repositories to role-based accounts that you manage</div>
 
-  <div class="container" ng-show="!loading">
+  <div ng-show="!loading">
     <div class="side-controls">
       <span class="popup-input-button" pattern="ROBOT_PATTERN" placeholder="'Robot Account Name'"
             submitted="createRobot(value)">

static/directives/team-view-add.html

@@ -1,6 +1,6 @@
 <div class="team-view-add-element" focusable-popover-content>
   <div class="entity-search"
-       namespace="orgname" placeholder="'Add a registered user or robot...'"
+       namespace="orgname" placeholder="allowEmail ? 'Add a registered user, robot or email address...' : 'Add a registered user or robot...'"
        entity-selected="addNewMember(entity)"
        email-selected="inviteEmail(email)"
        current-entity="selectedMember"
@@ -12,6 +12,7 @@
        ng-show="!addingMember"></div>
   <div class="quay-spinner" ng-show="addingMember"></div>
   <div class="help-text" ng-show="!addingMember">
-    Search by Quay.io username or robot account name
+  <span ng-if="allowEmail">Search by registry username, robot account name or enter an email address to invite</span>
+  <span ng-if="!allowEmail">Search by registry username or robot account name</span>
   </div>
 </div>

static/directives/twitter-view.html

@@ -4,7 +4,7 @@
   </p>
   <div class="attribute">
     <span class="info-wrap">
-      <span class="avatar"><img ng-src="{{ avatarUrl }}" fallback-src="/static/img/default-twitter.png"></span>
+      <span class="twitter-avatar"><img ng-src="{{ avatarUrl }}" fallback-src="/static/img/default-twitter.png"></span>
       <span class="info">
         <span class="author">{{ authorName }} (@{{authorUser}})</span>
         <a class="reference" ng-href="{{ messageUrl }}">{{ messageDate }}</a>