avatar
Butt shb...

Guest 11 4th Dec, 2019

MARKUP 8.11 KB
                                           
                         import React from 'react'
import { connect } from 'react-redux'
import { REDUCER, submit } from 'ducks/login'
import { Form, Input, Button, Alert, Icon, Col, Row } from 'antd'
import { push } from 'react-router-redux'
import { numbersValidator } from '../../../../validator/validator'
import { isNumeric } from '../../../../helpers/methods.helper'
import '../style.scss'
import { URL_PATH } from "../../../../constants/api.constants";
import { postData } from "../../../../helpers/request.helper";
import RegisterForm from '../../../RegistrationPage/Register/RegisterForm'
//import { Row } from '../../../../../node_modules/antd/lib/index'

const FormItem = Form.Item


const mapStateToProps = (state, props) => ({
  isSubmitForm: state.app.submitForms[REDUCER],
})

class FormLogin extends React.Component {
  static defaultProps = {}
  constructor(props) {
    super(props)
    this.onSubmit = this.onSubmit.bind(this)
    this.goRegistration = this.goRegistration.bind(this)
    this.goToForgotPassword = this.goToForgotPassword.bind(this)
  }
  state = {
    isSubmitForm: false,
    loginError: '',
    language: 'english',
    loginErrorFlag: false,
    verificationStatus: "",
    verificationText: "",
    IsIqamaRegistered: false,
    iqamaVerification: false,
    message: ''
  }
//////////////////Thissssssssssssssssssssssssssssssss
  
  goRegistration(event) {
    event.preventDefault()
    const { dispatch } = this.props
    // dispatch(push('/registration'))
      dispatch(push('/registration',  {IsIqamaRegistered: false})) // this will be used when user will be able to reregistered
  }
  goToForgotPassword(event) {
    event.preventDefault()
    const { dispatch } = this.props
    dispatch(push('/forgot-password'))
  }
  
  
  verifyIqamaID = async () => {
    const { validateFields } = this.props.form;
    validateFields(["iqama_id"], async (errors, values) => {
      if (!errors) {
        this.setState({
          verificationStatus: "validating",
          verificationText: "Validating Iqama ID"
        });
        let data = {
          registration_id: values.iqama_id
        };

        let response = await postData("POST", URL_PATH.VERIFY_IQAMA, data);
        if (response.success) {

          this.setState({
            iqamaVerification: true,
            verificationStatus: "",
            verificationText: "Iqama ID you entered is already registered.",
            IsIqamaRegistered: false
          });
        } else {
          this.setState({
            verificationStatus: "success",
            IsIqamaRegistered: false
          }); 
        }
      }
    });
  };
  onSubmit(event) {
    event.preventDefault()
    const { form, dispatch } = this.props
    form.validateFields(async (error, values) => {
      if (!error) {
        this.setState({ isSubmitForm: true })
        let responseError = await submit(values, dispatch)
        if (responseError && !responseError.success) {
          this.setState({
            loginError: responseError.message,
            loginErrorFlag: !responseError.success,
            isSubmitForm: false,
          })
        }
      }
    })
  }

  render() {
    const { form } = this.props
   
    return (

      
      <div className="cat__pages__login__block__form">
        <h4 className="text-uppercase">
    <strong>Please log in </strong>
        </h4>
        <br />
        <Form layout="vertical" hideRequiredMark onSubmit={this.onSubmit}>

        <FormItem  label="Iqama ID"
                    hasFeedback
                    validateStatus={this.state.verificationStatus}
                  >
                    {form.getFieldDecorator("iqama_id", {
                      rules: [
                        {
                          len: 10,
                          message: "Iqama ID should be 10 digits long."
                        },
                        {
                          required: true,
                          message: "Please enter your Iqama ID"
                        },
                        { validator: numbersValidator(this.props.form) }
                      ]
                    })(
                      <Input
                        
                        onKeyPress={isNumeric}
                        placeholder="Enter 10 digits Iqama ID"
                        prefix={
                          <Icon
                            type="user"
                            style={{ color: "rgba(0,0,0,.25)" }}
                          />
                        }
                      />
                    )}
                  </FormItem>
          <FormItem label="Password">
            {form.getFieldDecorator('password', {
              rules: [
                { required: true, message: 'Please input your password' },
                { min: 6, message: 'Password should be atleast 6 digits long.' },
              ],
            })(
              <Input
                size="default"
                type="password"
                placeholder="Enter minimum 6 digits password"
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              />,
            )}
          </FormItem>
          <div onClick={this.goToForgotPassword} className="mb-2">
            <a style={{ color: '#00a65a' }} className="utils__link--blue utils__link--underlined">
              Forgot password
            </a>
     
          </div>
     
          <div className="form-actions">    

          
    <Button type="primary" htmlType="submit"   loading={this.state.isSubmitForm} block>
      Login 
    </Button>

    <Row gutter={ 16 }>
      <Col xs={24} lg={12}  xl={12} className="mt-2">
        <Button  disabled={false} htmlType="button" onClick={this.goRegistration} block>
          Re-Register
        </Button> 
      </Col>

      <Col xs={24} lg={12}  xl={12} className="mt-2">      
        <Button  disabled={false} htmlType="button" onClick={this.goRegistration} block>
          Register
        </Button>
      </Col>
    </Row>
          </div>
          {this.state.loginErrorFlag ? (
            <Alert message="Error" description={this.state.loginError ?  <div>

              <div onClick={this.goToForgotPassword} className="mb-2"> You have been already Register. Kindly Re-Register for Next Year Hajj. 
                          <a style={{ color: '#00a65a' }} className="utils__link--blue utils__link--underlined">
                            Click Here
                          </a>
                   
                        </div>
              
              
              
                          </div> :this.state.loginError   
            
            
            
            
            }    type="warning" showIcon />
          ) : undefined
               }
            
{/*this.state.IsIqamaRegistered ?   (  <Alert
      message="For Your Information"
      description="You are already registered. Kindly re-register."
      type="warning"
      showIcon
    />

)   : undefined*/  }
               
          
        </Form>

        
      </div>
    )
  }
}

const LoginForm = Form.create()(FormLogin)
export default connect(mapStateToProps)(LoginForm)
                      
                                       
To share this paste please copy this url and send to your friends
RAW Paste Data
Recent Pastes