Untitled
unknown
plain_text
2 years ago
8.4 kB
4
Indexable
import React from 'react'; import PropTypes from 'prop-types'; import * as Yup from 'yup'; import clsx from 'clsx'; import { Modal } from 'antd'; import Tooltip from '../../elements/Tooltip'; import { ButtonFilled } from '@telkomdesign/tedis-reactjs-component/lib'; import TextInput from '../../elements/TextInput'; import { REGEX, ICONS } from '../../../configs'; import { Formik } from 'formik'; import { postData, endpoints } from '../../../configs/Api'; import get from 'lodash.get'; class ModalPassword extends React.Component { constructor(props) { super(props); this.form = React.createRef(); this.state = { focused: '', visible: false }; } componentDidUpdate(prevProps) { const { toggleModal } = this.props; if (toggleModal !== prevProps.toggleModal) { this._handleToggleModal(); } } _handleBlurPassword = () => { this._handleSetFocus(''); } _schemaChangePassword = () => { return Yup.object().shape({ oldPassword: Yup.string() .required('') .matches(REGEX.idealPassword, 'errorAll') .matches(REGEX.checkUpperLowerCase, 'errorAll') .min(8, 'errorOld'), newPassword: Yup.string() .required('') .matches(REGEX.idealPassword, 'errorAll') .matches(REGEX.checkUpperLowerCase, 'errorAll') .min(8, 'errorAll') }); } _renderTooltipPassword = (helpers) => { const { classes } = this.props; const { values, touched, errors } = helpers; const { newPassword, oldPassword } = values; return ( <div className={classes.tooltipPassword}> <p className={clsx('', { ['passed']: oldPassword && oldPassword.length > 7 || newPassword && newPassword.length > 7, ['failed']: touched.oldPassword && errors.oldPassword === 'errorAll' ||touched.newPassword && errors.newPassword === 'errorAll' })}> {oldPassword && oldPassword.length > 7 || newPassword && newPassword.length > 7 ? <img src={ICONS.checklistCircle} /> : <b>•</b>} Minimal terdiri dari 8 karakter </p> <p className={clsx('', { ['passed']: REGEX.checkUpperLowerCase.test(newPassword) || REGEX.checkUpperLowerCase.test(oldPassword), ['failed']: touched.oldPassword && errors.oldPassword === 'errorAll' || touched.newPassword && errors.newPassword === 'errorAll' || touched.oldPassword && errors.oldPassword === 'error2' || touched.newPassword && errors.newPassword === 'error2' })}> {REGEX.checkUpperLowerCase.test(newPassword) || REGEX.checkUpperLowerCase.test(oldPassword) ? <img src={ICONS.checklistCircle} /> : <b>•</b>} Kombinasi huruf kapital dan huruf kecil </p> <p className={clsx('', { ['passed']: REGEX.idealPassword.test(newPassword) || REGEX.idealPassword.test(oldPassword), ['failed']: touched.oldPassword && errors.oldPassword === 'errorAll'|| touched.newPassword && errors.newPassword === 'errorAll' || touched.oldPassword && errors.oldPassword || touched.newPassword && errors.newPassword === 'error3' })}> {REGEX.idealPassword.test(newPassword) || REGEX.idealPassword.test(oldPassword) ? <img src={ICONS.checklistCircle} /> : <b>•</b>} Minimal terdiri dari 1 angka atau simbol </p> </div> ); } _handleChange = ({ target: { name, value } }) => { const { setFieldValue, touched, setFieldTouched } = this.form.current; setFieldValue(name, value); if (!touched[name]) setFieldTouched(name, true); } _renderForm = (helpers) => { const { handleSubmit: _handleSubmit, touched, errors, values } = helpers; const { oldPassword, newPassword } = values; const { classes } = this.props; const tooltipVisible = Object.keys(errors).length > 0 && errors.newPassword === 'errorAll' || this.state.focused === 'newPassword' && !values.newPassword; const tooltipVisible1 = Object.keys(errors).length > 0 && errors.oldPassword === 'errorAll' || this.state.focused === 'oldPassword' && !values.oldPassword; return ( <form className={clsx('wrapperChangePass', { 'error-new': tooltipVisible } )} onSubmit={_handleSubmit}> <p className="modal-title">Ubah Sandi</p> <p className="modal-description">Silakan isi kolom berikut untuk mengubah sandi. </p> <Tooltip title={this._renderTooltipPassword(helpers)} placement="bottomLeft" type="password" className={classes.tooltipBox} zIndex={1300} visible={tooltipVisible1}> <TextInput onBlur={this._handleBlurPassword} name={'oldPassword'} label="Sandi Lama" type={'password'} value={oldPassword} hinterror={!tooltipVisible1 && touched.oldPassword} onChange={this._handleChange} onFocus={this._handleSetFocus.bind(this, 'oldPassword')} /> </Tooltip> <Tooltip title={this._renderTooltipPassword(helpers)} placement="bottomLeft" type="password" className={classes.tooltipBox} zIndex={1300} visible={tooltipVisible}> <TextInput onBlur={this._handleBlurPassword} name={'newPassword'} label="Sandi Baru" type={'password'} value={newPassword} hinterror={!tooltipVisible && touched.newPassword && errors.newPassword} onChange={this._handleChange} onFocus={this._handleSetFocus.bind(this, 'newPassword')} /> </Tooltip> <ButtonFilled className={classes.saveBtn} size="48" type="submit" disabled={!values.oldPassword || !values.newPassword || errors?.newPassword || errors?.oldPassword} > Simpan Perubahan </ButtonFilled> </form> ); } _handleSetFocus = (focus) => { this.setState({ focused: focus, }); }; _handleToggleModal = () => this.setState({ visible: !this.state.visible }); _handleCheckValidPassword = async () => { const { auth: { pt }, onSubmit, actions: { requestProfilePt } } = this.props, { values, setFieldError } = this.form.current; requestProfilePt({ token: get(pt, 'token') }); try { await postData({ endpoint: endpoints.postLoginPerguruanTinggi, payload: { email: pt.profile.email, password: values.oldPassword }, }); if(values.oldPassword !== values.newPassword) { this.setState({ focused: '' }, () => { onSubmit(values); }); } else setFieldError('newPassword', 'Sandi Baru sama dengan Sandi Lama'); } catch (error) { if (error?.response?.data?.message?.type === 'password') { setFieldError('oldPassword', 'Sandi Lama tidak sesuai'); } } } render() { const { classes, onClose } = this.props; const { visible } = this.state; const initialValues = { newPassword: '', oldPassword: '' }; return ( <> <Modal visible={visible} closable destroyOnClose closeIcon={<img src={ICONS.closeIcon} />} onCancel={onClose} centered footer={false} zIndex={1300} className={classes.wrapperModal} > <Formik innerRef={this.form} initialValues={initialValues} validationSchema={this._schemaChangePassword} component={this._renderForm} onSubmit={this._handleCheckValidPassword} /> </ Modal> </> ); } } ModalPassword.defaultProps = { classes: {}, onClose: () => null, toggleModal: false, onSubmit: () => null, }; ModalPassword.propTypes = { auth: PropTypes.object.isRequired, profilPT: PropTypes.object.isRequired, classes: PropTypes.object, visible: PropTypes.bool.isRequired, onClose: PropTypes.func, onSubmit: PropTypes.func, toggleModal: PropTypes.bool, actions: PropTypes.object.isRequired, }; export default ModalPassword;
Editor is loading...