Add JS validation for invalid characters in branch name

app/assets/javascripts/new_branch_form.js.coffee

+class @NewBranchForm
+  constructor: (form, availableRefs) ->
+    @branchNameError = form.find('.js-branch-name-error')
+    @name = form.find('.js-branch-name')
+    @ref  = form.find('#ref')
+
+    @setupAvailableRefs(availableRefs)
+    @setupRestrictions()
+    @addBinding()
+    @init()
+
+  addBinding: ->
+    @name.on 'blur', @validate
+
+  init: ->
+    @name.trigger 'blur'if @name.val().length > 0
+
+  setupAvailableRefs: (availableRefs) ->
+    @ref.autocomplete {
+      source: availableRefs,
+      minLength: 1
+    }
+
+  setupRestrictions: ->
+    startsWith = {
+      pattern: /^(\/|\.)/g,
+      prefix: "can't start with ",
+      conjunction: "or"
+    }
+
+    endsWith = {
+      pattern: /(\/|\.|\.lock)$/g,
+      prefix: "can't end in ",
+      conjunction: "or"
+    }
+
+    characters = {
+      pattern: /(\s|~|\^|:|\?|\*|\[|\\|\.\.|@\{|\/{2,}){1}/g
+      prefix: "can't contains ",
+      conjunction: ", "
+    }
+
+    @restrictions = [startsWith, characters, endsWith]
+
+  validate: =>
+    @branchNameError.empty()
+
+    unique = (values, value) ->
+      values.push(value) unless value in values
+      values
+
+    formatter = (values, restriction) ->
+      formatted = values.map (value) ->
+        switch
+          when /\s/.test value then 'spaces'
+          when /\/{2,}/g.test value then 'consecutive slashes'
+          else "'#{value}'"
+
+      "#{restriction.prefix} #{formatted.join(restriction.conjunction)}"
+
+    validator = (errors, restriction) =>
+      matched = @name.val().match(restriction.pattern)
+
+      if matched
+        errors.concat formatter(matched.reduce(unique, []), restriction)
+      else
+        errors
+
+    errors = @restrictions.reduce validator, []
+
+    if errors.length > 0
+      errorMessage = $("<span/>").text(errors.join(', '))
+      @branchNameError.append(errorMessage)

app/services/create_branch_service.rb

@@ -4,7 +4,7 @@ class CreateBranchService < BaseService
   def execute(branch_name, ref)
     valid_branch = Gitlab::GitRefValidator.validate(branch_name)
     if valid_branch == false
-      return error("Branch name can't contains space, '~', '^', ':', '?', '*', '[', '\', '..', '@{', and consecutive slashes, start with '/' or '.' or end in '/' or '.' or '.lock'")
+      return error('Branch name is invalid')
     end
 
     repository = project.repository

app/views/projects/branches/new.html.haml

@@ -9,11 +9,12 @@
   New Branch
 %hr
 
-= form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "form-horizontal js-requires-input" do
+= form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "form-horizontal js-create-branch-form js-requires-input" do
   .form-group
     = label_tag :branch_name, nil, class: 'control-label'
     .col-sm-10
-      = text_field_tag :branch_name, params[:branch_name], required: true, tabindex: 1, autofocus: true, class: 'form-control'
+      = text_field_tag :branch_name, params[:branch_name], required: true, tabindex: 1, autofocus: true, class: 'form-control js-branch-name'
+      .help-block.text-danger.js-branch-name-error
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
     .col-sm-10
@@ -26,7 +27,4 @@
 :javascript
   var availableRefs = #{@project.repository.ref_names.to_json};
 
-  $("#ref").autocomplete({
-    source: availableRefs,
-    minLength: 1
-  });
+  new NewBranchForm($('.js-create-branch-form'), availableRefs)

features/project/commits/branches.feature

@@ -25,6 +25,7 @@ Feature: Project Commits Branches
     And I click branch 'improve/awesome' delete link
     Then I should not see branch 'improve/awesome'
 
+  @javascript
   Scenario: I create a branch with invalid name
     Given I visit project branches page
     And I click new branch link

features/steps/project/commits/branches.rb

@@ -61,7 +61,8 @@ class Spinach::Features::ProjectCommitsBranches < Spinach::FeatureSteps
   end
 
   step 'I should see new an error that branch is invalid' do
-    expect(page).to have_content "Branch name can't contains space, '~', '^', ':', '?', '*', '[', '\', '..', '@{', and consecutive slashes, start with '/' or '.' or end in '/' or '.' or '.lock'"
+    expect(page).to have_content 'Branch name is invalid'
+    expect(page).to have_content "can't contains spaces"
   end
 
   step 'I should see new an error that ref is invalid' do