From 4b12f2f2f6aab4b4782281a9883502e4aac2664a Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 12 Aug 2020 14:50:31 -0400
Subject: [PATCH 1/9] Add minor styling fixes for MobileDashboardView

---
 client/modules/Mobile/MobileDashboardView.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 7bae38f4..ba51ad02 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -62,7 +62,6 @@ const ContentWrapper = styled(Content)`
   tbody { height: ${remSize(48)}; }
 
   .sketches-table-container {
-    padding-bottom: ${remSize(160)};
     background: ${prop('SketchList.background')};
     }
   .sketches-table__row {
@@ -91,6 +90,19 @@ const ContentWrapper = styled(Content)`
 
   .loader-container { position: fixed ; padding-bottom: 32% }
 
+  .sketches-table thead th {
+    background-color: transparent;
+  }
+
+  .asset-table thead th {
+    height: initial;
+    align-self: center;
+  }
+
+  .asset-table thead tr {
+    height: ${remSize(32)}
+  }
+
 `;
 
 const Subheader = styled.div`

From 9f3e083c1726bc990e15b23534629cc4a4310ccd Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 12 Aug 2020 17:13:03 -0300
Subject: [PATCH 2/9] :construction: move drop arrow to top of card, unhide
 CollectionList createdAt

---
 .../components/CollectionList/CollectionList.jsx    |  2 +-
 .../components/CollectionList/CollectionListRow.jsx |  2 +-
 client/modules/Mobile/MobileDashboardView.jsx       | 13 +++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index c161d2bb..4a933f41 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -143,7 +143,7 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
+                {this._renderFieldHeader('createdAt', 'Date Created')}
                 {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index f3119632..de20cea9 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -213,7 +213,7 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
+        <td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
         <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
         <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index ba51ad02..b33bca42 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -55,7 +55,12 @@ const ContentWrapper = styled(Content)`
   
   tbody td              { justify-self: start; text-align: start; padding: 0 }
   tbody td:nth-child(2) { justify-self: start;  text-align: start; padding-left: ${remSize(12)}};
-  tbody td:last-child   { justify-self: end;    text-align: end; };
+  tbody td:last-child   {
+    justify-self: end;
+    text-align: end;
+    grid-row-start: 1;
+    grid-column-start: 3;
+  };
 
   .sketch-list__dropdown-column { width: auto; };
 
@@ -78,13 +83,13 @@ const ContentWrapper = styled(Content)`
   };
 
   thead tr {
-    grid-template-columns: 1fr 1fr 1fr 0fr;
+    grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr;
   }
 
   tbody tr {
     padding: ${remSize(8)};
     border-radius: ${remSize(4)};
-    grid-template-columns: 5fr 5fr 1fr;
+    grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr;
     grid-template-areas: "name name name" "content content content";
   }
 
@@ -180,7 +185,7 @@ const MobileDashboard = ({ params, location }) => {
       </Header>
 
 
-      <ContentWrapper slimheader>
+      <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3}>
         <Subheader>
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}

From 69acd3af6720c089239340e58fefe74d8719ebcb Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 12 Aug 2020 17:42:14 -0300
Subject: [PATCH 3/9] :construction: add gap to dashboard cards

---
 client/modules/Mobile/MobileDashboardView.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index b33bca42..bce0f454 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -27,6 +27,7 @@ const EXAMPLE_USERNAME = 'p5';
 const ContentWrapper = styled(Content)`
   table {
     table-layout: fixed;
+    margin-bottom: ${remSize(120)}
   }
   
   td ,thead button {
@@ -91,6 +92,7 @@ const ContentWrapper = styled(Content)`
     border-radius: ${remSize(4)};
     grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr;
     grid-template-areas: "name name name" "content content content";
+    grid-row-gap: ${remSize(12)}
   }
 
   .loader-container { position: fixed ; padding-bottom: 32% }

