app: add a password_complexity component

This component will replace the previous `password_field` component.

app/views/password_complexity/_bar.html.haml

@@ -0,0 +1 @@
+#complexity-bar.password-complexity{ class: "complexity-#{@length < @min_length ? @score/2 : @score}" }

app/views/password_complexity/_field.html.haml

@@ -0,0 +1,9 @@
+= form.password_field :password, autofocus: true, autocomplete: 'off', placeholder: 'Mot de passe', data: { remote: test_complexity, url: show_password_complexity_path }
+
+- if test_complexity
+  #complexity-bar.password-complexity
+
+  .explication
+    #complexity-label{ style: 'font-weight: bold' }
+      Inscrivez un mot de passe.
+    Une courte phrase avec ponctuation peut être un mot de passe très sécurisé.

app/views/password_complexity/_label.html.haml

@@ -0,0 +1,16 @@
+#complexity-label{ style: 'font-weight: bold' }
+  - if @length > 0
+    - if @length < @min_length
+      Le mot de passe doit faire au moins #{@min_length} caractères.
+    - else
+      - case @score
+        - when 0..1
+          Mot de passe très vulnérable.
+        - when 2...@min_complexity
+          Mot de passe vulnérable.
+        - when @min_complexity...4
+          Mot de passe acceptable. Vous pouvez valider...<br> ou améliorer votre mot de passe.
+        - else
+          Félicitations ! Mot de passe suffisamment fort et sécurisé.
+  - else
+    Inscrivez un mot de passe.

app/views/password_complexity/show.js.erb

@@ -0,0 +1,3 @@
+<%= render_to_element('#complexity-label', partial: 'label', outer: true) %>
+<%= render_to_element('#complexity-bar', partial: 'bar', outer: true) %>
+<%= raw("document.querySelector('#submit-password').disabled = #{@score < @min_complexity || @length < @min_length};") %>