NewPassword.jsx 6.21 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
import React, { useState, useEffect } from 'react'
import { Card, Grid, Button, CircularProgress } from '@material-ui/core'
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator'
import { Link, useHistory, useLocation } from 'react-router-dom'
import { makeStyles } from '@material-ui/core/styles'
import history from 'history.js'
import clsx from 'clsx'
import { toast } from 'react-toastify'
import { apiConfirmPass } from 'app/apis/Functions/users'
import { useTranslation } from 'react-i18next'
const useStyles = makeStyles(({ palette, ...theme }) => ({
    cardHolder: {
        backgroundImage: "url(/bgWeb1.png)",
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    },
    card: {
        maxWidth: 800,
        borderRadius: 12,
        margin: '1rem',
    },
}))

const ForgotPassword = () => {
    const [state, setState] = useState({})
    const classes = useStyles()
    const location = useLocation()
    const [loading, setLoading] = useState(false)
    const { t } = useTranslation()
    const handleChange = ({ target: { name, value } }) => {
        setState({
            ...state,
            [name]: value,
        })
    }
    useEffect(() => {
        ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
            if (value !== state.new_password) {
                return false
            }
            return true
        })
        return () => ValidatorForm.removeValidationRule('isPasswordMatch')
    }, [state.new_password])
    

    const handleFormSubmit = async (event) => {
        console.log("location.state",location.state)
        const res = await apiConfirmPass({
            otp_code: location.state.otp_code,
            email: location.state.email,
            new_password: state.new_password,
        })
        if (res.data.code == 200) {
            toast.success('Lấy lại mật khẩu thành công!', {
                theme: 'colored',
            })
            history.push({
                pathname: '/session/signin',
            })
        } else {
            toast.error(t(res.data.error), {
                theme: 'colored',
            })
        }
    }

    let { new_password, repeatPassword } = state

    return (
        <div
            className={clsx(
                'flex justify-center items-center  min-h-full-screen',
                classes.cardHolder
            )}
        >
            <Card className={classes.card}>
                <Grid container>
                    <Grid item lg={5} md={5} sm={5} xs={12}>
                        <div className="p-8 flex justify-center items-center h-full">
                            <img
                                className="w-full"
                                src="/assets/images/illustrations/dreamer.svg"
                                alt=""
                            />
                        </div>
                    </Grid>
                    <Grid item lg={7} md={7} sm={7} xs={12}>
                        <div className="p-8 h-full bg-light-gray relative">
                            <ValidatorForm onSubmit={handleFormSubmit}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Mật khẩu mới *"
                                    onChange={handleChange}
                                    type="password"
                                    name="new_password"
                                    value={new_password || ''}
                                    validators={[
                                        'required',
                                        'minStringLength:8',
                                    ]}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Mật khẩu phải có ít nhất 8 ký tự',
                                    ]}
                                />

                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Nhập lại mật khẩu *"
                                    onChange={handleChange}
                                    name="repeatPassword"
                                    type="password"
                                    validators={['isPasswordMatch', 'required']}
                                    errorMessages={[
                                        'Mật khẩu không trùng nhau',
                                        'Không được để trống trường này',
                                    ]}
                                    value={repeatPassword}
                                />
                                <div className="flex items-center">
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        type="submit"
                                        disabled={loading}
                                    >
                                        Đổi lại mật khẩu
                                    </Button>
                                    <span className="ml-4 mr-2">or</span>
                                    <Link to="/session/signin">
                                        <Button className="capitalize">
                                            Đăng nhập
                                        </Button>
                                    </Link>
                                    {loading && (
                                        <CircularProgress
                                            size={24}
                                            className={classes.buttonProgress}
                                        />
                                    )}
                                </div>
                            </ValidatorForm>
                        </div>
                    </Grid>
                </Grid>
            </Card>
        </div>
    )
}

export default ForgotPassword