Feature/new login experience supporting identity providers other than twitter

Gemfile

@@ -62,6 +62,9 @@ group :development do
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'
   gem 'pry', '~> 0.14.2'
+
+  # to preview email in the default browser instead of sending it.
+  gem 'letter_opener'
 end
 
 group :test do

Gemfile.lock

@@ -195,12 +195,16 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
+    launchy (2.5.2)
+      addressable (~> 2.8)
     less (2.6.0)
       commonjs (~> 0.2.7)
     less-rails (4.0.0)
       actionpack (>= 4)
       less (~> 2.6.0)
       sprockets (>= 2)
+    letter_opener (1.8.1)
+      launchy (>= 2.2, < 3)
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -432,6 +436,7 @@ DEPENDENCIES
   faker (~> 2.19)
   haml-rails (~> 2.0.1)
   jbuilder (~> 2.7)
+  letter_opener
   listen (~> 3.3)
   mimemagic!
   newrelic_rpm

app/assets/stylesheets/application.css

@@ -12,4 +12,5 @@
  *= require bootstrap
  *= require bootstrap_and_overrides
  *= require home
+ *= require devise_pages
 */

app/assets/stylesheets/devise_pages.css.scss

@@ -0,0 +1,46 @@
+.deviseForm {
+  margin: auto;
+  width: 50%;
+}
+
+.deviseHeading {
+  text-align: center;
+  margin-right: 10%;
+}
+
+.deviseRow {
+  display: flex;
+}
+
+.deviseColumn {
+  flex: 50%;
+  padding-left: 30px;
+  height: 300px;
+}
+
+.borderRight {
+  border-right: 2px solid black;
+}
+
+.actionButton {
+  position: relative;
+  margin-top: 10px;
+}
+
+.sharedLinks {
+  position: relative;
+  margin-top: 10px;
+}
+
+.deviseButtons {
+  border: 2px solid black;
+  color: blue;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-weight: bold;
+  padding: 3% 5%;
+}

app/controllers/users/confirmations_controller.rb

@@ -0,0 +1,7 @@
+class Users::ConfirmationsController < Devise::ConfirmationsController
+  private
+  def after_confirmation_path_for(resource_name, resource)
+    sign_in(resource)
+    root_path
+  end
+end

app/helpers/application_helper.rb

@@ -24,4 +24,9 @@ def image_for_twitter_handle(user)
   def cloudinary_image_url(twitter_handle)
     "https://res.cloudinary.com/#{ENV['CLOUDINARY_HANDLE']}/image/twitter_name/#{twitter_handle}.jpg"
   end
+
+  # to remove why it's ruby section on devise pages like signin and signup
+  def devise_url?
+    request.path.starts_with?('/users/auth') || devise_controller?
+  end
 end

app/models/user.rb

@@ -1,7 +1,7 @@
 class User < ActiveRecord::Base
   # Include default devise modules. Others available are:
-  # :token_authenticatable, :encryptable, :confirmable, :lockable, :timeoutable and :omniauthable
-  devise :registerable, :rememberable, :trackable, :database_authenticatable, :omniauthable,
+  # :token_authenticatable, :encryptable, :lockable, :timeoutable and :omniauthable
+  devise :registerable, :rememberable, :trackable, :database_authenticatable, :omniauthable, :confirmable,
          omniauth_providers: [:twitter]
 
   # Setup accessible (or protected) attributes for your model

app/views/devise/confirmations/new.html.erb

@@ -0,0 +1,16 @@
+<h2>Resend confirmation instructions</h2>
+
+<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Resend confirmation instructions" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -0,0 +1,5 @@
+<p>Welcome <%= @email %>!</p>
+
+<p>You can confirm your account email through the link below:</p>
+
+<p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/devise/mailer/email_changed.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @email %>!</p>
+
+<% if @resource.try(:unconfirmed_email?) %>
+  <p>We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.</p>
+<% else %>
+  <p>We're contacting you to notify you that your email has been changed to <%= @resource.email %>.</p>
+<% end %>

app/views/devise/mailer/password_change.html.erb

@@ -0,0 +1,3 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>

app/views/devise/mailer/reset_password_instructions.html.erb

@@ -0,0 +1,8 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+
+<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
+
+<p>If you didn't request this, please ignore this email.</p>
+<p>Your password won't change until you access the link above and create a new one.</p>

app/views/devise/mailer/unlock_instructions.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+
+<p>Click the link below to unlock your account:</p>
+
+<p><%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %></p>

app/views/devise/passwords/edit.html.erb

