Improved confirmation UX

Closes #4228

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

app/assets/stylesheets/framework/buttons.scss

@@ -144,6 +144,10 @@
   }
 }
 
+.btn-lg {
+  padding: 12px 20px;
+}
+
 .btn-transparent {
   color: $btn-transparent-color;
   background-color: transparent;

app/assets/stylesheets/pages/confirmation.scss

+.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;
+  }
+}

app/controllers/confirmations_controller.rb

 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)

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

app/views/devise/confirmations/almost_there.haml

+.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

app/views/layouts/devise_empty.html.haml

+!!! 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/"

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"

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