Merge pull request #4598 from Keirua/4575-suggestion-email-valide

#4575 Suggestion d'un email valide lors de la création de compte

app/assets/stylesheets/new_design/user_signup.scss

@@ -0,0 +1,24 @@
+@import "colors";
+@import "constants";
+
+.suspect-email {
+  background-color: $orange-bg;
+  text-align: center;
+  margin-top: -$default-padding * 2;
+  margin-bottom: $default-padding * 2;
+  padding: ($default-padding - 2) $default-padding $default-padding $default-padding;
+  border-radius: 0 0 5px 5px;
+}
+
+.email-suggestion-address {
+  font-weight: bold;
+}
+
+.email-suggestion-title {
+  margin-bottom: $default-spacer;
+}
+
+.email-suggestion-answer button {
+  margin: 0 $default-spacer / 2;
+  min-width: 66px;
+}

app/javascript/new_design/user-sign_up.js

@@ -0,0 +1,35 @@
+import { delegate, show, hide } from '@utils';
+import { suggest } from 'email-butler';
+
+const userNewEmailSelector = '#new_user input#user_email';
+const passwordFieldSelector = '#new_user input#user_password';
+const suggestionsSelector = '.suspect-email';
+const emailSuggestionSelector = '.suspect-email .email-suggestion-address';
+
+delegate('focusout', userNewEmailSelector, () => {
+  // When the user leaves the email input during account creation, we check if this account looks correct.
+  // If not (e.g if its "bidou@gmail.coo" or "john@yahoo.rf"), we attempt to suggest a fix for the invalid email.
+  const userEmailInput = document.querySelector(userNewEmailSelector);
+  const suggestedEmailSpan = document.querySelector(emailSuggestionSelector);
+
+  const suggestion = suggest(userEmailInput.value);
+  if (suggestion && suggestion.full) {
+    suggestedEmailSpan.innerHTML = suggestion.full;
+    show(document.querySelector(suggestionsSelector));
+  } else {
+    hide(document.querySelector(suggestionsSelector));
+  }
+});
+
+export function acceptEmailSuggestion() {
+  const userEmailInput = document.querySelector(userNewEmailSelector);
+  const suggestedEmailSpan = document.querySelector(emailSuggestionSelector);
+
+  userEmailInput.value = suggestedEmailSpan.innerHTML;
+  hide(document.querySelector(suggestionsSelector));
+  document.querySelector(passwordFieldSelector).focus();
+}
+
+export function discardEmailSuggestionBox() {
+  hide(document.querySelector(suggestionsSelector));
+}

app/javascript/packs/application.js

@@ -40,6 +40,10 @@ import {
 } from '../new_design/state-button';
 import { toggleChart } from '../new_design/toggle-chart';
 import { replaceSemicolonByComma } from '../new_design/avis';
+import {
+  acceptEmailSuggestion,
+  discardEmailSuggestionBox
+} from '../new_design/user-sign_up';
 
 // This is the global application namespace where we expose helpers used from rails views
 const DS = {
@@ -50,7 +54,9 @@ const DS = {
   motivationCancel,
   showImportJustificatif,
   toggleChart,
-  replaceSemicolonByComma
+  replaceSemicolonByComma,
+  acceptEmailSuggestion,
+  discardEmailSuggestionBox
 };
 
 // Start Rails helpers

app/views/users/registrations/new.html.haml

@@ -8,6 +8,17 @@
     = f.label :email, "Email"
     = f.text_field :email, autofocus: true, placeholder: "Votre adresse email"
 
+    .suspect-email
+      .email-suggestion-title
+        Voulez-vous dire
+        %span.email-suggestion-address blabla@gmail.com
+         ?
+      .email-suggestion-answer
+        = button_tag type: 'button', class: 'button small', onclick: "DS.acceptEmailSuggestion()" do
+          Oui
+        = button_tag type: 'button', class: 'button small', onclick: "DS.discardEmailSuggestionBox()" do
+          Non
+
     = f.label :password, "Mot de passe"
     = f.password_field :password, value: @user.password, placeholder: "8 caractères minimum"
 

package.json

@@ -17,6 +17,7 @@
     "core-js": "^2.0.0",
     "debounce": "^1.2.0",
     "dom4": "^2.1.5",
+    "email-butler": "^1.0.12",
     "highcharts": "^6.1.2",
     "intersection-observer": "^0.7.0",
     "jquery": "^3.4.1",

spec/features/users/sign_up_spec.rb

@@ -17,6 +17,39 @@ feature 'Signing up:' do
     expect(page).to have_current_path commencer_path(path: procedure.path)
   end
 
+  context 'when the user makes a typo in their email address' do
+    let(:procedure) { create :simple_procedure, :with_service }
+
+    before do
+      visit commencer_path(path: procedure.path)
+      click_on 'Créer un compte demarches-simplifiees.fr'
+      expect(page).to have_selector('.suspect-email', visible: false)
+      fill_in 'Email', with: 'bidou@yahoo.rf'
+      fill_in 'Mot de passe', with: '12345'
+    end
+
+    scenario 'they can accept the suggestion', js: true do
+      expect(page).to have_selector('.suspect-email', visible: true)
+      click_on 'Oui'
+      expect(page).to have_field("Email", :with => 'bidou@yahoo.fr')
+      expect(page).to have_selector('.suspect-email', visible: false)
+    end
+
+    scenario 'they can discard the suggestion', js: true do
+      expect(page).to have_selector('.suspect-email', visible: true)
+      click_on 'Non'
+      expect(page).to have_field("Email", :with => 'bidou@yahoo.rf')
+      expect(page).to have_selector('.suspect-email', visible: false)
+    end
+
+    scenario 'they can fix the typo themselves', js: true do
+      expect(page).to have_selector('.suspect-email', visible: true)
+      fill_in 'Email', with: 'bidou@yahoo.fr'
+      blur
+      expect(page).to have_selector('.suspect-email', visible: false)
+    end
+  end
+
   scenario 'a new user can’t sign-up with too short password when visiting a procedure' do
     visit commencer_path(path: procedure.path)
     click_on 'Créer un compte demarches-simplifiees.fr'

yarn.lock

@@ -3110,6 +3110,11 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-butler@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/email-butler/-/email-butler-1.0.12.tgz#f504b45658fea6257dbc0f891be2cf822d29caa6"
+  integrity sha512-JcvRCjCpLp3fIHlP+KgdDadSmhETA/D4KUtIi3VnwEw2bJKilMOcd+xLJUHrD631bToxxxYRnxB3xTvAQeIRCQ==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"