cleaning DOM of JS, because of livewire - javascript

i have a project that have combination of: php(laravel) in backend AND front end of javascript+css+html.
my strategy:
I have an input for inserting password(input type: password).
I have an icon for show, password digits, when user click on that icon.
handle that process, by "onclick" event inside "icon" element:
when user clicks on "eye icon", javascript changes the property of input tag, the type="password" to type="text",(user can see her/his inserted password digits ).
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>

Related

HTML Form don't let me fill it with javascript

I'm new to javascript and I need to fill in this form and then click the button to login. Hope someone could guide me into the right direction of why it's not working.
On practically any other site I've tested, it works fine (basically just switching out the "Id's") - but not on this particular site.
The site is not available for public so I can't provide the URL for it.
The problem is if I manually fill username and password and then from the web console use the .click event below, the login works fine.
When I use the .value event to fill username and password, I can see both fields gets filled but when .click event happens, it triggers the login and it seems to work but after a few seconds, it just says invalid username and password, like if I typed the wrong username and password.
Since I can't see the password in clear text from the form, I don't know if it's right or not but if I use the console from the web browser, I can see both username and password returns the correct values.
I'm using the following code:
function doStuff(){
document.getElementById('loginUsername').value = "username#email.com";
document.getElementById('password').value = "password123"
document.getElementsByClassName('button ok')[0].click();
}
doStuff();
<form data-v-d9a0abfc="" data-v-48366e1e="" role="form" class="form loginForm">
<h2 data-v-d9a0abfc="" role="region" class="visuallyhidden">Login form</h2>
<label data-v-d9a0abfc="" for="loginUsername" class="loginLabel">Username</label>
<input data-v-d9a0abfc="" spellcheck="false" type="text" id="loginUsername" name="loginUsername" autofocus="autofocus" class="form-control loginField">
<label data-v-d9a0abfc="" for="password" class="loginLabel">Password</label>
<input data-v-d9a0abfc="" type="password" id="password" name="password" autofocus="autofocus" class="form-control loginField">
<div data-v-d9a0abfc="" class="">
<div data-v-304a83cb="" data-v-d9a0abfc="" role="alert" aria-relevant="additions removals" style="display: none;">
</div>
<div data-v-7224d6b7="" data-v-d9a0abfc="" class="ace-button" id="accept-button">
<button data-v-7224d6b7="" aria-describedby="11" tabindex="0" type="button" class="button ok">
Login
</button>
</div>
</div>
</form>
It's possible that the website stores the input value in memory by listening to the input onchange callback. Then when clicking on the submit button, it sends the in memory value instead of the one you set programatically. This is not triggered when you programatically update the input value.
What you could try is to programatically trigger the change Event like this:
function doStuff(){
var usernameInput = document.getElementById('loginUsername');
usernameInput.value = "username#email.com";
usernameInput.dispatchEvent(new Event("change"));
var passwordInput = document.getElementById('password');
passwordInput.value = "password123";
passwordInput.dispatchEvent(new Event("change"));
document.getElementsByClassName('button ok')[0].click();
}
As a comment pointed out already, i suspect a Framework is handling the Frontend. It could also be, that there is just an onChange Event or an onInput Event tracking the Value and already working some validation or something in the background.
I've put together an example why your code would fail.
If there is an EventListener inplace, to track the Inputs and handling the values somewhere else, you could emit the Event yourself after setting the value. This should do the trick, if there is a separate handling inplace.
let username = undefined;
let password = undefined;
document.addEventListener("DOMContentLoaded", function() {
// Code to update a variable in the background.
document.getElementById('textInput').addEventListener('change', updateUsername);
document.getElementById('passInput').addEventListener('change', updatePassword);
document.getElementById('btnSubmit').addEventListener('click', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
const text = document.getElementById('textInput').value;
const pass = document.getElementById('passInput').value;
console.log(text,"|", pass);
console.log(username,"|", password);
});
// Your code, to manipulate the Inputfields.
const textInputEl = document.getElementById('textInput');
textInputEl.value = "Test value ...";
// This line triggers the change event, it could also be the 'input' event, depending which // events gets listened to. With this, if there is an event in the background listened to, to
// track the Value, it should update the variable accordingly.
// textInputEl.dispatchEvent(new Event('change'));
const passInputEl = document.getElementById('passInput');
passInputEl.value = "Test value ...";
// Same line as above
// passInputEl.dispatchEvent(new Event('change'));
});
function updateUsername(event){
username = event.target.value;
}
function updatePassword(event) {
password = event.target.value;
}
<div class="container">
<input type="text" id="textInput" />
<input type="password" id="passInput" />
<button type="submit" id="btnSubmit">Submit</button>
</div>