@@ -0,0 +1,25 @@
+<h2>Change your password</h2>
+
+<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+  <%= f.hidden_field :reset_password_token %>
+
+  <div class="field">
+    <%= f.label :password, "New password" %><br />
+    <% if @minimum_password_length %>
+      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
+    <% end %>
+    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation, "Confirm new password" %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Change my password" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

app/views/devise/passwords/new.html.erb

@@ -0,0 +1,16 @@
+<h2>Forgot your password?</h2>
+
+<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Send me reset password instructions" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

app/views/devise/registrations/edit.html.erb

@@ -0,0 +1,43 @@
+<h2>Edit <%= resource_name.to_s.humanize %></h2>
+
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
+
+  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
+  <% end %>
+
+  <div class="field">
+    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
+    <%= f.password_field :password, autocomplete: "new-password" %>
+    <% if @minimum_password_length %>
+      <br />
+      <em><%= @minimum_password_length %> characters minimum</em>
+    <% end %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
+    <%= f.password_field :current_password, autocomplete: "current-password" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Update" %>
+  </div>
+<% end %>
+
+<h3>Cancel my account</h3>
+
+<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
+
+<%= link_to "Back", :back %>

app/views/devise/registrations/new.html.erb

@@ -0,0 +1,44 @@
+<div class="deviseForm">
+  <h2 class="deviseHeading">Sign up</h2>
+
+  <div class="deviseRow">
+    <div class="deviseColumn borderRight omniauthLinks">
+      <div class="deviseButtons" style="margin-top: 20px">
+        <%= render "devise/shared/omniauthables"%>
+      </div>
+    </div>
+
+    <div class="deviseColumn">
+      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+        <%= render "devise/shared/error_messages", resource: resource %>
+
+        <div class="field">
+          <%= f.label :email %>
+          <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+        </div>
+
+        <div class="field">
+          <%= f.label :password %>
+          <% if @minimum_password_length %>
+            <em>(<%= @minimum_password_length %> characters minimum)</em>
+          <% end %>
+          <%= f.password_field :password, autocomplete: "new-password" %>
+        </div>
+
+        <div class="field">
+          <%= f.label :password_confirmation %>
+          <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+        </div>
+
+        <div class="actions">
+          <%= f.submit "Sign up", class: "actionButton deviseButtons" %>
+        </div>
+      <% end %>
+
+      <div class="sharedLinks deviseButtons">
+        <%= render "devise/shared/links"%>
+      </div>
+
+    </div>
+  </div>
+</div>

app/views/devise/sessions/new.html.erb

@@ -0,0 +1,40 @@
+<div class="deviseForm">
+  <h2 class="deviseHeading">Sign In</h2>
+
+  <div class="deviseRow">
+    <div class="deviseColumn borderRight omniauthLinks">
+      <div class="deviseButtons" style="margin-top: 20px">
+        <%= render "devise/shared/omniauthables"%>
+      </div>
+    </div>
+
+    <div class="deviseColumn">
+      <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+        <div class="field">
+          <%= f.label :email %>
+          <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+        </div>
+
+        <div class="field">
+          <%= f.label :password %>
+          <%= f.password_field :password, autocomplete: "current-password" %>
+        </div>
+
+        <% if devise_mapping.rememberable? %>
+          <div class="field">
+            <%= f.check_box :remember_me %>
+            <%= f.label :remember_me %>
+          </div>
+        <% end %>
+
+        <div class="actions">
+          <%= f.submit "Sign In"%>
+        </div>
+      <% end %>
+
+      <div class="sharedLinks deviseButtons">
+        <%= render "devise/shared/links", class: ""%>
+      </div>
+    </div>
+  </div>
+</div>

app/views/devise/shared/_error_messages.html.erb

@@ -0,0 +1,15 @@
+<% if resource.errors.any? %>
+  <div id="error_explanation">
+    <h2>
+      <%= I18n.t("errors.messages.not_saved",
+                 count: resource.errors.count,
+                 resource: resource.class.model_name.human.downcase)
+       %>
+    </h2>
+    <ul>
+      <% resource.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

app/views/devise/shared/_links.html.erb

@@ -0,0 +1,20 @@
+<%- if controller_name != 'sessions' %>
+  <%= link_to "Log in", new_session_path(resource_name) %><br />
+<% end %>
+
+<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
+  <%= link_to "Sign up", new_registration_path(resource_name) %><br />
+<% end %>
+
+<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+  <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
+<% end %>
+
+<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
+<% end %>
+
+<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
+<% end %>
+

app/views/devise/shared/_omniauthables.html.erb

@@ -0,0 +1,5 @@
+<%- if devise_mapping.omniauthable? %>
+  <%- resource_class.omniauth_providers.each do |provider| %>
+    <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />
+  <% end %>
+<% end %>