React native webview injectedJavascript auto fill webform - javascript

So here is what I wish to make it work, I am using a webview to load zara site, their login form email element you can inspect here https://www.zara.com/uk/en/logon <input id="email" name="email" type="text" value="" autocomplete="off"
and I wish when my app webview lands on zara login page, react native app can auto fill the login email and password field.
Below is my attampt:
import React from 'react';
import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
export default function ZaraWebView() {
return (
<WebView
source={{uri: 'https://www.zara.com/uk'}}
injectedJavaScript={`(function(){document.getElementById('email').value = 'test#test.com';}
());`}
style={{flex: 1, marginTop: 30}}
/>
);
}
But it does not seem working, any example suggestions?
Thanks

I had something similar, and when i removed the style from the Webview component it worked. I wrapped the Webview component in a View component, and applied the same style to that and it worked as expected.

Related

custom JavaScript(index.js) isn't working on my WordPress website

hi guys I'm building a WordPress website from scratch I'm trying to work on search bar but I found a problem when using JavaScript classes. i have a folder on my theme folder with name src (working with the folder build using node.js). in that folder i have another folder with name modules. i call the JavaScript files from modules using index.js (import example from ....). the custom JavaScript file is not working at all .i look at console no problem detected, i checked network the index.js is loading just fine but the JavaScript I'm writing is not working at all .
index.js :
import Search from "./modules/searchengine"
const search = new Search()
searchengine.js
import $ from "jquery"
class Search {
constructor(){
this.searchinput = $(".search-submit") ;
}
events(){
this.searchinput.on("click", this.typingLogic.bind(this));
}
typingLogic(){
console.log("test")
}
}
export default Search
function.php
function logistics_js_files()
{
wp_register_script('main_scripts', get_theme_file_uri('/build/index.js'));
wp_enqueue_script('main_scripts');
}
add_action('wp_enqueue_scripts', 'logistics_js_files');
HTML code :
<div class="widget widget_search">
<div class="search-form">
<label>
<input class="search-field" placeholder="Search …" type="search">
</label>
<input class="search-submit" value="Search" type="button">
</div>
</div>
i tried a lot nothing seems to work what do you think guys ?

Submit button reloads the page

I am working on a login form, and I am getting a strange behavior whereby whenever I click on the 'Login' button, the page simply reloads, without logging in my email and password through the 'submitHandler' function.
Below is a code of the form (I removed a lot of extra CSS formatting and div's).
Here is a screenshot of the form:
loginForm
import React from 'react'
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "../../../actions/userActions";
import { Form, Button, Row, Col } from "react-bootstrap";
function LoginForm ({history}) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const submitHandler = (e) => {
e.preventDefault();
console.log(email, password)
// dispatch(login(email, password));
};
return (
<form>
<button onSubmit={submitHandler} type="submit">
Login
</button>
</form>
)
}
export default LoginForm
Does anyone have idea why the page reloads after clicking on the login button?
Issue
The button is of type="submit" but the form has no onSubmit handler and is thus taking the default form action, i.e. submitting the form and reloading the page.
Solution
Move the onSubmit to the form element so the callback can prevent the default form action from occurring.
<form onSubmit={submitHandler}>
<button type="submit">
Login
</button>
</form>
You can also convert button type="" method provider submit to button, in some cases you don't really want to submit internal form so just keep in mind.
Here is the example,
<form>
<button onSubmit={submitHandler} type="button">
</form>
Other answer is also OK, but I would like to approach from a different angle.
Try calling the submitHandler with onSubmit on the form instead of on the button.

React: Firebase auth function calls by itself when the component renders

