Adding translations

plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.js

@@ -7,7 +7,6 @@ import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import isEqual from 'lodash/isEqual';
 import { t } from 'plugin-api/beta/client/services';
-import Form from './Form';
 import InputField from './InputField';
 import { getErrorMessages } from 'coral-framework/utils';
 
@@ -148,7 +147,7 @@ class ChangePassword extends React.Component {
           {t('talk-plugin-auth.change_password.change_password')}
         </h3>
         {editing && (
-          <Form className="talk-plugin-auth--change-password-form">
+          <form className="talk-plugin-auth--change-password-form">
             <InputField
               id="oldPassword"
               label="Old Password"
@@ -188,7 +187,7 @@ class ChangePassword extends React.Component {
               errorMsg={errors['confirmNewPassword']}
               showErrors
             />
-          </Form>
+          </form>
         )}
         {editing ? (
           <div className={styles.actions}>

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js

@@ -2,17 +2,14 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './ChangeUsername.css';
-import { Icon, Button } from 'plugin-api/beta/client/components/ui';
+import { Button } from 'plugin-api/beta/client/components/ui';
 import ChangeUsernameDialog from './ChangeUsernameDialog';
-import validate from 'coral-framework/helpers/validate';
-import errorMsj from 'coral-framework/helpers/error';
 import { t } from 'plugin-api/beta/client/services';
 import InputField from './InputField';
 
 const initialState = {
   editing: false,
   showDialog: false,
-  errors: {},
   formData: {},
 };
 
@@ -54,63 +51,15 @@ class ChangeUsername extends React.Component {
     // savechanges
   };
 
-  fieldValidation = (value, type, name) => {
-    if (!value.length) {
-      this.addError({
-        [name]: t('talk-plugin-auth.change_password.required_field'),
-      });
-    } else if (!validate[type](value)) {
-      this.addError({ [name]: errorMsj[type] });
-    } else {
-      this.removeError(name);
-    }
-  };
-
-  hasError = err => {
-    return Object.keys(this.state.errors).indexOf(err) !== -1;
-  };
-
-  addError = err => {
-    this.setState(
-      ({ errors }) => ({
-        errors: { ...errors, ...err },
-      }),
-      () => {
-        console.log(this.state);
-      }
-    );
-  };
-
-  removeError = errKey => {
-    this.setState(
-      state => {
-        const { [errKey]: _, ...errors } = state.errors;
-        return {
-          errors,
-        };
-      },
-      () => {
-        console.log(this.state);
-      }
-    );
-  };
-
   onChange = e => {
-    const { name, value, type, dataset: { validationType } } = e.target;
+    const { name, value } = e.target;
 
-    this.setState(
-      state => ({
-        formData: {
-          ...state.formData,
-          [name]: value,
-        },
-      }),
-      () => {
-        const fieldType = !validationType ? type : validationType;
-        this.fieldValidation(value, fieldType, name);
-        // the username cannot be the  same
-      }
-    );
+    this.setState(state => ({
+      formData: {
+        ...state.formData,
+        [name]: value,
+      },
+    }));
   };
 
   closeDialog = () => {
@@ -139,7 +88,7 @@ class ChangeUsername extends React.Component {
 
         {editing ? (
           <div className={styles.content}>
-            <ul className={styles.detailList}>
+            <div className={styles.detailList}>
               <InputField
                 icon="person"
                 id="newUsername"
@@ -150,7 +99,7 @@ class ChangeUsername extends React.Component {
                 validationType="username"
               >
                 <span className={styles.bottomText}>
-                  Usernames can be changed every 14 days
+                  {t('talk-plugin-auth.change_username.change_username_note')}
                 </span>
               </InputField>
               <InputField
@@ -161,7 +110,7 @@ class ChangeUsername extends React.Component {
                 validationType="username"
                 disabled
               />
-            </ul>
+            </div>
           </div>
         ) : (
           <div className={styles.content}>
@@ -180,10 +129,10 @@ class ChangeUsername extends React.Component {
               onClick={this.onSave}
               disabled={!this.state.formData.newUsername}
             >
-              Save
+              {t('talk-plugin-auth.change_username.save')}
             </Button>
             <a className={styles.cancelButton} onClick={this.cancel}>
-              Cancel
+              {t('talk-plugin-auth.change_username.cancel')}
             </a>
           </div>
         ) : (
@@ -193,7 +142,7 @@ class ChangeUsername extends React.Component {
               icon="settings"
               onClick={this.enableEditing}
             >
-              Edit Profile
+              {t('talk-plugin-auth.change_username.edit_profile')}
             </Button>
           </div>
         )}

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ChangeUsernameDialog.css';
 import InputField from './InputField';
-import Form from './Form';
 import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
 
 class ChangeUsernameDialog extends React.Component {
@@ -51,7 +51,7 @@ class ChangeUsernameDialog extends React.Component {
               New Username: {this.props.formData.newUsername}
             </span>
           </div>
-          <Form>
+          <form>
             <InputField
               id="confirmNewUsername"
               label="Re-enter new username"
@@ -71,7 +71,7 @@ class ChangeUsernameDialog extends React.Component {
                 days
               </span>
             </InputField>
-          </Form>
+          </form>
           <div className={styles.bottomActions}>
             <Button className={styles.cancel}>Cancel</Button>
             <Button
@@ -87,4 +87,12 @@ class ChangeUsernameDialog extends React.Component {
   }
 }
 
+ChangeUsernameDialog.propTypes = {
+  closeDialog: PropTypes.func,
+  showDialog: PropTypes.func,
+  onChange: PropTypes.func,
+  username: PropTypes.string,
+  formData: PropTypes.object,
+};
+
 export default ChangeUsernameDialog;

plugins/talk-plugin-auth/client/profile-settings/components/Form.css

@@ -1,5 +0,0 @@
-.detailList {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}

plugins/talk-plugin-auth/client/profile-settings/components/Form.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import styles from './Form.css';
-import PropTypes from 'prop-types';
-
-const Form = ({ children, className = '' }) => (
-  <form className={className}>
-    <ul className={styles.detailList}>{children}</ul>
-  </form>
-);
-
-Form.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-};
-
-export default Form;

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

@@ -140,6 +140,11 @@ en:
       cancel: "Cancel"
       edit: "Edit"
       changed_password_msg: "Changed Password - Your password has been successfully changed"
+    change_username: 
+      change_username_note: "Usernames can be changed every 14 days"
+      save: "Save"
+      edit_profile: "Edit Profile"
+      cancel: "Cancel"
 de:
   talk-plugin-auth:
     login:
@@ -240,6 +245,8 @@ es:
       cancel: "Cancelar"
       edit: "Editar"
       changed_password_msg: "Contraseña Actualizada - Tu contraseña ha sido exitosamente actualizada"
+    change_username: 
+      change_username_note: "Usernames can be changed every 14 days"
 fr:
   talk-plugin-auth:
     login: