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-07-20 12:40:47 +08:00 · 2018-06-05 17:12:30 -06:00
parent 6b6e59791a
commit 41fab3e11c
31 changed files with 4967 additions and 4639 deletions
@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './AddEmailForm.css';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+import InputField from '../InputField';
+import { t } from 'plugin-api/beta/client/services';
+import {
+  composeValidators,
+  required,
+  verifyEmail,
+  confirmEmail,
+  verifyPassword,
+  confirmPassword,
+} from 'coral-framework/lib/validation';
+import { Form, Field } from 'react-final-form';
+
+const AddEmailContent = ({ onSubmit }) => (
+  <div>
+    <h4 className={styles.title}>
+      {t('talk-plugin-local-auth.add_email.content.title')}
+    </h4>
+    <p className={styles.description}>
+      {t('talk-plugin-local-auth.add_email.content.description')}
+    </p>
+    <ul className={styles.list}>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          {t('talk-plugin-local-auth.add_email.content.item_1')}
+        </span>
+      </li>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          {t('talk-plugin-local-auth.add_email.content.item_2')}
+        </span>
+      </li>
+      <li className={styles.item}>
+        <Icon name="done" className={styles.itemIcon} />
+        <span className={styles.text}>
+          {t('talk-plugin-local-auth.add_email.content.item_3')}
+        </span>
+      </li>
+    </ul>
+    <Form onSubmit={onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Field
+            name="email"
+            validate={composeValidators(required, verifyEmail)}
+          >
+            {({ input, meta }) => (
+              <InputField
+                label={t(
+                  'talk-plugin-local-auth.add_email.enter_email_address'
+                )}
+                name={input.name}
+                onChange={input.onChange}
+                value={input.value}
+                errorMsg={meta.error}
+                showError={meta.touched}
+                columnDisplay
+              />
+            )}
+          </Field>
+          <Field name="confirmEmail" validate={confirmEmail('email')}>
+            {({ input, meta }) => (
+              <InputField
+                label={t(
+                  'talk-plugin-local-auth.add_email.confirm_email_address'
+                )}
+                name={input.name}
+                onChange={input.onChange}
+                value={input.value}
+                errorMsg={meta.error}
+                showError={meta.touched}
+                columnDisplay
+              />
+            )}
+          </Field>
+          <Field
+            name="password"
+            validate={composeValidators(required, verifyPassword)}
+          >
+            {({ input, meta }) => (
+              <InputField
+                label={t('talk-plugin-local-auth.add_email.insert_password')}
+                name={input.name}
+                onChange={input.onChange}
+                value={input.value}
+                errorMsg={meta.error}
+                showError={meta.touched}
+                type="password"
+                columnDisplay
+              />
+            )}
+          </Field>
+          <Field name="confirmPassword" validate={confirmPassword('password')}>
+            {({ input, meta }) => (
+              <InputField
+                label={t('talk-plugin-local-auth.add_email.confirm_password')}
+                name={input.name}
+                onChange={input.onChange}
+                value={input.value}
+                errorMsg={meta.error}
+                showError={meta.touched}
+                type="password"
+                columnDisplay
+              />
+            )}
+          </Field>
+          <div>
+            <button className={styles.button} disabled={submitting}>
+              {t('talk-plugin-local-auth.add_email.add_email_address')}
+            </button>
+          </div>
+        </form>
+      )}
+    </Form>
+  </div>
+);
+
+AddEmailContent.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default AddEmailContent;