ResetPassword.js 8.67 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, IconButton, Snackbar } from '@material-ui/core';
EKSAD's avatar
EKSAD committed
4 5
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
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
import api from '../api';
EKSAD's avatar
EKSAD committed
9

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

class ResetPassword extends Component {
Deni Rinaldi's avatar
Deni Rinaldi committed
14 15 16 17 18 19 20 21 22
  constructor(props) {
    super(props)
    this.state = {
      password: '',
      confirmPassword: '',
      showPass: false,
      showPass2: false,
      errorPassword: false,
      errorConfirmPassword: false,
EKSAD's avatar
EKSAD committed
23 24
      msgPassword: 'Consists of 8 Characters with a Combination of Numbers',
      msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers',
Deni Rinaldi's avatar
Deni Rinaldi committed
25 26 27 28
      userId: 0,
      alert: false,
      tipeAlert: '',
      messageAlert: ''
EKSAD's avatar
EKSAD committed
29
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
30
  }
EKSAD's avatar
EKSAD committed
31

Deni Rinaldi's avatar
Deni Rinaldi committed
32
  componentDidMount() {
EKSAD's avatar
EKSAD committed
33
    // console.log(this.props.match.params.id)
Deni Rinaldi's avatar
Deni Rinaldi committed
34 35 36 37 38
    let userId = this.props.match.params.id
    this.setState({ userId })
    this.checkExpiredLink(userId)
    // console.log(this.props)
  }
EKSAD's avatar
EKSAD committed
39

Deni Rinaldi's avatar
Deni Rinaldi committed
40 41 42 43 44 45
  checkExpiredLink(userId) {
    api.create().isResetPassword(userId).then((response) => {
      if (response.data) {
        if (response.data.status == 'success') {
          // 
        } else {
a.bairuha's avatar
a.bairuha committed
46 47 48 49 50
          this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
            setTimeout(() => {
                this.props.history.push('/login')
              }, 1500);
          })
Deni Rinaldi's avatar
Deni Rinaldi committed
51 52 53 54 55 56
        }
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
      }
    })
  }
EKSAD's avatar
EKSAD committed
57

Deni Rinaldi's avatar
Deni Rinaldi committed
58 59 60 61 62 63 64 65 66 67
  isRegex(value) {
    // const re = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/;
    const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{1,}$/;
    return re.test(String(value));
  }

  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
68

Deni Rinaldi's avatar
Deni Rinaldi committed
69 70
  validateReset() {
    if (this.state.password.trim() == "") {
EKSAD's avatar
EKSAD committed
71
      this.setState({ errorPassword: true, msgPassword: 'New Password Cannot be Empty' })
Deni Rinaldi's avatar
Deni Rinaldi committed
72
    } else if (this.state.password.length < 8) {
EKSAD's avatar
EKSAD committed
73
      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Minimum length : 8' })
Deni Rinaldi's avatar
Deni Rinaldi committed
74
    } else if (this.isEmail(this.state.password)) {
EKSAD's avatar
EKSAD committed
75
      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Should not be same as Email Address' })
Deni Rinaldi's avatar
Deni Rinaldi committed
76
    } else if (!this.isRegex(this.state.password)) {
EKSAD's avatar
EKSAD committed
77
      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Must using combination of characters, letters and numbers' })
Deni Rinaldi's avatar
Deni Rinaldi committed
78
    } else if (this.state.confirmPassword.trim() == "") {
EKSAD's avatar
EKSAD committed
79
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty' })
Deni Rinaldi's avatar
Deni Rinaldi committed
80
    } else if (this.state.password !== this.state.confirmPassword) {
EKSAD's avatar
EKSAD committed
81
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'The password and password confirmation do not match' })
Deni Rinaldi's avatar
Deni Rinaldi committed
82 83
    } else {
      this.confirmPassword()
EKSAD's avatar
EKSAD committed
84
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
85
  }
EKSAD's avatar
EKSAD committed
86

