Merge branch 'feature/mobile-login' of https://github.com/ghalestrilo/p5.js-web-editor into feature/switch-mobile-desktop

client/modules/IDE/components/ErrorModal.jsx

@@ -1,15 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 class ErrorModal extends React.Component {
   forceAuthentication() {
     return (
       <p>
-        In order to save sketches, you must be logged in. Please&nbsp;
+        {this.props.t('ErrorModal.MessageLogin')}
-        <Link to="/login" onClick={this.props.closeModal}>Login</Link>
+        <Link to="/login" onClick={this.props.closeModal}> {this.props.t('ErrorModal.Login')}</Link>
-        &nbsp;or&nbsp;
+        {this.props.t('ErrorModal.LoginOr')}
-        <Link to="/signup" onClick={this.props.closeModal}>Sign Up</Link>.
+        <Link to="/signup" onClick={this.props.closeModal}>{this.props.t('ErrorModal.SignUp')}</Link>.
       </p>
     );
   }
@@ -17,8 +18,8 @@ class ErrorModal extends React.Component {
   staleSession() {
     return (
       <p>
-        It looks like you&apos;ve been logged out. Please&nbsp;
+        {this.props.t('ErrorModal.MessageLoggedOut')}
-        <Link to="/login" onClick={this.props.closeModal}>log in</Link>.
+        <Link to="/login" onClick={this.props.closeModal}>{this.props.t('ErrorModal.LogIn')}</Link>.
       </p>
     );
   }
@@ -26,8 +27,7 @@ class ErrorModal extends React.Component {
   staleProject() {
     return (
       <p>
-        The project you have attempted to save has been saved from another window.
+        {this.props.t('ErrorModal.SavedDifferentWindow')}
-        Please refresh the page to see the latest version.
       </p>
     );
   }
@@ -51,7 +51,8 @@ class ErrorModal extends React.Component {
 
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default ErrorModal;
+export default withTranslation()(ErrorModal);

client/modules/IDE/components/FileUploader.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Dropzone from 'dropzone';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
 import * as UploaderActions from '../actions/uploader';
 import getConfig from '../../../utils/getConfig';
 import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
@@ -30,7 +31,7 @@ class FileUploader extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       acceptedFiles: fileExtensionsAndMimeTypes,
-      dictDefaultMessage: 'Drop files here or click to use the file browser',
+      dictDefaultMessage: this.props.t('FileUploader.DictDefaultMessage'),
       accept: this.props.dropzoneAcceptCallback.bind(this, userId),
       sending: this.props.dropzoneSendingCallback,
       complete: this.props.dropzoneCompleteCallback
@@ -59,7 +60,8 @@ FileUploader.propTypes = {
   }),
   user: PropTypes.shape({
     id: PropTypes.string
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 FileUploader.defaultProps = {
@@ -84,4 +86,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UploaderActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(FileUploader));

client/modules/IDE/components/ShareModal.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import CopyableInput from './CopyableInput';
 
 class ShareModal extends React.PureComponent {
@@ -16,21 +17,21 @@ class ShareModal extends React.PureComponent {
           {projectName}
         </h3>
         <CopyableInput
-          label="Embed"
+          label={this.props.t('ShareModal.Embed')}
           value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
         />
         <CopyableInput
-          label="Present"
+          label={this.props.t('ShareModal.Present')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/present/${projectId}`}
         />
         <CopyableInput
-          label="Fullscreen"
+          label={this.props.t('ShareModal.Fullscreen')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/full/${projectId}`}
         />
         <CopyableInput
-          label="Edit"
+          label={this.props.t('ShareModal.Edit')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
         />
@@ -42,7 +43,8 @@ class ShareModal extends React.PureComponent {
 ShareModal.propTypes = {
   projectId: PropTypes.string.isRequired,
   ownerUsername: PropTypes.string.isRequired,
-  projectName: PropTypes.string.isRequired
+  projectName: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default ShareModal;
+export default withTranslation()(ShareModal);

client/modules/IDE/components/UploadFileModal.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 import getConfig from '../../../utils/getConfig';
 import FileUploader from './FileUploader';
@@ -14,7 +15,8 @@ const limitText = prettyBytes(limit);
 class UploadFileModal extends React.Component {
   propTypes = {
     reachedTotalSizeLimit: PropTypes.bool.isRequired,
-    closeModal: PropTypes.func.isRequired
+    closeModal: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
   }
 
   componentDidMount() {
@@ -31,22 +33,18 @@ class UploadFileModal extends React.Component {
       <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Upload File</h2>
+            <h2 className="modal__title">{this.props.t('UploadFileModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeModal}
-              aria-label="Close upload file modal"
+              aria-label={this.props.t('UploadFileModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           { this.props.reachedTotalSizeLimit &&
             <p>
-              {
+              {this.props.t('UploadFileModal.SizeLimitError', { sizeLimit: limitText })}
-                `Error: You cannot upload any more files. You have reached the total size limit of ${limitText}.
-                If you would like to upload more, please remove the ones you aren't using anymore by
-                in your `
-              }
               <Link to="/assets" onClick={this.props.closeModal}>assets</Link>
               .
             </p>
@@ -68,4 +66,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(UploadFileModal);
+export default withTranslation()(connect(mapStateToProps)(UploadFileModal));

client/modules/User/components/ResponsiveForm.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { remSize } from '../../../theme';
+
+
+const ResponsiveFormWrapper = styled.div`
+  .form-container__content {
+    width: unset !important;
+    padding-top: ${remSize(16)};
+    padding-bottom: ${remSize(64)};
+  }
+  
+  .form__input {
+    min-width: unset;
+    padding: 0px ${remSize(12)};
+    height: ${remSize(28)};
+  }
+  .form-container__title { margin-bottom: ${remSize(14)}}
+  p.form__field { margin-top: 0px !important; }
+  label.form__label { margin-top: ${remSize(8)} !important; }
+
+  .form-error { width: 100% }
+
+  .nav__items-right:last-child { display: none }
+
+  .form-container {
+    height: 100%
+  }
+
+  .form-container__stack {
+    svg {
+      width: ${remSize(12)};
+      height: ${remSize(12)}
+    }
+    a { padding: 0px }
+  }
+`;
+
+const ResponsiveForm = props =>
+  (props.mobile === true
+    ? (
+      <ResponsiveFormWrapper>
+        {props.children}
+      </ResponsiveFormWrapper>
+
+    )
+    : props.children);
+
+ResponsiveForm.propTypes = {
+  mobile: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+};
+ResponsiveForm.defaultProps = {
+  mobile: false,
+  children: []
+};
+
+export default ResponsiveForm;

client/modules/User/pages/LoginView.jsx

@@ -10,6 +10,7 @@ import LoginForm from '../components/LoginForm';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import ResponsiveForm from '../components/ResponsiveForm';
 
 class LoginView extends React.Component {
   constructor(props) {
@@ -27,11 +28,14 @@ class LoginView extends React.Component {
   }
 
   render() {
+    const isMobile = () => (window.innerWidth < 770);
     if (this.props.user.authenticated) {
       this.gotoHomePage();
       return null;
     }
+    // TODO: mobile currently forced to true
     return (
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
         <div className="login">
           <Nav layout="dashboard" />
           <main className="form-container">
@@ -57,6 +61,7 @@ class LoginView extends React.Component {
             </div>
           </main>
         </div>
+      </ResponsiveForm>
     );
   }
 }
@@ -79,13 +84,15 @@ LoginView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool
   }),
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  mobile: PropTypes.bool
 };
 
 LoginView.defaultProps = {
   user: {
     authenticated: false
-  }
+  },
+  mobile: false
 };
 
 export default withTranslation()(reduxForm({

client/modules/User/pages/SignupView.jsx

@@ -11,6 +11,9 @@ import apiClient from '../../../utils/apiClient';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import ResponsiveForm from '../components/ResponsiveForm';
+
+const isMobile = () => (window.innerWidth < 770);
 
 class SignupView extends React.Component {
   gotoHomePage = () => {
@@ -23,6 +26,7 @@ class SignupView extends React.Component {
       return null;
     }
     return (
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
         <div className="signup">
           <Nav layout="dashboard" />
           <main className="form-container">
@@ -44,6 +48,7 @@ class SignupView extends React.Component {
             </div>
           </main>
         </div>
+      </ResponsiveForm>
     );
   }
 }
@@ -110,13 +115,15 @@ SignupView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool
   }),
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  mobile: PropTypes.bool
 };
 
 SignupView.defaultProps = {
   user: {
     authenticated: false
-  }
+  },
+  mobile: false
 };
 
 export default withTranslation()(reduxForm({

translations/locales/en-US/translations.json

@@ -326,7 +326,6 @@
     "AlreadyHave": "Already have an account?",
     "Login": "Log In"
   },
-
   "EmailVerificationView": {
     "Title": "p5.js Web Editor | Email Verification",
     "Verify": "Verify your email",
@@ -334,5 +333,28 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
+  },
+  "UploadFileModal": {
+    "Title": "Upload File",
+    "CloseButtonARIA": "Close upload file modal",
+    "SizeLimitError": "Error: You cannot upload any more files. You have reached the total size limit of {{sizeLimit}}.\n                If you would like to upload more, please remove the ones you aren't using anymore by\n                in your "
+  },
+  "FileUploader": {
+    "DictDefaultMessage": "Drop files here or click to use the file browser"
+  },
+  "ErrorModal": {
+    "MessageLogin": "In order to save sketches, you must be logged in. Please ",
+    "Login": "Login",
+    "LoginOr": " or ",
+    "SignUp": "Sign Up",
+    "MessageLoggedOut": "It looks like you've been logged out. Please ",
+    "LogIn": "log in",
+    "SavedDifferentWindow": "The project you have attempted to save has been saved from another window.\n        Please refresh the page to see the latest version."
+  },
+  "ShareModal": {
+    "Embed": "Embed",
+    "Present": "Present",
+    "Fullscreen": "Fullscreen",
+    "Edit": "Edit"
   }
 }

translations/locales/es-419/translations.json

@@ -174,15 +174,33 @@
     }
   },
   "Sidebar": {
-    "Create": "Crear",
+    "Title": "Archivos de Bosquejo",
-    "EnterName": "Introduce un nombre",
+    "ToggleARIA": "Alternar abrir/cerrar opciones de archivo de bosquejo",
-    "Add": "Agregar",
+    "AddFolder": "Crear directorio",
-    "Folder": "Directorio"
+    "AddFolderARIA": "Agregar directorio",
+    "AddFile": "Crear archivo",
+    "AddFileARIA": "agregar archivo",
+    "UploadFile": "Subir archivo",
+    "UploadFileARIA": "Subir archivo"
+  },
+  "FileNode": {
+    "OpenFolderARIA": "Abrir contenidos del directorio",
+    "CloseFolderARIA": "Cerrar contenidos del directorio",
+    "ToggleFileOptionsARIA": "Alternar abrir/cerrar opciones de archivo",
+    "AddFolder": "Crear directorio",
+    "AddFolderARIA": "Agregar directorio",
+    "AddFile": "Crear archivo",
+    "AddFileARIA": "agregar archivo",
+    "UploadFile": "Subir archivo",
+    "UploadFileARIA": "Subir archivo",
+    "Rename": "Renombrar",
+    "Delete": "Borrar"
   },
   "Common": {
     "Error": "Error",
     "Save": "Guardar",
-    "p5logoARIA": "Logo p5.js "
+    "p5logoARIA": "Logo p5.js ",
+    "DeleteConfirmation": "¿Estás que quieres borrar {{name}}?"
   },
   "IDEView": {
     "SubmitFeedback": "Enviar retroalimentación"
@@ -315,5 +333,28 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
+  },
+  "UploadFileModal": {
+    "Title": "Subir Archivo",
+    "CloseButtonARIA": "Cerrar diálogo para subir archivo",
+    "SizeLimitError": "Error: No puedes subir archivos. Has alcanzado el limite de tamaño total de {{sizeLimit}}.\n         Si quieres agregar más,por favor remueve alugnos que no estes usando en tus "
+  },
+  "FileUploader": {
+    "DictDefaultMessage": "Deposita los archivos aquí o haz click para usar el navegador de archivos"
+  },
+  "ErrorModal": {
+    "MessageLogin": "Para poder guardar bosquejos, debes ingresar a tu cuenta. Por favor ",
+    "Login": "Ingresa",
+    "LoginOr": " o ",
+    "SignUp": "Registráte",
+    "MessageLoggedOut": "Parece que has salido de tu cuenta. Por favor ",
+    "LogIn": "ingresa",
+    "SavedDifferentWindow": " El proyecto que has intentado guardar ha sido guardado desde otra ventana.\n  Por favor refresca la página para ver la versión más actual."
+  },
+  "ShareModal": {
+    "Embed": "Incrustar",
+    "Present": "Presentar",
+    "Fullscreen": "Pantalla Completa",
+    "Edit": "Editar"
   }
 }