Add ability for new repositories to be linked to Github

static/css/quay.css

@@ -776,11 +776,20 @@ i.toggle-icon:hover {
   margin-bottom: 16px;
 }
 
+.new-repo .section-title {
+  float: right;
+  color: #aaa;
+}
+
 .new-repo .repo-option {
   margin: 6px;
   margin-top: 16px;
 }
 
+.new-repo .repo-option label {
+  font-weight: normal;
+}
+
 .new-repo .repo-option i {
   font-size: 18px;
   padding-left: 10px;

static/js/controllers.js

@@ -1888,13 +1888,16 @@ function V1Ctrl($scope, $location, UserService) {
   UserService.updateUserIn($scope);
 }
 
-function NewRepoCtrl($scope, $location, $http, $timeout, UserService, ApiService, PlanService) {
+function NewRepoCtrl($scope, $location, $http, $timeout, UserService, ApiService, PlanService, KeyService) {
   UserService.updateUserIn($scope);
 
+  $scope.githubRedirectUri = KeyService.githubRedirectUri;
+  $scope.githubClientId = KeyService.githubClientId;
+
   $scope.repo = {
     'is_public': 1,
     'description': '',
-    'initialize': false
+    'initialize': ''
   };
 
   // Watch the namespace on the repo. If it changes, we update the plan and the public/private
@@ -1963,12 +1966,20 @@ function NewRepoCtrl($scope, $location, $http, $timeout, UserService, ApiService
       $scope.creating = false;
       $scope.created = created;
 
-      // Repository created. Start the upload process if applicable.
+      // Start the upload process if applicable.
-      if ($scope.repo.initialize) {
+      if ($scope.repo.initialize == 'dockerfile' || $scope.repo.initialize == 'zipfile') {
         $scope.createdForBuild = created;
         return;
       }
 
+      // Conduct the Github redirect if applicable.
+      if ($scope.repo.initialize == 'github') {
+        window.location = 'https://github.com/login/oauth/authorize?client_id=' +  $scope.githubClientId +
+          '&scope=repo,user:email&redirect_uri=' + $scope.githubRedirectUri + '/trigger/' +
+          repo.namespace + '/' + repo.name;
+        return;
+      }
+
       // Otherwise, redirect to the repo page.
       $location.path('/repository/' + created.namespace + '/' + created.name);
     }, function(result) {

static/partials/new-repo.html

@@ -35,7 +35,8 @@
       </div>
       
       <div class="section">
-        <strong>Description:</strong><br>
+        <div class="section-title">Repository Description</div>
+        <br>
         <div class="description markdown-input" content="repo.description" can-write="true"
              field-title="'repository description'"></div>
       </div>
@@ -46,13 +47,14 @@
   <div class="row">
     <div class="col-md-1"></div>
     <div class="col-md-8">
+      <div class="section-title">Repository Visibility</div>
       <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>
+            <label for="publicrepo"><strong>Public</strong></label>
             <span class="description-text">Anyone can see and pull from this repository. You choose who can push.</span>
           </div>
         </div>
@@ -61,7 +63,7 @@
           <i class="fa fa-lock fa-large" title="Private Repository"></i>
           
           <div class="option-description">
-            <label for="privaterepo">Private</label>
+            <label for="privaterepo"><strong>Private</strong></label>
             <span class="description-text">You choose who can see, pull and push from/to this repository.</span>
           </div>
         </div>
@@ -94,31 +96,75 @@
     </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="section-title">Initialize repository</div>
-        <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 style="padding-top: 10px;">
-          <div class="dockerfile-build-form" repository="createdForBuild" upload-failed="handleBuildFailed(message)"
+          <!-- Empty -->
-               build-started="handleBuildStarted()" build-failed="handleBuildFailed(message)" start-now="createdForBuild"
+          <div class="repo-option">
-               has-dockerfile="hasDockerfile" uploading="uploading" building="building"></div>
+            <input type="radio" id="initEmpty" name="initialize" ng-model="repo.initialize" value="">
+            <i class="fa fa-hdd-o fa-lg" style="padding: 6px; padding-left: 8px; padding-right: 6px;"></i>
+            <label for="initEmpty" style="color: #aaa;">(Empty repository)</label>
+          </div>
+
+          <!-- Dockerfile -->
+          <div class="repo-option">
+            <input type="radio" id="initDockerfile" name="initialize" ng-model="repo.initialize" value="dockerfile">
+            <i class="fa fa-file fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 8px;"></i>
+            <label for="initDockerfile">Initialize from a <b>Dockerfile</b></label>
+          </div>
+
+          <!-- Zip file -->
+          <div class="repo-option">
+            <input type="radio" id="initZipfile" name="initialize" ng-model="repo.initialize" value="zipfile">
+            <i class="fa fa-archive fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 8px;"></i>
+            <label for="initZipfile">Initialize from a  ZIP file (containing a Dockerfile and other supporting files)</label>
+          </div>
+
+          <!-- Github -->
+          <div class="repo-option">
+            <input type="radio" id="initGithub" name="initialize" ng-model="repo.initialize" value="github">
+            <i class="fa fa-github fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 12px;"></i>
+            <label for="initGithub">Link to a GitHub Repository</label>
+          </div>
         </div>
       </div>
     </div>
   </div>
 
+  <div class="row" ng-show="repo.initialize == 'dockerfile' || repo.initialize == 'zipfile'">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <div class="section">
+        <div class="section-title">Upload <span ng-if="repo.initialize == 'dockerfile'">Dockerfile</span><span ng-if="repo.initialize == 'zipfile'">ZIP file</span></div>
+        <div style="padding-top: 20px;">
+          <div class="initialize-repo">
+            <div class="dockerfile-build-form" repository="createdForBuild" upload-failed="handleBuildFailed(message)"
+                 build-started="handleBuildStarted()" build-failed="handleBuildFailed(message)" start-now="createdForBuild"
+                 has-dockerfile="hasDockerfile" uploading="uploading" building="building"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row" ng-show="repo.initialize == 'github'">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <div class="alert alert-info">
+        You will be redirected to authorize via GitHub once the repository has been created
+      </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="uploading || building || newRepoForm.$invalid || (repo.is_public == '0' && (planRequired || checkingPlan)) || (repo.initialize && !hasDockerfile)">
+              ng-disabled="uploading || building || newRepoForm.$invalid || (repo.is_public == '0' && (planRequired || checkingPlan)) || ((repo.initialize == 'dockerfile' || repo.initialize == 'zipfile') && !hasDockerfile)">
         Create Repository
       </button>
     </div>