Added password meter based on zxcvbn

Maybe we will use a different package later, as this one is very big...

assets/controllers/elements/password_strength_estimate_controller.js

@@ -0,0 +1,89 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2023 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {Controller} from "@hotwired/stimulus";
+import zxcvbn from "zxcvbn";
+
+export default class extends Controller {
+
+    _passwordInput;
+
+    static targets = ["badge", "suggestion", "warning"]
+
+    connect() {
+        //Find the password input field
+        this._passwordInput = this.element.querySelector('input[type="password"]');
+
+        //Add event listener to the password input field
+        this._passwordInput.addEventListener('input', this._onPasswordInput.bind(this));
+
+    }
+
+    _onPasswordInput() {
+        //Retrieve the password
+        const password = this._passwordInput.value;
+
+        //Estimate the password strength
+        const result = zxcvbn(password);
+
+        //Update the badge
+        this.badgeTarget.parentElement.classList.remove("d-none");
+        this._setBadgeToLevel(result.score);
+
+        this.warningTarget.innerHTML = result.feedback.warning;
+    }
+
+    _setBadgeToLevel(level) {
+        let text, classes;
+
+        switch (level) {
+            case 0:
+                text = "Very weak";
+                classes = "bg-danger badge-danger";
+                break;
+            case 1:
+                text = "Weak";
+                classes = "bg-warning badge-warning";
+                break;
+            case 2:
+                text = "Medium";
+                classes = "bg-info badge-info";
+                break;
+            case 3:
+                text = "Strong";
+                classes = "bg-primary badge-primary";
+                break;
+            case 4:
+                text = "Very strong";
+                classes = "bg-success badge-success";
+                break;
+            default:
+                text = "Unknown";
+                classes = "bg-secondary badge-secondary";
+        }
+
+        this.badgeTarget.innerHTML = text;
+        //Remove all classes
+        this.badgeTarget.className = '';
+        //Re-add the classes
+        this.badgeTarget.classList.add("badge");
+        this.badgeTarget.classList.add(...classes.split(" "));
+    }
+}

package.json

@@ -86,6 +86,7 @@
         "stimulus-use": "^0.52.0",
         "tom-select": "^2.1.0",
         "ts-loader": "^9.2.6",
-        "typescript": "^4.0.2"
+        "typescript": "^4.0.2",
+        "zxcvbn": "^4.4.2"
     }
 }

src/Controller/UserSettingsController.php

@@ -285,6 +285,7 @@ class UserSettingsController extends AbstractController
                 'type' => PasswordType::class,
                 'first_options' => [
                     'label' => 'user.settings.pw_new.label',
+                    'password_estimator' => true,
                 ],
                 'second_options' => [
                     'label' => 'user.settings.pw_confirm.label',

src/Form/PasswordTypeExtension.php

@@ -0,0 +1,54 @@
+<?php
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2023 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+namespace App\Form;
+
+use Symfony\Component\Form\AbstractTypeExtension;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * Purpose of this class is to add the setting 'password_estimator' to the PasswordType.
+ */
+class PasswordTypeExtension extends AbstractTypeExtension
+{
+
+    public static function getExtendedTypes(): iterable
+    {
+        return [PasswordType::class];
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'password_estimator' => false,
+        ]);
+
+        $resolver->setAllowedTypes('password_estimator', 'bool');
+    }
+
+    public function finishView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['password_estimator'] = $options['password_estimator'];
+    }
+
+}

src/Form/UserAdminForm.php

@@ -167,6 +167,7 @@ class UserAdminForm extends AbstractType
                 'type' => PasswordType::class,
                 'first_options' => [
                     'label' => 'user.settings.pw_new.label',
+                    'password_estimator' => true,
                 ],
                 'second_options' => [
                     'label' => 'user.settings.pw_confirm.label',

templates/form/extended_bootstrap_layout.html.twig

@@ -122,4 +122,22 @@
 
 {% block part_select_widget %}
     {{ form_widget(form.autocomplete) }}
+{% endblock %}
+
+{% block password_widget %}
+    {# If password_estimator setting is not set render it like normal #}
+    {% if password_estimator %}
+        <div {{ stimulus_controller('elements/password_strength_estimate') }}>
+            <div class="input-group">
+                <span class="input-group-text d-none">
+                    <span class="badge badge-primary" {{ stimulus_target('elements/password_strength_estimate', 'badge') }}></span>
+                </span>
+                {{- parent() -}}
+            </div>
+
+            <span class="form-text text-warning" {{ stimulus_target('elements/password_strength_estimate', 'warning') }}></span>
+        </div>
+    {% else %}
+        {{- parent() -}}
+    {% endif %}
 {% endblock %}

yarn.lock

@@ -6926,3 +6926,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zxcvbn@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
+  integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==