Skip to content

Commit e44c1aa

Browse files
ghalestriloghalestrilo
committed
👌 adapt <LoginView /> and <SignupView /> to mobile
1 parent f844023 commit e44c1aa

File tree

4 files changed

+122
-49
lines changed

4 files changed

+122
-49
lines changed

‎client/modules/App/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class App extends React.Component {
4141
render() {
4242
return (
4343
<div className="app">
44-
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
44+
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
4545
{this.props.children}
4646
</div>
4747
);

‎client/modules/User/components/ResponsiveForm.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import { remSize } from '../../../theme';
5+
6+
7+
const ResponsiveFormWrapper = styled.div`
8+
.form-container__content {
9+
width: unset !important;
10+
padding-top: ${remSize(16)};
11+
padding-bottom: ${remSize(64)};
12+
}
13+
14+
.form__input {
15+
min-width: unset;
16+
padding: 0px ${remSize(12)};
17+
height: ${remSize(28)};
18+
}
19+
.form-container__title { margin-bottom: ${remSize(14)}}
20+
p.form__field { margin-top: 0px !important; }
21+
label.form__label { margin-top: ${remSize(8)} !important; }
22+
23+
.form-error { width: 100% }
24+
25+
.nav__items-right:last-child { display: none }
26+
27+
.form-container {
28+
height: 100%
29+
}
30+
31+
.form-container__stack {
32+
svg {
33+
width: ${remSize(12)};
34+
height: ${remSize(12)}
35+
}
36+
a { padding: 0px }
37+
}
38+
`;
39+
40+
const ResponsiveForm = props =>
41+
(props.mobile === true
42+
? (
43+
<ResponsiveFormWrapper>
44+
{props.children}
45+
</ResponsiveFormWrapper>
46+
47+
)
48+
: props.children);
49+
50+
ResponsiveForm.propTypes = {
51+
mobile: PropTypes.bool,
52+
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
53+
};
54+
ResponsiveForm.defaultProps = {
55+
mobile: false,
56+
children: []
57+
};
58+
59+
export default ResponsiveForm;

‎client/modules/User/pages/LoginView.jsx‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import LoginForm from '../components/LoginForm';
1010
import { validateLogin } from '../../../utils/reduxFormUtils';
1111
import SocialAuthButton from '../components/SocialAuthButton';
1212
import Nav from '../../../components/Nav';
13+
import ResponsiveForm from '../components/ResponsiveForm';
1314

1415
class LoginView extends React.Component {
1516
constructor(props) {
@@ -27,36 +28,40 @@ class LoginView extends React.Component {
2728
}
2829

2930
render() {
31+
const isMobile = () => (window.innerWidth < 770);
3032
if (this.props.user.authenticated) {
3133
this.gotoHomePage();
3234
return null;
3335
}
36+
// TODO: mobile currently forced to true
3437
return (
35-
<div className="login">
36-
<Nav layout="dashboard" />
37-
<main className="form-container">
38-
<Helmet>
39-
<title>{this.props.t('LoginView.Title')}</title>
40-
</Helmet>
41-
<div className="form-container__content">
42-
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
43-
<LoginForm {...this.props} />
44-
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
45-
<div className="form-container__stack">
46-
<SocialAuthButton service={SocialAuthButton.services.github} />
47-
<SocialAuthButton service={SocialAuthButton.services.google} />
38+
<ResponsiveForm mobile={isMobile() || this.props.mobile}>
39+
<div className="login">
40+
<Nav layout="dashboard" />
41+
<main className="form-container">
42+
<Helmet>
43+
<title>{this.props.t('LoginView.Title')}</title>
44+
</Helmet>
45+
<div className="form-container__content">
46+
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
47+
<LoginForm {...this.props} />
48+
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
49+
<div className="form-container__stack">
50+
<SocialAuthButton service={SocialAuthButton.services.github} />
51+
<SocialAuthButton service={SocialAuthButton.services.google} />
52+
</div>
53+
<p className="form__navigation-options">
54+
{this.props.t('LoginView.DontHaveAccount')}
55+
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
56+
</p>
57+
<p className="form__navigation-options">
58+
{this.props.t('LoginView.ForgotPassword')}
59+
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
60+
</p>
4861
</div>
49-
<p className="form__navigation-options">
50-
{this.props.t('LoginView.DontHaveAccount')}
51-
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
52-
</p>
53-
<p className="form__navigation-options">
54-
{this.props.t('LoginView.ForgotPassword')}
55-
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
56-
</p>
57-
</div>
58-
</main>
59-
</div>
62+
</main>
63+
</div>
64+
</ResponsiveForm>
6065
);
6166
}
6267
}
@@ -79,13 +84,15 @@ LoginView.propTypes = {
7984
user: PropTypes.shape({
8085
authenticated: PropTypes.bool
8186
}),
82-
t: PropTypes.func.isRequired
87+
t: PropTypes.func.isRequired,
88+
mobile: PropTypes.bool
8389
};
8490

8591
LoginView.defaultProps = {
8692
user: {
8793
authenticated: false
88-
}
94+
},
95+
mobile: false
8996
};
9097

9198
export default withTranslation()(reduxForm({

‎client/modules/User/pages/SignupView.jsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import apiClient from '../../../utils/apiClient';
1111
import { validateSignup } from '../../../utils/reduxFormUtils';
1212
import SocialAuthButton from '../components/SocialAuthButton';
1313
import Nav from '../../../components/Nav';
14+
import ResponsiveForm from '../components/ResponsiveForm';
15+
16+
const isMobile = () => (window.innerWidth < 770);
1417

1518
class SignupView extends React.Component {
1619
gotoHomePage = () => {
@@ -23,27 +26,29 @@ class SignupView extends React.Component {
2326
return null;
2427
}
2528
return (
26-
<div className="signup">
27-
<Nav layout="dashboard" />
28-
<main className="form-container">
29-
<Helmet>
30-
<title>{this.props.t('SignupView.Title')}</title>
31-
</Helmet>
32-
<div className="form-container__content">
33-
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
34-
<SignupForm {...this.props} />
35-
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
36-
<div className="form-container__stack">
37-
<SocialAuthButton service={SocialAuthButton.services.github} />
38-
<SocialAuthButton service={SocialAuthButton.services.google} />
29+
<ResponsiveForm mobile={isMobile() || this.props.mobile}>
30+
<div className="signup">
31+
<Nav layout="dashboard" />
32+
<main className="form-container">
33+
<Helmet>
34+
<title>{this.props.t('SignupView.Title')}</title>
35+
</Helmet>
36+
<div className="form-container__content">
37+
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
38+
<SignupForm {...this.props} />
39+
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
40+
<div className="form-container__stack">
41+
<SocialAuthButton service={SocialAuthButton.services.github} />
42+
<SocialAuthButton service={SocialAuthButton.services.google} />
43+
</div>
44+
<p className="form__navigation-options">
45+
{this.props.t('SignupView.AlreadyHave')}
46+
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
47+
</p>
3948
</div>
40-
<p className="form__navigation-options">
41-
{this.props.t('SignupView.AlreadyHave')}
42-
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
43-
</p>
44-
</div>
45-
</main>
46-
</div>
49+
</main>
50+
</div>
51+
</ResponsiveForm>
4752
);
4853
}
4954
}
@@ -110,13 +115,15 @@ SignupView.propTypes = {
110115
user: PropTypes.shape({
111116
authenticated: PropTypes.bool
112117
}),
113-
t: PropTypes.func.isRequired
118+
t: PropTypes.func.isRequired,
119+
mobile: PropTypes.bool
114120
};
115121

116122
SignupView.defaultProps = {
117123
user: {
118124
authenticated: false
119-
}
125+
},
126+
mobile: false
120127
};
121128

122129
export default withTranslation()(reduxForm({

0 commit comments

Comments
 (0)