Password confirmation not refreshed

I have this code:

Checkbox::make('password_change_checkbox')
    ->label('Change your password')
    ->visibleOn('edit')
    ->live(),

TextInput::make('password')
    ->dehydrated(fn(Get $get): bool => $get('password') != '')
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->validateOnly($component->getStatePath());
    })
    ->confirmed()
    ->required()
    ->label('Password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')),

TextInput::make('password_confirmation')
    ->dehydrated(false)
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->validateOnly($component->getStatePath());
    })
    ->required()
    ->label('Repeat password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

Checkbox::make('password_change_checkbox')
    ->label('Change your password')
    ->visibleOn('edit')
    ->live(),

TextInput::make('password')
    ->dehydrated(fn(Get $get): bool => $get('password') != '')
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->validateOnly($component->getStatePath());
    })
    ->confirmed()
    ->required()
    ->label('Password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')),

TextInput::make('password_confirmation')
    ->dehydrated(false)
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->validateOnly($component->getStatePath());
    })
    ->required()
    ->label('Repeat password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

The checkbox toggle works, I am putting it here just for context, in case it has something to do with my issue. The issue is that the realtime password validation doesn't work if I start with the password field and type ie. "mypassword" and tab or click in the password_confirmation field and type again "mypassword". I haven't put the ->password() on any of those fields, so I see those are identical. But the error message under the password field doesn't go away for some reason. I can Save the form and the newly typed password will be correctly saved despite the error message suggesting otherwise. Funnily it works when I start first with the password_confirmation field and shift+tab or click into the previous password field and then the message disappear. Any idea how to make the password confirmation error message disappear when doing real time validation?

5 Replies

Wirkhof•7mo ago

The weird thing is that when I start with the Confirmation field for password first and then continue to the password field it will check and the passwords are not identical message will dissappear. Do you guys have any idea why it's not working normally but only when I switch the order from "password_confirmation" to "password"? So, when I do this (switch the normally used order):

TextInput::make('password_confirmation')
   ...
TextInput::make('password')
   ...

TextInput::make('password_confirmation')
   ...
TextInput::make('password')
   ...

It works. But it still has a problem of when you then go back to the "password" field and change something and then you will try to make the same change in "password_confirmation" (so the passwords remain identical) - it will hang up again and the error message won't go away. So, to make it go away, I have to go back to the "password" field and let's say backspace one character and retype the same character and then the error message disappears.

maheralmatari•7mo ago

TRY THIS Checkbox::make('password_change_checkbox') ->label('Change your password') // ->visibleOn('edit') ->live(), TextInput::make('password') ->password() ->required() ->dehydrateStateUsing(fn ($state) => Hash::make($state)) ->same('password_confirmation') ->live(onBlur: true) ->afterStateUpdated(function ($livewire,TextInput $component) { $livewire->form->getState(); // $livewire->validateOnly($component->getStatePath()); }) // // ->visibleOn('edit') ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')), TextInput::make('password_confirmation') ->password() ->required() ->live(onBlur: true) ->afterStateUpdated(function ($livewire, $component) { $livewire->form->getState(); // $livewire->validateOnly($component->getStatePath()); }) ->required() // ->visibleOn('edit') ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

Wirkhof•7mo ago

Thank you maherlamatari, in both (password and password_confirmation fields) I have commented out: $livewire->validateOnly($component->getStatePath()); as you have suggested and replaced it with: $livewire->form->getState(); and it seems to be working. For now it seems that the password is being hashed correctly even without your
->dehydrateStateUsing(fn ($state) => Hash::make($state)) but if there will be a problem I will use it.

maheralmatari•7mo ago

your welcome make sure and try login after changing password

Wirkhof•7mo ago

Yes, Iwill test it now.

Gaming

Programming

Password confirmation not refreshed