Introduce final form, i18n helper, validators and refactor AddEmailAddress (#1636)

* Introduce final form, validators and refactor AddEmailAddress * First i18n script * Sort locales * Add delete and copy action * Copy over available validator translations * Add comments * Export validations in plugin-api * Linting * yarn.lock * Sort locales * Drop unused translations * Add translations for validators * Add action drop-unused * Add comments * Add note about limitation * Fix desc
2026-08-14 12:50:17 +08:00 · 2018-06-05 17:12:30 -06:00
parent 6b6e59791a
commit 41fab3e11c
31 changed files with 4967 additions and 4639 deletions
@@ -1,11 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
 import { compose, gql } from 'react-apollo';
 import { bindActionCreators } from 'redux';
 import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
-import AddEmailAddressDialog from '../components/AddEmailAddressDialog';
 import { notify } from 'coral-framework/actions/notification';
 import { withAttachLocalAuth } from '../hocs';
 import { startAttach, finishAttach } from '../actions';
 import get from 'lodash/get';
+import { getErrorMessages } from 'coral-framework/utils';
+import { t } from 'plugin-api/beta/client/services';
+import {
+  Dialog,
+  AddEmailForm,
+  VerifyEmailAddress,
+  EmailAddressAdded,
+} from '../components/AddEmailAddress';
+
+class AddEmailAddressDialog extends React.Component {
+  state = {
+    step: 0,
+  };
+
+  componentDidMount() {
+    this.props.startAttach();
+  }
+
+  handleDone = () => {
+    this.props.finishAttach();
+  };
+
+  handleSubmit = async ({ email, password }) => {
+    const { attachLocalAuth } = this.props;
+    try {
+      await attachLocalAuth({
+        email,
+        password,
+      });
+
+      this.props.notify(
+        'success',
+        t('talk-plugin-local-auth.add_email.added.alert')
+      );
+      this.goToNextStep();
+    } catch (err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  goToNextStep = () => {
+    this.setState(({ step }) => ({
+      step: step + 1,
+    }));
+  };
+
+  render() {
+    const { step } = this.state;
+    const {
+      root: {
+        me: { email },
+        settings: { requireEmailConfirmation },
+      },
+    } = this.props;
+
+    return (
+      <Dialog open={true}>
+        {step === 0 && <AddEmailForm onSubmit={this.handleSubmit} />}
+        {step === 1 &&
+          !requireEmailConfirmation && (
+            <EmailAddressAdded onDone={this.handleDone} />
+          )}
+        {step === 1 &&
+          requireEmailConfirmation && (
+            <VerifyEmailAddress emailAddress={email} onDone={this.handleDone} />
+          )}
+      </Dialog>
+    );
+  }
+}
+
+AddEmailAddressDialog.propTypes = {
+  attachLocalAuth: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  startAttach: PropTypes.func.isRequired,
+  finishAttach: PropTypes.func.isRequired,
+  root: PropTypes.object,
+};

 const mapStateToProps = ({ talkPluginLocalAuth: state }) => ({
  inProgress: state.inProgress,