From ff40de36ca6711127182959fcfbf06ab0c0a7d5f Mon Sep 17 00:00:00 2001
From: ov <omar.verduga@gmail.com>
Date: Thu, 13 Aug 2020 11:12:02 +0100
Subject: [PATCH 4/9] Spanish Translation: Reset password Form and View (#1545)

* Reset Password Form using login view translation keys
* reduxFormUtils.js with i18 functionality to translate validations
---
 .../User/components/ResetPasswordForm.jsx     | 15 ++++---
 .../modules/User/pages/ResetPasswordView.jsx  | 19 ++++----
 client/utils/reduxFormUtils.js                | 31 ++++++-------
 translations/locales/en-US/translations.json  | 32 ++++++++++++--
 translations/locales/es-419/translations.json | 44 ++++++++++++++-----
 5 files changed, 96 insertions(+), 45 deletions(-)

diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
index df96bd79..87155f43 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/client/modules/User/components/ResetPasswordForm.jsx
@@ -1,20 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 import Button from '../../../common/Button';
 
 function ResetPasswordForm(props) {
   const {
-    fields: { email }, handleSubmit, submitting, invalid, pristine
+    fields: { email }, handleSubmit, submitting, invalid, pristine, t
   } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email used for registration</label>
+        <label htmlFor="email" className="form__label">{t('ResetPasswordForm.Email')}</label>
         <input
           className="form__input"
-          aria-label="email"
+          aria-label={t('ResetPasswordForm.EmailARIA')}
           type="text"
           id="email"
           {...domOnlyProps(email)}
@@ -24,7 +24,7 @@ function ResetPasswordForm(props) {
       <Button
         type="submit"
         disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate}
-      >Send Password Reset Email
+      >{t('ResetPasswordForm.Submit')}
       </Button>
     </form>
   );
@@ -41,7 +41,8 @@ ResetPasswordForm.propTypes = {
   pristine: PropTypes.bool,
   user: PropTypes.shape({
     resetPasswordInitiate: PropTypes.bool
-  }).isRequired
+  }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 ResetPasswordForm.defaultProps = {
@@ -50,4 +51,4 @@ ResetPasswordForm.defaultProps = {
   invalid: false
 };
 
-export default ResetPasswordForm;
+export default withTranslation()(ResetPasswordForm);
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 8ff7dac1..46d0b517 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import * as UserActions from '../actions';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
@@ -23,19 +24,18 @@ function ResetPasswordView(props) {
       <Nav layout="dashboard" />
       <div className={resetPasswordClass}>
         <Helmet>
-          <title>p5.js Web Editor | Reset Password</title>
+          <title>{props.t('ResetPasswordView.Title')}</title>
         </Helmet>
         <div className="form-container__content">
-          <h2 className="form-container__title">Reset Your Password</h2>
+          <h2 className="form-container__title">{props.t('ResetPasswordView.Reset')}</h2>
           <ResetPasswordForm {...props} />
           <p className="reset-password__submitted">
-            Your password reset email should arrive shortly. If you don&apos;t see it, check
-            in your spam folder as sometimes it can end up there.
+            {props.t('ResetPasswordView.Submitted')}
           </p>
           <p className="form__navigation-options">
-            <Link className="form__login-button" to="/login">Log In</Link>
-            &nbsp;or&nbsp;
-            <Link className="form__signup-button" to="/signup">Sign Up</Link>
+            <Link className="form__login-button" to="/login">{props.t('ResetPasswordView.Login')}</Link>
+            &nbsp;{props.t('ResetPasswordView.LoginOr')}&nbsp;
+            <Link className="form__signup-button" to="/signup">{props.t('ResetPasswordView.SignUp')}</Link>
           </p>
         </div>
       </div>
@@ -48,6 +48,7 @@ ResetPasswordView.propTypes = {
   user: PropTypes.shape({
     resetPasswordInitiate: PropTypes.bool
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -60,8 +61,8 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UserActions, dispatch);
 }
 
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'reset-password',
   fields: ['email'],
   validate: validateResetPassword
-}, mapStateToProps, mapDispatchToProps)(ResetPasswordView);
+}, mapStateToProps, mapDispatchToProps)(ResetPasswordView));
diff --git a/client/utils/reduxFormUtils.js b/client/utils/reduxFormUtils.js
index 8ff4b0a9..27d23a9d 100644
--- a/client/utils/reduxFormUtils.js
+++ b/client/utils/reduxFormUtils.js
@@ -1,4 +1,5 @@
 /* eslint-disable */
+import i18n from 'i18next';
 export const domOnlyProps = ({
   initialValue,
   autofill,
@@ -20,19 +21,19 @@ const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))
 
 function validateNameEmail(formProps, errors) {
   if (!formProps.username) {
-    errors.username = 'Please enter a username.';
+    errors.username = i18n.t('ReduxFormUtils.errorEmptyUsername');
   } else if (!formProps.username.match(/^.{1,20}$/)) {
-    errors.username = 'Username must be less than 20 characters.';
+    errors.username = i18n.t('ReduxFormUtils.errorLongUsername');
   } else if (!formProps.username.match(/^[a-zA-Z0-9._-]{1,20}$/)) {
-    errors.username = 'Username must only consist of numbers, letters, periods, dashes, and underscores.';
+    errors.username = i18n.t('ReduxFormUtils.errorValidUsername');
   }
 
   if (!formProps.email) {
-    errors.email = 'Please enter an email.';
+    errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
   } else if (
     // eslint-disable-next-line max-len
     !formProps.email.match(EMAIL_REGEX)) {
-    errors.email = 'Please enter a valid email address.';
+    errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');
   }
 }
 
@@ -42,10 +43,10 @@ export function validateSettings(formProps) {
   validateNameEmail(formProps, errors);
 
   if (formProps.currentPassword && !formProps.newPassword) {
-    errors.newPassword = 'Please enter a new password or leave the current password empty.';
+    errors.newPassword = i18n.t('ReduxFormUtils.errorNewPassword');
   }
   if (formProps.newPassword && formProps.newPassword.length < 6) {
-    errors.newPassword = 'Password must be at least 6 characters';
+    errors.newPassword = i18n.t('ReduxFormUtils.errorShortPassword');
   }
   return errors;
 }
