ResetPassword.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 ResetPassword extends Component {
    constructor(props) {
        super(props)
        this.state = {
            password: '',
            confirmPassword: '',
            showPass: false,
            showPass2: false,
            errorPassword: false,
            errorConfirmPassword: false,
            msgPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
            msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
            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' })  
                    this.props.history.push('/login')
                }
            } 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: 'Kata sandi harus diisi!' })
        } else if (this.state.password.length < 8) {
            this.setState({ errorPassword: true, msgPassword: 'Kata sandi minimal 8 karakter!' })
        } else if (this.isEmail(this.state.password)) {
            this.setState({ errorPassword: true, msgPassword: 'Format kata sandi tidak boleh menggunakan email!' })
        } else if (!this.isRegex(this.state.password)) {
            this.setState({ errorPassword: true, msgPassword: 'Kata sandi harus berupa kombinasi karakter, huruf dan angka!' })
        } else if (this.state.confirmPassword.trim() == "") {
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi harus diisi!' })
        } else if (this.state.confirmPassword.length < 8) {
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi minimal 8 karakter!' })
        } else if (this.isEmail(this.state.confirmPassword)) {
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Format konfirmasi kata sandi tidak boleh menggunakan email!' })
        } else if (!this.isRegex(this.state.confirmPassword)) {
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi harus berupa kombinasi karakter, huruf dan angka!' })
        } else if (this.state.password !== this.state.confirmPassword) {
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi harus sama dengan kata sandi!' })
        } 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' }) 
                        this.props.history.push('/login')
                    } 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: 'Terdiri 8 karakter dengan kombinasi angka.' })
      } else if (e.target.name == "confirmPassword") {
          this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.' })
      }
    }

    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'}}>Kata Sandi Baru *</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'}}>Ulangi Kata Sandi Baru *</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 ResetPassword;