Password Details Password Input

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The password input widget is a wrapper for the JQuery Strength meter plugin by Krajee. The plugin converts a password input into a widget with an advanced strength validation meter and toggle mask to show/hide the password. The widget displays a dynamic strength validation meter, which calculates the strength of the password as you type. You can configure the following options for the widget. This is an advanced password input widget with configurable options and a dynamic strength meter. The widget provides various features as mentioned below:
  1. Allows you to show/ hide the password text (using bootstrap styled input addons). You can configure this option to be shown or not.
  2. Allows you to display an advanced password strength meter to calculate and show your password strength as you type.
  3. Allows you to control and position/style your meter based on templates.
  4. A password strength meter consists of the meter bar, the score, and the verdict.
  5. Uses Bootstrap 3.0 styling wherever possible with inbuilt Yii 2.0 ActiveField functionality.
  6. Works independent and complements the StrengthValidator.
The important options to pass to this widget are:
  • model Model the model object to be passed

  • attribute string the model attribute to be validated (e.g. password)

View a complete demo.

The password input widget is a wrapper for the JQuery Strength meter plugin by Krajee. The plugin converts a password input into a widget with an advanced strength validation meter and toggle mask to show/hide the password. The widget displays a dynamic strength validation meter, which calculates the strength of the password as you type. You can configure the following options for the widget:
  • language string the two digit language code for displaying the widget in your language.

  • size string the size of the password input widget. Should be one of lg (for large size) and sm (for small size). md (medium/normal size)

  • togglePlacement string the positioning of the toggle mask class with respect to the input. Should be one of left or right. Defaults to right.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the plugin settings/options for the Strength Meter Plugin. There are a quite a few options you can set in this plugin. Refer the plugin documentation and demos for details.

  • pluginEvents: array the Strength Meter JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation and demos for details. For example:

    pluginEvents = [
        "strength.change" => "function() { log("strength.change"); }",
        "strength.toggle" => "function() { log("strength.toggle"); }",
        "strength.reset" => "function() { log("strength.reset"); }",
    ];
    
NOTE: This strength meter complements the StrengthValidator but has a separate validation routine. Hence, it and can be used individually or in conjunction with the StrengthValidator.

View a complete demo.

Usage with ActiveForm and model

With a model and without ActiveForm

Usage without a model

A readonly password input with an initial value

A disabled password input

use kartik\widgets\PasswordInput

// Usage with ActiveForm and model
echo $form->field($model, 'password')->widget(PasswordInput::classname(), []);

// With a model and without ActiveForm
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget(['model' => $model, 'attribute' => 'password_1']);

// Usage without a model
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget(['name' => 'password_2']);

// A readonly password input
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_3',
    'options' => [
        'readonly' => true
    ],
]);

// A disabled password input
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_4',
    'options' => [
        'disabled' => true
    ],
]);

View a complete demo.

Control size of the input and placement of the toggle mask

Show/Hide meter and toggle mask.

Alter strength verdict titles and CSS classes.

use kartik\widgets\PasswordInput

// Control size of the input and placement of the toggle mask
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_20',
    'size' => 'lg',
    'togglePlacement' => 'left'
]);

// Show/Hide meter and toggle mask.
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_21',
    'pluginOptions' => [
        'showMeter' => false,
        'toggleMask' => true
    ]
]);

// Alter strength verdict titles and CSS classes.
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_22',
    'pluginOptions' => [
        'verdictTitles' => [
            0 => 'Not Set',
            1 => 'Very Poor',
            2 => 'Poor',
            3 => 'Fair', 
            4 => 'Good',
            5 => 'Excellent'
        ],
        'verdictClasses' => [
            0 => 'text-muted',
            1 => 'text-danger',
            2 => 'text-warning',
            3 => 'text-info', 
            4 => 'text-primary',
            5 => 'text-success'
        ],
    ]
]);