Make UX upgrades to SignIn/Register views.

- Tab between register and sign in forms
- Add individual input validation error messages
- Validate username
- Update many styles for all login-box forms

19 files changed, 171 insertions, 146 deletions

diff --git a/app/views/admin/appearances/preview.html.haml b/app/views/admin/appearances/preview.html.haml
index 6c51639b840..0d35702c634 100644
--- a/app/views/admin/appearances/preview.html.haml
+++ b/app/views/admin/appearances/preview.html.haml
@@ -1,9 +1,12 @@
-- page_title "Preview | Appearance"
+= render 'devise/shared/tab_single', { :tab_title => 'Sign in preview'  }
 .login-box
-  .login-heading
-    %h3 Existing user? Sign in
-  %form
-    = text_field_tag :login, nil, class: "form-control top", placeholder: "Username or Email"
-    = password_field_tag :password, nil, class: "form-control bottom", placeholder: "Password"
-    = button_tag "Sign in", class: "btn-create btn"
+  %form.show-gl-field-errors
+    .form-group
+      = label_tag :login
+      = text_field_tag :login, nil, class: "form-control top", title: 'Please provide your username or email address.'
+    .form-group
+      = label_tag :password
+      = password_field_tag :password, nil, class: "form-control bottom", title: 'This field is required.'
+    .form-group
+      = button_tag "Sign in", class: "btn-create btn"
 
diff --git a/app/views/devise/confirmations/new.html.haml b/app/views/devise/confirmations/new.html.haml
index 970ba147111..443a316c6e2 100644
--- a/app/views/devise/confirmations/new.html.haml
+++ b/app/views/devise/confirmations/new.html.haml
@@ -1,14 +1,14 @@
+= render 'devise/shared/tab_single', { :tab_title => 'Resend confirmation instructions' }
 .login-box
-  .login-heading
-    %h3 Resend confirmation instructions
   .login-body
-    = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+    = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: 'show-gl-field-errors' }) do |f|
       .devise-errors
         = devise_error_messages!
-      .clearfix.append-bottom-20
-        = f.email_field :email, placeholder: 'Email', class: "form-control", required: true
+      .form-group
+        = f.label :email
+        = f.email_field :email, class: "form-control", required: true, title: 'Please provide a valid email address.'
       .clearfix
-        = f.submit "Resend confirmation instructions", class: 'btn btn-success'
+        = f.submit "Resend", class: 'btn btn-success'
 
 .clearfix.prepend-top-20
   = render 'devise/shared/sign_in_link'
diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
index 56048e99c17..9c533ef9916 100644
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@@ -1,19 +1,21 @@
+= render 'devise/shared/tab_single', { :tab_title => 'Change your password' }
 .login-box
-  .login-heading
-    %h3 Change your password
   .login-body
-    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
+    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: 'show-gl-field-errors' }) do |f|
       .devise-errors
         = devise_error_messages!
       = f.hidden_field :reset_password_token
-      %div
-        = f.password_field :password, class: "form-control top", placeholder: "New password", required: true
-      %div
-        = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm new password", required: true
+      .form-group
+        = f.label 'New password', for: :password
+        = f.password_field :password, class: "form-control top",  required: true, title: 'This field is required'
+      .form-group
+        = f.label 'Confirm new password', for: :password_confirmation
+        = f.password_field :password_confirmation, class: "form-control bottom", title: 'This field is required', required: true
       .clearfix
         = f.submit "Change your password", class: "btn btn-primary"
 
 .clearfix.prepend-top-20
   %p
-    = link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name)
-  = render 'devise/shared/sign_in_link'
+    %span.light Didn't receive a confirmation email?
+    = link_to "Request a new one", new_confirmation_path(resource_name)
+= render 'devise/shared/sign_in_link'
diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
index 535e85869e5..91b46a12ac0 100644
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@@ -1,12 +1,12 @@
+= render 'devise/shared/tab_single', { :tab_title => 'Reset Password' }
 .login-box
-  .login-heading
-    %h3 Reset password
   .login-body
-    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'show-gl-field-errors' }) do |f|
       .devise-errors
         = devise_error_messages!
