comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Basic navs and auth pages working·

Browse source
This commit is contained in:
vjrj 2017-11-27 17:37:06 +01:00
parent 33e8a9f384
commit 3ef6f3c80b
20 changed files with 222 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/main.html
View file

@ -1,6 +1,5 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Pup</title>
<meta name="description" content="A description for the application."> <meta name="description" content="A description for the application.">
<meta name="viewport" content="initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" /> <meta name="viewport" content="initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />

1
imports/startup/client/i18n.js
View file

@ -80,6 +80,7 @@ i18n.use(backend)
}, function(err, t) { }, function(err, t) {
// initialized and ready to // initialized and ready to
// console.log(t('AppName')); // console.log(t('AppName'));
document.title = t("AppName");
}); });
export default i18n; export default i18n;

7
imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js
View file

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap'; import { LinkContainer } from 'react-router-bootstrap';
import { Nav, NavDropdown } from 'react-bootstrap'; import { Nav, NavDropdown } from 'react-bootstrap';
import { translate, Trans } from 'react-i18next';
/* /*
FIXME: FIXME:
navitem needs a nav-link class but does not works navitem needs a nav-link class but does not works
@ -14,7 +15,7 @@ import NavItem from '../NavItem/NavItem';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
const AuthenticatedNavigation = ({ name, history }) => ( const AuthenticatedNavigation = ({ name, history, props }) => (
<Nav pullRight> <Nav pullRight>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents"> <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
<NavItem eventKey={1} href="/documents">Documents</NavItem> <NavItem eventKey={1} href="/documents">Documents</NavItem>
@ -23,7 +24,7 @@ const AuthenticatedNavigation = ({ name, history }) => (
<NavItem eventKey={2.1} href="/profile">{name}</NavItem> <NavItem eventKey={2.1} href="/profile">{name}</NavItem>
</LinkContainer> </LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout"> <LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout">
<NavItem eventKey={2.2} onClick={() => history.push('/logout')} href="/logout">Logout</NavItem> <NavItem eventKey={2.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
</LinkContainer> </LinkContainer>
</Nav> </Nav>
); );
@ -32,4 +33,4 @@ AuthenticatedNavigation.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
}; };
export default withRouter(AuthenticatedNavigation); export default translate([], { wait: true })(withRouter(AuthenticatedNavigation));

111
imports/ui/components/Col/Col.js Normal file
View file

@ -0,0 +1,111 @@
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import elementType from 'prop-types-extra/lib/elementType';
import { bsClass, prefix, splitBsProps } from 'react-bootstrap/lib/utils/bootstrapUtils';
import { DEVICE_SIZES } from 'react-bootstrap/lib/utils/StyleConfig';
const column = PropTypes.oneOfType([
PropTypes.oneOf(['auto']),
PropTypes.number,
]);
const propTypes = {
componentClass: elementType,
/**
* The number of columns you wish to span
*
* for Extra small devices Phones (<576px)
*
* class-prefix `col-`
*/
xs: column,
/**
* The number of columns you wish to span
*
* for Small devices Tablets (≥576px)
*
* class-prefix `col-sm-`
*/
sm: column,
/**
* The number of columns you wish to span
*
* for Medium devices Desktops (≥768px)
*
* class-prefix `col-md-`
*/
md: column,
/**
* The number of columns you wish to span
*
* for Large devices Desktops (≥992px)
*
* class-prefix `col-lg-`
*/
lg: column,
/**
* The number of columns you wish to span
*
* for Large devices Desktops (≥1200px)
*
* class-prefix `col-xl-`
*/
xl: column,
};
const defaultProps = {
componentClass: 'div',
};
class Col extends React.Component {
render() {
const { componentClass: Component, className, ...props } = this.props;
const [bsProps, elementProps] = splitBsProps(props);
const classes = [];
DEVICE_SIZES.forEach((size) => {
const propValue = elementProps[size];
if (propValue == null) return;
if (size === 'xs') {
// col and col-4
classes.push(propValue === true ?
bsProps.bsClass :
prefix(bsProps, `${propValue}`),
);
} else {
// col-md-3
classes.push(
prefix(bsProps, `${size}-${propValue}`),
);
}
delete elementProps[size];
});
if (!classes.length) {
classes.push(bsProps.bsClass); // plain 'col'
}
return (
<Component
{...elementProps}
className={classNames(className, classes)}
/>
);
}
}
Col.propTypes = propTypes;
Col.defaultProps = defaultProps;
export default bsClass('col', Col);

23
imports/ui/components/Footer/Footer.js
View file

