Password Strength Meter With Regex

#1

I’ve trying to create a Password Strength Meter With Regex I made some tricks but it look like not working as I expected ?

I’m using this package inside livewire component : https://github.com/bjeavons/zxcvbn-php

App\Http\Livewire\ExampleForm

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use ZxcvbnPhp\Zxcvbn;

class ExampleForm extends Component
{
	public $name = '';
	public $email = '';
	public $password = '';
	public $passwordStrength = 0;
	
    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
	'password' => 'required',
    ];
	
	public function updated($propertyName)
	{
		$this->validateOnly($propertyName);
	}
	
	public function updatedPassword($password)
	{
		$zxcvbn = app(ZxcvbnPhp\Zxcvbn::class)->passwordStrength('password', $value);
		$this->passwordStrength = $zxcvbn['score'];
	}
	
    public function saveUser()
    {
        $validatedData = $this->validate();
		
		User::create($validatedData);
	}
	
    public function render()
    {
        return view('livewire.example-form');
    }
}

example-form

<form wire:submit.prevent="saveUser">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror
	
    <input type="password" wire:model="password">
    <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: {{ $passwordStrength }}%" aria- 
    valuenow="{{ $passwordStrength}}" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
  @error('password') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Submit</button>
</form>
#2

Hey, @devhoussam

Can you provide more information please?

And what’s the error exactly here?

#3

I want to create a Password Strength Meter With Regex using Livewire

I install this package https://github.com/bjeavons/zxcvbn-php by composer and I made some tricks in my livewire file.

Here is my Code :

livewire file :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use ZxcvbnPhp\Zxcvbn;

class MyForm extends Component
{
	public $email = '';
	public $password = '';
	public $passwordStrength = 0;
	
	protected $rules = [
		'email' => 'required|email',
		'password' => 'required|regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/',
	];
	
	public function updated($fields)
	{
		$this->validateOnly($fields);
	}
	
	public function updatedPassword($password)
	{
		$zxcvbn = app(ZxcvbnPhp\Zxcvbn::class)->passwordStrength('password', $password);
		$this->passwordStrength = $zxcvbn['score'];
	}
	
    public function saveUser()
    {
        $validatedData = $this->validate();
		
		User::create($validatedData);
		
    }
	
    public function render()
    {
        return view('livewire.my-form');
    }
}

.blade.php :

<div class="progress">
		<div class="progress-bar" role="progressbar" style="width: {{ $passwordStrength * 25 }}%" aria-valuenow="{{ $passwordStrength }}" aria-valuemin="0" aria-valuemax="4"></div>
</div>

The error that I get here is it display :

Target class [App\Http\Livewire\ZxcvbnPhp\Zxcvbn] does not exist.

#4

Try use below the component namespace use App\Http\Livewire\ZxcvbnPhp\Zxcvbn; and after

$zxcvbn = new Zxcvbn();
$this->passwordStrength = $zxcvbn->passwordStrength('password', $password);

or the treatment for the returned data you have to do

#5

This won’t work, as $value is not passed… try using $password instead, have a look here: https://laravel-livewire.com/docs/2.x/lifecycle-hooks