-      .clearfix.append-bottom-20
-        = f.email_field :email, placeholder: "Email",  class: "form-control", required: true, value: params[:user_email], autofocus: true
+      .form-group
+        = f.label :email
+        = f.email_field :email, class: "form-control", required: true, value: params[:user_email], autofocus: true, title: 'Please provide a valid email address.'
       .clearfix
         = f.submit "Reset password", class: "btn-primary btn"
 
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 781fd1b32a6..cfb1b964d76 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,6 +1,10 @@
-= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-  = f.text_field :login, class: "form-control top", placeholder: "Username or Email", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off"
-  = f.password_field :password, class: "form-control bottom", placeholder: "Password"
+= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user show-gl-field-errors', 'aria-live' => 'assertive'}) do |f|
+  %div.form-group
+    = f.label "Username or email", for: :login
+    = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
+  %div.form-group
+    = f.label :password
+    = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required."
   .sign-in
     = f.submit "Sign in", class: "btn btn-save"
   - if devise_mapping.rememberable?
diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml
index b7d3acac2b1..5a192c63c7c 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -1,6 +1,10 @@
-= form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user' ) do
-  = text_field_tag :username, nil, {class: "form-control top", placeholder: "Username", autofocus: "autofocus"}
-  = password_field_tag :password, nil, {class: "form-control bottom", placeholder: "Password"}
+= form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user' class: 'show-gl-field-errors') do
+  .form-group
+    = label_tag 'Username or email', for: :username
+    = text_field_tag :username, nil, {class: "form-control top", title: "This field is required", autofocus: "autofocus", required: true }
+  .form-group
+    = label_tag :password
+    = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
   - if devise_mapping.rememberable?
     .remember-me.checkbox
       %label{for: "remember_me"}
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index 2ef383960f4..b26efbb4535 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -1,6 +1,10 @@
-= form_tag(omniauth_callback_path(:user, server['provider_name']), id: 'new_ldap_user') do
-  = text_field_tag :username, nil, {class: "form-control top", placeholder: "#{server['label']} Login", autofocus: "autofocus"}
-  = password_field_tag :password, nil, {class: "form-control bottom", placeholder: "Password"}
+= form_tag(omniauth_callback_path(:user, server['provider_name']), id: 'new_ldap_user', class: "show-gl-field-errors") do
+  .form-group
+    = label_tag "#{server['label']} Login", for: :username
+    = text_field_tag :username, nil, {class: "form-control top", title: "This field is required.", autofocus: "autofocus", required: true }
+  .form-group
+    = label_tag :password
+    = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
   - if devise_mapping.rememberable?
     .remember-me.checkbox
       %label{for: "remember_me"}
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index 28194506acc..2fb05b9456b 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -1,19 +1,23 @@
 - page_title "Sign in"
 %div
-  - if signin_enabled? || ldap_enabled? || crowd_enabled?
-    = render 'devise/shared/signin_box'
+  - if form_based_providers.any?
+    = render 'devise/shared/tabs_ldap'
+  - else
+    = render 'devise/shared/tabs_normal'
+  .tab-content
+    - if signin_enabled? || ldap_enabled? || crowd_enabled?
+      = render 'devise/shared/signin_box'
 
-  -# Omniauth fits between signin/ldap signin and signup and does not have a surrounding box
-  - if omniauth_enabled? && devise_mapping.omniauthable? && button_based_providers_enabled?
-    .clearfix.prepend-top-20
-      = render 'devise/shared/omniauth_box'
-
-  -# Signup only makes sense if you can also sign-in
-  - if signin_enabled? && signup_enabled?
-    .prepend-top-20
+    -# Signup only makes sense if you can also sign-in
+    - if signin_enabled? && signup_enabled?
       = render 'devise/shared/signup_box'
 
-  -# Show a message if none of the mechanisms above are enabled
-  - if !signin_enabled? && !ldap_enabled? && !(omniauth_enabled? && devise_mapping.omniauthable?)
-    %div
-      No authentication methods configured.
+    - if omniauth_enabled? && devise_mapping.omniauthable? && button_based_providers_enabled?
+      .clearfix
+        = render 'devise/shared/omniauth_box'
+
+    -# Show a message if none of the mechanisms above are enabled
+    - if !signin_enabled? && !ldap_enabled? && !(omniauth_enabled? && devise_mapping.omniauthable?)
+      %div
+        No authentication methods configured.
+
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index e623f7cff88..56074c057d7 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -3,20 +3,19 @@
     = page_specific_javascript_tag('u2f.js')
 
 %div