@@ -53,10 +54,10 @@ export function validateSettings(formProps) {
 export function validateLogin(formProps) {
   const errors = {};
   if (!formProps.email) {
-    errors.email = 'Please enter an email';
+    errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
   }
   if (!formProps.password) {
-    errors.password = 'Please enter a password';
+    errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');
   }
   return errors;
 }
@@ -67,17 +68,17 @@ export function validateSignup(formProps) {
   validateNameEmail(formProps, errors);
 
   if (!formProps.password) {
-    errors.password = 'Please enter a password';
+    errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');
   }
   if (formProps.password && formProps.password.length < 6) {
-    errors.password = 'Password must be at least 6 characters';
+    errors.password = i18n.t('ReduxFormUtils.errorShortPassword');
   }
   if (!formProps.confirmPassword) {
-    errors.confirmPassword = 'Please enter a password confirmation';
+    errors.confirmPassword = i18n.t('ReduxFormUtils.errorConfirmPassword');
   }
 
   if (formProps.password !== formProps.confirmPassword && formProps.confirmPassword) {
-    errors.confirmPassword = 'Passwords must match';
+    errors.confirmPassword = i18n.t('ReduxFormUtils.errorPasswordMismatch');
   }
 
   return errors;
@@ -85,11 +86,11 @@ export function validateSignup(formProps) {
 export function validateResetPassword(formProps) {
   const errors = {};
   if (!formProps.email) {
-    errors.email = 'Please enter an email.';
+    errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
   } else if (
     // eslint-disable-next-line max-len
     !formProps.email.match(EMAIL_REGEX)) {
-    errors.email = 'Please enter a valid email address.';
+    errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');
   }
   return errors;
 }
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 652eece4..aa8638c2 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -183,21 +183,20 @@
     "Error": "Error",
     "Save": "Save",
     "p5logoARIA": "p5.js Logo"
-
   },
   "IDEView": {
     "SubmitFeedback": "Submit Feedback"
   },
   "NewFileModal": {
     "Title": "Create File",
-     "CloseButtonARIA": "Close New File Modal",
+    "CloseButtonARIA": "Close New File Modal",
     "EnterName": "Please enter a name",
     "InvalidType": "Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert."
   },
   "NewFileForm": {
-  "AddFileSubmit": "Add File",
+    "AddFileSubmit": "Add File",
     "Placeholder": "Name"
-},
+  },
   "NewFolderModal": {
     "Title": "Create Folder",
     "CloseButtonARIA": "Close New Folder Modal",
@@ -208,5 +207,30 @@
   "NewFolderForm": {
     "AddFolderSubmit": "Add Folder",
     "Placeholder": "Name"
+  },
+  "ResetPasswordForm": {
+    "Email": "Email used for registration",
+    "EmailARIA": "email",
+    "Submit": "Send Password Reset Email"
+  },
+  "ResetPasswordView": {
+    "Title": "p5.js Web Editor | Reset Password",
+    "Reset": "Reset Your Password",
+    "Submitted": "Your password reset email should arrive shortly. If you don't see it, check\n            in your spam folder as sometimes it can end up there.",
+    "Login": "Log In",
+    "LoginOr": "or",
+    "SignUp": "Sign Up"
+  },
+  "ReduxFormUtils": {
+    "errorInvalidEmail": "Please enter a valid email address",
+    "errorEmptyEmail": "Please enter an email",
+    "errorPasswordMismatch": "Passwords must match",
+    "errorEmptyPassword": "Please enter a password",
+    "errorShortPassword": "Password must be at least 6 characters",
+    "errorConfirmPassword": "Please enter a password confirmation",
+    "errorNewPassword": "Please enter a new password or leave the current password empty.",
+    "errorEmptyUsername": "Please enter a username.",
+    "errorLongUsername": "Username must be less than 20 characters.",
+    "errorValidUsername": "Username must only consist of numbers, letters, periods, dashes, and underscores."
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 5f3efaf7..672dccb9 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -188,8 +188,8 @@
     "SubmitFeedback": "Enviar retroalimentación"
   },
   "NewFileModal": {
-  "Title": "Crear Archivo",
-  "CloseButtonARIA": "Cerrar diálogo de crear archivo",
+    "Title": "Crear Archivo",
+    "CloseButtonARIA": "Cerrar diálogo de crear archivo",
     "EnterName": "Por favor introduce un nombre",
     "InvalidType": "Tipo de archivo inválido. Las extensiones válidas son .js, .css, .json, .txt, .csv, .tsv, .frag y .vert."
   },
@@ -198,18 +198,42 @@
     "Placeholder": "Nombre"
   },
   "NewFolderModal": {
-  "Title": "Crear Directorio",
-  "CloseButtonARIA": "Cerrar Diálogo de Nuevo Directorio",
-  "EnterName": "Por favor introduce un nombre",
-  "EmptyName": " El nombre del directorio no debe contener solo espacios vacíos",
-  "InvalidExtension": "El nombre del directorio no debe contener una extensión"
-},
+    "Title": "Crear Directorio",
+    "CloseButtonARIA": "Cerrar Diálogo de Nuevo Directorio",
+    "EnterName": "Por favor introduce un nombre",
+    "EmptyName": " El nombre del directorio no debe contener solo espacios vacíos",
+    "InvalidExtension": "El nombre del directorio no debe contener una extensión"
+  },
   "NewFolderForm": {
     "AddFolderSubmit": "Agregar Directorio",
     "Placeholder": "Nombre"
+  },
+  "ResetPasswordForm": {
+    "Email": "Correo electrónico usado al registrarse",
+    "EmailARIA": "correo electrónico",
+    "Submit": "Enviar correo para regenerar contraseña"
+  },
+  "ResetPasswordView": {
+    "Title": "Editor Web p5.js | Regenerar Contraseña",
+    "Reset": "Regenerar Contraseña",
+    "Submitted": "Your password reset email should arrive shortly. If you don't see it, check\n            in your spam folder as sometimes it can end up there.",
+    "Login": "Ingresa",
+    "LoginOr": "o",
+    "SignUp": "Registráte"
+  },
+  "ReduxFormUtils": {
+    "errorInvalidEmail": "Por favor introduce un correo electrónico válido",
+    "errorEmptyEmail": "Por favor introduce un correo electrónico",
+    "errorPasswordMismatch": "Las contraseñas deben coincidir",
+    "errorEmptyPassword": "Por favor introduce una contraseña",
+    "errorShortPassword": "La contraseña debe tener al menos 6 caracteres",
+    "errorConfirmPassword": "Por favor confirma una contraseña",
+    "errorNewPassword": "Por favor introduce una nueva contraseña o deja la actual contraseña vacía",
+    "errorEmptyUsername": "Por favor introduce tu identificación",
+    "errorLongUsername": "La identificación debe ser menor a 20 caracteres.",
+    "errorValidUsername": "La identificación debe consistir solamente de números, letras, puntos, guiones y guiones bajos."
+
   }
 }
 
 
