Improved confirmation UXconfirmation-screen

Closes #4228

9 files changed, 64 insertions, 4 deletions

diff --git a/CHANGELOG b/CHANGELOG
index ab8b86ba928..d78833d2204 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -81,6 +81,7 @@ v 8.7.0 (unreleased)
   - Remove "Congratulations!" tweet button on newly-created project. (Connor Shea)
   - Fix admin/projects when using visibility levels on search (PotHix)
   - Build status notifications
+  - Update email confirmation interface
   - API: Expose user location (Robert Schilling)
   - API: Do not leak group existence via return code (Robert Schilling)
   - ClosingIssueExtractor regex now also works with colons. e.g. "Fixes: #1234" !3591
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index e8c0172680d..18a74fe21a0 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -144,6 +144,10 @@
   }
 }
 
+.btn-lg {
+  padding: 12px 20px;
+}
+
 .btn-transparent {
   color: $btn-transparent-color;
   background-color: transparent;
diff --git a/app/assets/stylesheets/pages/confirmation.scss b/app/assets/stylesheets/pages/confirmation.scss
new file mode 100644
index 00000000000..125f495d6d4
--- /dev/null
+++ b/app/assets/stylesheets/pages/confirmation.scss
@@ -0,0 +1,18 @@
+.well-confirmation {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+
+  > h1 {
+    font-weight: 400;
+  }
+
+  .lead {
+    margin-bottom: 20px;
+  }
+}
+
+.confirmation-content {
+  a {
+    color: $md-link-color;
+  }
+}
diff --git a/app/controllers/confirmations_controller.rb b/app/controllers/confirmations_controller.rb
index af1faca93f6..7b66ad3f92c 100644
--- a/app/controllers/confirmations_controller.rb
+++ b/app/controllers/confirmations_controller.rb
@@ -1,7 +1,16 @@
 class ConfirmationsController < Devise::ConfirmationsController
 
+  def almost_there
+    flash[:notice] = nil
+    render layout: "devise_empty"
+  end
+
   protected
 
+  def after_resending_confirmation_instructions_path_for(resource)
+    users_almost_there_path
+  end
+
   def after_confirmation_path_for(resource_name, resource)
     if signed_in?(resource_name)
       after_sign_in_path_for(resource)
diff --git a/app/controllers/registrations_controller.rb b/app/controllers/registrations_controller.rb
index c48175a4c5a..059b88e2253 100644
--- a/app/controllers/registrations_controller.rb
+++ b/app/controllers/registrations_controller.rb
@@ -31,11 +31,11 @@ class RegistrationsController < Devise::RegistrationsController
   end
 
   def after_sign_up_path_for(_resource)
-    new_user_session_path
+    users_almost_there_path
   end
 
   def after_inactive_sign_up_path_for(_resource)
-    new_user_session_path
+    users_almost_there_path
   end
 
   private
diff --git a/app/views/devise/confirmations/almost_there.haml b/app/views/devise/confirmations/almost_there.haml
new file mode 100644
index 00000000000..3c3830a3f10
--- /dev/null
+++ b/app/views/devise/confirmations/almost_there.haml
@@ -0,0 +1,10 @@
+.well-confirmation.text-center
+  %h1.prepend-top-0
+    Almost there...
+  %p.lead
+    Please check your email to confirm your account
+%p.confirmation-content.text-center
+  No confirmation email received? Please check your spam folder or
+.append-bottom-20.prepend-top-20.text-center
+  %a.btn.btn-lg.btn-success{ href: new_user_confirmation_path }
+    Request new confirmation email
diff --git a/app/views/layouts/devise_empty.html.haml b/app/views/layouts/devise_empty.html.haml
new file mode 100644
index 00000000000..7c061dd531f
--- /dev/null
+++ b/app/views/layouts/devise_empty.html.haml
@@ -0,0 +1,17 @@
+!!! 5
+%html{ lang: "en"}
+  = render "layouts/head"
+  %body.ui_charcoal.login-page.application.navless
+    = render "layouts/header/empty"
+    = render "layouts/broadcast"
+    .container.navless-container
+      .content
+        = render "layouts/flash"
+        = yield
+
+    %hr
+    .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/config/routes.rb b/config/routes.rb
index 79b62a0b1bb..2f820aafed1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -418,6 +418,7 @@ Rails.application.routes.draw do
 
   devise_scope :user do
     get '/users/auth/:provider/omniauth_error' => 'omniauth_callbacks#omniauth_error', as: :omniauth_error
+    get '/users/almost_there' => 'confirmations#almost_there'
   end
 
   root to: "root#index"
diff --git a/spec/features/signup_spec.rb b/spec/features/signup_spec.rb
index 01472743b2a..51b754ff85c 100644
--- a/spec/features/signup_spec.rb
+++ b/spec/features/signup_spec.rb
@@ -13,8 +13,8 @@ feature 'Signup', feature: true do
       fill_in 'user_password_sign_up',    with: user.password
       click_button "Sign up"
 
-      expect(current_path).to eq user_session_path
-      expect(page).to have_content("A message with a confirmation link has been sent to your email address.")
+      expect(current_path).to eq users_almost_there_path
+      expect(page).to have_content("Please check your email to confirm your account")
     end
   end