+  = render 'devise/shared/tab_single', { :tab_title => 'Two-Factor Authentication' }
   .login-box
-    .login-heading
-      %h3 Two-Factor Authentication
     .login-body
       - if @user.two_factor_otp_enabled?
-        %h5 Authenticate via Two-Factor App
-        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post) do |f|
+        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'edit_user show-gl-field-errors' }) do |f|
           - resource_params = params[resource_name].presence || params
           = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
-          = f.text_field :otp_attempt, class: 'form-control', placeholder: 'Two-Factor Authentication code', required: true, autofocus: true, autocomplete: 'off'
-          %p.help-block.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.
-          .prepend-top-20
-            = f.submit "Verify code", class: "btn btn-save"
+          .form-group
+            = f.label 'Two-Factor Authentication code', name:  :otp_attempt
+            = f.text_field :otp_attempt, class: 'form-control', required: true, autofocus: true, autocomplete: 'off', title: 'This field is required.'
+            %p.help-block.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.
+            .prepend-top-20
+              = f.submit "Verify code", class: "btn btn-save"
 
       - if @user.two_factor_u2f_enabled?
-        %hr
         = render "u2f/authenticate", locals: { params: params, resource: resource, resource_name: resource_name }
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 2e7da2747d0..d5b6db48a29 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -1,8 +1,9 @@
-%p
-  %span.light
-    Sign in with  
-  - providers = enabled_button_based_providers
-  - providers.each do |provider|
+%div.login-box
+  %p
     %span.light
-      - has_icon = provider_has_icon?(provider)
-      = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: (has_icon ? 'oauth-image-link' : 'btn'), "data-no-turbolink" => "true"
+      Sign in with  
+    - providers = enabled_button_based_providers
+    - providers.each do |provider|
+      %span.light
+        - has_icon = provider_has_icon?(provider)
+        = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: (has_icon ? 'oauth-image-link' : 'btn'), "data-no-turbolink" => "true"
diff --git a/app/views/devise/shared/_sign_in_link.html.haml b/app/views/devise/shared/_sign_in_link.html.haml
index fafc4b82f53..289bf40f3de 100644
--- a/app/views/devise/shared/_sign_in_link.html.haml
+++ b/app/views/devise/shared/_sign_in_link.html.haml
@@ -1,5 +1,4 @@
 %p
   %span.light
     Already have login and password?
-  %strong
     = link_to "Sign in", new_session_path(resource_name)
diff --git a/app/views/devise/shared/_signin_box.html.haml b/app/views/devise/shared/_signin_box.html.haml
index 2c15e2c4891..810dd5ab687 100644
--- a/app/views/devise/shared/_signin_box.html.haml
+++ b/app/views/devise/shared/_signin_box.html.haml
@@ -1,32 +1,15 @@
-.login-box
-  - if signup_enabled?
-    .login-heading
-      %h3 Existing user? Sign in
-  - else
-    .login-heading
-      %h3 Sign in
+#login-pane.login-box{ role: 'tabpanel', class: 'tab-pane active' }
   .login-body
     - if form_based_providers.any?
