Merge pull request #44 from mena-devs/reCaptcha

Implement ReCaptcha and improve login UI
mena-devs · May 22, 2020 · 5d168eb · 5d168eb
2 parents f1f28a7 + 870c34e
commit 5d168eb
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 8 deletions.
diff --git a/app/views/devise/registrations/_form.html.erb b/app/views/devise/registrations/_form.html.erb
@@ -7,16 +7,36 @@
 
   <div class="field">
     <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
+      <em>(<%= @minimum_password_length %> characters minimum)</em>
+    <% end %>
+    <br />
     <%= f.password_field :password, autocomplete: "off" %>
   </div>
 
   <div class="field">
     <%= f.password_field :password_confirmation, autocomplete: "off" %>
   </div>
 
+  <% unless Rails.env.test? %>
+    <br/>
+    <div class="g-recaptcha" data-callback="correctCaptcha" data-sitekey="<%= AppSettings.recaptcha_client_key %>"></div>
+    <br/>
+  <% end %>
+
   <div class="actions center">
     <%= f.submit "Join us", :class => "button button-3d button button-rounded button-green" %>
   </div>
 <% end %>
+
+<% unless Rails.env.test? %>
+  <script>
+    $("#new_user").each(function() {
+      $(this).find(':input[type="submit"]').prop('disabled', true);
+    });
+    function correctCaptcha() {
+      $("#new_user").each(function() {
+        $(this).find(':input[type="submit"]').prop('disabled', false);
+      });
+    }
+  </script>
+<% end %>
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -21,8 +21,9 @@
       <div class="col-sm-12 col-md-6">
 
         <div class="panel panel-default">
-          <div class="panel-body" style="padding: 40px;">
+          <div class="panel-body" style="padding: 40px; background-color: #E5FEDF;">
             <h3>Register with your personal email</h3>
+            <h5 style="color: #1B9400;"><em>If you are an existing member of MENAdevs Slack group, <br/>you can skip registration and login using your Slack credentials</em></h5>
 
             <div class="col_full">
               <%= render "form" %>

diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -3,7 +3,7 @@
 <section id="page-title">
 
   <div class="container clearfix center">
-    <h1>Use ONE of the below login options</h1>
+    <h1>Use ONE of the login options below to login</h1>
   </div>
 
 </section>
@@ -17,12 +17,12 @@
 
       <div class="col-sm-12 col-md-6">
         <div class="panel panel-default">
-          <div class="panel-body" style="padding: 40px;">
-            <h3>Slack credentials</h3>
+          <div class="panel-body" style="padding: 40px; background-color: #FAFFEC;">
+            <h3>MENAdevs Slack credentials</h3>
 
             <div class="col_full">
               <div class="well well-sm">
-                Use ONLY if you are a member of MENA devs Slack group
+                ONLY use if you are a member of MENAdevs Slack group
               </div>
             </div>
 
@@ -35,7 +35,7 @@
 
       <div class="col-sm-12 col-md-6">
         <div class="panel panel-default">
-          <div class="panel-body" style="padding: 40px;">
+          <div class="panel-body" style="padding: 40px; background-color: #E5FEDF;">
             <h3>Personal email and password</h3>
 
             <div class="col_full">

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -25,6 +25,8 @@
 
     <%= display_meta_tags site: AppSettings.application_name %>
     <meta name="google-site-verification" content="4pv0d40h_O_7yUyWQi9-yirsuesMFTe_Z9LG-igKoDk" />
+
+    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
   </head>
 
   <body class="stretched no-transition">

diff --git a/config/settings/development.yml.sample b/config/settings/development.yml.sample
@@ -9,6 +9,8 @@ slack_team_name: ''
 slack_team_id: ''
 buffer_access_token: ''
 
+recaptcha_client_key: ''
+
 mailgun_api_key: ''
 mailchimp_api_key: ''
 mail_host: ''

diff --git a/config/settings/production.yml.sample b/config/settings/production.yml.sample
@@ -9,6 +9,8 @@ slack_team_name: ''
 slack_team_id: ''
 buffer_access_token: ''
 
+recaptcha_client_key: ''
+
 mailgun_api_key: ''
 mailchimp_api_key: ''
 mail_host: ''

diff --git a/config/settings/test.yml.sample b/config/settings/test.yml.sample
@@ -10,6 +10,8 @@ slack_team_name: 'mena developers'
 slack_team_id: ''
 buffer_access_token: ''
 
+recaptcha_client_key: ''
+
 mailgun_api_key: ''
 mailchimp_api_key: ''
 mail_host: 'smtp.sparkpostmail.com'

diff --git a/spec/requests/registrations_spec.rb b/spec/requests/registrations_spec.rb
@@ -0,0 +1,66 @@
+require 'rails_helper'
+
+RSpec.describe "Registrations", type: :request do
+  include Devise::Test::IntegrationHelpers
+
+  let(:existing_user) { create(:user, password: 'password') }
+
+  describe "GET /users/sign_up" do
+    before do
+      visit new_user_registration_path
+
+      expect(page).to have_content('Register with your personal email')
+      expect(page).to have_content('Email')
+      expect(page).to have_content('Password')
+      expect(page).to have_content('Password confirmation')
+    end
+
+    describe "Successful" do
+      it "should register user successfully after filling the form" do
+        fill_in 'user_email', with: '[email protected]'
+        fill_in 'user_password',  with: 'password'
+        fill_in 'Password confirmation',  with: 'password'
+
+        click_on('Join us')
+
+        expect(page).to have_content("We are MENA Devs")
+      end
+    end
+
+    describe "Fails" do
+      it "should fail registration because email already exists" do
+        fill_in 'Email', with: existing_user.email
+        fill_in 'Password',  with: 'password'
+        fill_in 'Password confirmation',  with: 'password'
+
+        click_on('Join us')
+
+        expect(page).to have_content("1 error prohibited this user from being saved")
+        expect(page).to have_content("Email has already been taken")
+      end
+
+      it "should fail registration because passwords do not match" do
+        fill_in 'Email', with: '[email protected]'
+        fill_in 'Password',  with: 'password'
+        fill_in 'Password confirmation',  with: 'passwordz'
+
+        click_on('Join us')
+
+        expect(page).to have_content("1 error prohibited this user from being saved")
+        expect(page).to have_content("Password confirmation doesn't match Password")
+      end
+
+
+      it "should fail registration because email address is incorrect" do
+        fill_in 'Email', with: 'mars-example.com'
+        fill_in 'Password',  with: 'password'
+        fill_in 'Password confirmation',  with: 'password'
+
+        click_on('Join us')
+
+        expect(page).to have_content("1 error prohibited this user from being saved")
+        expect(page).to have_content("Email is invalid")
+      end
+    end
+  end
+end