Fix password strength indicator not working during install

forkcms · Nov 27, 2023 · 59236eb · 59236eb
1 parent 55be30e
commit 59236eb
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/src/Core/assets/js/Components/PasswordStrenghtMeter.js b/src/Core/assets/js/Components/PasswordStrenghtMeter.js
@@ -1,4 +1,4 @@
-const passwordStrength = require('check-password-strength')
+const { passwordStrength } = require('check-password-strength')
 
 export class PasswordStrenghtMeter {
   constructor (element) {

diff --git a/src/Modules/Installer/Domain/Authentication/InstallerPasswordType.php b/src/Modules/Installer/Domain/Authentication/InstallerPasswordType.php
@@ -2,8 +2,8 @@
 
 namespace ForkCMS\Modules\Installer\Domain\Authentication;
 
+use ForkCMS\Core\Domain\Form\TogglePasswordType;
 use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\PasswordType;
 use Symfony\Component\Form\FormInterface;
 use Symfony\Component\Form\FormView;
 use Symfony\Component\OptionsResolver\OptionsResolver;
@@ -28,6 +28,6 @@ public function configureOptions(OptionsResolver $resolver): void
 
     public function getParent(): string
     {
-        return PasswordType::class;
+        return TogglePasswordType::class;
     }
 }
diff --git a/src/Modules/Installer/assets/Installer/webpack/js/Installer.js b/src/Modules/Installer/assets/Installer/webpack/js/Installer.js
@@ -3,6 +3,7 @@ import { Controls } from '../../../../../../Core/assets/js/Components/Controls'
 import { Forms } from './Components/Forms'
 import { Layout } from './Components/Layout'
 import { PasswordStrenghtMeter } from '../../../../../../Core/assets/js/Components/PasswordStrenghtMeter'
+import { TogglePasswordInputType } from '../../../../../../Core/assets/js/Components/TogglePasswordInputType'
 
 export class Installer {
   initInstaller () {
@@ -12,13 +13,20 @@ export class Installer {
     this.layout = new Layout()
 
     Installer.initPasswordStrenghtMeters()
+    Installer.initTogglePasswordInputType()
   }
 
   static initPasswordStrenghtMeters () {
     $('[data-role="password-strength-meter"]').each((index, element) => {
       element.passwordStrengthMeter = new PasswordStrenghtMeter($(element))
     })
   }
+
+  static initTogglePasswordInputType () {
+    document.querySelectorAll('[data-role="toggle-password-visibility"]').forEach((element) => {
+      element.togglePassword = new TogglePasswordInputType(element)
+    })
+  }
 }
 
 $(window).on('load', () => {

diff --git a/src/Modules/Installer/templates/form_theme.html.twig b/src/Modules/Installer/templates/form_theme.html.twig
@@ -200,3 +200,12 @@
     </div>
   </div>
 {%- endblock collection_row -%}
+
+{% block toggle_password_widget %}
+  <div class="input-group mb-3" data-role="toggle-password-visibility">
+    {{ form_widget(form) }}
+    <button class="btn btn-default" type="button">
+      <i class="fas fa-eye-slash ms-2"></i>
+    </button>
+  </div>
+{% endblock %}
diff --git a/src/Modules/Installer/templates/step5.html.twig b/src/Modules/Installer/templates/step5.html.twig
@@ -33,6 +33,7 @@
             <div class="mb-2">
               <span class="passwordStrength ms-auto" data-id="install_authentication_password_first" data-role="password-strength-meter">
                 <span class="badge bg-middle badge-sm" data-role="password-strength" data-strength="none">None</span>
+                <span class="badge bg-middle badge-sm" data-role="password-strength" data-strength="too weak">Too weak</span>
                 <span class="badge bg-danger badge-sm" data-role="password-strength" data-strength="weak">Weak</span>
                 <span class="badge bg-warning badge-sm" data-role="password-strength" data-strength="average">Average</span>
                 <span class="badge bg-success badge-sm" data-role="password-strength" data-strength="strong">Strong</span>