-      %ul.nav-links
-        - if crowd_enabled?
-          %li.active
-            = link_to "Crowd", "#tab-crowd", 'data-toggle' => 'tab'
-        - @ldap_servers.each_with_index do |server, i|
-          %li{class: (:active if i.zero? && !crowd_enabled?)}
-            = link_to server['label'], "#tab-#{server['provider_name']}", 'data-toggle' => 'tab'
-        - if signin_enabled?
-          %li
-            = link_to 'Standard', '#tab-signin', 'data-toggle' => 'tab'
-      .tab-content
-        - if crowd_enabled?
-          %div.tab-pane.active{id: "tab-crowd"}
-            = render 'devise/sessions/new_crowd'
-        - @ldap_servers.each_with_index do |server, i|
-          %div.tab-pane{id: "tab-#{server['provider_name']}", class: (:active if i.zero? && !crowd_enabled?)}
-            = render 'devise/sessions/new_ldap', server: server
-        - if signin_enabled?
-          %div#tab-signin.tab-pane
-            = render 'devise/sessions/new_base'
+      - if crowd_enabled?
+        %div.tab-pane.active{id: "tab-crowd"}
+          = render 'devise/sessions/new_crowd'
+      - @ldap_servers.each_with_index do |server, i|
+        %div.tab-pane{id: "tab-#{server['provider_name']}", class: (:active if i.zero? && !crowd_enabled?)}
+          = render 'devise/sessions/new_ldap', server: server
+      - if signin_enabled?
+        %div#tab-signin.tab-pane
+          = render 'devise/sessions/new_base'
 
     - elsif signin_enabled?
       = render 'devise/sessions/new_base'
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index 905a8dbcd84..c43a6aa3e49 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -1,28 +1,30 @@
-.login-box
-  - if signin_enabled?
-    .login-heading
-      %h3 New user? Create an account
-  - else
-    .login-heading
-      %h3 Create an account
+#register-pane.login-box{ role: 'tabpanel', class: 'tab-pane' }
   .login-body
-    = form_for(resource, as: "new_#{resource_name}", url: registration_path(resource_name)) do |f|
+    = form_for(resource, as: "new_#{resource_name}", url: registration_path(resource_name), html: { class: "new_new_user show-gl-field-errors", "aria-live" => "assertive" }) do |f|
       .devise-errors
         = devise_error_messages!
-      %div
-        = f.text_field :name, class: "form-control top", placeholder: "Name", required: true
-      %div
-        = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true
-      %div
-        = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true
+      %div.form-group
+        = f.label :name
+        = f.text_field :name, class: "form-control top", required: true, title: "This field is required."
+      %div.username.form-group
+        = f.label :username
+        = f.text_field :username, class: "form-control middle", pattern: "[a-zA-Z0-9]+", required: true
+        %p.gl-field-error.hide Please create a username with only alphanumeric characters.
+        %p.validation-error.hide Username is already taken.
+        %p.validation-success.hide Username is available.
+        %p.validation-pending.hide Checking username availability...
+      %div.form-group
+        = f.label :email
+        = f.email_field :email, class: "form-control middle", required: true, title: "Please provide a valid email address."
       .form-group.append-bottom-20#password-strength
-        = f.password_field :password, class: "form-control bottom", placeholder: "Password - minimum length #{@minimum_password_length} characters", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters"
+        = f.label :password
+        = f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters."
+        %p.gl-field-hint Minimum length is #{@minimum_password_length} characters
       %div
       - if current_application_settings.recaptcha_enabled
         = recaptcha_tags
       %div
-        = f.submit "Sign up", class: "btn-create btn"
-
+        = f.submit "Register", class: "btn-register btn"
 .clearfix.prepend-top-20
   %p
     %span.light Didn't receive a confirmation email?
diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml
new file mode 100644
index 00000000000..8590c43d54d
--- /dev/null
+++ b/app/views/devise/shared/_tab_single.html.haml
@@ -0,0 +1,4 @@
+//  = render 'devise/shared/tab_single', :tab_title => 'Tab Title'
+%ul.nav-links.nav-tabs.new-session-tabs.single-tab
+  %li.active
+    = link_to tab_title, '#', disabled: true
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
new file mode 100644
index 00000000000..e276e91433a
--- /dev/null
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -0,0 +1,10 @@
+%ul.new-session-tabs.nav-links.nav-tabs
+  - if crowd_enabled?
+    %li.active
+      = link_to "Crowd", "#tab-crowd", 'data-toggle' => 'tab'
+  - @ldap_servers.each_with_index do |server, i|
+    %li{class: (:active if i.zero? && !crowd_enabled?)}
+      = link_to server['label'], "#tab-#{server['provider_name']}", 'data-toggle' => 'tab'
+  - if signin_enabled?
+    %li
+      = link_to 'Standard', '#tab-signin', 'data-toggle' => 'tab'
diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml
new file mode 100644
index 00000000000..48abd6519d6
--- /dev/null
+++ b/app/views/devise/shared/_tabs_normal.html.haml
@@ -0,0 +1,5 @@
+%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist'}
+  %li.active{ role: 'presentation' }
+    %a{ href: '#login-pane', data: {'toggle':'tab'}, role: 'tab'} Sign in
+  %li{ role: 'presentation'}
+    %a{ href: '#register-pane', data: {'toggle':'tab'}, role: 'tab'} Register
diff --git a/app/views/devise/unlocks/new.html.haml b/app/views/devise/unlocks/new.html.haml
index 49c087c0646..0036f3b98e5 100644
--- a/app/views/devise/unlocks/new.html.haml
+++ b/app/views/devise/unlocks/new.html.haml
@@ -1,12 +1,12 @@
+= render 'devise/shared/tab_single', { :tab_title => 'Resend unlock instructions' }
 .login-box