@ -14,19 +14,20 @@ const copyrightYear = () => {
const Footer = (props) => { const Footer = (props) => {
const { t } = props; const { t } = props;
return ( return (
<div className="Footer"> <div className="Footer">
<Grid> <Grid>
<p className="pull-left">&copy; Copyleft {copyrightYear()} <a href="https://comunes.org/">{t('OrgNameFull')}</a></p> <p className="pull-left"><span className="reverse">&copy;</span><span className="d-none d-md-inline"> Copyleft</span> {copyrightYear()} <a href="https://comunes.org/"><span className="d-none d-md-inline">{t('OrgNameFull')}</span><span className="d-inline d-md-none">{t('OrgName')}</span></a></p>
<ul className="pull-right">
<li><Link to="/terms"> {t('Términos')}<span className="hidden-xs"> {t('de Servicio')}</span></Link></li> <ul className="pull-right">
<li><Link to="/privacy">{t('Política')}<span className="hidden-xs"> {t('de Privacidad')}</span></Link></li> <li><Link to="/terms"> {t('Términos')}<span className="d-none d-md-inline"> {t('de Servicio')}</span></Link></li>
<li><Link to="/license">{t('Licencia')}<span className="hidden-xs"></span></Link></li> <li><Link to="/privacy"><span className="d-none d-md-inline">{t('Política de')} </span>{t('Privacidad')}</Link></li>
</ul> <li><span className="d-none d-md-inline"><Link to="/license">{t('Licencia')}</Link></span></li>
</Grid> </ul>
</div> </Grid>
</div>
); );
}; };
Footer.propTypes = {}; Footer.propTypes = {};
export default translate([], { wait: true })(Footer); export default translate([], { wait: true })(Footer)

19
imports/ui/components/Footer/Footer.scss
View file

@ -21,6 +21,18 @@ body {
p { p {
color: $gray-light; color: $gray-light;
a {
color: $gray-light;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
color: $gray;
}
} }
ul { ul {
@ -53,3 +65,10 @@ body {
margin-right: 30px; margin-right: 30px;
} }
} }
.reverse {
display:inline-block;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}

8
imports/ui/components/Navigation/Navigation.js
View file

@ -9,12 +9,14 @@ import { translate } from 'react-i18next';
import './Navigation.scss'; import './Navigation.scss';
const Navigation = props => ( const Navigation = props => (
<Navbar bsClass="navbar navbar-light"> <Navbar bsClass="navbar navbar-dark bg-dark">
{/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */} {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
<Navbar.Header> <Navbar.Header>
{window.location.pathname != '/'?
<Navbar.Brand> <Navbar.Brand>
<Link to="/">{props.t('Inicio')}</Link> <Link to="/">{props.t('Inicio')}</Link>
</Navbar.Brand> </Navbar.Brand>: ''
}
{/* <Navbar.Toggle/> */} {/* <Navbar.Toggle/> */}
<button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
@ -31,7 +33,7 @@ Navigation.defaultProps = {
}; };
Navigation.propTypes = { Navigation.propTypes = {
authenticated: PropTypes.bool.isRequired, authenticated: PropTypes.bool.isRequired
}; };
// export default Navigation; // export default Navigation;

22
imports/ui/components/Navigation/Navigation.scss
View file

@ -4,3 +4,25 @@
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
a.navbar-dark:hover {
text-decoration: none;
color: gray;
}
a.navbar-dark,
a.nav-link {
color: white;
}
a.nav-link:hover {
color: gray;
}
.nav-link {
padding: 0rem 0.8rem;
}
.navbar {
padding: 0.3rem 1rem;
}

2
imports/ui/components/OAuthLoginButton/OAuthLoginButton.js
View file

@ -38,7 +38,7 @@ const serviceLabel = {
const OAuthLoginButton = ({ service, callback }) => ( const OAuthLoginButton = ({ service, callback }) => (
<button <button
className={`btn btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`} className={`btn btn-block btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`}
type="button" type="button"
onClick={() => handleLogin(service, callback)} onClick={() => handleLogin(service, callback)}
> >

9
imports/ui/components/PublicNavigation/PublicNavigation.js
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { LinkContainer } from 'react-router-bootstrap'; import { LinkContainer } from 'react-router-bootstrap';
import { Nav } from 'react-bootstrap'; import { Nav } from 'react-bootstrap';
import { translate } from 'react-i18next';
/* /*
FIXME: FIXME:
navitem needs a nav-link class but does not works navitem needs a nav-link class but does not works
@ -10,15 +11,15 @@ import { Nav } from 'react-bootstrap';
*/ */
import NavItem from '../NavItem/NavItem'; import NavItem from '../NavItem/NavItem';
const PublicNavigation = () => ( const PublicNavigation = (props) => (
<Nav pullRight> <Nav pullRight>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup"> <LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
<NavItem eventKey={1} href="/signup">Sign Up</NavItem> <NavItem eventKey={1} href="/signup">{props.t('Registrarse')}</NavItem>
</LinkContainer> </LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/login"> <LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
<NavItem eventKey={2} href="/login">Log In</NavItem> <NavItem eventKey={2} href="/login">{props.t('Iniciar sesión')}</NavItem>
</LinkContainer> </LinkContainer>
</Nav> </Nav>
); );
export default PublicNavigation; export default translate([], { wait: true })(PublicNavigation);

4
imports/ui/layouts/App/App.js
View file

@ -52,8 +52,8 @@ const App = props => (
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>
<Router> <Router>
{!props.loading ? <div className="App"> {!props.loading ? <div className="App">
{props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p>Hey friend! Can you <strong>verify your email address</strong> ({props.emailAddress}) for us? <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress)} href="#">Re-send verification email</Button></p></Alert> : ''} <Navigation {...props} />
<Navigation {...props} /> {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p>Hey friend! Can you <strong>verify your email address</strong> ({props.emailAddress}) for us? <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress)} href="#">Re-send verification email</Button></p></Alert> : ''}
<Grid> {/* bsClass="previously-container-but-disabled" > */} <Grid> {/* bsClass="previously-container-but-disabled" > */}
<Switch> <Switch>
<Route exact name="index" path="/" component={Index} /> <Route exact name="index" path="/" component={Index} />

4
imports/ui/pages/Index/Index-custom.scss
View file

@ -132,3 +132,7 @@
margin-left: -50vw; margin-left: -50vw;
margin-right: -50vw;*/ margin-right: -50vw;*/
} }
.participe-btn {
background-color: #FD593A
}

3
imports/ui/pages/Index/Index.js
View file

@ -2,6 +2,7 @@ import React, {Component} from 'react';
import { Button } from 'react-bootstrap'; import { Button } from 'react-bootstrap';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import {render} from 'react-dom'; import {render} from 'react-dom';
import { Link } from 'react-router-dom';
// https://www.npmjs.com/package/react-resize-detector // https://www.npmjs.com/package/react-resize-detector
import ReactResizeDetector from 'react-resize-detector'; import ReactResizeDetector from 'react-resize-detector';
@ -111,7 +112,7 @@ class Index extends Component {
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1> <h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
</div> </div>
<p>Siempre alerta a los fuegos en nuestro vecindario</p> <p>Siempre alerta a los fuegos en nuestro vecindario</p>
<button type="button" className="btn btn-raised btn-lg btn-warning">PARTICIPA</button> <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('PARTICIPA')}</Link>
</div> </div>
</section> </section>
</div> </div>

4
imports/ui/pages/Login/Login.js
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap'; import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import Col from '../../components/Col/Col';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
@ -8,6 +9,7 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt
import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter'; import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
import validate from '../../../modules/validate'; import validate from '../../../modules/validate';
class Login extends React.Component { class Login extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);

3
imports/ui/pages/Profile/Profile.js
View file

@ -2,7 +2,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap'; import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import Col from '../../components/Col/Col';
import _ from 'lodash'; import _ from 'lodash';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base'; import { Accounts } from 'meteor/accounts-base';

3
imports/ui/pages/RecoverPassword/RecoverPassword.js
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap'; import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import Col from '../../components/Col/Col';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Accounts } from 'meteor/accounts-base'; import { Accounts } from 'meteor/accounts-base';

3
imports/ui/pages/ResetPassword/ResetPassword.js
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap'; import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import Col from '../../components/Col/Col';
import { Accounts } from 'meteor/accounts-base'; import { Accounts } from 'meteor/accounts-base';
import { Bert } from 'meteor/themeteorchef:bert'; import { Bert } from 'meteor/themeteorchef:bert';
import validate from '../../../modules/validate'; import validate from '../../../modules/validate';

3
imports/ui/pages/Signup/Signup.js
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap'; import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import Col from '../../components/Col/Col';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';

16
public/locales/en/common.json Normal file
View file

@ -0,0 +1,16 @@
{
"AppName": "All Against Fire",
"AppNameFull": "All Against Fire!",
"OrgName": "Comunes",
"OrgNameFull": "Comunes Association",
"Privacidad": "Privacy",
"Términos": "Terms",
"de Servicio": "of Service",
"Política": "Privacy",
"de Privacidad": "Policy",
"Inicio": "Home",
"Licencia": "License",
"Cerrar sesión": "Logout",
"Registrarse": "Sign Up",
"Iniciar sesión": "Login"
}

9
public/locales/es/common.json
View file

@ -6,6 +6,11 @@
"Privacidad": "Privacidad", "Privacidad": "Privacidad",
"Términos": "Términos", "Términos": "Términos",
"de Servicio": "de Servicio", "de Servicio": "de Servicio",
"Política": "Política", "Política de": "Política de",
"de Privacidad": "de Privacidad" "Privacidad": "Privacidad",
"Inicio": "Inicio",
"Licencia": "Licencia",
"Cerrar sesión": "Cerrar sesión",
"Registrarse": "Registrarse",
"Iniciar sesión": "Iniciar sesión"
} }