fix: initialize reset password inside componentDidMount (#2111)

src/connection/database/reset_password.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Screen from '../../core/screen';
 import ResetPasswordPane from './reset_password_pane';
-import { authWithUsername, hasScreen } from './index';
+import { hasScreen } from './index';
 import { cancelResetPassword, resetPassword } from './actions';
 import { renderPasswordResetConfirmation } from './password_reset_confirmation';
 import { databaseUsernameValue } from '../../connection/database/index';
@@ -12,30 +12,37 @@ import { swap, updateEntity } from '../../store/index';
 import { isEmail, setEmail } from '../../field/email';
 import { getField } from '../../field';
 
-const Component = ({ i18n, model }) => {
-  const headerText = i18n.html('forgotPasswordInstructions') || null;
-  const header = headerText && <p>{headerText}</p>;
-  const connectionResolver = l.connectionResolver(model);
+class Component extends React.Component {
+  componentDidMount() {
+    const { model } = this.props;
+    const connectionResolver = l.connectionResolver(model);
 
-  // When using a custom connection resolver, `usernameStyle` is always 'username' (as opposed to 'email').
-  // If the user has entered an email address as the username, and a custom resolver is being used, copy the
-  // value from the 'username' field to the 'email' field so that `EmailPane` can render it.
-  if (connectionResolver) {
-    const field = getField(model, 'username');
-    const value = field.get('value', '');
+    // When using a custom connection resolver, `usernameStyle` is always 'username' (as opposed to 'email').
+    // If the user has entered an email address as the username, and a custom resolver is being used, copy the
+    // value from the 'username' field to the 'email' field so that `EmailPane` can render it.
+    if (connectionResolver) {
+      const field = getField(model, 'username');
+      const value = field.get('value', '');
 
-    swap(updateEntity, 'lock', l.id(model), setEmail, isEmail(value, false) ? value : '', false);
+      swap(updateEntity, 'lock', l.id(model), setEmail, isEmail(value, false) ? value : '', false);
+    }
   }
 
-  return (
-    <ResetPasswordPane
-      emailInputPlaceholder={i18n.str('emailInputPlaceholder')}
-      header={header}
-      i18n={i18n}
-      lock={model}
-    />
-  );
-};
+  render() {
+    const { i18n, model } = this.props;
+    const headerText = i18n.html('forgotPasswordInstructions') || null;
+    const header = headerText && <p>{headerText}</p>;
+
+    return (
+      <ResetPasswordPane
+        emailInputPlaceholder={i18n.str('emailInputPlaceholder')}
+        header={header}
+        i18n={i18n}
+        lock={model}
+      />
+    );
+  }
+}
 
 export default class ResetPassword extends Screen {
   constructor() {