👌 make views only responsible if MOBILE_ENABLED=true
This commit is contained in:
ghalestrilo
parent
af2185f524
commit
d17ce3ccc2
4 changed files with 94 additions and 107 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -28,40 +28,36 @@ 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">
|
||||
<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 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>
|
||||
</main>
|
||||
</div>
|
||||
</ResponsiveForm>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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,29 +25,27 @@ class SignupView extends React.Component {
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<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 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>
|
||||
</main>
|
||||
</div>
|
||||
</ResponsiveForm>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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,41 +55,45 @@ const onRouteChange = (store) => {
|
|||
store.dispatch(stopSketch());
|
||||
};
|
||||
|
||||
const routes = store => (
|
||||
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
|
||||
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
|
||||
const routes = (store) => {
|
||||
const mobileFirst = createMobileFirst(store);
|
||||
|
||||
<Route path="/login" component={userIsNotAuthenticated(LoginView)} />
|
||||
<Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
|
||||
<Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
|
||||
<Route path="/verify" component={EmailVerificationView} />
|
||||
<Route
|
||||
path="/reset-password/:reset_password_token"
|
||||
component={NewPasswordView}
|
||||
/>
|
||||
<Route path="/projects/:project_id" component={IDEView} />
|
||||
<Route path="/:username/full/:project_id" component={FullView} />
|
||||
<Route path="/full/:project_id" component={FullView} />
|
||||
return (
|
||||
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
|
||||
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
|
||||
|
||||
<Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
|
||||
<Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
|
||||
<Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
|
||||
<Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
|
||||
<Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
|
||||
<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
|
||||
path="/reset-password/:reset_password_token"
|
||||
component={NewPasswordView}
|
||||
/>
|
||||
<Route path="/projects/:project_id" component={IDEView} />
|
||||
<Route path="/:username/full/:project_id" component={FullView} />
|
||||
<Route path="/full/:project_id" component={FullView} />
|
||||
|
||||
<Route path="/:username/collections/create" component={DashboardView} />
|
||||
<Route path="/:username/collections/:collection_id" component={CollectionView} />
|
||||
<Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
|
||||
<Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
|
||||
<Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
|
||||
<Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
|
||||
<Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
|
||||
|
||||
<Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
|
||||
<Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
|
||||
<Route path="/account" component={userIsAuthenticated(AccountView)} />
|
||||
<Route path="/about" component={IDEView} />
|
||||
<Route path="/:username/collections/create" component={DashboardView} />
|
||||
<Route path="/:username/collections/:collection_id" component={CollectionView} />
|
||||
|
||||
{/* Mobile-only Routes */}
|
||||
<Route path="/preview" component={MobileSketchView} />
|
||||
<Route path="/preferences" component={MobilePreferences} />
|
||||
<Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
|
||||
<Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
|
||||
<Route path="/account" component={userIsAuthenticated(AccountView)} />
|
||||
<Route path="/about" component={IDEView} />
|
||||
|
||||
</Route>
|
||||
);
|
||||
{/* Mobile-only Routes */}
|
||||
<Route path="/preview" component={MobileSketchView} />
|
||||
<Route path="/preferences" component={MobilePreferences} />
|
||||
|
||||
</Route>
|
||||
);
|
||||
};
|
||||
|
||||
export default routes;
|
||||
|
|
|
|||
Loading…
Reference in a new issue