GOAL:
I am making a login by Google functionality in my website using Firebase Auth. I want When the user clicks the Signin link in the Navbar, he is redirected to the login page, in the login page, there is a dummy email/password input form and a Login with Google Button. When the user clicks on the Login with Google button he should be redirected to all the email list, so that he can choose from which he wants to login.
ERROR:
When the user clicks on the Signin Link in the Navbar the Login Route opens up and the function for the firebase auth is called by itself, without even clicking the Google Signin Button and the user is redirected to the emails list page.
Login.jsx:
import React from 'react'
import {Link} from "react-router-dom"
import './components/css/login.css'
import googleLogo from "./components/svg/google.svg"
import brandLogo from "./components/img/logo1.png"
//The JS for Login is in another file
import { googleSignin } from './firebase/googleLogin'
function login() {
return (
<div className="background-div" >
<nav className="login-nav" >
<img src={brandLogo} alt="logo"/>
<h2>the<strong>Dukaandar</strong></h2>
</nav>
<form action="" className="login-form">
<h3><strong>Login into your account</strong></h3>
<h5 className="login-email" >Email</h5>
<input type="text" className="login-email-input" placeholder="Enter your email" />
<h5 className="login-password">Password</h5>
<input type="password" className="login-password-input" placeholder="Enter your password" />
<br />
<button className="login-button">Login</button>
<Link className="login-forgot-password">forgot password?</Link>
<hr />
// The onClick attribute in React, I expect anything to happen only after clicking this button
<button className="google-login" onClick={googleSignin()} > <span className="google-image"><img src={googleLogo} alt=""/></span>Login with Google</button>
<Link to={"/"}>Back to Home</Link>
</form>
</div>
)
}
export default login
JS File:
import firebase from 'firebase'
const firebaseConfig = {
// Key value pairs of my config
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//This is the Function which has to be called on button click
function googleSignin() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase
.auth()
.signInWithRedirect(provider)
.then(function(result) {
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log(user);
console.log(result);
})
.catch(function(error) {
console.log(error);
});
}
export { googleSignin }
While searching for it I came to know about lifecycle methods which occurs when the component is rendered, if that is the case here, how to stop them to call itself?
As told in answer below and from my finding onClick{ () => googleSignin } also does not work, and also when I call the function with parenthesis googleSignin(), the function is atleast called but withot it nothing hapens.
I suspect there can be a React Router problem also, but I don't know.
Thank you in advance
Full Source Code of the Website on Github,
Live Preview on Netlify
By adding parenthesis on the onClick handler, you are invoking the function as soon as it is loaded. Remove the parenthesis and it will work.
<button className="google-login" onClick={googleSignin}>
<span className="google-image">
<img src={googleLogo} alt="" />
</span>
Login with Google
</button>
When the Browser sees the function is being called and not referenced on the OnClick method, it takes the responsibility and calls the function by itself. So, we have to free the Browser from its responsibility, and let the Function to be called only when the User clicks on the button.
Make a Handler function to free the Browser from its responsibility:
function handleClick(e) {
e.preventDefault();
googleSignin();
console.log('The link was clicked.');
}
Reference handleClick in your onClick method:
<button className="google-login"
//Reference handleClick here.
onClick={handleClick}>
<span className="google-image">
<img src={googleLogo} alt=""/>
</span>
Login with Google
</button>
This will solve the problem.

react-native-immediate-phone-call does't work

I am working on creating a dialer in React Native. For dialing a call I was using expo-linking but that only opened default phone dialer. After researching here I found about about react-native-immediate-phone-call and tried it but I get no results. I installed it via npm, ejected project from expo a ran the app on a virtual phone but after I press the dial button I get an alert (so I now the function is working), but no dialing begins whatsoever.
<Pressable onPress={this.pressButton}>
<FontAwesomeIcon icon={faPhone} color={colorName} size={35} />
</Pressable>
pressButton = () => {
this.setState({
callValue: (call = !call)
})
Alert.alert(number)
RNImmediatePhoneCall.immediatePhoneCall(number);
}
Could anyone please tell me why this is not working? Thank you.
check your phone permission for call :
In the AndroidManifest.xml file of your android studio project add:
<uses-permission android:name="android.permission.CALL_PHONE" />

Rendering a new class in react

I want a way to show a classes render method due to an onclick event.
I have a log in page, once the uses completes it and hits submit (aka logs in), I want a new view to render.
class LoginPage extends React.Component{
render() {
return (
<div id="container">
<button onClick={() => this.refs.myref.myfunc()}>Click</button>
<form onSubmit={this.handleClick}>
<p><input type="text" id="playerName" value={this.props.nameValue} onChange={this.handleNameChange} /></p>
<p><input type="email" id="playerEmail" value={this.props.emailValue} onChange={this.handleEmailChange}/></p>
<p><input type="submit" value="submit" /></p>
</form>
</div>
)
}
}
class HomePage extends React.Component{
//does things
render() {
return (
<div>
<h1 className="headings" id="heading"> Home Page </h1>
</div>
)
}
}
How can I render the Home Page title instead of the form. I used to have some code that would toggle it based on state but now I am trying to break it into components and only set state in one place.
The handleClick function was updating the state before but now it is doing nothing but I want it to in some way call the render method inside the homepage component or pass state/props around. what is the react way of doing this? can further clarify if things do not make sense

Categories

Resources