👌 adapt <LoginView /> and <SignupView /> to mobile

client/modules/App/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

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,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">
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
-        <Nav layout="dashboard" />
+        <div className="login">
-        <main className="form-container">
+          <Nav layout="dashboard" />
-          <Helmet>
+          <main className="form-container">
-            <title>{this.props.t('LoginView.Title')}</title>
+            <Helmet>
-          </Helmet>
+              <title>{this.props.t('LoginView.Title')}</title>
-          <div className="form-container__content">
+            </Helmet>
-            <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
+            <div className="form-container__content">
-            <LoginForm {...this.props} />
+              <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
-            <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
+              <LoginForm {...this.props} />
-            <div className="form-container__stack">
+              <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
-              <SocialAuthButton service={SocialAuthButton.services.github} />
+              <div className="form-container__stack">
-              <SocialAuthButton service={SocialAuthButton.services.google} />
+                <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">
+          </main>
-              {this.props.t('LoginView.DontHaveAccount')}
+        </div>
-              <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
+      </ResponsiveForm>
-            </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>
     );
   }
 }
@@ -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,27 +26,29 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <div className="signup">
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
-        <Nav layout="dashboard" />
+        <div className="signup">
-        <main className="form-container">
+          <Nav layout="dashboard" />
-          <Helmet>
+          <main className="form-container">
-            <title>{this.props.t('SignupView.Title')}</title>
+            <Helmet>
-          </Helmet>
+              <title>{this.props.t('SignupView.Title')}</title>
-          <div className="form-container__content">
+            </Helmet>
-            <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
+            <div className="form-container__content">
-            <SignupForm {...this.props} />
+              <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
-            <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
+              <SignupForm {...this.props} />
-            <div className="form-container__stack">
+              <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
-              <SocialAuthButton service={SocialAuthButton.services.github} />
+              <div className="form-container__stack">
-              <SocialAuthButton service={SocialAuthButton.services.google} />
+                <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">
+          </main>
-              {this.props.t('SignupView.AlreadyHave')}
+        </div>
-              <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
+      </ResponsiveForm>
-            </p>
-          </div>
-        </main>
-      </div>
     );
   }
 }
@@ -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({