quay/static/partials/new-repo.html

<div class="container" ng-show="building">
  <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div class="container" ng-show="creating">
  <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div class="container" 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 + '%' }}">
  </div>
</div>

</div>

<div class="container new-repo" ng-show="!user.anonymous && !creating && !uploading && !building">
  <form method="post" name="newRepoForm" ng-submit="createNewRepo()">

  <!-- Header -->
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section">
        <div class="new-header">
          <span class="repo-circle no-background" repo="repo"></span>
          <span style="color: #444;"> {{user.username}}</span> <span style="color: #ccc">/</span> <span class="name-container"><input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name" required autofocus></span>
        </div>
      </div>
      
      <div class="section">
        <strong>Description:</strong><br>
        <p class="description lead editable" ng-click="editDescription()">
          <span class="content" ng-bind-html-unsafe="getMarkedDown(repo.description)"></span>
          <i class="fa fa-edit"></i>
        </p>
      </div>
    </div>
  </div>

  <!-- Private/public -->
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section">
        <div class="repo-option">
          <input type="radio" id="publicrepo" name="publicorprivate" ng-model="repo.is_public" value="1">
          <i class="fa fa-unlock fa-large" title="Public Repository"></i>
          
          <div class="option-description">
            <label for="publicrepo">Public</label>
            <span class="description-text">Anyone can see and pull from this repository. You choose who can push.</span>
          </div>
        </div>
        <div class="repo-option">
          <input type="radio" id="privaterepo" name="publicorprivate" ng-model="repo.is_public" value="0">
          <i class="fa fa-lock fa-large" title="Private Repository"></i>
          
          <div class="option-description">
            <label for="privaterepo">Private</label>
            <span class="description-text">You choose who can see, pull and push from/to this repository.</span>
          </div>
        </div>

        <!-- Payment -->
        <div class="required-plan" ng-show="repo.is_public == '0' && planRequired">
          <div class="alert alert-warning">
          In order to make this repository private, you’ll need to upgrade your plan from <b>{{ subscribedPlan.title  }}</b> to <b>{{ planRequired.title  }}</b>. This will cost $<span>{{ planRequired.price / 100 }}</span>/month.
          </div>
          <a class="btn btn-primary" ng-click="upgradePlan()" ng-show="!planChanging">Upgrade now</a>
          <i class="fa fa-spinner fa-spin fa-3x" ng-show="planChanging"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- Initialize repository -->
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section">
        <input type="checkbox" class="cbox" id="initialize" name="initialize" ng-model="repo.initialize">
        <div class="option-description">
          <label for="initialize">Initialize Repository from <a href="http://www.docker.io/learn/dockerfile/" target="_new">Dockerfile</a></label>
          <span class="description-text">Automatically populate your repository with a new image constructed from a Dockerfile</span>
        </div>

        <div class="initialize-repo" ng-show="repo.initialize">
          <div class="init-description">
            Upload a Dockerfile or a zip file containing a Dockerfile <b>in the root directory</b>
          </div>

          <input id="file-drop" class="file-drop" type="file">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <button class="btn btn-large btn-success" type="submit" ng-disabled="newRepoForm.$invalid || (repo.is_public == '0' && planRequired)">Create Repository</button>
    </div>
  </div>

  </form>
</div>

<!-- Modal edit for the description -->
<div class="modal fade" id="editModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Edit Repository Description</h4>
      </div>
      <div class="modal-body">
        <div class="wmd-panel">
          <div id="wmd-button-bar-description"></div>	    
          <textarea class="wmd-input" id="wmd-input-description" placeholder="Enter description">{{ repo.description }}</textarea>
        </div>
        
        <div id="wmd-preview-description" class="wmd-panel wmd-preview"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="saveDescription()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<!-- Modal message dialog -->
<div class="modal fade" id="missingfileModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">File required</h4>
      </div>
      <div class="modal-body">
        A file is required in order to initialize a repository.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="cannotcreateModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot create repository</h4>
      </div>
      <div class="modal-body">
        The repository could not be created.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="couldnotbuildModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot initialize repository</h4>
      </div>
      <div class="modal-body">
        The repository could not be initialized with the selected Dockerfile. Please try again later.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="couldnotsubscribeModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot upgrade plan</h4>
      </div>
      <div class="modal-body">
        Your current plan could not be upgraded. Please try again.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->