.gitattributes

-CHANGELOG merge=union
+CHANGELOG.md merge=union
 *.js.es6 gitlab-language=javascript

.scss-lint.yml

@@ -61,7 +61,7 @@ linters:
   
   # Separate rule, function, and mixin declarations with empty lines.
   EmptyLineBetweenBlocks:
-    enabled: false
+    enabled: true
   
   # Reports when you have an empty rule set.
   EmptyRule:
@@ -219,7 +219,7 @@ linters:
   # Property values, @extend, @include, and @import directives, and variable
   # declarations should always end with a semicolon.
   TrailingSemicolon:
-    enabled: false
+    enabled: true
   # Reports lines containing trailing whitespace.
   TrailingWhitespace:

CONTRIBUTING.md

@@ -247,7 +247,7 @@ request is as follows:
 1. Fork the project into your personal space on GitLab.com
 1. Create a feature branch, branch away from `master`
 1. Write [tests](https://gitlab.com/gitlab-org/gitlab-development-kit#running-the-tests) and code
-1. Add your changes to the [CHANGELOG](CHANGELOG):
+1. Add your changes to the [CHANGELOG.md](CHANGELOG.md):
   1. If you are fixing a ~regression issue, you can add your entry to the next
      patch release (e.g. `8.12.5` if current version is `8.12.4`)
   1. Otherwise, add your entry to the next minor release (e.g. `8.13.0` if

app/assets/javascripts/dispatcher.js → app/assets/javascripts/dispatcher.js.es6

@@ -8,6 +8,7 @@
   Dispatcher = (function() {
     function Dispatcher() {
       this.initSearch();
+      this.initFieldErrors();
       this.initPageScripts();
     }
@@ -20,6 +21,9 @@
       path = page.split(':');
       shortcut_handler = null;
       switch (page) {
+        case 'sessions:new':
+          new UsernameValidator();
+          break;
         case 'projects:boards:show':
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
@@ -291,6 +295,12 @@
       }
     };
+    Dispatcher.prototype.initFieldErrors = function() {
+      $('.show-gl-field-errors').each((i, form) => {
+        new gl.GlFieldErrors(form);
+      });
+    };
+
     return Dispatcher;
   })();

app/assets/javascripts/gl_field_errors.js.es6

+((global) => {
+  /*
+   * This class overrides the browser's validation error bubbles, displaying custom
+   * error messages for invalid fields instead. To begin validating any form, add the
+   * class `show-gl-field-errors` to the form element, and ensure error messages are
+   * declared in each inputs' title attribute.
+   *
+   * Example:
+   *
+   * <form class='show-gl-field-errors'>
+   *  <input type='text' name='username' title='Username is required.'/>
+   *</form>
+   *
+    * */
+
+  const errorMessageClass = 'gl-field-error';
+  const inputErrorClass = 'gl-field-error-outline';
+
+  class GlFieldError {
+    constructor({ input, formErrors }) {
+      this.inputElement = $(input);
+      this.inputDomElement = this.inputElement.get(0);
+      this.form = formErrors;
+      this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
+      this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${ this.errorMessage }</p>`);
+
+      this.state = {
+        valid: false,
+        empty: true
+      };
+
+      this.initFieldValidation();
+    }
+
+    initFieldValidation() {
+      // hidden when injected into DOM
+      this.inputElement.after(this.fieldErrorElement);
+      this.inputElement.off('invalid').on('invalid', this.handleInvalidSubmit.bind(this));
+      this.scopedSiblings = this.safelySelectSiblings();
+    }
+
+    safelySelectSiblings() {
+      // Apply `ignoreSelector` in markup to siblings whose visibility should not be toggled with input validity
+      const ignoreSelector = '.validation-ignore';
+      const unignoredSiblings = this.inputElement.siblings(`p:not(${ignoreSelector})`);
+      const parentContainer = this.inputElement.parent('.form-group');
+
+      // Only select siblings when they're scoped within a form-group with one input
+      const safelyScoped = parentContainer.length && parentContainer.find('input').length === 1;
+
+      return safelyScoped ? unignoredSiblings : this.fieldErrorElement;
+    }
+
+    renderValidity() {
+      this.renderClear();
+
+      if (this.state.valid) {
+        return this.renderValid();
+      }
+
+      if (this.state.empty) {
+        return this.renderEmpty();
+      }
+
+      if (!this.state.valid) {
+        return this.renderInvalid();
+      }
+
+    }
+
+    handleInvalidSubmit(event) {
+      event.preventDefault();
+      const currentValue = this.accessCurrentValue();
+      this.state.valid = false;
+      this.state.empty = currentValue === '';
+
+      this.renderValidity();
+      this.form.focusOnFirstInvalid.apply(this.form);
+      // For UX, wait til after first invalid submission to check each keyup
+      this.inputElement.off('keyup.field_validator')
+        .on('keyup.field_validator', this.updateValidity.bind(this));
+
+    }
+
+    /* Get or set current input value */
+    accessCurrentValue(newVal) {
+      return newVal ? this.inputElement.val(newVal) : this.inputElement.val();
+    }
+
+    getInputValidity() {
+      return this.inputDomElement.validity.valid;
+    }
+
+    updateValidity() {
+      const inputVal = this.accessCurrentValue();
+      this.state.empty = !inputVal.length;
+      this.state.valid = this.getInputValidity();
+      this.renderValidity();
+    }
+
+    renderValid() {
+      return this.renderClear();
+    }
+
+    renderEmpty() {
+      return this.renderInvalid();
+    }
+
+    renderInvalid() {
+      this.inputElement.addClass(inputErrorClass);
+      this.scopedSiblings.hide();
+      return this.fieldErrorElement.show();
+    }
+
+    renderClear() {
+      const inputVal = this.accessCurrentValue();
+      if (!inputVal.split(' ').length) {
+        const trimmedInput = inputVal.trim();
+        this.accessCurrentValue(trimmedInput);
+      }
+      this.inputElement.removeClass(inputErrorClass);
+      this.scopedSiblings.hide();
+      this.fieldErrorElement.hide();
+    }
+  }
+
+  const customValidationFlag = 'no-gl-field-errors';
+
+  class GlFieldErrors {
+    constructor(form) {
+      this.form = $(form);
+      this.state = {
+        inputs: [],
+        valid: false
+      };
+      this.initValidators();
+    }
+
+    initValidators () {
+      // select all non-hidden inputs in form
+      this.state.inputs = this.form.find(':input:not([type=hidden])').toArray()
+        .filter((input) => !input.classList.contains(customValidationFlag))
+        .map((input) => new GlFieldError({ input, formErrors: this }));
+
+      this.form.on('submit', this.catchInvalidFormSubmit);
+    }
+
+    /* Neccessary to prevent intercept and override invalid form submit
+     * because Safari & iOS quietly allow form submission when form is invalid
+     * and prevents disabling of invalid submit button by application.js */
+
+    catchInvalidFormSubmit (event) {
+      if (!event.currentTarget.checkValidity()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+
+    focusOnFirstInvalid () {
+      const firstInvalid = this.state.inputs.filter((input) => !input.inputDomElement.validity.valid)[0];
+      firstInvalid.inputElement.focus();
+    }
+  }
+
+  global.GlFieldErrors = GlFieldErrors;
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/username_validator.js.es6

+((global) => {
+  const debounceTimeoutDuration = 1000;
+  const invalidInputClass = 'gl-field-error-outline';
+  const successInputClass = 'gl-field-success-outline';
+  const unavailableMessageSelector = '.username .validation-error';
+  const successMessageSelector = '.username .validation-success';
+  const pendingMessageSelector = '.username .validation-pending';
+  const invalidMessageSelector = '.username .gl-field-error';
+
+  class UsernameValidator {
+    constructor() {
+      this.inputElement = $('#new_user_username');
+      this.inputDomElement = this.inputElement.get(0);
+      this.state = {
+        available: false,
+        valid: false,
+        pending: false,
+        empty: true
+      };
+
+      const debounceTimeout = _.debounce((username) => {
+        this.validateUsername(username);
+      }, debounceTimeoutDuration);
+
+      this.inputElement.on('keyup.username_check', () => {
+        const username = this.inputElement.val();
+
+        this.state.valid = this.inputDomElement.validity.valid;
+        this.state.empty = !username.length;
+
+        if (this.state.valid) {
+          return debounceTimeout(username);
+        }
+
+        this.renderState();
+      });
+
+      // Override generic field validation
+      this.inputElement.on('invalid', this.interceptInvalid.bind(this));
+    }
+
+    renderState() {
+      // Clear all state
+      this.clearFieldValidationState();
+
+      if (this.state.valid && this.state.available) {
+        return this.setSuccessState();
+      }
+
+      if (this.state.empty) {
+        return this.clearFieldValidationState();
+      }
+
+      if (this.state.pending) {
+        return this.setPendingState();
+      }
+
+      if (!this.state.available) {
+        return this.setUnavailableState();
+      }
+
+      if (!this.state.valid) {
+        return this.setInvalidState();
+      }
+    }
+
+    interceptInvalid(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    validateUsername(username) {
+      if (this.state.valid) {
+        this.state.pending = true;
+        this.state.available = false;
+        this.renderState();
+        return $.ajax({
+          type: 'GET',
+          url: `/u/${username}/exists`,
+          dataType: 'json',
+          success: (res) => this.setAvailabilityState(res.exists)
+        });
+      }
+    }
+
+    setAvailabilityState(usernameTaken) {
+      if (usernameTaken) {
+        this.state.valid = false;
+        this.state.available = false;
+      } else {
+        this.state.available = true;
+      }
+      this.state.pending = false;
+      this.renderState();
+    }
+
+    clearFieldValidationState() {
+      this.inputElement.siblings('p').hide();
+
+      this.inputElement.removeClass(invalidInputClass)
+        .removeClass(successInputClass);
+    }
+
+    setUnavailableState() {
+      const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
+      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+      $usernameUnavailableMessage.show();
+    }
+
+    setSuccessState() {
+      const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
+      this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
+      $usernameSuccessMessage.show();
+    }
+
+    setPendingState() {
+      const $usernamePendingMessage = $(pendingMessageSelector);
+      if (this.state.pending) {
+        $usernamePendingMessage.show();
+      } else {
+        $usernamePendingMessage.hide();
+      }
+    }
+
+    setInvalidState() {
+      const $inputErrorMessage = $(invalidMessageSelector);
+      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+      $inputErrorMessage.show();
+    }
+  }
+
+  global.UsernameValidator = UsernameValidator;
+})(window);

app/assets/stylesheets/behaviors.scss

@@ -5,6 +5,7 @@
     display: none;
     &.hide { display: block; }
   }
+
   &.open .content {
     display: block;
     &.hide { display: none; }

app/assets/stylesheets/framework/blocks.scss

@@ -19,6 +19,7 @@
   &.diff-collapsed {
     padding: 5px;
+
     .click-to-expand {
       cursor: pointer;
     }
@@ -203,6 +204,7 @@
       }
     }
   }
+
   &.user-cover-block {
     padding: 24px 0 0;
   }

app/assets/stylesheets/framework/buttons.scss

@@ -25,7 +25,7 @@
   &:focus {
     background-color: $hover-background;
     color: $hover-text;
-    border-color: $hover-border;;
+    border-color: $hover-border;
   }
 }
@@ -152,7 +152,8 @@
     @include btn-blue-medium;
   }
-  &.btn-info {
+  &.btn-info,
+  &.btn-register {
     @include btn-blue;
   }
@@ -240,6 +241,7 @@
   width: 100%;
   margin: 0;
   margin-bottom: 15px;
+
   &.btn {
     padding: 6px 0;
   }
@@ -321,6 +323,7 @@
 .btn-build {
   margin-left: 10px;
+
   i {
     color: $gl-icon-color;
   }
@@ -328,6 +331,7 @@
 .clone-dropdown-btn a {
   color: $dropdown-link-color;
+
   &:hover {
     text-decoration: none;
   }
@@ -337,6 +341,7 @@
   background-color: $background-color !important;
   border: 1px solid lightgrey;
   cursor: default;
+
   &:active {
     -moz-box-shadow: inset 0 0 0 white;
     -webkit-box-shadow: inset 0 0 0 white;

app/assets/stylesheets/framework/callout.scss

@@ -13,10 +13,12 @@
   color: $text-color;
   background: $background-color;
 }
+
 .bs-callout h4 {
   margin-top: 0;
   margin-bottom: 5px;
 }
+
 .bs-callout p:last-child {
   margin-bottom: 0;
 }
@@ -27,16 +29,19 @@
   border-color: #eed3d7;
   color: #b94a48;
 }
+
 .bs-callout-warning {
   background-color: #faf8f0;
   border-color: #faebcc;
   color: #8a6d3b;
 }
+
 .bs-callout-info {
   background-color: #f4f8fa;
   border-color: #bce8f1;
   color: #34789a;
 }
+
 .bs-callout-success {
   background-color: #dff0d8;
   border-color: #5ca64d;

app/assets/stylesheets/framework/common.scss

 /** COLORS **/
 .cgray { color: $gl-gray; }
-.clgray { color: #bbb }
+.clgray { color: #bbb; }
 .cred { color: $gl-text-red; }
 .cgreen { color: $gl-text-green; }
-.cdark { color: #444 }
+.cdark { color: #444; }
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-5 { margin-top: 5px; }
-.prepend-top-10 { margin-top: 10px }
+.prepend-top-10 { margin-top: 10px; }
 .prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-20 { margin-top: 20px }
-.prepend-left-5 { margin-left: 5px }
-.prepend-left-10 { margin-left: 10px }
+.prepend-top-20 { margin-top: 20px; }
+.prepend-left-5 { margin-left: 5px; }
+.prepend-left-10 { margin-left: 10px; }
 .prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left: 20px }
-.append-right-5 { margin-right: 5px }
-.append-right-10 { margin-right: 10px }
+.prepend-left-20 { margin-left: 20px; }
+.append-right-5 { margin-right: 5px; }
+.append-right-10 { margin-right: 10px; }
 .append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right: 20px }
-.append-bottom-0 { margin-bottom: 0 }
-.append-bottom-10 { margin-bottom: 10px }
-.append-bottom-15 { margin-bottom: 15px }
-.append-bottom-20 { margin-bottom: 20px }
+.append-right-20 { margin-right: 20px; }
+.append-bottom-0 { margin-bottom: 0; }
+.append-bottom-10 { margin-bottom: 10px; }
+.append-bottom-15 { margin-bottom: 15px; }
+.append-bottom-20 { margin-bottom: 20px; }
 .append-bottom-default { margin-bottom: $gl-padding; }
-.inline { display: inline-block }
-.center { text-align: center }
+.inline { display: inline-block; }
+.center { text-align: center; }
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: #999; }
@@ -97,6 +97,7 @@ span.update-author {
   color: #999;
   font-weight: normal;
   font-style: italic;
+
   strong {
     font-weight: bold;
     font-style: normal;
@@ -128,7 +129,7 @@ p.time {
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
-  img { max-width: 100% }
+  img { max-width: 100%; }
   .note-title {
     li {
       border-bottom: none !important;
@@ -172,6 +173,7 @@ li.note {
   @extend .col-md-6;
   text-align: left;
   margin-top: 40px;
+
   pre {
     background: white;
     border: none;
@@ -197,6 +199,7 @@ li.note {
   background: #c67;
   color: #fff;
   font-weight: bold;
+
   a {
     color: #fff;
     text-decoration: underline;
@@ -227,6 +230,7 @@ li.note {
   &.milestone-closed {
     background: $gray-light;
   }
+
   .progress {
     margin-bottom: 0;
     margin-top: 4px;
@@ -286,6 +290,7 @@ table {
 .footer-links {
   margin-bottom: 20px;
+
   a {
     margin-right: 15px;
   }

app/assets/stylesheets/framework/dropdowns.scss

@@ -12,6 +12,7 @@
   .dropdown-menu,
   .dropdown-menu-nav {
     display: block;
+
     @media (max-width: $screen-xs-max) {
       width: 100%;
     }
@@ -48,6 +49,7 @@
     margin-top: -6px;
     color: $dropdown-toggle-icon-color;
     font-size: 10px;
+
     &.fa-spinner {
       font-size: 16px;
       margin-top: -8px;

app/assets/stylesheets/framework/files.scss

@@ -57,6 +57,7 @@
       margin-top: -3px;
     }
   }
+
   .file-content {
     background: #fff;
@@ -96,22 +97,27 @@
         border: none;
         margin: 0;
       }
+
       tr {
         border-bottom: 1px solid #eee;
       }
+
       td {
         &:first-child {
           border-left: none;
         }
+
         &:last-child {
           border-right: none;
         }
       }
+
       td.blame-commit {
         padding: 0 10px;
         min-width: 400px;
         background: $gray-light;
       }
+
       td.line-numbers {
         float: none;
         border-left: 1px solid #ddd;
@@ -121,6 +127,7 @@
           margin-right: 0;
         }
       }
+
       td.lines {
         padding: 0;
       }
@@ -137,8 +144,10 @@
         border-left: 1px solid $border-color;
         margin-bottom: 0;
         background: white;
+
         li {
           color: #888;
+
           p {
             margin: 0;
             color: #333;

app/assets/stylesheets/framework/forms.scss

@@ -9,7 +9,7 @@ input {
 input[type='text'].danger {
   background: #f2dede!important;
   border-color: #d66;
-  text-shadow: 0 1px 1px #fff
+  text-shadow: 0 1px 1px #fff;
 }
 .datetime-controls {
@@ -73,8 +73,8 @@ label {
 }
 .form-control {
-  box-shadow: none;
-  border-radius: 3px;
+  @include box-shadow(none);
+  border-radius: 2px;
   padding: $gl-vert-padding $gl-input-padding;
 }
@@ -117,11 +117,22 @@ label {
     display: table-cell;
     width: 200px !important;
   }
+
   .input-group-addon {
     background-color: #f7f8fa;
   }
+
   .input-group-addon:not(:first-child):not(:last-child) {
     border-left: 0;
     border-right: 0;
   }
 }
+
+.help-block {
+  margin-bottom: 0;
+}
+
+.gl-field-error {
+  color: $red-normal;
+}
+

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -62,7 +62,7 @@
         }
         i {
-          color: $white-light
+          color: $white-light;
         }
         path,

app/assets/stylesheets/framework/header.scss

@@ -168,6 +168,7 @@ header {
       a {
         color: $gl-text-color;
+
         &:hover {
           text-decoration: underline;
         }

app/assets/stylesheets/framework/lists.scss

@@ -60,6 +60,7 @@
       padding-top: 1px;
       margin: 0;
       color: $gray-dark;
+
       img {
         position: relative;
         top: 3px;

app/assets/stylesheets/framework/logo.scss

@@ -37,6 +37,7 @@
         0%, 10%, 100% {
           fill: lighten($tanuki-yellow, 25%);
         }
+
         90% {
           fill: $tanuki-yellow;
         }
@@ -48,6 +49,7 @@
         10%, 80% {
           fill: $tanuki-orange;
         }
+
         20%, 90% {
           fill: lighten($tanuki-orange, 25%);
         }
@@ -59,6 +61,7 @@
         10%, 80% {
           fill: $tanuki-red;
         }
+ 
         20%, 90% {
           fill: lighten($tanuki-red, 25%);
         }
@@ -70,6 +73,7 @@
         20%, 70% {
           fill: $tanuki-red;
         }
+
         30%, 80% {
           fill: lighten($tanuki-red, 25%);
         }
@@ -81,6 +85,7 @@
         30%, 60% {
           fill: $tanuki-orange;
         }
+
         40%, 70% {
           fill: lighten($tanuki-orange, 25%);
         }
@@ -92,6 +97,7 @@
         30%, 60% {
           fill: $tanuki-red;
         }
+
         40%, 70% {
           fill: lighten($tanuki-red, 25%);
         }
@@ -103,6 +109,7 @@
         40% {
           fill: $tanuki-yellow;
         }
+
         60% {
           fill: lighten($tanuki-yellow, 25%);
         }

app/assets/stylesheets/framework/mixins.scss

@@ -34,6 +34,7 @@
     &.active {
       background: $gray-light;
+
       a {
         font-weight: 600;
       }