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

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/AddEmailForm.css

@@ -0,0 +1,54 @@
+.title {
+  font-size: 1.3em;
+  margin: 15px 0;
+  text-align: center;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 20px;
+  margin: 0;
+  margin-bottom: 15px;
+}
+
+.list {
+  padding: 0;
+  margin: 20px 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  margin-bottom: 20px;
+
+  .itemIcon {
+    flex-grow: 0;
+  }
+
+  .text {
+    flex-grow: 1;
+    padding-left: 10px;
+  }
+
+  > i.itemIcon {
+    font-size: 1.3em;
+  }
+}
+
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+  font-size: 1em;
+  background-color: #3498DB;
+  color: white;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/AddEmailForm.js

@@ -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;

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/Dialog.css

@@ -0,0 +1,11 @@
+.root {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 320px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+  font-family: Helvetica,Helvetica Neue,Verdana,sans-serif;
+  color:#3B4A53;
+}

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/Dialog.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Dialog } from 'plugin-api/beta/client/components/ui';
+import styles from './Dialog.css';
+
+export default props => <Dialog className={styles.root} {...props} />;

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/EmailAddressAdded.css

@@ -0,0 +1,29 @@
+.title {
+  font-size: 1.3em;
+  margin: 15px 0;
+  text-align: center;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 20px;
+  margin: 0;
+  margin-bottom: 15px;
+}
+
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  height: 30px;
+  font-size: 0.9em;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+  font-size: 1em;
+  background-color: #3498DB;
+  color: white;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/EmailAddressAdded.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './EmailAddressAdded.css';
+import { t } from 'plugin-api/beta/client/services';
+
+const EmailAddressAdded = ({ onDone }) => (
+  <div>
+    <h4 className={styles.title}>
+      {t('talk-plugin-local-auth.add_email.added.title')}
+    </h4>
+    <p className={styles.description}>
+      {t('talk-plugin-local-auth.add_email.added.description')}
+    </p>
+    <strong>{t('talk-plugin-local-auth.add_email.added.subtitle')}</strong>
+    <p className={styles.description}>
+      {t('talk-plugin-local-auth.add_email.added.description_2')}{' '}
+      <strong>{t('talk-plugin-local-auth.add_email.added.path')}</strong>.
+    </p>
+    <div>
+      <button className={styles.button} onClick={onDone}>
+        {t('talk-plugin-local-auth.add_email.done')}
+      </button>
+    </div>
+  </div>
+);
+
+EmailAddressAdded.propTypes = {
+  onDone: PropTypes.func.isRequired,
+};
+
+export default EmailAddressAdded;

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/VerifyEmailAddress.css

@@ -0,0 +1,29 @@
+.title {
+  font-size: 1.3em;
+  margin: 15px 0;
+  text-align: center;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 20px;
+  margin: 0;
+  margin-bottom: 15px;
+}
+
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  height: 30px;
+  font-size: 0.9em;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+  font-size: 1em;
+  background-color: #3498DB;
+  color: white;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/VerifyEmailAddress.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './VerifyEmailAddress.css';
+import { t } from 'plugin-api/beta/client/services';
+
+const VerifyEmailAddress = ({ emailAddress, onDone }) => (
+  <div>
+    <h4 className={styles.title}>
+      {t('talk-plugin-local-auth.add_email.verify.title')}
+    </h4>
+    <p className={styles.description}>
+      {t('talk-plugin-local-auth.add_email.verify.description', emailAddress)}
+    </p>
+    <div>
+      <button className={styles.button} onClick={onDone}>
+        {t('talk-plugin-local-auth.add_email.done')}
+      </button>
+    </div>
+  </div>
+);
+
+VerifyEmailAddress.propTypes = {
+  emailAddress: PropTypes.string.isRequired,
+  onDone: PropTypes.func.isRequired,
+};
+
+export default VerifyEmailAddress;

plugins/talk-plugin-local-auth/client/components/AddEmailAddress/index.js

@@ -0,0 +1,4 @@
+export { default as AddEmailForm } from './AddEmailForm';
+export { default as Dialog } from './Dialog';
+export { default as EmailAddressAdded } from './EmailAddressAdded';
+export { default as VerifyEmailAddress } from './VerifyEmailAddress';