I've created a login form with a submit button:
<ion-button type="submit" expand="full" color="primary">Log In</ion-button>
So, I want to change this button text during form loading.
onSubmit(f: NgForm) {
///// HERE CHANGE BUTTON TEXTO TO "PLEASE WAIT"
this.authService.login(f.value.usuario, f.value.senha).subscribe(
data => {
this.authService.loadInitialData().then(value => {
this.router.navigateByUrl('/tabs');
});
},
error => {
console.log('auth error');
this.auth_error = true;
},
() => {
///// HERE CHANGE BUTTON TEXTO BACK TO "LOG IN"
}
);
}
How can I do this?
You can use interpolation
Change...
<ion-button type="submit" expand="full" color="primary">{{text}}</ion-button>
Now define property inside your class
export class HomePage {
...
public text= "Log In";
...
}
Now you can change through interpolation, so your code will be:
onSubmit(f: NgForm) {
this.text= "Please Wait";
this.authService.login(f.value.usuario, f.value.senha).subscribe(
data => {
this.authService.loadInitialData().then(value => {
this.router.navigateByUrl('/tabs');
});
},
error => {
console.log('auth error');
this.auth_error = true;
},
() => {
this.text= "Login In";
}
);
}
app.module.ts
imports: [
...
IonicModule.forRoot({
backButtonText: 'your text here',
}),
...
],
Related
I was following the example shown at:
Ionic React: Implementing InAppPurchase 2 on React Hooks
I kept getting errors saying that:
"
InAppPurchase[objc]: Product (signatureyearly) does not exist or is not sucessfully initialized.
"
I have tried "com.myappname.app.signatureyearly" as well but I get similar errors.
I have double confirmed that my app bundle id is "com.myappname.app" and my IAP product ID is "signatureyearly" it is a renewal subscription and it is "Ready to submit".
Really need help with this, has been trying to figure this out for many days.
This is what I have written so far.
Thank you so much !!!!
import React, { useState, useEffect } from 'react';
import { InAppPurchase2 as iap, IAPProduct } from "#ionic-native/in-app-purchase-2";
export const TestStore: React.FC = () => {
//declare variables
const [productPrice, setPrice] = useState('')
const [product, setProduct] = useState([]) as any
//initiate initInAppPurchase function
useEffect(() => {
const init = async () => {
await initInAppPurchase();
}
init();
}, []);
const initInAppPurchase = () => {
iap.verbosity = iap.DEBUG;
iap.register({
id: "signatureyearly",
type: iap.PAID_SUBSCRIPTION
});
iap.ready(() => {
let product = iap.get('signatureyearly');
setPrice(product.price)
setProduct(product)
})
iap.refresh();
}
//if user clicks purchase button
const purchaseProduct = () => {
if (product.owned) {
alert('Product already owned, click restore button instead!')
} else {
iap.order('signatureyearly').then(() => {
iap.when("signatureyearly").approved((p: IAPProduct) => {
//store product
p.verify();
p.finish();
});
})
iap.refresh();
}
}
//if user clicks retore or promo code button
const restore = () => {
iap.when("signatureyearly").owned((p: IAPProduct) => {
if (product.owned) {
//store product
} else {
alert("You have not purchased this product before.")
}
});
iap.refresh();
}
return (
<div>
<button onClick={purchaseProduct}>TEST 4 :Buy for {productPrice}</button>
<button onClick={restore}>Restore</button>
<button onClick={restore}>Promo code</button>
</div>
);
};
Hi so I have a view where I have a button , When it's clicked I want a value to be saved in the db . What I get now is nothing like I click on button but nothing happens .
Here's the code I have :
<a-button type="primary" class="mb-4 text-center mr-1 float-right" #click="onSubmit">Confirm</a-button>
in my script I have:
setup(){
const onSubmit = () => {
axios.post("/insertstatut/"+876,"added").then((res)=>{
message.success(`statut ajouté`)
router.push({
path:'/cand',
}).catch(error => {
console.log('error', error);
})
} ,
)
}
}
Please if u have any idea what I should do , do share thank you.
you are using composition api feature setup in your vue code,
you need to return the methods or properties u wish to use in in your template.
setup () {
return {
onSubmit: () => {}, //some method u want to use later in template ,
show: false, // or some property
}
}
this is how your component should look
<template>
<a-button
type="primary"
class="mb-4
text-center
mr-1float-right"
#click="onSubmit"
>
Confirm
</a-button>
</template>
<script>
import AButton from './button-path/AButton.vue'
import axios from 'axios'
export default {
componets: { AButton },
setup() {
const onSubmit = () => {
axios.post('/insertstatut/' + 876, 'added').then((res) => {
message.success(`statut ajouté`)
router
.push({
path: '/cand',
})
.catch((error) => {
console.log('error', error)
})
})
}
// Expose your constants/methods/functions
return {
onSubmit,
}
},
}
</script>
I've created a small keypad app in react and I'm trying to test the input event on the app and for some reason I am not getting the expected result. I'm trying to test it to failure and success. The test I'm running is this below, I want to input 1995 (the correct combination), click the unlock button and ultimately have a message return Unlocked! but it only returns Incorrect Code! which should only happen if the code is incorrect or the input field is empty. But it shouldn't be empty as I have filled it out in the test..
here is a codesandbox: https://codesandbox.io/s/quirky-cloud-gywu6?file=/src/App.test.js:0-26
Any ideas?
test:
const setup = () => {
const utils = render(<App />);
const input = utils.getByLabelText("input-code");
return {
input,
...utils
};
};
test("It should return a successful try", async () => {
const { input, getByTestId } = setup();
await act(async () => {
fireEvent.change(input, { target: { value: "1995" } });
});
expect(input.value).toBe("1995");
await act(async () => {
fireEvent.click(getByTestId("unlockbutton"));
});
expect(getByTestId("status")).toHaveTextContent("Unlocked!");
});
the component I'm trying to test
import React, { useState, useEffect } from "react";
import Keypad from "./components/Keypad";
import "./App.css";
import "./css/Result.css";
function App() {
//correctCombination: 1995
const [result, setResult] = useState("");
const [locked, setLocked] = useState("Locked");
const [tries, setTries] = useState(0);
const [hide, setHide] = useState(true);
//Along with the maxLength property on the input,
// this is also needed for the keypad
useEffect(() => {
(function() {
if (result >= 4) {
setResult(result.slice(0, 4));
}
})();
}, [result]);
const onClick = button => {
switch (button) {
case "unlock":
checkCode();
break;
case "clear":
clear();
break;
case "backspace":
backspace();
break;
default:
setResult(result + button);
break;
}
};
const checkCode = () => {
if (result === "1995") {
setLocked("Unlocked!");
setTries(0);
} else if (tries === 3) {
setHide(false);
setLocked("Too many incorrect attempts!");
setTimeout(() => {
setHide(true);
}, 3000);
} else {
setLocked("Incorrect code!");
setTries(tries + 1);
}
};
const clear = () => {
setResult("");
};
const backspace = () => {
setResult(result.slice(0, -1));
};
const handleChange = event => {
setResult(event.target.value);
};
return (
<div className="App">
<div className="pin-body">
<h1>Pin Pad</h1>
<div className="status">
<h2 data-testid="status">{locked}</h2>
</div>
<div className="result">
<input
maxLength={4}
type="phone"
aria-label="input-code"
data-testid="inputcode"
placeholder="Enter code"
onChange={handleChange}
value={result}
/>
</div>
{hide ? <Keypad onClick={onClick} /> : false}
</div>
</div>
);
}
export default App;
I am using react-native-fbsdk.
How can I change the fb login button text from 'Login with facebook' to 'Continue with fb'?
The component looks like this, and I can't find a way to change it:
<LoginButton
style={styles.facebookbutton}
readPermissions={["public_profile", 'email']}
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data);
console.log(data.accessToken.toString());
}
)
}
}
}
onLogoutFinished={() => alert("logout.")}/>
The easiest way is to upgrade the SDK to 4.19.0:
The LoginButton UI is changed in 4.19.0. Instead of "Log in with Facebook", the button now displays "Continue with Facebook". The button color is changed to #4267B2 from #3B5998. The button height is decreased from 30dp to 28dp due to use of smaller font size and paddings around a larger Facebook logo.
The interface for using LoginButton remains the same. Please take time to ensure the updated LoginButton does not break your app's UX
However, if you're after customising the text so it literally says "Continue with fb" you'd need to recreate the Button component, and use it to trigger the Login Manager, i.e.:
import React, { Component } from 'react'
import { Button } from 'react-native'
import { LoginManager } from 'react-native-fbsdk'
export default class Login extends Component {
handleFacebookLogin () {
LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
function (result) {
if (result.isCancelled) {
console.log('Login cancelled')
} else {
console.log('Login success with permissions: ' + result.grantedPermissions.toString())
}
},
function (error) {
console.log('Login fail with error: ' + error)
}
)
}
render () {
return (
<Button
onPress={this.handleFacebookLogin}
title="Continue with fb"
color="#4267B2"
/>
)
}
}
That way also gives you full control over the UI which is particularly handy if you have your own components library, or use a ready made one like NativeBase.
You can use your custom function and add Login Manager into your function.
Here is the code
import { LoginManager } from "react-native-fbsdk";
const loginWithFacebook = () => {
LoginManager.logInWithPermissions(["public_profile", "email"]).then(
function(result) {
if (result.isCancelled) {
console.log("==> Login cancelled");
} else {
console.log(
"==> Login success with permissions: " +
result.grantedPermissions.toString()
);
}
},
function(error) {
console.log("==> Login fail with error: " + error);
}
);
}
Call it in your custom button
<TouchableOpacity onPress={() => loginWithFacebook()}>
<Text> Login With Facebook </Text>
</TouchableOpacity>
For those who want to customize the button, I have not found the way to change its text, but you can change the width and height of this button in node-modules/react-native-fbsdk/js/FBLoginButton.js.
const styles = StyleSheet.create({
defaultButtonStyle: {
height: 30,
width: 195,
},
});
I have written here a value of 195 so that the 'Continue with Facebook' text fits well.
Here is the code I used.
With a click function, I made the POST action to the controller..
$('#btn1').click(function (e) {
$.post($('#frmLogin').attr('action'), $('#frmLogin').serialize(), function (data) {
});
});
#using (Html.BeginForm("Login", "Login", new { Model }, FormMethod.Post, new { id = "frmLogin" }))
{
<input type="button" id="btn1"/>
});
Call this function on clicking your normal button
function form_submit()
{
document.getElementById('formID').submit();
}
or use this jquery
$( "#btn1" ).click(function() {
$( "#frmLogin" ).submit();
});