Basic navs and auth pages working·

2017-11-27 17:37:06 +01:00 · 2017-11-27 17:37:06 +01:00 · 3ef6f3c80b
commit 3ef6f3c80b
parent 33e8a9f384
20 changed files with 222 additions and 33 deletions
--- a/client/main.html
+++ b/client/main.html
@ -1,6 +1,5 @@
 <head>
  <meta charset="utf-8">
-  <title>Pup</title>
  <meta name="description" content="A description for the application.">
  <meta name="viewport" content="initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />

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

 export default i18n;
--- a/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js
+++ b/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Nav, NavDropdown } from 'react-bootstrap';
+import { translate, Trans } from 'react-i18next';
 /*
   FIXME:
   navitem needs a nav-link class but does not works
@ -14,7 +15,7 @@ import NavItem from '../NavItem/NavItem';

 import { Meteor } from 'meteor/meteor';

-const AuthenticatedNavigation = ({ name, history }) => (
+const AuthenticatedNavigation = ({ name, history, props }) => (
  <Nav pullRight>
    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
      <NavItem eventKey={1} href="/documents">Documents</NavItem>
@ -23,7 +24,7 @@ const AuthenticatedNavigation = ({ name, history }) => (
      <NavItem eventKey={2.1} href="/profile">{name}</NavItem>
    </LinkContainer>
    <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>
  </Nav>
 );
@ -32,4 +33,4 @@ AuthenticatedNavigation.propTypes = {
  name: PropTypes.string.isRequired,
 };

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

 Footer.propTypes = {};

-export default translate([], { wait: true })(Footer);
+export default translate([], { wait: true })(Footer)
--- a/imports/ui/components/Footer/Footer.scss
+++ b/imports/ui/components/Footer/Footer.scss
@ -21,6 +21,18 @@ body {

  p {
    color: $gray-light;
+
+    a {
+      color: $gray-light;
+    }
+
+    a:hover,
+    a:active,
+    a:focus {
+      text-decoration: none;
+      color: $gray;
+    }
+
  }

  ul {
@ -53,3 +65,10 @@ body {
    margin-right: 30px;
  }
 }
+
+.reverse {
+  display:inline-block;
+  -moz-transform: rotate(-180deg);
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+}
--- a/imports/ui/components/Navigation/Navigation.js
+++ b/imports/ui/components/Navigation/Navigation.js
@ -9,12 +9,14 @@ import { translate } from 'react-i18next';
 import './Navigation.scss';

 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 */}
    <Navbar.Header>
+      {window.location.pathname != '/'?
      <Navbar.Brand>
        <Link to="/">{props.t('Inicio')}</Link>
-      </Navbar.Brand>
+      </Navbar.Brand>: ''
+      }
      {/* <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">
        <span className="navbar-toggler-icon"></span>
@ -31,7 +33,7 @@ Navigation.defaultProps = {
 };

 Navigation.propTypes = {
-  authenticated: PropTypes.bool.isRequired,
+  authenticated: PropTypes.bool.isRequired
 };

 //  export default Navigation;
--- a/imports/ui/components/Navigation/Navigation.scss
+++ b/imports/ui/components/Navigation/Navigation.scss
@ -4,3 +4,25 @@
  border-right: 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;
+}
--- a/imports/ui/components/OAuthLoginButton/OAuthLoginButton.js
+++ b/imports/ui/components/OAuthLoginButton/OAuthLoginButton.js
@ -38,7 +38,7 @@ const serviceLabel = {

 const OAuthLoginButton = ({ service, callback }) => (
  <button
-    className={`btn btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`}
+    className={`btn btn-block btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`}
    type="button"
    onClick={() => handleLogin(service, callback)}
  >
--- a/imports/ui/components/PublicNavigation/PublicNavigation.js
+++ b/imports/ui/components/PublicNavigation/PublicNavigation.js
@ -1,6 +1,7 @@
 import React from 'react';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Nav } from 'react-bootstrap';
+import { translate } from 'react-i18next';
 /*
   FIXME:
   navitem needs a nav-link class but does not works
@ -10,15 +11,15 @@ import { Nav } from 'react-bootstrap';
 */
 import NavItem from '../NavItem/NavItem';

-const PublicNavigation = () => (
+const PublicNavigation = (props) => (
  <Nav pullRight>
    <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 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>
  </Nav>
 );

-export default PublicNavigation;
+export default translate([], { wait: true })(PublicNavigation);
--- a/imports/ui/layouts/App/App.js
+++ b/imports/ui/layouts/App/App.js
@ -52,8 +52,8 @@ const App = props => (
  <I18nextProvider i18n={i18n}>
  <Router>
    {!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" > */}
        <Switch>
          <Route exact name="index" path="/" component={Index} />
--- a/imports/ui/pages/Index/Index-custom.scss
+++ b/imports/ui/pages/Index/Index-custom.scss
@ -132,3 +132,7 @@
    margin-left: -50vw;
    margin-right: -50vw;*/
 }
+
+.participe-btn {
+  background-color: #FD593A
+}
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import { Button } from 'react-bootstrap';
 import { translate } from 'react-i18next';
 import {render} from 'react-dom';
+import { Link } from 'react-router-dom';

 // https://www.npmjs.com/package/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>
          </div>
          <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>
      </section>
    </div>
--- a/imports/ui/pages/Login/Login.js
+++ b/imports/ui/pages/Login/Login.js
@ -1,5 +1,6 @@
 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 { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
@ -8,6 +9,7 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
 import validate from '../../../modules/validate';

+
 class Login extends React.Component {
  constructor(props) {
    super(props);
--- a/imports/ui/pages/Profile/Profile.js
+++ b/imports/ui/pages/Profile/Profile.js
@ -2,7 +2,8 @@

 import React from 'react';
 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 { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
--- a/imports/ui/pages/RecoverPassword/RecoverPassword.js
+++ b/imports/ui/pages/RecoverPassword/RecoverPassword.js
@ -1,5 +1,6 @@
 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 { Link } from 'react-router-dom';
 import { Accounts } from 'meteor/accounts-base';
--- a/imports/ui/pages/ResetPassword/ResetPassword.js
+++ b/imports/ui/pages/ResetPassword/ResetPassword.js
@ -1,6 +1,7 @@
 import React from 'react';
 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 { Bert } from 'meteor/themeteorchef:bert';
 import validate from '../../../modules/validate';
--- a/imports/ui/pages/Signup/Signup.js
+++ b/imports/ui/pages/Signup/Signup.js
@ -1,5 +1,6 @@
 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 { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -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"
+}
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -6,6 +6,11 @@
  "Privacidad": "Privacidad",
  "Términos": "Términos",
  "de Servicio": "de Servicio",
-  "Política": "Política",
-  "de Privacidad": "de Privacidad"
+  "Política de": "Política de",
+  "Privacidad": "Privacidad",
+  "Inicio": "Inicio",
+  "Licencia": "Licencia",
+  "Cerrar sesión": "Cerrar sesión",
+  "Registrarse": "Registrarse",
+  "Iniciar sesión": "Iniciar sesión"
 }