diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index f8da31be1..86e5812ff 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -63,6 +63,8 @@ class RegistrationForm extends ImmutablePureComponent {
submissionLoading: false,
params: ImmutableMap(),
captchaIdempotencyKey: uuidv4(),
+ passwordConfirmation: '',
+ passwordMismatch: false,
}
setParams = map => {
@@ -77,6 +79,30 @@ class RegistrationForm extends ImmutablePureComponent {
this.setParams({ [e.target.name]: e.target.checked });
}
+ onPasswordChange = e => {
+ const password = e.target.value;
+ const { passwordConfirmation } = this.state;
+ this.onInputChange(e);
+
+ if (password === passwordConfirmation) {
+ this.setState({ passwordMismatch: false });
+ }
+ }
+
+ onPasswordConfirmChange = e => {
+ const password = this.state.params.get('password');
+ const passwordConfirmation = e.target.value;
+ this.setState({ passwordConfirmation });
+
+ if (password === passwordConfirmation) {
+ this.setState({ passwordMismatch: false });
+ }
+ }
+
+ onPasswordConfirmBlur = e => {
+ this.setState({ passwordMismatch: !this.passwordsMatch() });
+ }
+
launchModal = () => {
const { dispatch, intl, needsConfirmation, needsApproval } = this.props;
@@ -113,9 +139,19 @@ class RegistrationForm extends ImmutablePureComponent {
}
}
+ passwordsMatch = () => {
+ const { params, passwordConfirmation } = this.state;
+ return params.get('password', '') === passwordConfirmation;
+ }
+
onSubmit = e => {
const { dispatch, inviteToken } = this.props;
+ if (!this.passwordsMatch()) {
+ this.setState({ passwordMismatch: true });
+ return;
+ }
+
const params = this.state.params.withMutations(params => {
// Locale for confirmation email
params.set('locale', this.props.locale);
@@ -159,7 +195,7 @@ class RegistrationForm extends ImmutablePureComponent {
render() {
const { instance, intl, supportsEmailList } = this.props;
- const { params } = this.state;
+ const { params, passwordConfirmation, passwordMismatch } = this.state;
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
return (
@@ -176,6 +212,7 @@ class RegistrationForm extends ImmutablePureComponent {
autoCapitalize='off'
pattern='^[a-zA-Z\d_-]+'
onChange={this.onInputChange}
+ value={params.get('username', '')}
required
/>