diff --git a/src/components/ChangePassword.jsx b/src/components/ChangePassword.jsx index fbe0292..cb262e6 100644 --- a/src/components/ChangePassword.jsx +++ b/src/components/ChangePassword.jsx @@ -3,7 +3,7 @@ * @flow */ -import React from 'react'; +import React, {useState} from 'react'; import { t } from 'ttag'; import { validatePassword } from '../utils/validation'; import { requestPasswordChange } from '../actions/fetch'; @@ -25,118 +25,91 @@ function validate(mailreg, password, newPassword, confirmPassword) { return errors; } -class ChangePassword extends React.Component { - constructor() { - super(); - this.state = { - password: '', - newPassword: '', - confirmPassword: '', - success: false, - submitting: false, +const ChangePassword = ({ mailreg, done, cancel }) => { + const [password, setPassword] = useState(''); + const [newPassword, setNewPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [success, setSuccess] = useState(false); + const [submitting, setSubmitting] = useState(false); + const [errors, setErrors] = useState([]); - errors: [], - }; - - this.handleSubmit = this.handleSubmit.bind(this); - } - - async handleSubmit(e) { - e.preventDefault(); - - const { - password, newPassword, confirmPassword, submitting, - } = this.state; - if (submitting) return; - - const { mailreg } = this.props; - const errors = validate( - mailreg, - password, - newPassword, - confirmPassword, - ); - - this.setState({ errors }); - if (errors.length > 0) return; - this.setState({ submitting: true }); - - const { errors: resperrors } = await requestPasswordChange( - newPassword, - password, - ); - if (resperrors) { - this.setState({ - errors: resperrors, - submitting: false, - }); - return; - } - this.setState({ - success: true, - }); - } - - render() { - const { success } = this.state; - if (success) { - const { done } = this.props; - return ( -
{t`Changed Password successfully.`}
- -{t`Changed Password successfully.`}
+