Merge branch 'develop' into console-scroll-to-bottom

Author: IdoHartuv

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) {
@@ -23,6 +24,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) {
@@ -50,18 +55,22 @@ App.propTypes = {
     }),
   }).isRequired,
   setPreviousPath: PropTypes.func.isRequired,
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string,
   theme: PropTypes.string,
 };
 
 App.defaultProps = {
   children: null,
+  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';
@@ -144,13 +145,11 @@ class IDEView extends React.Component {
       this.props.router.setRouteLeaveHook(this.props.route, () => warnIfUnsavedChanges(this.props));
     }
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleGlobalKeydown, false);
     clearTimeout(this.autosaveInterval);
     this.autosaveInterval = null;
   }
-
   handleGlobalKeydown(e) {
     // 83 === s
     if (e.keyCode === 83 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
@@ -367,6 +366,7 @@ class IDEView extends React.Component {
                     expandConsole={this.props.expandConsole}
                     clearConsole={this.props.clearConsole}
                     cmController={this.cmController}
+                    language={this.props.preferences.language}
                   />
                 </div>
               </section>
@@ -527,7 +527,8 @@ IDEView.propTypes = {
     gridOutput: PropTypes.bool.isRequired,
     soundOutput: PropTypes.bool.isRequired,
     theme: PropTypes.string.isRequired,
-    autorefresh: PropTypes.bool.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';
@@ -13,44 +14,44 @@ function SignupForm(props) {
   return (
     <form className="form" 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)}
         />
         {username.touched && username.error && <span className="form-error">{username.error}</span>}
       </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)}
         />
         {email.touched && email.error && <span className="form-error">{email.error}</span>}
       </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)}
         />
         {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">{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)}
         />
@@ -63,7 +64,7 @@ function SignupForm(props) {
       <Button
         type="submit"
         disabled={submitting || invalid || pristine}
-      >Sign Up
+      >{props.t('SignupForm.SubmitSignup')}
       </Button>
     </form>
   );
@@ -81,7 +82,8 @@ SignupForm.propTypes = {
   submitting: PropTypes.bool,
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
-  previousPath: PropTypes.string.isRequired
+  previousPath: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 SignupForm.defaultProps = {
@@ -90,4 +92,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));