forked from ppfun/pixelplanet
migrate ChangePassword to React hooks
This commit is contained in:
parent
7bf9d7a295
commit
8bf875049b
|
@ -3,7 +3,7 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
import { validatePassword } from '../utils/validation';
|
import { validatePassword } from '../utils/validation';
|
||||||
import { requestPasswordChange } from '../actions/fetch';
|
import { requestPasswordChange } from '../actions/fetch';
|
||||||
|
@ -25,118 +25,91 @@ function validate(mailreg, password, newPassword, confirmPassword) {
|
||||||
return errors;
|
return errors;
|
||||||
}
|
}
|
||||||
|
|
||||||
class ChangePassword extends React.Component {
|
const ChangePassword = ({ mailreg, done, cancel }) => {
|
||||||
constructor() {
|
const [password, setPassword] = useState('');
|
||||||
super();
|
const [newPassword, setNewPassword] = useState('');
|
||||||
this.state = {
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||||||
password: '',
|
const [success, setSuccess] = useState(false);
|
||||||
newPassword: '',
|
const [submitting, setSubmitting] = useState(false);
|
||||||
confirmPassword: '',
|
const [errors, setErrors] = useState([]);
|
||||||
success: false,
|
|
||||||
submitting: false,
|
|
||||||
|
|
||||||
errors: [],
|
if (success) {
|
||||||
};
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<div className="inarea">
|
|
||||||
<p className="modalmessage">{t`Changed Password successfully.`}</p>
|
|
||||||
<button type="button" onClick={done}>Close</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
errors,
|
|
||||||
password,
|
|
||||||
newPassword,
|
|
||||||
confirmPassword,
|
|
||||||
submitting,
|
|
||||||
} = this.state;
|
|
||||||
const { cancel, mailreg } = this.props;
|
|
||||||
return (
|
return (
|
||||||
<div className="inarea">
|
<div className="inarea">
|
||||||
<form onSubmit={this.handleSubmit}>
|
<p className="modalmessage">{t`Changed Password successfully.`}</p>
|
||||||
{errors.map((error) => (
|
<button type="button" onClick={done}>Close</button>
|
||||||
<p key={error} className="errormessage"><span>{t`Error`}</span>
|
|
||||||
: {error}</p>
|
|
||||||
))}
|
|
||||||
{(mailreg)
|
|
||||||
&& (
|
|
||||||
<input
|
|
||||||
value={password}
|
|
||||||
onChange={(evt) => this.setState({ password: evt.target.value })}
|
|
||||||
type="password"
|
|
||||||
placeholder={t`Old Password`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<br />
|
|
||||||
<input
|
|
||||||
value={newPassword}
|
|
||||||
onChange={(evt) => this.setState({ newPassword: evt.target.value })}
|
|
||||||
type="password"
|
|
||||||
placeholder={t`New Password`}
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<input
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={(evt) => this.setState({
|
|
||||||
confirmPassword: evt.target.value,
|
|
||||||
})}
|
|
||||||
type="password"
|
|
||||||
placeholder={t`Confirm New Password`}
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<button type="submit">
|
|
||||||
{(submitting) ? '...' : t`Save`}
|
|
||||||
</button>
|
|
||||||
<button type="button" onClick={cancel}>{t`Cancel`}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="inarea">
|
||||||
|
<form
|
||||||
|
onSubmit={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (submitting) return;
|
||||||
|
const errors = validate(
|
||||||
|
mailreg,
|
||||||
|
password,
|
||||||
|
newPassword,
|
||||||
|
confirmPassword,
|
||||||
|
);
|
||||||
|
setErrors(errors);
|
||||||
|
if (errors.length) return;
|
||||||
|
setSubmitting(true);
|
||||||
|
const { errors: resperrors } = await requestPasswordChange(
|
||||||
|
newPassword,
|
||||||
|
password,
|
||||||
|
);
|
||||||
|
if (resperrors) {
|
||||||
|
setErrors(resperrors);
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
setSuccess(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{errors.map((error) => (
|
||||||
|
<p key={error} className="errormessage"><span>{t`Error`}</span>
|
||||||
|
: {error}</p>
|
||||||
|
))}
|
||||||
|
{(mailreg)
|
||||||
|
&& (
|
||||||
|
<input
|
||||||
|
value={password}
|
||||||
|
onChange={(evt) => setPassword(evt.target.value)}
|
||||||
|
type="password"
|
||||||
|
placeholder={t`Old Password`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(evt) => setNewPassword(evt.target.value)}
|
||||||
|
type="password"
|
||||||
|
placeholder={t`New Password`}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(evt) => setConfirmPassword(evt.target.value)}
|
||||||
|
type="password"
|
||||||
|
placeholder={t`Confirm New Password`}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{(submitting) ? '...' : t`Save`}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={cancel}
|
||||||
|
>
|
||||||
|
{t`Cancel`}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ChangePassword;
|
export default React.memo(ChangePassword);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user