translations

plugins/talk-plugin-local-auth/client/components/AddEmailContent.js

@@ -4,6 +4,7 @@ import styles from './AddEmailAddressDialog.css';
 import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 import InputField from './InputField';
+import { t } from 'plugin-api/beta/client/services';
 
 const AddEmailContent = ({
   formData,
@@ -13,29 +14,29 @@ const AddEmailContent = ({
   onChange,
 }) => (
   <div>
-    <h4 className={styles.title}>Add an Email Address</h4>
+    <h4 className={styles.title}>
+      {t('talk-plugin-local-auth.add_email.content.title')}
+    </h4>
     <p className={styles.description}>
-      For your added security, we require users to add an email address to their
-      accounts. Your email address will be used to:
+      {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}>
-          Receive updates regarding any changes to your account (email address,
-          username, password, etc.)
+          {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}>
-          Allow you to download your comments.
+          {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}>
-          Send comment notifications that you have chosen to receive.
+          {t('talk-plugin-local-auth.add_email.content.item_3')}
         </span>
       </li>
     </ul>
@@ -43,20 +44,20 @@ const AddEmailContent = ({
     <form autoComplete="off">
       <InputField
         id="emailAddress"
-        label="Enter Email Address:"
+        label={t('talk-plugin-local-auth.add_email.enter_email_address')}
         name="emailAddress"
         type="email"
         onChange={onChange}
         defaultValue=""
         hasError={!formData.emailAddress || errors.emailAddress}
-        errorMsg={'Invalid email address'}
+        errorMsg={t('talk-plugin-local-auth.add_email.invalid_email_address')}
         showError={showErrors}
         columnDisplay
         showSuccess={false}
       />
       <InputField
         id="confirmEmailAddress"
-        label="Confirm Email Address:"
+        label={t('talk-plugin-local-auth.add_email.confirm_email_address')}
         name="confirmEmailAddress"
         type="email"
         onChange={onChange}
@@ -65,20 +66,19 @@ const AddEmailContent = ({
           !formData.emailAddress ||
           formData.emailAddress !== formData.confirmEmailAddress
         }
-        errorMsg={'Email address does not match'}
+        errorMsg={t('talk-plugin-local-auth.add_email.email_does_not_match')}
         showError={showErrors}
         columnDisplay
         showSuccess={false}
       />
       <InputField
         id="confirmPassword"
-        label="Insert Password:"
+        label={t('talk-plugin-local-auth.add_email.insert_password')}
         name="confirmPassword"
         type="password"
         onChange={onChange}
         defaultValue=""
         hasError={!formData.confirmPassword}
-        errorMsg={'Confirm Password'}
         showError={showErrors}
         columnDisplay
         showSuccess={false}
@@ -88,7 +88,7 @@ const AddEmailContent = ({
           className={cn(styles.button, styles.proceed)}
           onClick={confirmChanges}
         >
-          Add Email Address
+          {t('talk-plugin-local-auth.add_email.add_email_address')}
         </a>
       </div>
     </form>

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

@@ -2,21 +2,24 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './AddEmailAddressDialog.css';
+import { t } from 'plugin-api/beta/client/services';
 
 const EmailAddressAdded = ({ done }) => (
   <div>
-    <h4 className={styles.title}>Email Address Added</h4>
+    <h4 className={styles.title}>
+      {t('talk-plugin-local-auth.add_email.added.title')}
+    </h4>
     <p className={styles.description}>
-      Your email address has been added to your account.
+      {t('talk-plugin-local-auth.add_email.added.description')}
     </p>
-    <strong>Need to change your email address?</strong>
+    <strong>{t('talk-plugin-local-auth.add_email.added.subtitle')}</strong>
     <p className={styles.description}>
-      You can change your account settings by visiting{' '}
-      <strong>My Profile {'>'} Settings</strong>.
+      {t('talk-plugin-local-auth.add_email.added.description_2')}{' '}
+      <strong>{t('talk-plugin-local-auth.add_email.added.path')}</strong>.
     </p>
     <div className={styles.actions}>
       <a className={cn(styles.button, styles.proceed)} onClick={done}>
-        Done
+        {t('talk-plugin-local-auth.add_email.done')}
       </a>
     </div>
   </div>

plugins/talk-plugin-local-auth/client/components/InputField.css

@@ -42,11 +42,10 @@
 }
 
 .detailLabel {
-  color: #4c4c4d;
+  color: #4C4C4D;
   font-size: 1em;
   display: block;
   margin-bottom: 4px;
-  font-weight: bold;
 }
 
 .detailValue {
@@ -78,4 +77,4 @@
 
 .warningIcon {
   color: #FA4643;
-}
+}

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

@@ -2,18 +2,19 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './AddEmailAddressDialog.css';
+import { t } from 'plugin-api/beta/client/services';
 
 const VerifyEmailAddress = ({ emailAddress, done }) => (
   <div>
-    <h4 className={styles.title}>Verify Your Email Address</h4>
+    <h4 className={styles.title}>
+      {t('talk-plugin-local-auth.add_email.verify.title')}
+    </h4>
     <p className={styles.description}>
-      We’ve sent an email to {emailAddress} to verify your account. You must
-      verify your email address so that it can be used for account change
-      confirmations and notifications.
+      {t('talk-plugin-local-auth.add_email.verify.description', emailAddress)}
     </p>
     <div className={styles.actions}>
       <a className={cn(styles.button, styles.proceed)} onClick={done}>
-        Done
+        {t('talk-plugin-local-auth.add_email.done')}
       </a>
     </div>
   </div>

plugins/talk-plugin-local-auth/client/translations.yml

@@ -35,6 +35,29 @@ en:
       change_email_msg: "Email Address Changed - Your email address has been successfully changed. This email address will now be used for signing in and email notifications."
       changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
       change_username_attempt: "Username can't be updated. Usernames can only be changed every 14 days."
+    add_email:
+      add_email_address: "Add Email Address"
+      enter_email_address: "Enter Email Address:"
+      invalid_email_address: "Invalid Email address"
+      confirm_email_address: "Confirm Email Address:"
+      email_does_not_match: "Email Address does not match"
+      insert_password: "Insert Password:"
+      done: "done"
+      content:
+        title: "Add an Email Address"
+        description: "For your added security, we require users to add an email address to their accounts. Your email address will be used to:"
+        item_1: "Receive updates regarding any changes to your account (email address, username, password, etc.)"
+        item_2: "Allow you to download your comments."
+        item_3: "Send comment notifications that you have chosen to receive."
+      verify:
+        title: "Verify Your Email Address"
+        description:  "We’ve sent an email to {0} to verify your account. You must verify your email address so that it can be used for account change confirmations and notifications."
+      added: 
+        title: "Email Address Added"
+        description: "Your email address has been added to your account."
+        subtitle: "Need to change your email address?"
+        description_2: "You can change your account settings by visiting"
+        path: "My Profile > Settings"
 es:
   talk-plugin-local-auth:
     change_password: