SetPassword.js

import React, { Component } from 'react';
import Images from '../assets/Images';
import { TextField, InputAdornment, Button, Typography, IconButton, Snackbar } from '@material-ui/core';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import MuiAlert from '@material-ui/lab/Alert';
import { withStyles } from '@material-ui/core/styles';
import api from '../api';

const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);

class SetPassword extends Component {
  constructor(props) {
    super(props)
    this.state = {
      password: '',
      confirmPassword: '',
      showPass: false,
      showPass2: false,
      errorPassword: false,
      errorConfirmPassword: false,
      msgPassword: 'Consists of 8 characters with a combination of numbers.',
      msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.',
      userId: 0,
      alert: false,
      tipeAlert: '',
      messageAlert: ''
    }
  }

  componentDidMount() {
    console.log(this.props.match.params.id)
    let userId = this.props.match.params.id
    this.setState({ userId })
    this.checkExpiredLink(userId)
    // console.log(this.props)
  }

  checkExpiredLink(userId) {
    api.create().isResetPassword(userId).then((response) => {
      if (response.data) {
        if (response.data.status == 'success') {
          // 
        } else {
          this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
              setTimeout(() => {
                this.props.history.push('/login')
              }, 1500);
          })
        }
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
      }
    })
  }

  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());
  }

  validateReset() {
    if (this.state.password.trim() == "") {
      this.setState({ errorPassword: true, msgPassword: 'Password is required' })
    } else if (this.state.password.length < 8) {
      this.setState({ errorPassword: true, msgPassword: 'Password minimum 8 characters.' })
    } else if (this.isEmail(this.state.password)) {
      this.setState({ errorPassword: true, msgPassword: 'Password format should not use email.' })
    } else if (!this.isRegex(this.state.password)) {
      this.setState({ errorPassword: true, msgPassword: 'Password must be a combination of characters, letters and numbers.' })
    } else if (this.state.confirmPassword.trim() == "") {
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password is required.' })
    } else if (this.state.confirmPassword.length < 8) {
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password minimum 8 characters.' })
    } else if (this.isEmail(this.state.confirmPassword)) {
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' })
    } else if (!this.isRegex(this.state.confirmPassword)) {
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers.' })
    } else if (this.state.password !== this.state.confirmPassword) {
      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirmation password must match the password.' })
    } else {
      this.confirmPassword()
    }
  }

  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' })
          }
        } else {
          this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
        }
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
      }
    })
  }

  closeAlert() {
    this.setState({ alert: false })
  }

  handleChange(e) {
    let data = this.state
    this.setState({ ...data, [e.target.name]: e.target.value })
    if (e.target.name == "password") {
      this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' })
    } else if (e.target.name == "confirmPassword") {
      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Confirm Password consists of 8 characters with a combination of numbers.' })
    }
  }

  render() {
    return (
      <div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
        <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' }}>
          <img src={Images.tia} />

          <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>,
            }}
          />

          <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>,
            }}
          />

          <Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50, 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' }}>
            <Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Lanjut</Typography>
          </Button>
        </div>
      </div>
    );
  }
}

export default SetPassword;