Я новичок в реакции на родную. Я хочу применить проверку, если все поля заполнены, тогда она будет продолжена, а если входные данные не заполнены, отобразится ошибка, а также пароль для подтверждения и подтверждения должен совпадать. я применил базу данных аутентификации firebase и базу данных в реальном времени.
Я пробовал много вещей, но ни одна из них не работала. пожалуйста, помогите мне в этом
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.focusNextField = this.focusNextField.bind(this);
// to store our input refs
this.inputs = {};
this.state = { email: "", password: "", error: "", confirmPassword: "" };
const { password, confirmPassword } = this.state;
}
focusNextField(id) {
this.inputs[id].focus();
}
componentDidMount() {}
static navigationOptions = {};
onEnterText = email => {
if (email.trim() != 0) {
this.setState({ email: email, ErrorStatus: true });
} else {
this.setState({ email: email, ErrorStatus: false });
}
};
onButtonPress = () => {
const { email } = this.state;
if (email == "") {
Alert.alert("Please enter the text to proceed");
} else {
this.setState({ loading: false });
const { email, password } = this.state;
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(response => {
firebase
.auth()
.currentUser.updateProfile({
displayName: email,
displaypassword: password
})
.then(() => {
// Alert.alert(response.user.uid);
// firebase.database().ref('fir-login-67a47/' +
firebase
.auth()
.currentUser.uid()
.set(firebase.auth().currentUser);
firebase
.database()
.ref("sevenup-a1db1//" + firebase.auth().currentUser.uid)
.set({
email,
password
})
.then(data => {
//success callback
// console.log('data ' , data)
});
// .catch((error)=>{
// //error callback
// console.log('error ' , error)
// })
firebase
.database()
.ref("sevenup-a1db1/" + firebase.auth().currentUser.uid)
.on("value", function(snapshot) {
// console.log(snapshot.val())
});
firebase
.database()
.ref("sevenup-a1db1/" + firebase.auth().currentUser.uid)
.update({
email,
password
});
})
.then(() => {
this.props.navigation.navigate("welcome");
})
.catch(error => {
// let errorCode = error.code
// let errorMessage = error.message;
// if (errorCode == 'auth/weak-password') {
// this.onLoginFailure.bind(this)('Weak password!')
// } else {
// this.onLoginFailure.bind(this)(errorMessage)
// }
});
// console.log(onLoginSuccess.uid)
//
console.log(firebase.auth().createUserWithEmailAndPassword.uid);
});
}
};
onLoginSuccess() {
this.setState({
email: "",
password: "",
error: "",
loading: false,
confirmpassword: "",
username: ""
});
}
onLoginFailure(errorMessage) {
this.setState({ error: errorMessage, loading: false });
}
renderButton() {
if (this.state.loading) {
return (
<View style={styles.spinnerStyle}>
<ActivityIndicator size={"small"} />
{/* {this.onButtonPress.bind(this)} */}
{/* loading={this.onButtonPress.bind(this)} */}
</View>
);
} else {
return (
<Button
style={styles.loginButton}
title="Sign in"
// onPress = {this.handleSubmit}
onPress={this.onButtonPress.bind(this)}
/>
);
}
}
render() {
return <View>{this.renderComponent()}</View>;
}
renderComponent() {
if (this.state.loggedIn) {
return (
<Button
title="Sign out"
onPress={() => this.props.navigation.navigate("LoginScreen")}
title="LoginScreen"
/>
);
} else {
return <LoginForm />;
}
}
render() {
return (
<View
style={{
justifyContent: "center",
alignItems: "center",
marginTop: 100
}}
>
<TextInput
style={{
height: 40,
width: 250,
borderRadius: 5,
multiline: "true",
borderColor: "purple",
borderWidth: 2
}}
label="username"
placeholder="username"
// onChange1={this.handleChange}
value={this.state.username}
secureTextEntry={false}
onChangeText={username => this.setState({ username })}
onSubmitEditing={() => {
this.focusNextField("user@mail.com");
}}
returnKeyType={"next"}
ref={input => {
this.inputs["username"] = input;
}}
/>
<TextInput
style={{
height: 40,
width: 250,
borderRadius: 5,
multiline: "true",
borderColor: "purple",
borderWidth: 2,
marginTop: 30
}}
label="Email"
placeholder="user@mail.com"
onSubmitEditing={() => {
this.focusNextField("password");
}}
returnKeyType={"next"}
ref={input => {
this.inputs["user@mail.com"] = input;
}}
value={this.state.email}
secureTextEntry={false}
onChangeText={email => this.onEnterText(email)}
/>
<TextInput
style={{
height: 40,
width: 250,
borderRadius: 5,
multiline: "true",
borderColor: "purple",
borderWidth: 2,
marginTop: 30
}}
label="Password"
placeholder="password"
value={this.state.password}
onSubmitEditing={() => {
this.focusNextField("confirmpassword");
}}
returnKeyType={"next"}
ref={input => {
this.inputs["password"] = input;
}}
secureTextEntry={true}
onChangeText={password => this.setState({ password })}
/>
<TextInput
style={{
height: 40,
width: 250,
borderRadius: 5,
multiline: "true",
borderColor: "purple",
borderWidth: 2,
marginTop: 30
}}
label="confirmpassword"
placeholder="confirmpassword"
value={this.state.confirmpassword}
ref={input => {
this.inputs["confirmpassword"] = input;
}}
secureTextEntry={false}
onChangeText={confirmpassword => this.setState({ confirmpassword })}
/>
<TouchableOpacity
style={{
justifyContent: "flex-end",
alignSelf: "flex-end",
alignItems: "flex-end",
marginRight: 60,
marginTop: 20
}}
onPress={() => this.props.navigation.navigate("LoginScreen")}
title="LoginScreen"
>
<Text>Login</Text>
</TouchableOpacity>
<View style={{ marginTop: 20 }}>{this.renderButton()}</View>
<Text style={styles.errorTextStyle}>{this.state.error}</Text>
</View>
);
}
}
const styles = {
errorTextStyle: {
fontSize: 16,
alignSelf: "center",
color: "red"
},
spinnerStyle: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
loginButton: {
marginTop: 30
}
};