How to validate confirm password with password and show error message at every character?

This my code pen link https://codepen.io/santoshch/pen/bGgKNWV
<label class="form__group is-required">
<span class="form__label">Password</span>
<input
class="form__input" type="password" name="form-password"
v-model="password" #input="$v.password.$touch"
>
<p v-if="$v.password.$dirty">
<span class="form__alert" v-if="!$v.password.required">Required.</span>
<span class="form__alert" v-if="!$v.password.minLength">
{{$v.password.$params.minLength.min}} letters at least.
</span>
</p>
</label>
<!-- Repeat Password -->
<label class="form__group is-required">
<span class="form__label">Repeat<br>password</span>
<input
class="form__input" type="password" name="form-repeat-password"
v-model="repeatPassword" #input="$v.repeatPassword.$touch"
>
<p v-if="$v.repeatPassword.$dirty">
<span class="form__alert" v-if="!$v.repeatPassword.required">Required.</span>
<span class="form__alert" v-if="!$v.repeatPassword.sameAsPassword">
Must be identical.
</span>
</p>
</label>
Got reference for Vuetify,
How to validate password field with every character in Vuejs?
export default {
data() {
return {
confirmPasswordRules: [
(value) => !!value || 'type confirm password',
(value) =>
value === this.password ||
'The password confirmation does not match.',
],
}
:rules="confirmPasswordRules"
Ya code is working fine which provided in codepen. but one more functionality need to add for confirmPassword filed. i.e, in confirmpassword field, I need to check each and every character with password field, and then i need to display at which character we have entered wrong.
First remove the :rules from your HTML, and just use vuelidate. Remove the property confirmPasswordRules from your data object. As they are not doing anything, and are just wasting space.
<span class="form__label">
Repeat<br />
password
</span>
Now when comparing your two passwords, if you want to check character by character, you will want to get a substring of your existing password string. For example let's say the password is test1234, if the user has begun typing tes in your repeat password field you take the substring of the password to match the same length so you are not comparing "test1234" == "tes", instead by taking the substring you would be comparing "tes"=="tes". We do this by calling .substring(start, end). Our start will always be 0, and our end will be the current length of repeatPassword so we will get our string from the beginning to the point that the user has typed their repeated password.
To do this with Vuelidate we will need to create a custom function that returns a boolean value. So we create the inline function:
(value) => value === this.password.substring(0, value.length+1)
However, because of how vuelidate works this will be inaccessible. So we need to pass one more parameter to our function containing the Vue instance. We can do this by changing our function to expect two variables, one containing the object's current value, and the other containing the Vue instance. Then we will replace this with our variable with the Vue instance.
(value,vm) => value === vm.password.substring(0, value.length+1)
We will place this function inside of your validations code, under repeatPassword. This would then make our repeatPassword object look like so:
repeatPassword: {
required: required,
sameAsPassword: (value, vm) =>
value === vm.password.substring(0, value.length+1),
},
Here is a full codesandbox

I try to pass the content of a paragraph element into a field of a contact form using Javascript

So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.

Input password to show a div?

I'm making a website for fun, and there's a little easter egg I want to put in it where you input a password to see a hidden page on the site.
I know how to make a login form with html and I get the "input" tag for putting in the password, but I'm not sure what the "output" should be..? I also want it to display a div or span only when the correct text is entered.
It would be cool if I could have both a username and password be required to match, but I don't know how that'd work at all.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
Well, you need javascript for this and just an easy onclicklistener.
For example:
<button onclick="checkHidden()">Login</button>
<script>
function checkHidden()
{
if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
{
window.location.href = "andereSeite.html";
}
}
</script>
But obviously everyone can see the username & password.
They just need to let them show the source.
If you wanna use this secretly you need to use PHP :)
There are many tutorials out there for form + PHP.
Well, here is a simple example. Use onkeyup="" attribute to run the javascript function check_password(this) (this refers to the input-tag) after every entered character. If the password is right the div will appear with display: block/none;.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>

How to set text box to appear blank after .click function

So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>

Categories