-
-

From 236cdac7eda8b3d448e6c7e563a22be2cd92bc0f Mon Sep 17 00:00:00 2001
From: ov <omar.verduga@gmail.com>
Date: Thu, 13 Aug 2020 13:25:57 +0100
Subject: [PATCH 5/9] Spanish Translation Account form and New Password (#1547)

* Translations From ReduxFormUtils
* Translations for Account, AiKey and New Password
* NewPasswordForm
---
 client/modules/User/components/APIKeyForm.jsx | 29 ++++-----
 client/modules/User/components/APIKeyList.jsx | 15 ++---
 .../modules/User/components/AccountForm.jsx   | 31 +++++-----
 .../User/components/NewPasswordForm.jsx       | 18 +++---
 client/modules/User/pages/AccountView.jsx     | 22 ++++---
 client/modules/User/pages/NewPasswordView.jsx | 21 ++++---
 translations/locales/en-US/translations.json  | 57 ++++++++++++++++++
 translations/locales/es-419/translations.json | 60 ++++++++++++++++++-
 8 files changed, 187 insertions(+), 66 deletions(-)

diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index cb99dcde..73c24c81 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import Button from '../../../common/Button';
 import { PlusIcon } from '../../../common/icons';
 import CopyableInput from '../../IDE/components/CopyableInput';
@@ -12,7 +11,7 @@ export const APIKeyPropType = PropTypes.shape({
   token: PropTypes.object,
   label: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
-  lastUsedAt: PropTypes.string,
+  lastUsedAt: PropTypes.string
 });
 
 class APIKeyForm extends React.Component {
@@ -39,7 +38,7 @@ class APIKeyForm extends React.Component {
   }
 
   removeKey(key) {
-    const message = `Are you sure you want to delete "${key.label}"?`;
+    const message = this.props.t('APIKeyForm.ConfirmDelete', { key_label: key.label });
 
     if (window.confirm(message)) {
       this.props.removeApiKey(key.id);
@@ -51,10 +50,10 @@ class APIKeyForm extends React.Component {
 
     if (hasApiKeys) {
       return (
-        <APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} />
+        <APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} t={this.props.t} />
       );
     }
-    return <p>You have no exsiting tokens.</p>;
+    return <p>{this.props.t('APIKeyForm.NoTokens')}</p>;
   }
 
   render() {
@@ -63,20 +62,18 @@ class APIKeyForm extends React.Component {
     return (
       <div className="api-key-form">
         <p className="api-key-form__summary">
-          Personal Access Tokens act like your password to allow automated
-          scripts to access the Editor API. Create a token for each script
-          that needs access.
+          {this.props.t('APIKeyForm.Summary')}
         </p>
 
         <div className="api-key-form__section">
-          <h3 className="api-key-form__title">Create new token</h3>
+          <h3 className="api-key-form__title">{this.props.t('APIKeyForm.CreateToken')}</h3>
           <form className="form form--inline" onSubmit={this.addKey}>
-            <label htmlFor="keyLabel" className="form__label form__label--hidden ">What is this token for?</label>
+            <label htmlFor="keyLabel" className="form__label form__label--hidden ">{this.props.t('APIKeyForm.TokenLabel')}</label>
             <input
               className="form__input"
               id="keyLabel"
               onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
-              placeholder="What is this token for? e.g. Example import script"
+              placeholder={this.props.t('APIKeyForm.TokenPlaceholder')}
               type="text"
               value={this.state.keyLabel}
             />
@@ -86,17 +83,16 @@ class APIKeyForm extends React.Component {
               label="Create new key"
               type="submit"
             >
-              Create
+              {this.props.t('APIKeyForm.CreateTokenSubmit')}
             </Button>
           </form>
 
           {
             keyWithToken && (
               <div className="api-key-form__new-token">
-                <h4 className="api-key-form__new-token__title">Your new access token</h4>
+                <h4 className="api-key-form__new-token__title">{this.props.t('APIKeyForm.NewTokenTitle')}</h4>
                 <p className="api-key-form__new-token__info">
-                  Make sure to copy your new personal access token now.
-                  You won’t be able to see it again!
+                  {this.props.t('APIKeyForm.NewTokenInfo')}
                 </p>
                 <CopyableInput label={keyWithToken.label} value={keyWithToken.token} />
               </div>
@@ -105,7 +101,7 @@ class APIKeyForm extends React.Component {
         </div>
 
         <div className="api-key-form__section">
-          <h3 className="api-key-form__title">Existing tokens</h3>
+          <h3 className="api-key-form__title">{this.props.t('APIKeyForm.ExistingTokensTitle')}</h3>
           {this.renderApiKeys()}
         </div>
       </div>
@@ -117,6 +113,7 @@ APIKeyForm.propTypes = {
   apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
   createApiKey: PropTypes.func.isRequired,
   removeApiKey: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 export default APIKeyForm;
diff --git a/client/modules/User/components/APIKeyList.jsx b/client/modules/User/components/APIKeyList.jsx
index 9201aa4b..2c2e39ac 100644
--- a/client/modules/User/components/APIKeyList.jsx
+++ b/client/modules/User/components/APIKeyList.jsx
@@ -8,22 +8,22 @@ import { APIKeyPropType } from './APIKeyForm';
 
 import TrashCanIcon from '../../../images/trash-can.svg';
 
-function APIKeyList({ apiKeys, onRemove }) {
+function APIKeyList({ apiKeys, onRemove, t }) {
   return (
     <table className="api-key-list">
       <thead>
         <tr>
-          <th>Name</th>
-          <th>Created on</th>
-          <th>Last used</th>
-          <th>Actions</th>
+          <th>{t('APIKeyList.Name')}</th>
+          <th>{t('APIKeyList.Created')}</th>
+          <th>{t('APIKeyList.LastUsed')}</th>
+          <th>{t('APIKeyList.Actions')}</th>
         </tr>
       </thead>
       <tbody>
         {orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
           const lastUsed = key.lastUsedAt ?
             distanceInWordsToNow(new Date(key.lastUsedAt), { addSuffix: true }) :
-            'Never';
+            t('APIKeyList.Never');
 
           return (
             <tr key={key.id}>
@@ -34,7 +34,7 @@ function APIKeyList({ apiKeys, onRemove }) {
                 <button
                   className="api-key-list__delete-button"
                   onClick={() => onRemove(key)}
-                  aria-label="Delete API Key"
+                  aria-label={t('APIKeyList.DeleteARIA')}
                 >
                   <TrashCanIcon focusable="false" aria-hidden="true" />
                 </button>
@@ -50,6 +50,7 @@ function APIKeyList({ apiKeys, onRemove }) {
 APIKeyList.propTypes = {
   apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
   onRemove: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 export default APIKeyList;
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index e032448b..829beb0d 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 import Button from '../../../common/Button';
 
@@ -13,7 +14,8 @@ function AccountForm(props) {
     initiateVerification,
     submitting,
     invalid,
-    pristine
+    pristine,
+    t
   } = props;
 
   const handleInitiateVerification = (evt) => {
@@ -24,10 +26,10 @@ function AccountForm(props) {
   return (
     <form className="form" onSubmit={handleSubmit(props.updateSettings)}>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email</label>
+        <label htmlFor="email" className="form__label">{t('AccountForm.Email')}</label>
         <input
           className="form__input"
-          aria-label="email"
+          aria-label={t('AccountForm.EmailARIA')}
           type="text"
           id="email"
           {...domOnlyProps(email)}
@@ -38,16 +40,16 @@ function AccountForm(props) {
         user.verified !== 'verified' &&
           (
             <p className="form__context">
-              <span className="form__status">Unconfirmed.</span>
+              <span className="form__status">{t('AccountForm.Unconfirmed')}</span>
               {
                 user.emailVerificationInitiate === true ?
                   (
-                    <span className="form__status"> Confirmation sent, check your email.</span>
+                    <span className="form__status"> {t('AccountForm.EmailSent')}</span>
                   ) :
                   (
                     <Button
                       onClick={handleInitiateVerification}
-                    >Resend confirmation email
+                    >{t('AccountForm.Resend')}
                     </Button>
                   )
               }
@@ -55,10 +57,10 @@ function AccountForm(props) {
           )
       }
       <p className="form__field">
-        <label htmlFor="username" className="form__label">User Name</label>
+        <label htmlFor="username" className="form__label">{t('AccountForm.UserName')}</label>
         <input
           className="form__input"
-          aria-label="username"
+          aria-label={t('AccountForm.UserNameARIA')}
           type="text"
           id="username"
           defaultValue={username}
@@ -67,10 +69,10 @@ function AccountForm(props) {
         {username.touched && username.error && <span className="form-error">{username.error}</span>}
       </p>
       <p className="form__field">
-        <label htmlFor="current password" className="form__label">Current Password</label>
+        <label htmlFor="current password" className="form__label">{t('AccountForm.CurrentPassword')}</label>
         <input
           className="form__input"
-          aria-label="currentPassword"
+          aria-label={t('AccountForm.CurrentPasswordARIA')}
           type="password"
           id="currentPassword"
           {...domOnlyProps(currentPassword)}
@@ -82,10 +84,10 @@ function AccountForm(props) {
         }
       </p>
       <p className="form__field">
-        <label htmlFor="new password" className="form__label">New Password</label>
+        <label htmlFor="new password" className="form__label">{t('AccountForm.NewPassword')}</label>
         <input
           className="form__input"
-          aria-label="newPassword"
+          aria-label={t('AccountForm.NewPasswordARIA')}
           type="password"
           id="newPassword"
           {...domOnlyProps(newPassword)}
@@ -95,7 +97,7 @@ function AccountForm(props) {
       <Button
         type="submit"
         disabled={submitting || invalid || pristine}
-      >Save All Settings
+      >{t('AccountForm.SubmitSaveAllSettings')}
       </Button>
     </form>
   );
@@ -118,6 +120,7 @@ AccountForm.propTypes = {
   submitting: PropTypes.bool,
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 AccountForm.defaultProps = {
@@ -126,4 +129,4 @@ AccountForm.defaultProps = {
   invalid: false
 };
 
-export default AccountForm;
+export default withTranslation()(AccountForm);
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx
index 59240908..a08a2832 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.jsx
@@ -1,20 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 import Button from '../../../common/Button';
 
 function NewPasswordForm(props) {
   const {
-    fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine
+    fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine,
+    t
   } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}>
       <p className="form__field">
-        <label htmlFor="password" className="form__label">Password</label>
+        <label htmlFor="password" className="form__label">{t('NewPasswordForm.Title')}</label>
         <input
           className="form__input"
-          aria-label="password"
+          aria-label={t('NewPasswordForm.TitleARIA')}
           type="password"
           id="Password"
           {...domOnlyProps(password)}
@@ -22,11 +23,11 @@ function NewPasswordForm(props) {
         {password.touched && password.error && <span className="form-error">{password.error}</span>}
       </p>
       <p className="form__field">
-        <label htmlFor="confirm password" className="form__label">Confirm Password</label>
+        <label htmlFor="confirm password" className="form__label">{t('NewPasswordForm.ConfirmPassword')}</label>
         <input
           className="form__input"
           type="password"
-          aria-label="confirm password"
+          aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
           id="confirm password"
           {...domOnlyProps(confirmPassword)}
         />
@@ -36,7 +37,7 @@ function NewPasswordForm(props) {
           <span className="form-error">{confirmPassword.error}</span>
         }
       </p>
-      <Button type="submit" disabled={submitting || invalid || pristine}>Set New Password</Button>
+      <Button type="submit" disabled={submitting || invalid || pristine}>{t('NewPasswordForm.SubmitSetNewPassword')}</Button>
     </form>
   );
 }
@@ -54,6 +55,7 @@ NewPasswordForm.propTypes = {
   params: PropTypes.shape({
     reset_password_token: PropTypes.string,
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 NewPasswordForm.defaultProps = {
@@ -62,4 +64,4 @@ NewPasswordForm.defaultProps = {
   submitting: false
 };
 
-export default NewPasswordForm;
+export default withTranslation()(NewPasswordForm);
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index fff8d331..f9f46cc8 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -4,6 +4,7 @@ import { reduxForm } from 'redux-form';
 import { bindActionCreators } from 'redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import AccountForm from '../components/AccountForm';
 import apiClient from '../../../utils/apiClient';
@@ -16,9 +17,11 @@ function SocialLoginPanel(props) {
   return (
     <React.Fragment>
       <AccountForm {...props} />
-      <h2 className="form-container__divider">Social Login</h2>
+      {/* eslint-disable-next-line react/prop-types */}
+      <h2 className="form-container__divider">{props.t('AccountView.SocialLogin')}</h2>
       <p className="account__social-text">
-        Use your GitHub or Google account to log into the p5.js Web Editor.
+        {/* eslint-disable-next-line react/prop-types */}
+        {props.t('AccountView.SocialLoginDescription')}
       </p>
       <div className="account__social-stack">
         <SocialAuthButton service={SocialAuthButton.services.github} />
@@ -39,21 +42,21 @@ class AccountView extends React.Component {
     return (
       <div className="account-settings__container">
         <Helmet>
-          <title>p5.js Web Editor | Account Settings</title>
+          <title>{this.props.t('AccountView.Title')}</title>
         </Helmet>
 
         <Nav layout="dashboard" />
 
         <main className="account-settings">
           <header className="account-settings__header">
-            <h1 className="account-settings__title">Account Settings</h1>
+            <h1 className="account-settings__title">{this.props.t('AccountView.Settings')}</h1>
           </header>
           {accessTokensUIEnabled &&
             <Tabs className="account__tabs">
               <TabList>
                 <div className="tabs__titles">
-                  <Tab><h4 className="tabs__title">Account</h4></Tab>
-                  {accessTokensUIEnabled && <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>}
+                  <Tab><h4 className="tabs__title">{this.props.t('AccountView.AccountTab')}</h4></Tab>
+                  {accessTokensUIEnabled && <Tab><h4 className="tabs__title">{this.props.t('AccountView.AccessTokensTab')}</h4></Tab>}
                 </div>
               </TabList>
               <TabPanel>
@@ -107,13 +110,14 @@ function asyncValidate(formProps, dispatch, props) {
 
 AccountView.propTypes = {
   previousPath: PropTypes.string.isRequired,
-  theme: PropTypes.string.isRequired
+  theme: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'updateAllSettings',
   fields: ['username', 'email', 'currentPassword', 'newPassword'],
   validate: validateSettings,
   asyncValidate,
   asyncBlurFields: ['username', 'email', 'currentPassword']
-}, mapStateToProps, mapDispatchToProps)(AccountView);
+}, mapStateToProps, mapDispatchToProps)(AccountView));
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index 1760cc32..d1b27106 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -4,6 +4,8 @@ import { reduxForm } from 'redux-form';
 import classNames from 'classnames';
 import { bindActionCreators } from 'redux';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import NewPasswordForm from '../components/NewPasswordForm';
 import * as UserActions from '../actions';
 import Nav from '../../../components/Nav';
@@ -20,13 +22,13 @@ function NewPasswordView(props) {
       <Nav layout="dashboard" />
       <div className={newPasswordClass}>
         <Helmet>
-          <title>p5.js Web Editor | New Password</title>
+          <title>{props.t('NewPasswordView.Title')}</title>
         </Helmet>
         <div className="form-container__content">
-          <h2 className="form-container__title">Set a New Password</h2>
+          <h2 className="form-container__title">{props.t('NewPasswordView.Description')}</h2>
           <NewPasswordForm {...props} />
           <p className="new-password__invalid">
-            The password reset token is invalid or has expired.
+            {props.t('NewPasswordView.TokenInvalidOrExpired')}
           </p>
         </div>
       </div>
@@ -41,21 +43,22 @@ NewPasswordView.propTypes = {
   validateResetPasswordToken: PropTypes.func.isRequired,
   user: PropTypes.shape({
     resetPasswordInvalid: PropTypes.bool
-  }).isRequired
+  }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
   const errors = {};
 
   if (!formProps.password) {
-    errors.password = 'Please enter a password';
+    errors.password = i18next.t('NewPasswordView.EmptyPassword');
   }
   if (!formProps.confirmPassword) {
-    errors.confirmPassword = 'Please enter a password confirmation';
+    errors.confirmPassword = i18next.t('NewPasswordView.PasswordConfirmation');
   }
 
   if (formProps.password !== formProps.confirmPassword) {
-    errors.password = 'Passwords must match';
+    errors.password = i18next.t('NewPasswordView.PasswordMismatch');
   }
 
   return errors;
@@ -71,8 +74,8 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UserActions, dispatch);
 }
 
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'new-password',
   fields: ['password', 'confirmPassword'],
   validate
-}, mapStateToProps, mapDispatchToProps)(NewPasswordView);
+}, mapStateToProps, mapDispatchToProps)(NewPasswordView));
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index aa8638c2..c12d097c 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -232,5 +232,62 @@
     "errorEmptyUsername": "Please enter a username.",
     "errorLongUsername": "Username must be less than 20 characters.",
     "errorValidUsername": "Username must only consist of numbers, letters, periods, dashes, and underscores."
+  },
+  "NewPasswordView": {
+    "Title": "p5.js Web Editor | New Password",
+    "Description": "Set a New Password",
+    "TokenInvalidOrExpired": "The password reset token is invalid or has expired.",
+    "EmptyPassword": "Please enter a password",
+    "PasswordConfirmation": "Please enter a password confirmation",
+    "PasswordMismatch": "Passwords must match"
+  },
+  "AccountForm": {
+    "Email": "Email",
+    "EmailARIA": "email",
+    "Unconfirmed": "Unconfirmed.",
+    "EmailSent": "Confirmation sent, check your email.",
+    "Resend": "Resend confirmation email",
+    "UserName": "User Name",
+    "UserNameARIA": "Username",
+    "CurrentPassword": "Current Password",
+    "CurrentPasswordARIA": "Current Password",
+    "NewPassword": "New Password",
+    "NewPasswordARIA": "New Password",
+    "SubmitSaveAllSettings": "Save All Settings"
+  },
+  "AccountView": {
+    "SocialLogin": "Social Login",
+    "SocialLoginDescription": "Use your GitHub or Google account to log into the p5.js Web Editor.",
+    "Title": "p5.js Web Editor | Account Settings",
+    "Settings": "Account Settings",
+    "AccountTab": "Account",
+    "AccessTokensTab": "Access Tokens"
+  },
+  "APIKeyForm": {
+    "ConfirmDelete": "Are you sure you want to delete {{key_label}}?",
+    "Summary": "Personal Access Tokens act like your password to allow automated\n          scripts to access the Editor API. Create a token for each script\n          that needs access.",
+    "CreateToken": "Create new token",
+    "TokenLabel": "What is this token for?",
+    "TokenPlaceholder": "What is this token for? e.g. Example import script",
+    "CreateTokenSubmit": "Create",
+    "NoTokens": "You have no existing tokens.",
+    "NewTokenTitle": "Your new access token",
+    "NewTokenInfo": "Make sure to copy your new personal access token now.\n                  You won’t be able to see it again!",
+    "ExistingTokensTitle": "Existing tokens"
+  },
+  "APIKeyList": {
+    "Name": "Name",
+    "Created": "Created on",
+    "LastUsed": "Last used",
+    "Actions": "Actions",
+    "Never": "Never",
+    "DeleteARIA": "Delete API Key"
+  },
+  "NewPasswordForm": {
+    "Title": "Password",
+    "TitleARIA": "Password",
+    "ConfirmPassword": "Confirm Password",
+    "ConfirmPasswordARIA": "Confirm Password",
+    "SubmitSetNewPassword": "Set New Password"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 672dccb9..0104b718 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -232,8 +232,62 @@
     "errorEmptyUsername": "Por favor introduce tu identificación",
     "errorLongUsername": "La identificación debe ser menor a 20 caracteres.",
     "errorValidUsername": "La identificación debe consistir solamente de números, letras, puntos, guiones y guiones bajos."
-
+  },
+  "NewPasswordView": {
+    "Title": "Editor Web p5.js | Nueva Contraseña",
+    "Description": "Define una nueva contraseña",
+    "TokenInvalidOrExpired": "El token para regenerar la contraseña es inválido o ha expirado.",
+    "EmptyPassword": "Por favor introduce una contraseña",
+    "PasswordConfirmation": "Por favor confirma la contraseña",
+    "PasswordMismatch": "Las contraseña deben coincidir"
+  },
+  "AccountForm": {
+    "Email": "Correo Electrónico",
+    "EmailARIA": "correo electrónico",
+    "Unconfirmed": "Sin confirmar.",
+    "EmailSent": "Confirmación enviada, revisa tu correo electrónico.",
+    "Resend": "Reenviar correo de confirmación",
+    "UserName": "Nombre de Identificación",
+    "UserNameARIA": "Nombre de identificación",
+    "CurrentPassword": "Contraseña Actual",
+    "CurrentPasswordARIA": "Contraseña Actual",
+    "NewPassword": "Nueva Contraseña",
+    "NewPasswordARIA": "Nueva Contraseña",
+    "SubmitSaveAllSettings": "Guardar Todas Las Configuraciones"
+  },
+  "AccountView": {
+    "SocialLogin": "Identificacion usando redes sociales",
+    "SocialLoginDescription": "Usa tu cuenta de GitHub o Google para acceder al Editor Web de p5.js .",
+    "Title": "Editor Web p5.js | Configuración Cuenta",
+    "Settings": "Configuración de la Cuenta",
+    "AccountTab": "Cuenta",
+    "AccessTokensTab": "Tokens de acceso"
+  },
+  "APIKeyForm": {
+    "ConfirmDelete": "¿Estas seguro que quieres borrar {{key_label}}?",
+    "Summary": " Los Tokens de acceso personal actuan como tu contraseña para permitir\n  a scripts automáticos acceder al  API del Editor. Crea un token por cada script \n que necesite acceso.",
+    "CreateToken": "Crear nuevo token",
+    "TokenLabel": "¿Para que es este token?",
+    "TokenPlaceholder": "¿Para que es este token? p.e. Ejemplo para Importar un Archivo",
+    "CreateTokenSubmit": "Crear",
+    "NoTokens": "No tienes tokens.",
+    "NewTokenTitle": "Tu nuevo token de acceso",
+    "NewTokenInfo": "Asegurate de copiar tu token ahora mismo.\n ¡No podras verlo de nuevo!",
+    "ExistingTokensTitle": "Tokens existentes"
+  },
+  "APIKeyList": {
+    "Name": "Nombre",
+    "Created": "Creado en",
+    "LastUsed": "Usado por última vez",
+    "Actions": "Acciones",
+    "Never": "Nunca",
+    "DeleteARIA": "Borrar clave de API"
+  },
+  "NewPasswordForm": {
+    "Title": "Contraseña",
+    "TitleARIA": "Contraseña",
+    "ConfirmPassword": "Confirmar Contraseña",
+    "ConfirmPasswordARIA": "Confirmar contraseña",
+    "SubmitSetNewPassword": "Crear Nueva Contraseña"
   }
 }
-
-

From 03f28321be9f58b5fd69f6ead9dc9a4053ff2605 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 09:54:10 -0300
Subject: [PATCH 6/9] :ok_hand: hide header on assets list

---
 client/modules/Mobile/MobileDashboardView.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index bce0f454..270faee7 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -24,6 +24,7 @@ import Loader from '../App/components/loader';
 
 const EXAMPLE_USERNAME = 'p5';
 
+// @ghalestrilo 08/13/2020: I'm sorry
 const ContentWrapper = styled(Content)`
   table {
     table-layout: fixed;
@@ -85,6 +86,7 @@ const ContentWrapper = styled(Content)`
 
   thead tr {
     grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr;
+    ${props => props.noheader && 'display: none;'}
   }
 
   tbody tr {
@@ -187,7 +189,7 @@ const MobileDashboard = ({ params, location }) => {
       </Header>
 
 
-      <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3}>
+      <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3} noheader={panel === Tabs[2]}>
         <Subheader>
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}

From 2e34bd7ea35d5c45ea7ac6c3a2a6ac3d0513f257 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 15:52:51 -0300
Subject: [PATCH 7/9] :lipstick: omit 'Date' from header fields on mobile

---
 .../modules/IDE/components/CollectionList/CollectionList.jsx  | 4 ++--
 client/modules/IDE/components/SketchList.jsx                  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 4a933f41..9b9b3807 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -143,8 +143,8 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
               </tr>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 4aacd8c2..4940a495 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -437,8 +437,8 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('createdAt', `${mobile && 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile && 'Date '}Updated`)}
                 <th scope="col"></th>
               </tr>
             </thead>

From e181a741b150a9a815a1ee7e987191b16eeed677 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 16:07:46 -0300
Subject: [PATCH 8/9] :lipstick: omit 'Date' from header fields on mobile

---
 client/modules/IDE/components/SketchList.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 4940a495..d5f9d71d 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -437,8 +437,8 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', `${mobile && 'Date '}Created`)}
-                {this._renderFieldHeader('updatedAt', `${mobile && 'Date '}Updated`)}
+                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
                 <th scope="col"></th>
               </tr>
             </thead>

From cbae85fa518ffc1b561bea21c8386dad04705b31 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 16:17:23 -0300
Subject: [PATCH 9/9] :lipstick: reduce '# sketches' to 'Sketches' on
 collections list

---
 client/modules/IDE/components/CollectionList/CollectionList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 9b9b3807..1007ca97 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -145,7 +145,7 @@ class CollectionList extends React.Component {
                 {this._renderFieldHeader('name', 'Name')}
                 {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
                 {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
-                {this._renderFieldHeader('numItems', '# sketches')}
+                {this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
                 <th scope="col"></th>
               </tr>
             </thead>