Merge commit '84e89f88cc3b0599e4b2aa309bb1ec0468324b99' into HEAD

Author: Jenkins Continuous Integration Server

app/directives/tc-file-input/tc-file-input.directive.js

@@ -6,20 +6,25 @@
   function tcFileInput() {
     return {
       restrict: 'E',
-      require: '^form',
+      require: ['^form', '^ngModel'],
       templateUrl: 'directives/tc-file-input/tc-file-input.html',
       scope: {
         labelText: '@',
         fieldId: '@',
         placeholder: '@',
         fileType: '@',
+        showFileType: '=',
         mandatory: '=',
         buttonText: '@',
         setFileReference: '&',
-        fileValue: '=ngModel'
+        ngModel: '='
       },
-      link: function(scope, element, attrs, formController) {
+      link: function(scope, element, attrs, controllers) {
+        var formController = controllers[0];
+        var ngModel = controllers[1];
+
         scope.selectFile = selectFile;
+        var fileTypes = scope.fileType.split(',');
 
         // fieldId is not set on element at this point, so grabbing with class .none
         // which exists on the element right away
@@ -29,12 +34,28 @@
         fileInput.bind('change', function() {
           var file = fileInput[0].files[0];
 
-          // Pass file object up through callback into controller
-          scope.setFileReference({file: file, fieldId: scope.fieldId});
+          var selectedFileType = file.type.slice(file.type.lastIndexOf('/') + 1);
+          var isAllowedFileFormat = _.some(fileTypes, _.matches(selectedFileType));
+
+          scope.$apply(function(){
+            if (!isAllowedFileFormat) {
+              fileNameInput[0].value = file.name;
+
+              // Manually setting is required since Angular doesn't support file inputs
+              formController[attrs.fieldId].$setTouched();
+              formController[attrs.fieldId].$setValidity('required', false);
+
+            } else {
+              // Pass file object up through callback into controller
+              scope.setFileReference({file: file, fieldId: scope.fieldId});
+
+              // Set the file name as the value of the disabled input
+              fileNameInput[0].value = file.name;
 
-          // Set the file name as the value of the disabled input
-          fileNameInput[0].value = file.name;
-          formController[attrs.fieldId].$setValidity('required', true);
+              // Manually set validity of specific input field
+              formController[attrs.fieldId].$setValidity('required', true);
+            }
+          });
         });
 
         function selectFile() {

app/directives/tc-file-input/tc-file-input.jade

@@ -1,12 +1,12 @@
 .tc-file-field__label
   label.tc-label {{labelText}}
-    span.lowercase(ng-if="fileType") {{fileType | addBeginningSpace}}
+    span.lowercase(ng-if="showFileType") {{ ' *(.' + fileType + ')'}}
 
     span.tc-label__mandatory.lowercase(ng-if="mandatory") #[span *]mandatory
 
 .tc-file-field__inputs
-  input.tc-file-field__input(type="text", placeholder="{{placeholder}}")
+  input.tc-file-field__input(type="text", placeholder="{{placeholder}}", disabled)
 
   button.tc-btn(ng-click="selectFile()") {{buttonText}}
 
-  input.none(name="{{fieldId}}", type="file", id="{{fieldId}}", required, ng-model="fileValue")
+  input.none(name="{{fieldId}}", type="file", required, ng-model="ngModel")

app/directives/tc-input/tc-input.directive.js

@@ -13,12 +13,23 @@
         inputValue: '=',
         inputName: '@',
         inputType: '@',
-        inputPattern: '='
+        inputPattern: '=',
+        updateValueOnBlur: '&?'
       },
       link: function(scope, element, attrs) {
+        var input = $(element[0]).find('input');
+
         if (!scope.inputType) {
           scope.inputType = 'text';
         }
+
+        if (scope.updateValueOnBlur) {
+          input.bind('blur', function(event) {
+            var newValue = scope.updateValueOnBlur({inputValue: scope.inputValue});
+            scope.inputValue = newValue;
+            scope.$apply();
+          });
+        }
       }
     }
   }

app/submissions/submissions.routes.js

@@ -44,10 +44,17 @@
                 var phaseId;
 
                 var isPhaseSubmission = _.some(challenge.currentPhases, function(phase) {
-                  if (phase.phaseStatus === 'Open' && phase.phaseType === 'Submission') {
-                    phaseType = 'Submission';
-                    phaseId = phase.id;
-                    return true;
+                  if (phase.phaseStatus === 'Open') {
+                    if (phase.phaseType === 'Submission') {
+                      phaseType = 'SUBMISSION';
+                      phaseId = phase.id;
+                      return true;
+
+                    } else if (phase.phaseType === 'Checkpoint Submission') {
+                      phaseType = 'CHECKPOINT_SUBMISSION';
+                      phaseId = phase.id;
+                      return true;
+                    }
                   }
 
                   return false;

app/submissions/submit-file/submit-file.controller.js

@@ -10,7 +10,7 @@
 
     // Must provide React Select component a list with ID, since currently
     // the onChange callback does not indicate which dropdown called the callback.
-    // There are pull requets pending for react-select which will clean this code up
+    // There are pull requests pending for react-select which will clean this code up
     vm.fontList1 = [
       { label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 1 },
       { label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 1  },
@@ -24,9 +24,15 @@
 
     var files = {};
     vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
+    vm.rankRegEx = new RegExp(/^[1-9]\d*$/);
     vm.comments = '';
     vm.submissionForm = {
       files: [],
+
+      submissionZip: null,
+      sourceZip: null,
+      designCover: null,
+
       submitterRank: 1,
       submitterComments: '',
       fonts: [{
@@ -68,6 +74,7 @@
       }
     };
 
+    vm.setRankTo1 = setRankTo1;
     vm.setFileReference = setFileReference;
     vm.uploadSubmission = uploadSubmission;
     vm.selectFont = selectFont;
@@ -78,6 +85,14 @@
 
     function activate() {}
 
+    function setRankTo1(inputValue) {
+      // If a user leaves the rank input blank, set it to 1
+      if (inputValue === '') {
+        return 1;
+      }
+      return inputValue;
+    }
+
     function setFileReference(file, fieldId) {
       // Can clean up since fileValue on tcFileInput has file reference?
       files[fieldId] = file;

app/submissions/submit-file/submit-file.jade

@@ -4,9 +4,9 @@
   .mobile-redirect__body
     p Our team is working hard on new features, and file upload currently only works on the web. Please open this page on your desktop if you want to create a submission.
 
-    a Learn more about formatting your submission file
+    a(ng-href="http://help.{{DOMAIN}}/design/submitting-to-a-design-challenge/formatting-your-submission-for-design-challenges/") Learn more about formatting your submission file
 
-    a.tc-btn.tc-btn-s(ng-click="'TODO: go back to challenge details'") Back to Challenge Details
+    a.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenge-details/{{submissions.challengeId}}/?type={{submissions.track}}") Back to Challenge Details
 
 .panel-body
   form.form-blocks(name="submissionForm", role="form", ng-submit="submissionForm.$valid && vm.uploadSubmission()", novalidate)
@@ -29,35 +29,56 @@
             label-text="Submission",
             field-id="SUBMISSION_ZIP",
             button-text="Add File",
-            file-type="(*.zip)",
+            file-type="zip",
+            show-file-type="true",
             placeholder="Attach all visible files as a single .zip file",
             mandatory="true",
             set-file-reference="vm.setFileReference(file, fieldId)",
-            file-value="vm.submissionForm.submissionZip"
+            ng-model="vm.submissionForm.submissionZip"
           )
 
+          .tc-error-messages(ng-show="submissionForm['SUBMISSION_ZIP'].$touched && submissionForm['SUBMISSION_ZIP'].$invalid")
+            p(ng-show="submissionForm['SUBMISSION_ZIP'].$error.required") This is not the correct file format. Please select a .zip file.
+
           tc-file-input.tc-file-field(
             label-text="Source",
             field-id="SOURCE_ZIP",
             button-text="Add File",
-            file-type="(*.zip)",
+            file-type="zip",
+            show-file-type="true",
             placeholder="Attach all source files as a single .zip file",
             mandatory="true",
             set-file-reference="vm.setFileReference(file, fieldId)",
-            file-value="vm.submissionForm.sourceZip"
+            ng-model="vm.submissionForm.sourceZip"
           )
 
+          .tc-error-messages(ng-show="submissionForm['SOURCE_ZIP'].$touched && submissionForm['SOURCE_ZIP'].$invalid")
+            p(ng-show="submissionForm['SOURCE_ZIP'].$error.required") This is not the correct file format. Please select a .zip file.
+
           tc-file-input.tc-file-field(
             label-text="Preview Image",
             field-id="DESIGN_COVER",
             button-text="Add File",
+            file-type="jpg,jpeg,png"
             placeholder="Image file as .jpg or .png",
             mandatory="true",
             set-file-reference="vm.setFileReference(file, fieldId)",
-            file-value="vm.submissionForm.designCover"
+            ng-model="vm.submissionForm.designCover"
+          )
+
+          .tc-error-messages(ng-show="submissionForm['DESIGN_COVER'].$touched && submissionForm['DESIGN_COVER'].$invalid")
+            p(ng-show="submissionForm['DESIGN_COVER'].$error.required") This is not the correct file format. Please select a .jpg or .png file.
+
+          tc-input.fieldset__input.submitterRank(
+            label-text="Rank #",
+            input-name="Submission_Rank",
+            input-value="vm.submissionForm.submitterRank",
+            input-pattern="vm.rankRegEx",
+            update-value-on-blur="vm.setRankTo1(inputValue)"
           )
 
-          tc-input.fieldset__input.submitterRank(label-text="Rank #", input-value="vm.submissionForm.submitterRank")
+          .tc-error-messages(ng-show="submissionForm.Submission_Rank.$dirty && submissionForm.Submission_Rank.$invalid")
+            p(ng-show="submissionForm.Submission_Rank.$error.pattern") Please enter a positive integer.
 
     .form-block.flex.wrap
       .form-block__instructions
@@ -91,6 +112,8 @@
       .form-block__fields
         .fieldsets
           ng-form.fieldset(name="font{{$index + 1}}", ng-repeat="font in vm.submissionForm.fonts track by font.id")
+            label.tc-label Font Source
+
             dropdown(
               name="'font-source{{$index + 1}}'",
               options="vm.fontList{{$index + 1}}",
@@ -104,13 +127,15 @@
             tc-input.fieldset__input(
               label-text="Font Name",
               placeholder="Select font source to edit field"
-              input-value="font.name"
+              input-value="font.name",
+              input-name="fontName{{$index}}"
             )
 
             tc-input.fieldset__input(
               label-text="Font URL",
               placeholder="Select font source to edit field",
-              input-value="font.sourceUrl"
+              input-value="font.sourceUrl",
+              input-name="fontUrl{{$index}}"
             )
 
           button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="vm.createAnotherFontFieldset()") + Add Font

assets/css/submissions/submit-file.scss

@@ -34,5 +34,15 @@
 }
 
 .submitterRank {
+  width: 100px;
   margin-top: 10px;
 }
+
+.Select {
+  max-width: 300px;
+  margin-bottom: 20px;
+}
+
+.tc-error-messages {
+  max-width: 500px;
+}