ForgotPassword.js 5.04 KB
Newer Older
EKSAD's avatar
EKSAD committed
1 2
import React, { Component } from 'react';
import Images from '../assets/Images';
a.bairuha's avatar
a.bairuha committed
3
import { TextField, InputAdornment, Button, Typography, Snackbar } from '@material-ui/core';
EKSAD's avatar
EKSAD committed
4
import api from '../api';
EKSAD's avatar
EKSAD committed
5
import Constant from '../library/Constant';
a.bairuha's avatar
a.bairuha committed
6 7
import MuiAlert from '@material-ui/lab/Alert';
import { withStyles } from '@material-ui/core/styles';
EKSAD's avatar
EKSAD committed
8

a.bairuha's avatar
a.bairuha committed
9 10
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
EKSAD's avatar
EKSAD committed
11 12 13 14 15

class ForgotPassword extends Component {
    constructor(props) {
        super(props)
        this.state = {
EKSAD's avatar
EKSAD committed
16 17
            email: '',
            errorEmail: false,
a.bairuha's avatar
a.bairuha committed
18 19 20 21
            msgEmail: '',
            alert: false,
            tipeAlert: '',
            messageAlert: ''  
EKSAD's avatar
EKSAD committed
22 23 24
        }
    }

a.bairuha's avatar
a.bairuha committed
25
    componentDidMount(){
EKSAD's avatar
EKSAD committed
26
        // console.log("forgot-password")
a.bairuha's avatar
a.bairuha committed
27 28
    }

EKSAD's avatar
EKSAD committed
29 30 31
    handleChange(e) {
      let data = this.state
      this.setState({...data, [e.target.name] : e.target.value})
EKSAD's avatar
EKSAD committed
32 33 34
      if (e.target.name == "email") {
        this.setState({ errorEmail: false, msgEmail: '' })
      }
EKSAD's avatar
EKSAD committed
35
    }
EKSAD's avatar
EKSAD committed
36

EKSAD's avatar
EKSAD committed
37 38 39 40 41
    isEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

EKSAD's avatar
EKSAD committed
42
    validateEmail() {
EKSAD's avatar
EKSAD committed
43 44
        var isEmail = this.isEmail(this.state.email)
    
EKSAD's avatar
EKSAD committed
45
      if (this.state.email.trim() == "") {
EKSAD's avatar
EKSAD committed
46
          this.setState({ errorEmail: true, msgEmail: 'Email Cannot be Empty' })
EKSAD's avatar
EKSAD committed
47
      } else if (!isEmail) {
EKSAD's avatar
EKSAD committed
48
          this.setState({ errorEmail: true, msgEmail: 'Please enter a valid email address' })
EKSAD's avatar
EKSAD committed
49
      } else {
EKSAD's avatar
EKSAD committed
50 51 52 53
          this.verification()
      }
  }

EKSAD's avatar
EKSAD committed
54
    verification() {
EKSAD's avatar
EKSAD committed
55
      // alert('test')
EKSAD's avatar
EKSAD committed
56 57 58
      let payload = {
        "email": this.state.email
      }
EKSAD's avatar
EKSAD committed
59
      api.create().verification(payload).then((response) => {
a.bairuha's avatar
a.bairuha committed
60 61 62 63 64 65 66 67 68 69
        if (response.data) {
            if (response.ok) {
                if(response.data.status === 'success') {
                    this.props.history.push('/email-verification')
                } else {
                    this.setState({ errorEmail: true, msgEmail: response.data.message })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })     
            }
EKSAD's avatar
EKSAD committed
70
        } else {
a.bairuha's avatar
a.bairuha committed
71
            this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
EKSAD's avatar
EKSAD committed
72 73
        }
      })
EKSAD's avatar
EKSAD committed
74 75
    }

a.bairuha's avatar
a.bairuha committed
76 77 78 79
    closeAlert() {
        this.setState({ alert: false })
    }

EKSAD's avatar
EKSAD committed
80 81
    render() {
        return (
82
          <div style={{ flex: 1, display: 'flex', backgroundColor: '#263b80', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
a.bairuha's avatar
a.bairuha committed
83 84 85 86 87
            <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                    {this.state.messageAlert}
                </Alert>
            </Snackbar>
a.bairuha's avatar
a.bairuha committed
88
              <div style={{padding: 60, display: 'flex', flexDirection: 'column', width: (this.state.msgEmail.length > 45 ? 423 : 378), height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
89
              <img src={Images.triputraBlack} style={{ height: 59, width: 175, alignSelf: 'center'}} />
EKSAD's avatar
EKSAD committed
90 91

                <TextField
EKSAD's avatar
EKSAD committed
92
                    label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Email *</Typography>}
EKSAD's avatar
EKSAD committed
93
                    id="email"
EKSAD's avatar
EKSAD committed
94
                    type={"email"}
EKSAD's avatar
EKSAD committed
95 96
                    name={"email"}
                    value={this.state.email}
EKSAD's avatar
EKSAD committed
97 98 99
                    onChange={(email) => {
                      this.handleChange(email)
                    }}
EKSAD's avatar
EKSAD committed
100
                    variant="outlined"
EKSAD's avatar
EKSAD committed
101
                    error={this.state.errorEmail}
EKSAD's avatar
EKSAD committed
102
                    style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}
EKSAD's avatar
EKSAD committed
103
                    helperText={this.state.msgEmail}
EKSAD's avatar
EKSAD committed
104 105 106 107 108
                    InputProps={{
                        endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
                    }}
                />

a.bairuha's avatar
a.bairuha committed
109
                <Button name="submit" variant="contained" disabled={this.state.email.trim() === '' ? true : false} onClick={() => this.validateEmail()} style={{ marginTop: this.state.errorEmail ? (this.state.msgEmail.length > 45 ? 80 : 35) : 23,  width: '100%', height: 30, borderRadius: 4, color: this.state.email.trim() === '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() === '' ? '#d8d8d8' : '#51c6ea' }}>
EKSAD's avatar
EKSAD committed
110
                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography>
EKSAD's avatar
EKSAD committed
111 112 113
                </Button>

                <div style={{ marginTop: 24}}>
EKSAD's avatar
EKSAD committed
114
                  <span onClick={() => this.props.history.goBack()} style={{ color: '#51c6ea', cursor: 'pointer' }}>
EKSAD's avatar
EKSAD committed
115
                    <Typography style={{fontSize: 14}}>Back To Login</Typography>
EKSAD's avatar
EKSAD committed
116 117 118 119 120 121 122 123 124
                  </span>
                </div>
              </div>
          </div>
        );
      }
}

export default ForgotPassword;