Replace password strength js with ujs

app/controllers/administrateurs/activate_controller.rb

@@ -32,8 +32,7 @@ class Administrateurs::ActivateController < ApplicationController
   end
 
   def test_password_strength
-    score = Zxcvbn.test(params[:password], [], ZXCVBN_DICTIONNARIES).score
-    render json: { score: score }
+    @score = Zxcvbn.test(params[:administrateur][:password], [], ZXCVBN_DICTIONNARIES).score
   end
 
   private

app/javascript/new_design/password-strength.js

@@ -1,34 +0,0 @@
-import $ from 'jquery';
-
-export function displayPasswordStrength(strengthBarId, score) {
-  var $bar = $('#' + strengthBarId),
-    passwordMessage;
-
-  $bar.removeClass('strength-1 strength-2 strength-3 strength-4');
-
-  if (score < 4) {
-    passwordMessage = 'Mot de passe pas assez complexe';
-  } else {
-    passwordMessage = 'Mot de passe suffisamment complexe';
-  }
-
-  $bar.text(passwordMessage);
-  $bar.addClass('strength-' + score);
-}
-
-export function checkPasswordStrength(event, strengthBarId) {
-  var $target = $(event.target),
-    password = $target.val();
-
-  if (password.length > 2) {
-    $.post(
-      '/admin/activate/test_password_strength',
-      { password: password },
-      function(data) {
-        displayPasswordStrength(strengthBarId, data.score);
-      }
-    );
-  } else {
-    displayPasswordStrength(strengthBarId, 0);
-  }
-}

app/javascript/packs/application.js

@@ -24,10 +24,6 @@ import { toggleCondidentielExplanation } from '../new_design/avis';
 import { togglePrintMenu } from '../new_design/dossier';
 import { toggleHeaderMenu } from '../new_design/header';
 import { scrollMessagerie } from '../new_design/messagerie';
-import {
-  checkPasswordStrength,
-  displayPasswordStrength
-} from '../new_design/password-strength';
 import { showMotivation, motivationCancel } from '../new_design/state-button';
 import { toggleChart } from '../new_design/toggle-chart';
 
@@ -37,8 +33,6 @@ const DS = {
   togglePrintMenu,
   toggleHeaderMenu,
   scrollMessagerie,
-  checkPasswordStrength,
-  displayPasswordStrength,
   showMotivation,
   motivationCancel,
   toggleChart

app/views/administrateurs/activate/_password_strength.html.haml

@@ -0,0 +1,5 @@
+#strength-bar.password-strength{ class: "strength-#{score}" }
+  - if score < 4
+    Mot de passe pas assez complexe
+  - else
+    Mot de passe suffisamment complexe

app/views/administrateurs/activate/new.html.haml

@@ -16,7 +16,7 @@
       = f.label :password do
         Mot de passe
 
-      = f.password_field :password, placeholder: 'Mot de passe', onKeyUp: "javascript:DS.checkPasswordStrength(event, 'strength-bar', 'submit-password');"
+      = f.password_field :password, placeholder: 'Mot de passe', data: { remote: true, url: admin_activate_test_password_strength_path }
 
       #strength-bar.password-strength
          

app/views/administrateurs/activate/test_password_strength.js.erb

@@ -0,0 +1 @@
+<%= render_to_element('#strength-bar', partial: 'password_strength', outer: true, locals: { score: @score }) %>

config/routes.rb

@@ -175,7 +175,7 @@ Rails.application.routes.draw do
   namespace :admin do
     get 'activate' => '/administrateurs/activate#new'
     patch 'activate' => '/administrateurs/activate#create'
-    post 'activate/test_password_strength' => '/administrateurs/activate#test_password_strength'
+    get 'activate/test_password_strength' => '/administrateurs/activate#test_password_strength'
     get 'sign_in' => '/administrateurs/sessions#new'
     get 'procedures/archived' => 'procedures#archived'
     get 'procedures/draft' => 'procedures#draft'