i have a project that have combination of: php(laravel) in backend AND front end of javascript+css+html.
my strategy:
MY PROBLEM:
but, because of livewire property inside input tag ,after of showing password digits, by typing more password digits, password numbers being convert to * again!
livewire property that used inside input tag: wire:model.debounce.700ms="password" .
I think, it is because of that: the livewire, reloads the input tag.
Anyone knows the solution?
the div, that contains input password and eye icon(for clicking by user for show password digits):
<div class="o-form__field-frame o-form__field-frame--password @error('password') has-error @enderror">
<input type="password" wire:model.debounce.700ms="password" id="password" value="{{$password}}" placeholder="PLEASE INSERT YOUR PASSWORD" class="o-form__field">
<i class='fa fa-eye hSh_eye_show_pass' onclick='showPass()'></i>
</div>
the function that handle that:
//for show pass:
function showPass(){
document.getElementById('password').type="text";
}
Since livewire changes the input stuff you could have a second input of type text hidden and if the user clicks the other input is shown instead:
// used for being able to apply the inputs values correctly..
// u can omit that this is only for making code snippet working..
let pwHidden = true
function togglePassVisibility() {
const passVisible = document.getElementById('password-visible')
const passHidden = document.getElementById('password-hidden')
// toggle the .hidden class on both..
passVisible.classList.toggle('hidden')
passHidden.classList.toggle('hidden')
// make this code snippet work since I cannot access {{$password}}
// you can omit this..
if(pwHidden) {
passVisible.value = passHidden.value
} else {
passHidden.value = passVisible.value
}
pwHidden = !pwHidden
}.hidden {
display: none;
}<!-- you need ofc to pass {{$password}} as value to make it work in your environment. -->
<input type="text" class="hidden" id="password-visible"></input>
<input type="password" id="password-hidden"></input>
<button onClick="togglePassVisibility()">toggle</button>