👌 make views only responsible if MOBILE_ENABLED=true

client/modules/User/components/ResponsiveForm.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { remSize } from '../../../theme';
 
 
-const ResponsiveFormWrapper = styled.div`
+const ResponsiveForm = styled.div`
   .form-container__content {
     width: unset !important;
     padding-top: ${remSize(16)};
@@ -42,23 +42,4 @@ const ResponsiveFormWrapper = styled.div`
   }
 `;
 
-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

@@ -28,14 +28,11 @@ 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">
@@ -61,7 +58,6 @@ class LoginView extends React.Component {
           </div>
         </main>
       </div>
-      </ResponsiveForm>
     );
   }
 }
@@ -85,14 +81,12 @@ LoginView.propTypes = {
     authenticated: PropTypes.bool
   }),
   t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
 };
 
 LoginView.defaultProps = {
   user: {
     authenticated: false
   },
-  mobile: false
 };
 
 export default withTranslation()(reduxForm({

client/modules/User/pages/SignupView.jsx

@@ -13,7 +13,6 @@ 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 = () => {
@@ -26,7 +25,6 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
       <div className="signup">
         <Nav layout="dashboard" />
         <main className="form-container">
@@ -48,7 +46,6 @@ class SignupView extends React.Component {
           </div>
         </main>
       </div>
-      </ResponsiveForm>
     );
   }
 }
@@ -116,14 +113,12 @@ SignupView.propTypes = {
     authenticated: PropTypes.bool
   }),
   t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
 };
 
 SignupView.defaultProps = {
   user: {
     authenticated: false
   },
-  mobile: false
 };
 
 export default withTranslation()(reduxForm({

client/routes.jsx

@@ -22,18 +22,31 @@ import MobileDashboardView from './modules/Mobile/MobileDashboardView';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
+import ResponsiveForm from './modules/User/components/ResponsiveForm';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
 };
 
-const mobileFirst = (MobileComponent, Fallback, store) => props => (
+const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
+
+/** createMobileFirst: Receives the store, and creates a function that chooses between two components,
+ * aimed at mobile and desktop resolutions, respectively.
+ * The created function returns a Component (props => jsx)
+ */
+const createMobileFirst = store => (MobileComponent, Fallback) => props => (
   <MediaQuery minDeviceWidth={770}>
-    {matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop))
+    {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled()))
       ? <Fallback {...props} />
       : <MobileComponent {...props} />)}
   </MediaQuery>);
 
+const responsiveForm = DesktopComponent => props => (
+  <ResponsiveForm>
+    <DesktopComponent {...props} />
+  </ResponsiveForm>
+);
+
 // TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
 const onRouteChange = (store) => {
   const path = window.location.pathname;
@@ -42,12 +55,15 @@ const onRouteChange = (store) => {
   store.dispatch(stopSketch());
 };
 
-const routes = store => (
+const routes = (store) => {
-  <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
+  const mobileFirst = createMobileFirst(store);
-    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
 
-    <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
+  return (
-    <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
+    <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
+      <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
+
+      <Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
+      <Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
       <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
       <Route path="/verify" component={EmailVerificationView} />
       <Route
@@ -78,5 +94,6 @@ const routes = store => (
 
     </Route>
   );
+};
 
 export default routes;