1 files changed, 158 insertions, 0 deletions

diff --git a/src/containers/settings/EditUserScreen.tsx b/src/containers/settings/EditUserScreen.tsx
new file mode 100644
index 000000000..6ab288d6f
--- /dev/null
+++ b/src/containers/settings/EditUserScreen.tsx
@@ -0,0 +1,158 @@
+import { Component, ReactElement } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { StoresProps } from 'src/@types/ferdium-components.types';
+import { FormFields } from 'src/@types/mobx-form.types';
+import Form from '../../lib/Form';
+import EditUserForm from '../../components/settings/user/EditUserForm';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+import { required, email, minLength } from '../../helpers/validation-helpers';
+
+const messages = defineMessages({
+  firstname: {
+    id: 'settings.user.form.firstname',
+    defaultMessage: 'First Name',
+  },
+  lastname: {
+    id: 'settings.user.form.lastname',
+    defaultMessage: 'Last Name',
+  },
+  email: {
+    id: 'settings.user.form.email',
+    defaultMessage: 'Email',
+  },
+  accountTypeLabel: {
+    id: 'settings.user.form.accountType.label',
+    defaultMessage: 'Account type',
+  },
+  accountTypeIndividual: {
+    id: 'settings.user.form.accountType.individual',
+    defaultMessage: 'Individual',
+  },
+  accountTypeNonProfit: {
+    id: 'settings.user.form.accountType.non-profit',
+    defaultMessage: 'Non-Profit',
+  },
+  accountTypeCompany: {
+    id: 'settings.user.form.accountType.company',
+    defaultMessage: 'Company',
+  },
+  currentPassword: {
+    id: 'settings.user.form.currentPassword',
+    defaultMessage: 'Current password',
+  },
+  newPassword: {
+    id: 'settings.user.form.newPassword',
+    defaultMessage: 'New password',
+  },
+});
+
+interface EditUserScreenProps extends StoresProps {
+  intl: any;
+}
+
+class EditUserScreen extends Component<EditUserScreenProps> {
+  componentWillUnmount() {
+    this.props.actions.user.resetStatus();
+  }
+
+  onSubmit(userData) {
+    const { update } = this.props.actions.user;
+
+    update({ userData });
+
+    document.querySelector('#form')?.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  prepareForm(user) {
+    const { intl } = this.props;
+
+    const config: FormFields = {
+      fields: {
+        firstname: {
+          label: intl.formatMessage(messages.firstname),
+          placeholder: intl.formatMessage(messages.firstname),
+          value: user.firstname,
+          validators: [required],
+        },
+        lastname: {
+          label: intl.formatMessage(messages.lastname),
+          placeholder: intl.formatMessage(messages.lastname),
+          value: user.lastname,
+          validators: [required],
+        },
+        email: {
+          label: intl.formatMessage(messages.email),
+          placeholder: intl.formatMessage(messages.email),
+          value: user.email,
+          validators: [required, email],
+        },
+        accountType: {
+          value: user.accountType,
+          validators: [required],
+          label: intl.formatMessage(messages.accountTypeLabel),
+          options: [
+            {
+              value: 'individual',
+              label: intl.formatMessage(messages.accountTypeIndividual),
+            },
+            {
+              value: 'non-profit',
+              label: intl.formatMessage(messages.accountTypeNonProfit),
+            },
+            {
+              value: 'company',
+              label: intl.formatMessage(messages.accountTypeCompany),
+            },
+          ],
+        },
+        organization: {
+          label: intl.formatMessage(messages.accountTypeCompany),
+          placeholder: intl.formatMessage(messages.accountTypeCompany),
+          value: user.organization,
+        },
+        oldPassword: {
+          label: intl.formatMessage(messages.currentPassword),
+          type: 'password',
+          validators: [minLength(6)],
+        },
+        newPassword: {
+          label: intl.formatMessage(messages.newPassword),
+          type: 'password',
+          validators: [minLength(6)],
+        },
+      },
+    };
+
+    // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript
+    // support has been released.
+    return new Form(config);
+  }
+
+  render(): ReactElement {
+    const { user } = this.props.stores;
+
+    if (user.getUserInfoRequest.isExecuting) {
+      return <div>Loading...</div>;
+    }
+
+    const form = this.prepareForm(user.data);
+
+    return (
+      <ErrorBoundary>
+        <EditUserForm
+          status={user.actionStatus}
+          form={form}
+          isSaving={user.updateUserInfoRequest.isExecuting}
+          onSubmit={d => this.onSubmit(d)}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default injectIntl<'intl', EditUserScreenProps>(
+  inject('stores', 'actions')(observer(EditUserScreen)),
+);