portainer/app/components/createRegistry/createregistry.html

<rd-header>
  <rd-header-title title="Create registry">
    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="display:none"></i>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="registries">Registries</a> > Add registry
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            Registry provider
          </div>
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0">
            <div class="boxselector_wrapper">
              <div ng-click="selectQuayRegistry()">
                <input type="radio" id="registry_quay" ng-model="state.RegistryType" value="quay">
                <label for="registry_quay">
                  <div class="boxselector_header">
                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
                    Quay.io
                  </div>
                  <p>Quay container registry</p>
                </label>
              </div>
              <div ng-click="selectCustomRegistry()">
                <input type="radio" id="registry_custom" ng-model="state.RegistryType" value="custom">
                <label for="registry_custom">
                  <div class="boxselector_header">
                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
                    Custom registry
                  </div>
                  <p>Define your own registry</p>
                </label>
              </div>
            </div>
          </div>
          <div class="col-sm-12 form-section-title" ng-if="state.RegistryType === 'custom'">
            Important notice
          </div>
          <div class="form-group" ng-if="state.RegistryType === 'custom'">
            <span class="col-sm-12 text-muted small">
              Docker requires you to connect to a <a href="https://docs.docker.com/registry/deploying/#running-a-domain-registry" target="_blank">secure registry</a>.
              You can find more information about how to connect to an insecure registry <a href="https://docs.docker.com/registry/insecure/" target="_blank">in the Docker documentation</a>.
            </span>
          </div>
          <div class="col-sm-12 form-section-title">
            Registry details
          </div>
          <!-- name-input -->
          <div class="form-group" ng-if="state.RegistryType === 'custom'">
            <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="registry_name" ng-model="formValues.Name" placeholder="e.g. my-registry">
            </div>
          </div>
          <!-- !name-input -->
          <!-- registry-url-input -->
          <div class="form-group" ng-if="state.RegistryType === 'custom'">
            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
              Registry URL
              <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry. Any protocol will be stripped."></portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="registry_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld">
            </div>
          </div>
          <!-- !registry-url-input -->
          <!-- authentication-checkbox -->
          <div class="form-group" ng-if="state.RegistryType === 'custom'">
            <div class="col-sm-12">
              <label for="registry_auth" class="control-label text-left">
                Authentication
                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to this registry."></portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px;">
                <input type="checkbox" ng-model="formValues.Authentication"><i></i>
              </label>
            </div>
          </div>
          <!-- !authentication-checkbox -->
          <!-- authentication-credentials -->
          <div ng-if="formValues.Authentication || state.RegistryType === 'quay'">
            <!-- credentials-user -->
            <div class="form-group">
              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="credentials_username" ng-model="formValues.Username">
              </div>
            </div>
            <!-- !credentials-user -->
            <!-- credentials-password -->
            <div class="form-group">
              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
              <div class="col-sm-9 col-lg-10">
                <input type="password" class="form-control" id="credentials_password" ng-model="formValues.Password">
              </div>
            </div>
            <!-- !credentials-password -->
          </div>
          <!-- !authentication-credentials -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name || !formValues.URL || (formValues.Authentication && (!formValues.Username || !formValues.Password))" ng-click="addRegistry()">Add registry</button>
              <i id="createRegistrySpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>