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

2020-08-21 15:25:43 -03:00 · 2020-08-21 15:25:43 -03:00 · 90272b5f21
commit 90272b5f21
parent 551a6bcd4c 2169a6ec7f
9 changed files with 221 additions and 82 deletions
--- a/client/modules/IDE/components/ErrorModal.jsx
+++ b/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;
-        <Link to="/login" onClick={this.props.closeModal}>Login</Link>
-        &nbsp;or&nbsp;
-        <Link to="/signup" onClick={this.props.closeModal}>Sign Up</Link>.
+        {this.props.t('ErrorModal.MessageLogin')}
+        <Link to="/login" onClick={this.props.closeModal}> {this.props.t('ErrorModal.Login')}</Link>
+        {this.props.t('ErrorModal.LoginOr')}
+        <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;
-        <Link to="/login" onClick={this.props.closeModal}>log in</Link>.
+        {this.props.t('ErrorModal.MessageLoggedOut')}
+        <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.
-        Please refresh the page to see the latest version.
+        {this.props.t('ErrorModal.SavedDifferentWindow')}
      </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);
--- a/client/modules/IDE/components/FileUploader.jsx
+++ b/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));
--- a/client/modules/IDE/components/ShareModal.jsx
+++ b/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);
--- a/client/modules/IDE/components/UploadFileModal.jsx
+++ b/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>
-              {
-                `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 `
-              }
+              {this.props.t('UploadFileModal.SizeLimitError', { sizeLimit: limitText })}
              <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));
--- a/client/modules/User/components/ResponsiveForm.jsx
+++ b/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;
--- a/client/modules/User/pages/LoginView.jsx
+++ b/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,36 +28,40 @@ 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 (
-      <div className="login">
-        <Nav layout="dashboard" />
-        <main className="form-container">
-          <Helmet>
-            <title>{this.props.t('LoginView.Title')}</title>
-          </Helmet>
-          <div className="form-container__content">
-            <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
-            <LoginForm {...this.props} />
-            <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
-            <div className="form-container__stack">
-              <SocialAuthButton service={SocialAuthButton.services.github} />
-              <SocialAuthButton service={SocialAuthButton.services.google} />
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
+        <div className="login">
+          <Nav layout="dashboard" />
+          <main className="form-container">
+            <Helmet>
+              <title>{this.props.t('LoginView.Title')}</title>
+            </Helmet>
+            <div className="form-container__content">
+              <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
+              <LoginForm {...this.props} />
+              <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
+              <div className="form-container__stack">
+                <SocialAuthButton service={SocialAuthButton.services.github} />
+                <SocialAuthButton service={SocialAuthButton.services.google} />
+              </div>
+              <p className="form__navigation-options">
+                {this.props.t('LoginView.DontHaveAccount')}
+                <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
+              </p>
+              <p className="form__navigation-options">
+                {this.props.t('LoginView.ForgotPassword')}
+                <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
+              </p>
            </div>
-            <p className="form__navigation-options">
-              {this.props.t('LoginView.DontHaveAccount')}
-              <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
-            </p>
-            <p className="form__navigation-options">
-              {this.props.t('LoginView.ForgotPassword')}
-              <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
-            </p>
-          </div>
-        </main>
-      </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({
--- a/client/modules/User/pages/SignupView.jsx
+++ b/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,27 +26,29 @@ class SignupView extends React.Component {
      return null;
    }
    return (
-      <div className="signup">
-        <Nav layout="dashboard" />
-        <main className="form-container">
-          <Helmet>
-            <title>{this.props.t('SignupView.Title')}</title>
-          </Helmet>
-          <div className="form-container__content">
-            <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
-            <SignupForm {...this.props} />
-            <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} />
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
+        <div className="signup">
+          <Nav layout="dashboard" />
+          <main className="form-container">
+            <Helmet>
+              <title>{this.props.t('SignupView.Title')}</title>
+            </Helmet>
+            <div className="form-container__content">
+              <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
+              <SignupForm {...this.props} />
+              <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">
+                {this.props.t('SignupView.AlreadyHave')}
+                <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
+              </p>
            </div>
-            <p className="form__navigation-options">
-              {this.props.t('SignupView.AlreadyHave')}
-              <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
-            </p>
-          </div>
-        </main>
-      </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({
--- a/translations/locales/en-US/translations.json
+++ b/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"
  }
 }
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@ -174,15 +174,33 @@
    }
  },
  "Sidebar": {
-    "Create": "Crear",
-    "EnterName": "Introduce un nombre",
-    "Add": "Agregar",
-    "Folder": "Directorio"
+    "Title": "Archivos de Bosquejo",
+    "ToggleARIA": "Alternar abrir/cerrar opciones de archivo de bosquejo",
+    "AddFolder": "Crear 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"
  }
 }