🔀 merge from mobile-examples

client/components/Nav.jsx

@@ -9,7 +9,7 @@ import i18next from 'i18next';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
-import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
+import { setAllAccessibleOutput, setLanguage } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
@@ -72,7 +72,6 @@ class Nav extends React.PureComponent {
     document.removeEventListener('mousedown', this.handleClick, false);
     document.removeEventListener('keydown', this.closeDropDown, false);
   }
-
   setDropdown(dropdown) {
     this.setState({
       dropdownOpen: dropdown
@@ -170,7 +169,7 @@ class Nav extends React.PureComponent {
   }
 
   handleLangSelection(event) {
-    i18next.changeLanguage(event.target.value);
+    this.props.setLanguage(event.target.value);
     this.props.showToast(1500);
     this.props.setToastText('Toast.LangChange');
     this.setDropdown('none');
@@ -808,8 +807,8 @@ Nav.propTypes = {
   params: PropTypes.shape({
     username: PropTypes.string
   }),
-  t: PropTypes.func.isRequired
-
+  t: PropTypes.func.isRequired,
+  setLanguage: PropTypes.func.isRequired,
 };
 
 Nav.defaultProps = {
@@ -839,7 +838,8 @@ const mapDispatchToProps = {
   ...projectActions,
   ...toastActions,
   logoutUser,
-  setAllAccessibleOutput
+  setAllAccessibleOutput,
+  setLanguage
 };
 
 export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));

client/components/__test__/Nav.test.jsx

@@ -45,7 +45,8 @@ describe('Nav', () => {
     rootFile: {
       id: 'root-file'
     },
-    t: jest.fn()
+    t: jest.fn(),
+    setLanguage: jest.fn()
   };
 
   it('renders correctly', () => {

client/constants.js

@@ -93,6 +93,7 @@ export const SHOW_TOAST = 'SHOW_TOAST';
 export const HIDE_TOAST = 'HIDE_TOAST';
 export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
 export const SET_THEME = 'SET_THEME';
+export const SET_LANGUAGE = 'SET_LANGUAGE';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';

client/modules/App/App.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import getConfig from '../../utils/getConfig';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
+import { setLanguage } from '../IDE/actions/preferences';
 
 class App extends React.Component {
   constructor(props, context) {
@@ -25,6 +26,10 @@ class App extends React.Component {
     if (locationWillChange && !shouldSkipRemembering) {
       this.props.setPreviousPath(this.props.location.pathname);
     }
+
+    if (this.props.language !== nextProps.language) {
+      this.props.setLanguage(nextProps.language, { persistPreference: false });
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -52,18 +57,22 @@ App.propTypes = {
     }),
   }).isRequired,
   setPreviousPath: PropTypes.func.isRequired,
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string,
   theme: PropTypes.string,
 };
 
 App.defaultProps = {
   children: null,
-  theme: 'light',
+  language: null,
+  theme: 'light'
 };
 
 const mapStateToProps = state => ({
   theme: state.preferences.theme,
+  language: state.preferences.language,
 });
 
-const mapDispatchToProps = { setPreviousPath };
+const mapDispatchToProps = { setPreviousPath, setLanguage };
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

client/modules/IDE/actions/preferences.js

@@ -1,3 +1,4 @@
+import i18next from 'i18next';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 
@@ -210,3 +211,22 @@ export function setAllAccessibleOutput(value) {
   };
 }
 
+export function setLanguage(value, { persistPreference = true } = {}) {
+  return (dispatch, getState) => {
+    i18next.changeLanguage(value);
+    dispatch({
+      type: ActionTypes.SET_LANGUAGE,
+      language: value
+    });
+    const state = getState();
+    if (persistPreference && state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          language: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+

client/modules/IDE/pages/IDEView.jsx

@@ -35,6 +35,7 @@ import AddToCollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
 import { CollectionSearchbar } from '../components/Searchbar';
 
+
 function getTitle(props) {
   const { id } = props.project;
   return id ? `p5.js Web Editor | ${props.project.name}` : 'p5.js Web Editor';
@@ -167,13 +168,11 @@ class IDEView extends React.Component {
         warnIfUnsavedChanges(this.props));
     }
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleGlobalKeydown, false);
     clearTimeout(this.autosaveInterval);
     this.autosaveInterval = null;
   }
-
   handleGlobalKeydown(e) {
     // 83 === s
     if (
@@ -428,6 +427,7 @@ class IDEView extends React.Component {
                     expandConsole={this.props.expandConsole}
                     clearConsole={this.props.clearConsole}
                     cmController={this.cmController}
+                    language={this.props.preferences.language}
                   />
                 </div>
               </section>
@@ -585,6 +585,7 @@ IDEView.propTypes = {
     soundOutput: PropTypes.bool.isRequired,
     theme: PropTypes.string.isRequired,
     autorefresh: PropTypes.bool.isRequired,
+    language: PropTypes.string.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,

client/modules/IDE/reducers/preferences.js

@@ -1,5 +1,7 @@
+import i18next from 'i18next';
 import * as ActionTypes from '../../../constants';
 
+
 const initialState = {
   fontSize: 18,
   autosave: true,
@@ -10,7 +12,8 @@ const initialState = {
   gridOutput: false,
   soundOutput: false,
   theme: 'light',
-  autorefresh: false
+  autorefresh: false,
+  language: 'en-US'
 };
 
 const preferences = (state = initialState, action) => {
@@ -37,6 +40,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, { autorefresh: action.value });
     case ActionTypes.SET_LINE_NUMBERS:
       return Object.assign({}, state, { lineNumbers: action.value });
+    case ActionTypes.SET_LANGUAGE:
+      return Object.assign({}, state, { language: action.language });
     default:
       return state;
   }

client/modules/User/actions.js

@@ -2,6 +2,7 @@ import { browserHistory } from 'react-router';
 import * as ActionTypes from '../../constants';
 import apiClient from '../../utils/apiClient';
 import { showErrorModal, justOpenedProject } from '../IDE/actions/ide';
+import { setLanguage } from '../IDE/actions/preferences';
 import { showToast, setToastText } from '../IDE/actions/toast';
 
 export function authError(error) {
@@ -59,6 +60,7 @@ export function validateAndLoginUser(previousPath, formProps, dispatch) {
           type: ActionTypes.SET_PREFERENCES,
           preferences: response.data.preferences
         });
+        setLanguage(response.data.preferences.language, { persistPreference: false });
         dispatch(justOpenedProject());
         browserHistory.push(previousPath);
         resolve();
@@ -80,8 +82,8 @@ export function getUser() {
           type: ActionTypes.SET_PREFERENCES,
           preferences: response.data.preferences
         });
-      })
-      .catch((error) => {
+        setLanguage(response.data.preferences.language, { persistPreference: false });
+      }).catch((error) => {
         const { response } = error;
         const message = response.message || response.data.error;
         dispatch(authError(message));

client/modules/User/components/SignupForm.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';
@@ -20,12 +21,10 @@ function SignupForm(props) {
       onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}
     >
       <p className="form__field">
-        <label htmlFor="username" className="form__label">
-          User Name
-        </label>
+        <label htmlFor="username" className="form__label">{props.t('SignupForm.Title')}</label>
         <input
           className="form__input"
-          aria-label="username"
+          aria-label={props.t('SignupForm.TitleARIA')}
           type="text"
           id="username"
           {...domOnlyProps(username)}
@@ -35,12 +34,10 @@ function SignupForm(props) {
         )}
       </p>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">
-          Email
-        </label>
+        <label htmlFor="email" className="form__label">{props.t('SignupForm.Email')}</label>
         <input
           className="form__input"
-          aria-label="email"
+          aria-label={props.t('SignupForm.EmailARIA')}
           type="text"
           id="email"
           {...domOnlyProps(email)}
@@ -50,12 +47,10 @@ function SignupForm(props) {
         )}
       </p>
       <p className="form__field">
-        <label htmlFor="password" className="form__label">
-          Password
-        </label>
+        <label htmlFor="password" className="form__label">{props.t('SignupForm.Password')}</label>
         <input
           className="form__input"
-          aria-label="password"
+          aria-label={props.t('SignupForm.PasswordARIA')}
           type="password"
           id="password"
           {...domOnlyProps(password)}
@@ -65,13 +60,11 @@ function SignupForm(props) {
         )}
       </p>
       <p className="form__field">
-        <label htmlFor="confirm password" className="form__label">
-          Confirm Password
-        </label>
+        <label htmlFor="confirm password" className="form__label">{props.t('SignupForm.ConfirmPassword')}</label>
         <input
           className="form__input"
           type="password"
-          aria-label="confirm password"
+          aria-label={props.t('SignupForm.ConfirmPasswordARIA')}
           id="confirm password"
           {...domOnlyProps(confirmPassword)}
         />
@@ -79,8 +72,10 @@ function SignupForm(props) {
           <span className="form-error">{confirmPassword.error}</span>
         )}
       </p>
-      <Button type="submit" disabled={submitting || invalid || pristine}>
-        Sign Up
+      <Button
+        type="submit"
+        disabled={submitting || invalid || pristine}
+      >{props.t('SignupForm.SubmitSignup')}
       </Button>
     </form>
   );
@@ -99,6 +94,7 @@ SignupForm.propTypes = {
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
   previousPath: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 SignupForm.defaultProps = {
@@ -107,4 +103,4 @@ SignupForm.defaultProps = {
   invalid: false,
 };
 
-export default SignupForm;
+export default withTranslation()(SignupForm);

client/modules/User/pages/SignupView.jsx

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { Link, browserHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
 import * as UserActions from '../actions';
 import SignupForm from '../components/SignupForm';
 import apiClient from '../../../utils/apiClient';
@@ -26,19 +27,19 @@ class SignupView extends React.Component {
         <Nav layout="dashboard" />
         <main className="form-container">
           <Helmet>
-            <title>p5.js Web Editor | Signup</title>
+            <title>{this.props.t('SignupView.Title')}</title>
           </Helmet>
           <div className="form-container__content">
-            <h2 className="form-container__title">Sign Up</h2>
+            <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
             <SignupForm {...this.props} />
-            <h2 className="form-container__divider">Or</h2>
+            <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
             <div className="form-container__stack">
               <SocialAuthButton service={SocialAuthButton.services.github} />
               <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
             <p className="form__navigation-options">
-              Already have an account?&nbsp;
-              <Link className="form__login-button" to="/login">Log In</Link>
+              {this.props.t('SignupView.AlreadyHave')}
+              <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
             </p>
           </div>
         </main>
@@ -108,7 +109,8 @@ SignupView.propTypes = {
   previousPath: PropTypes.string.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 SignupView.defaultProps = {
@@ -117,11 +119,11 @@ SignupView.defaultProps = {
   }
 };
 
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'signup',
   fields: ['username', 'email', 'password', 'confirmPassword'],
   onSubmitFail,
   validate: validateSignup,
   asyncValidate,
   asyncBlurFields: ['username', 'email']
-}, mapStateToProps, mapDispatchToProps)(SignupView);
+}, mapStateToProps, mapDispatchToProps)(SignupView));

server/models/user.js

@@ -65,7 +65,8 @@ const userSchema = new Schema({
     gridOutput: { type: Boolean, default: false },
     soundOutput: { type: Boolean, default: false },
     theme: { type: String, default: 'light' },
-    autorefresh: { type: Boolean, default: false }
+    autorefresh: { type: Boolean, default: false },
+    language: { type: String, default: 'en-US' }
   },
   totalSize: { type: Number, default: 0 }
 }, { timestamps: true, usePushEach: true });

translations/locales/en-US/translations.json

@@ -289,5 +289,23 @@
     "ConfirmPassword": "Confirm Password",
     "ConfirmPasswordARIA": "Confirm Password",
     "SubmitSetNewPassword": "Set New Password"
+  },
+  "SignupForm": {
+    "Title": "User Name",
+    "TitleARIA": "username",
+    "Email": "Email",
+    "EmailARIA": "email",
+    "Password": "Password",
+    "PasswordARIA": "password",
+    "ConfirmPassword": "Confirm Password",
+    "ConfirmPasswordARIA": "Confirm password",
+    "SubmitSignup": "Sign Up"
+  },
+  "SignupView": {
+    "Title": "p5.js Web Editor | Signup",
+    "Description": "Sign Up",
+    "Or": "Or",
+    "AlreadyHave": "Already have an account?",
+    "Login": "Log In"
   }
 }

translations/locales/es-419/translations.json

@@ -289,5 +289,23 @@
     "ConfirmPassword": "Confirmar Contraseña",
     "ConfirmPasswordARIA": "Confirmar contraseña",
     "SubmitSetNewPassword": "Crear Nueva Contraseña"
+  },
+  "SignupForm": {
+    "Title": "Identificación",
+    "TitleARIA": "Identificación",
+    "Email": "Correo electrónico",
+    "EmailARIA": "correo electrónico",
+    "Password": "Contraseña",
+    "PasswordARIA": "contraseña",
+    "ConfirmPassword": "Confirma tu contraseña",
+    "ConfirmPasswordARIA": "Confirma tu contraseña",
+    "SubmitSignup": "Registráte"
+  },
+  "SignupView": {
+    "Title": " Editor Web p5.js | Registráte",
+    "Description": "Registráte",
+    "Or": "o",
+    "AlreadyHave": "¿Ya tienes cuenta? ",
+    "Login": "Ingresa"
   }
 }