Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import { Link, Redirect } from "react-router-dom";
- import SweetAlert from "sweetalert2-react";
- import { connect } from "react-redux";
- import { Card, Form, Button, Divider } from "semantic-ui-react";
- import "../../../../css/style.css";
- import HomePageHeader from "../Headers/HomePageHeader";
- import MainFooter from "../Footers/MainFooter";
- import { verifyMobileOTP, fetchUserInfo } from "../../actions/index";
- class MobVerificationOTP extends Component {
- constructor(props) {
- super(props);
- this.state = {
- OTP: "",
- isValidOTP: false,
- };
- this.updateOTP = this.updateOTP.bind(this);
- this.verifyOTP = this.verifyOTP.bind(this);
- }
- componentDidMount() {
- this.props.fetchUserInfo(this.props.location.state.mobileNumber);
- }
- updateOTP(e) {
- this.setState({
- OTP: e.target.value
- });
- }
- validate(status) {
- var otp_status = 0;
- if (status == 1 ) {
- otp_status = 1;
- this.setState({
- isValidOTP: false
- });
- } else {
- otp_status = 0;
- this.setState({
- isValidOTP: true,
- OTP: ""
- });
- }
- return otp_status;
- }
- verifyOTP(OTP, mobile_number) {
- this.props.verifyMobileOTP(OTP, mobile_number);
- }
- onSubmit(status) {
- var otpValidation = this.validate(status);
- console.log(otpValidation);
- if (otpValidation) {
- // this.setState({ redirect: true });
- console.log("success");
- }
- }
- render() {
- const { OTP, isValidOTP } = this.state;
- if (this.state.redirect) {
- return (
- <Redirect
- push
- to={{
- pathname: "/user-info",
- state: { mobileNumber: this.props.location.state.mobileNumber }
- }}
- />
- );
- }
- return (
- <div style={{ backgroundColor: "#6a5f9b" }}>
- <HomePageHeader />
- <Card centered style={{ marginTop: "7%", textAlign: "center" }}>
- <Card.Content>
- <Form onSubmit={e => this.onSubmit(this.props.status)}>
- <Form.Field>
- <label>Your Mobile</label>
- <input
- disabled
- value={this.props.location.state.mobileNumber}
- />
- </Form.Field>
- <Form.Field>
- <label>OTP</label>
- <input
- type="number"
- placeholder="Enter OTP"
- value={OTP}
- onChange={this.updateOTP}
- />
- {isValidOTP && (
- <SweetAlert
- type="error"
- show={isValidOTP}
- title="Invalid OTP"
- text="Please enter a valid OTP"
- onConfirm={() =>
- this.setState({
- show: false,
- isValidOTP: false
- })
- }
- />
- )}
- </Form.Field>
- <Button
- fluid
- id="green-button"
- type="submit"
- style={{ marginTop: "10%" }}
- onClick={e =>
- this.verifyOTP(OTP, this.props.location.state.mobileNumber)
- }
- >
- SEND
- </Button>
- <Divider horizontal>OR</Divider>
- <Link to="/mobile-verification">
- <Button fluid type="submit">
- BACK
- </Button>
- </Link>
- </Form>
- </Card.Content>
- </Card>
- <MainFooter />
- </div>
- );
- }
- }
- function mapStateToProps(state) {
- if (state.verifyOTPReducer.length > 0 && state.userInfoReducer.length > 0) {
- let counter = state.verifyOTPReducer.length;
- if (state.verifyOTPReducer[counter - 1].hasOwnProperty("message")) {
- return {
- status: 1,
- user_info: state.userInfoReducer[0]
- };
- } else {
- return {
- status: 0,
- user_info: state.userInfoReducer[0]
- };
- }
- } else {
- return {
- otp_message: [],
- user_info: []
- };
- }
- }
- function mapDispatchToProps(dispatch) {
- return {
- verifyMobileOTP(OTP, mobile_number) {
- dispatch(verifyMobileOTP(OTP, mobile_number))
- },
- fetchUserInfo(mobileNumber) {
- dispatch(fetchUserInfo(mobileNumber))
- }
- }
- export default connect(mapStateToProps, mapDispatchToProps)(
- MobVerificationOTP
- );
Add Comment
Please, Sign In to add comment