Deni Rinaldi's avatar
Deni Rinaldi committed
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
  confirmPassword() {
    let payload = {
      "password": this.state.password,
      "confirm_password": this.state.confirmPassword,
      "user_id": this.state.userId
    }
    api.create().resetPassword(payload).then((response) => {
      if (response.data) {
        if (response.ok) {
          if (response.data.status === 'success') {
            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => {
              setTimeout(() => {
                this.props.history.push('/login')
              }, 1000);
            })
          } else {
            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
          }
EKSAD's avatar
EKSAD committed
105
        } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
106
          this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
EKSAD's avatar
EKSAD committed
107
        }
Deni Rinaldi's avatar
Deni Rinaldi committed
108 109
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
EKSAD's avatar
EKSAD committed
110
      }
Deni Rinaldi's avatar
Deni Rinaldi committed
111 112
    })
  }
EKSAD's avatar
EKSAD committed
113

Deni Rinaldi's avatar
Deni Rinaldi committed
114 115 116
  closeAlert() {
    this.setState({ alert: false })
  }
a.bairuha's avatar
a.bairuha committed
117

Deni Rinaldi's avatar
Deni Rinaldi committed
118 119 120 121
  handleChange(e) {
    let data = this.state
    this.setState({ ...data, [e.target.name]: e.target.value })
    if (e.target.name == "password") {
EKSAD's avatar
EKSAD committed
122
      this.setState({ errorPassword: false, msgPassword: 'Consists of 8 Characters with a Combination of Numbers' })
Deni Rinaldi's avatar
Deni Rinaldi committed
123
    } else if (e.target.name == "confirmPassword") {
EKSAD's avatar
EKSAD committed
124
      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers' })
EKSAD's avatar
EKSAD committed
125
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
126
  }
EKSAD's avatar
EKSAD committed
127

Deni Rinaldi's avatar
Deni Rinaldi committed
128 129
  render() {
    return (
130
      <div style={{ flex: 1, display: 'flex', backgroundColor: '#263b80', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
131 132 133 134 135 136
        <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
          <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
            {this.state.messageAlert}
          </Alert>
        </Snackbar>
        <div style={{ padding: 56, display: 'flex', flexDirection: 'column', width: 378, height: 415, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
137
        <img src={Images.triputraBlack} style={{ height: 59, width: 175, alignSelf: 'center'}} />
EKSAD's avatar
EKSAD committed
138

Deni Rinaldi's avatar
Deni Rinaldi committed
139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
          <TextField
            label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>New password *</Typography>}
            id="password"
            type={this.state.showPass ? 'text' : 'password'}
            name={"password"}
            value={this.state.password}
            onChange={(password) => {
              this.handleChange(password)
            }}
            variant="outlined"
            error={this.state.errorPassword}
            style={{ width: 250, height: 51, marginTop: 32 }}
            helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgPassword}</Typography>}
            InputProps={{
              endAdornment: <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  style={{ color: '#4b4b4b', opacity: 0.5 }}
                  onClick={() => this.setState({ showPass: !this.state.showPass })}
                  edge="end"
                >
                  {this.state.showPass ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
                </IconButton>
              </InputAdornment>,
            }}
          />
EKSAD's avatar
EKSAD committed
165

Deni Rinaldi's avatar
Deni Rinaldi committed
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
          <TextField
            label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Repeat New Password *</Typography>}
            id="confirmPassword"
            type={this.state.showPass2 ? 'text' : 'password'}
            name={"confirmPassword"}
            value={this.state.confirmPassword}
            onChange={(confirmPassword) => {
              this.handleChange(confirmPassword)
            }}
            variant="outlined"
            error={this.state.errorConfirmPassword}
            style={{ width: 250, height: 51, marginTop: 45 }}
            helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgConfirmPassword}</Typography>}
            InputProps={{
              endAdornment: <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  style={{ color: '#4b4b4b', opacity: 0.5 }}
                  onClick={() => this.setState({ showPass2: !this.state.showPass2 })}
                  edge="end"
                >
                  {this.state.showPass2 ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
                </IconButton>
              </InputAdornment>,
            }}
          />
EKSAD's avatar
EKSAD committed
192

a.bairuha's avatar
a.bairuha committed
193
          <Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 60, width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
194 195 196 197 198 199
            <Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Reset Password</Typography>
          </Button>
        </div>
      </div>
    );
  }
EKSAD's avatar
EKSAD committed
200 201 202
}

export default ResetPassword;