-  .login-heading
-    %h3 Resend unlock email
   .login-body
-    = form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f|
+    = form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post, class: 'show-gl-field-errors' }) do |f|
       .devise-errors
         = devise_error_messages!
-      .clearfix.append-bottom-20
-        = f.email_field :email, class: 'form-control', placeholder: 'Email', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off'
+      .form-group.append-bottom-20
+        = f.label :email
+        = f.email_field :email, class: 'form-control', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', title: 'Please provide a valid email address.'
       .clearfix
         = f.submit 'Resend unlock instructions', class: 'btn btn-success'
 
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index a9a384bd5f3..825e540cb0c 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -1,36 +1,37 @@
 !!! 5
-%html{ lang: "en"}
+%html{ lang: "en", class: "devise-layout-html"}
   = render "layouts/head"
-  %body.ui_charcoal.login-page.application.navless
-    = Gon::Base.render_data
-    = render "layouts/header/empty"
-    = render "layouts/broadcast"
-    .container.navless-container
-      .content
-        = render "layouts/flash"
-        .row
-          .col-sm-5.pull-right
-            = yield
-          .col-sm-7.brand-holder.pull-left
-            %h1
-              = brand_title
-            - if brand_item
-              = brand_image
-              = brand_text
-            - else
-              %h3 Open source software to collaborate on code
+  %body{ class: "ui_charcoal login-page application navless", data: {page: body_data_page}}
+    .page-wrap
+      = Gon::Base.render_data
+      = render "layouts/header/empty"
+      = render "layouts/broadcast"
+      .container.navless-container
+        .content
+          = render "layouts/flash"
+          .row
+            .col-sm-5.pull-right.new-session-forms-container
+              = yield
+            .col-sm-7.brand-holder.pull-left
+              %h1
+                = brand_title
+              - if brand_item
+                = brand_image
+                = brand_text
+              - else
+                %h3 Open source software to collaborate on code
 
-              %p
-                Manage git repositories with fine grained access controls that keep your code secure.
-                Perform code reviews and enhance collaboration with merge requests.
-                Each project can also have an issue tracker and a wiki.
+                %p
+                  Manage git repositories with fine grained access controls that keep your code secure.
+                  Perform code reviews and enhance collaboration with merge requests.
+                  Each project can also have an issue tracker and a wiki.
 
             - if current_application_settings.sign_in_text.present?
               = markdown_field(current_application_settings, :sign_in_text)
 
-    %hr
-    .container
-      .footer-links
-        = link_to "Explore", explore_root_path
-        = link_to "Help", help_path
-        = link_to "About GitLab", "https://about.gitlab.com/"
+      %hr.footer-fixed
+      .container.footer-container
+        .footer-links
+          = link_to "Explore", explore_root_path
+          = link_to "Help", help_path
+          = link_to "About GitLab", "https://about.gitlab.com/"
diff --git a/app/views/u2f/_authenticate.html.haml b/app/views/u2f/_authenticate.html.haml
index 9657101ace5..232ca26c1af 100644
--- a/app/views/u2f/_authenticate.html.haml
+++ b/app/views/u2f/_authenticate.html.haml
@@ -6,7 +6,7 @@
 %script#js-authenticate-u2f-setup{ type: "text/template" }
   %div
     %p Insert your security key (if you haven't already), and press the button below.
-    %a.btn.btn-info#js-login-u2f-device{ href: 'javascript:void(0)' } Login Via U2F Device
+    %a.btn.btn-info#js-login-u2f-device{ href: 'javascript:void(0)' } Sign in via U2F device
 
 %script#js-authenticate-u2f-in-progress{ type: "text/template" }
   %p Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.